2010年3月5日金曜日

Bloggerにfaviconを設定してみた

お友達のブログに触発されて、試しにやってみた。

まずはfaviconを作る。↓元画像

favicon

作り方は前の記事を参考に。PNGやGifで作っておいて、ここのサービスを使うと自動で変換してくれる。

だけど16x16のicoは透過処理が適用されなかったので、別途ソフトで編集する必要がある。フリーで使い易いのが@icon変換

icoファイルを読み込むと32x32と16x16のアイコンが表示されるので、編集→「透過マスクの編集」から透過する箇所を選んで編集。

終わったら、2つのファイルを両方選択して、ファイル→「マルチicoとして保存」をする。

次はこのicoファイルを外部参照できる場所にアップロードする。

おすすめはGoogle サイトここを参考に。(PicasaかGoogle ドキュメントを使おうと思ったけどダメだった)

Bloggerと同じアカウントでアクセスして、サイトが未作成の場合は新規作成から。サイトを作成したら、「その他の操作」→「サイト管理」→「添付ファイル」に移動。

さきほど作ったfavicon用icoをアップロードする。

image

名前は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に両方書いた方がいいとあったので、一応2つとも記述。

これで保存して表示してみると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で編集した方がやりやすい。

つやっとした感じにしなくても「ホーム画面に追加」するときに自動でつやっと感じになる(角を丸くする必要もないらしい)。

apple-touch-icon

これを指定すると下のようになる(この画像は枠線があるけど実際にはなくなる)。

apple-touch

 

< 2011/12/03 Modified >
今はBloggerの管理画面でfaviconを設定できるようになった。

 

< Related Posts >

コメントを投稿
Related Posts Plugin for WordPress, Blogger...

Blog Archives