Bloggerにfaviconを設定してみた
お友達のブログに触発されて、試しにやってみた。
まずはfaviconを作る。↓元画像
作り方は前の記事を参考に。PNGやGifで作っておいて、ここのサービスを使うと自動で変換してくれる。
だけど16x16のicoは透過処理が適用されなかったので、別途ソフトで編集する必要がある。フリーで使い易いのが@icon変換。
icoファイルを読み込むと32x32と16x16のアイコンが表示されるので、編集→「透過マスクの編集」から透過する箇所を選んで編集。
終わったら、２つのファイルを両方選択して、ファイル→「マルチicoとして保存」をする。
次はこのicoファイルを外部参照できる場所にアップロードする。
おすすめはGoogle サイト。ここを参考に。（PicasaかGoogle ドキュメントを使おうと思ったけどダメだった）
Bloggerと同じアカウントでアクセスして、サイトが未作成の場合は新規作成から。サイトを作成したら、「その他の操作」→「サイト管理」→「添付ファイル」に移動。
さきほど作ったfavicon用icoをアップロードする。
名前はfavicon.icoでもblogger.icoでもお好きなように。
「表示」のリンクをコピーして余計なパラメータを削除すると
http://sites.google.com/site/sesuganuma/favicon.ico
こんなアドレスになるはず。
今度はbloggerのレイアウト→「HTMLの編集」にfaviconのURLを埋め込む。
場所はtitleタグの上ぐらい。
<link href='http://sites.google.com/site/sesuganuma/favicon.ico' rel='shortcut icon' type='image/vnd.microsoft.icon'/> <link href='http://sites.google.com/site/sesuganuma/favicon.ico' rel='icon' type='image/vnd.microsoft.icon'/>
wikipediaに両方書いた方がいいとあったので、一応２つとも記述。
これで保存して表示してみるとfaviconが表示されるはず。キャッシュが効いている場合もあるので、F5とかで更新。
Google Chrome, Firefox, IEで表示できるのを確認。
いまいちパリっとしたアイコンにならなかったので、結局Gimpを使って16x16のicoを編集。
時間があったら、カッチョいいのを作ろう。
＜追記 ＞
iPhone（iPod touch）向けのfavicon（ホーム画面に追加したときのアイコン）も設定してみた（webクリップというらしい）。ここを参考に。こちらは60x60で作成して同じようにアップロード・設定。
Bloggerへの設定HTMLは次のような感じ。
<link href='http://sites.google.com/site/sesuganuma/apple-touch-icon.png' rel='apple-touch-icon'/>
綺麗なアイコンにするにはそれなりに大変そう。
「iphone アイコン 作成」でGoogle先生に聞いてみるとphotoshopのテンプレートとか公開しているサイトがヒットするので、そちらも参考に。
ちなみにGimpでもpsdファイルを開いて編集できる。でもやっぱりphotoshopで編集した方がやりやすい。
つやっとした感じにしなくても「ホーム画面に追加」するときに自動でつやっと感じになる（角を丸くする必要もないらしい）。
これを指定すると下のようになる（この画像は枠線があるけど実際にはなくなる）。
< 2011/12/03 Modified >
今はBloggerの管理画面でfaviconを設定できるようになった。
< Related Posts >