ファビコン(1)Photoshopで作ろ♪

以下の記事は一昨日アップしていたのですが、昨日Lunascapeのβ版をインストールして確認したところ、faviconが表示されなくなってしまいましたので、自分の記事が間違っているのかな(やり方が違うのかな)…?と思って一旦取り下げました。

ところが何も触っていないのに今日はちゃんと表示され、他のパソコンやブラウザで確認したところfaviconが表示されていましたので再びアップしておきます。

すでに読んでくださった方もあるかとは思いますが、再び申し訳ありません。



Favicon(ファビコン)はウェブサイトやウェブページに関連付けられたアイコンのことである。
対応しているウェブブラウザはお気に入りリストやアドレス表示欄、タブブラウザではタブに表示されたページタイトルの左側に読み込まれたアイコンを表示する。


ってコトで…、私のブラウザで見ていただくとコレなんですが……。
ファビコン


私の場合、ブラウザにはたくさんのページを開いたままいろんなところを訪問していますので、パッと特定のところを開く(戻る)にはこのfavicon、重宝しています。
同じマークが並んでいるより、差別化されている方が視覚的にわかりやすいですからね。

IEですと「お気に入り」にもfaviconが表示されますから、たくさんお気に入りに入れている場合も探しやすいですね(#^.^#)
(私は普段IEは使っていないのでお気に入りはちょっとしか入ってませんけど…。)

というわけで、何度かに分けてfaviconの作り方と登録の仕方を……。


私はPhotoshopを使って作っています。
自分で絵が描けるといいんですけど、絵心がないので、もっぱら写真を加工。

Photoshopをお持ちの方ならElementでも簡単にできますよ♪
Elementならカメラを買ったらソフトに入っていたりしてお持ちの方も多いのでは?
Photoshopなら背景透過のfaviconも簡単に作れるので、ソフトをお持ちの方はお勧めです!

まずこちらのサイトから画像をアイコンに変換できるプラグインをダウンロードします。
Photoshop_Plugin


解凍したファイルの中にICOFormat.8biというのがあるので、それをPhotoshopのPlug-InsのFileFormatsというフォルダの中に入れます。

これで準備はOK!

Photoshopを起動してファイル新規白紙ファイル32×32px、カンバスカラーは透明で作成します。
shinki.jpg


かなり小さいサイズなので編集しやすいように少し表示を拡大してやる方がやりやすいと思います。

テキストで文字を入力したり、絵を描き込んだりして、デザインを編集します。
ここでは「気のむくまま」の「気」という漢字にしてみました。
icon2.gif


できあがったら、ファイル別名で保存
ファイル形式のところでICO(Windows Icon)(*ICO)を選んで名前を付けて保存します。
保存


保存したアイコンをブログにアップロードして、一旦画像をクリックしてアップロードされた場所をコピーしておきましょう。
icon_url.jpg


FC2の場合だと管理画面のブログデザインの設定現在設定されているテンプレート編集ボタンを押します。

HTMLの編集枠の<head>の下あたりにの青色の部分<link rel="shortcut icon" href="http://blog103.fc2.com/s/****/file/**.ico ">を挿入します。
青色の部分を挿入

青色反転箇所の<link rel="shortcut icon" href="http://blog-imgs-17.fc2.com/s/a/k/sakuraxren/ki.ico ">の赤色部分は先ほどコピーしておいたアイコンのアップロード場所となります。

これでfaviconが表示されるはずです。
表示されない場合は、キャッシュをクリアしてからもう一度見てみてくださいね。
IEのバージョンによってはお気に入り登録しないと表示されないかもしれません。
IE7.0ではお気に入りに登録しなくても表示されましたが……。
ico_hyouji.jpg



わかりにくい説明でごめんなさい。
相変わらず…文章がヘタでいつも最後まで見てくださる方に申し訳なく思っています…。
わからない箇所などありましたら、お気軽にお声をかけてください。
補足説明させていただきます。

Photoshopを使わずにfaviconを作る方法はまた後日。

お疲れ様でした~。




関連記事
TAG :
Photoshop
テンプレート

コメントの投稿

**コメントを投稿**

コメントの投稿

Private :

トラックバック


この記事にトラックバックする(FC2ブログユーザー)

プロフィール

れん

管理人:れん
写真は下手の横好き。
そのせいか、画像編集ソフトで写真を弄ぶのも大好き♪
思いついたことを気の向くままに書いています。
カレンダー
11 | 2016/12 | 01
- - - - 1 2 3
4 5 6 7 8 9 10
11 12 13 14 15 16 17
18 19 20 21 22 23 24
25 26 27 28 29 30 31
最新の記事
最近のコメント
カテゴリ
月別アーカイブ
12  11  10  09  08  07  06  05  04  03  02  01  12  11  10  09  08  07  06  05  04  03  02  01  12  11  10  09  08  07  06  05  04  03  02  01  12  11  10  09  08  07  06  05  04  03  02  01  12  11  10  09  08  07  06  05  04  03  02  01  12  11  10  09  08  07  06  05  04  03  02  01  12  11  10  09  08  07  06  05  04  03  02  01  12  11  10  09  08  07  06  05  04  03  02  01  12  11  10  09  08  07  06  05  04  03  02  01  12  11  10  09  08  07  06  05 
お気に入り
リンクしてね♪
トラックバック
記事について
フリーソフト・WEBアプリなどの紹介記事は紹介した時点のものです。
バージョンアップ、その他で使用方法などが変更されている場合があります。
また,紹介時点ではフリーだったものが有料になっているものもあります。
記事には日付が表示されていますのでご確認ください。
あまり古い記事は参考にならない場合も多いと思います……(T_T)
ブログ管理MENU
いらっしゃいませ~
検索フォーム
メールはこちら
こちらのメールフォームもご利用ください。
アイコンをクリックするとメールフォームが開きます。
返信の必要な場合には必ずメールアドレスをご記入下さい。
メールはこちら
月間アクセスの多い記事 
ブログパーツ
月間リンク元ランキング
スポンサードリンク
おすすめ
・楽天市場
・eBOOKOFF
・FUJICOLORプリントおとどけ便
・インターネットで「デジカメプリント」
・ジャパネットたかた
・住信SBIネット銀行
・楽天銀行
・OLYMPAS ONLINE SHOP
・Yahoo!ショッピング
・上海問屋


楽天トラベル株式会社

デル株式会社

エプソンダイレクト株式会社

ホームセンターのコメリドットコム

プレミアム バンダイ

太る原因
FLAG COUNTER
Free counters!
このページのトップへ