faviconを変えてみた

こちらの記事やこちらの記事を参考にfaviconを設定してみた。
が、Firefoxで確認しても表示されず。
タグの書き込み場所を変えたらFirefoxでは表示されたものの、Safariでは表示されず。
一体どういことだ…と思っていたら、こんな記事(英語)を見付けた。
-リンク先から引用-

Now go to your blog and click customize.Then click the Edit HTML tab and search for "title" , this should be inside the header tags.You should find something like mentioned below.
<title><data:blog.pageTitle/></title>
Just after that line add the following line and enjoy the nice icon showing up before your url.
<link href='your url' rel='shortcut icon' type='image/x-icon'/>

Titleタグのすぐ下に、faviconを指定するタグを追加するのが正しいらしい。
これで確認してみたら、FirefoxでもSafariでも表示された。

Firefoxのタブ

Safariのアドレスバー

しかし、favicon(.ico?)は半透明ってサポートしてないんだろうか。
単純2値(透明／不透明)にしないとだめかなあ。
Safariでは下地が白なので、うまくいってるのかどうかがわからない。

話は遡ってfavicon用画像作成の話。
icoへの変換はGIMPなどでもできるけど、サイズを合わせたりするのが面倒だったので、こちらのサービスを利用。
16x16と32x32をセットにしたicoファイルを生成してくれたり、簡単なアニメgifやiPhone用のアイコンも作ってくれたので、今度利用してみようかな。

なお、どこかで見たような気がすると思うけど、一応自作の画像です。