So-netブログでfaviconを [ブログ・ネット]
So-netブログの記事を投稿したページのアイコンは、特に何もしない限り左端のような「s」のアイコンになる。こういったタブに表示されるマークのことを、favicon(ファビコン)と呼ぶ。(上の画像の赤い丸で囲った部分のアイコンのこと)
標準が嫌いというわけではないけど、せっかくなので変えてみることにした。
faviconでは必ず16ドット×16ドットの画像を用意する必要がある。
古いブラウザのことを考えると、標準16色とかで作るのが理想的で、大きなポータルサイトの多くは単純なデザインにしている。
自分は別に大手のサイト運営者でもないし、広告目的や販促活動に使っているわけでもないし、読者もそれほど多くないはずだし、気にしないで多色のアイコンを使うことにした。
So-netブログのプロフィールに使う画像が72×72なので、それをそのまま利用。
リサイズして16×16と32×32と48×48の3種類のpngファイルを用意。(16×16だけでもOK)
アイコン変換サイトの無料サービスを利用し、アイコンファイルを生成し、favicon.icoの名前で保存。(名前はなんだって良い)
ここで困るのが、So-netブログはicoファイルを保存できないこと。しょうがないので、データ置き場用に開設だけしてあったホームページにデータを保存した。
自分のブログ設定の、デザイン－テンプレート管理のhtml編集で以下の2行を<head>の下の行に挿入。
<link href="http://[アイコンを置いてあるURL]/favicon.ico" type="image/vnd.microsoft.icon" rel="shortcut icon">
<link href="http://[アイコンを置いてあるURL]/favicon.ico" type="image/vnd.microsoft.icon" rel="icon">
保存すれば必要な作業は終わり。
※注意※
以前に起動したときのキャッシュが残っていると、これをしても古いfaviconのまま表示が変わらない場合があるので、その場合は古い一時保存のファイルデータを消すしかない。IEかChromeかFirefoxかなどブラウザによって異なるのでそのあたりは割愛。
icoファイルを保存する場所がないという人は、一部のブラウザで表示されないケースもあるが、favicon.pngという名前のpngファイルのままでも大丈夫。
その場合は、2行のおまじないの中にある「vnd.microsoft.icon」という部分を「png」にすれば大丈夫なはず。
(pngファイルのままだと、1つのサイズしか登録できないので、32×32以上の大きなサイズで作っておいた方がいいかも)
ちなみに3種類の大きさを用意して一つのアイコンにしたのは、下のようにブラウザで大きく表示されるときとか、あとデスクトップにショートカットを作ったときなどの際に、大きなアイコンで表示してくれるから。So-netブログ標準のアイコンだとサイズが16×16しか用意されていないので小さい。
本当にこだわるなら、タブレット用とか各ブラウザ用とかで、いろいろなサイズを取り込んだ方がいいのだけど、ちょっとやってみるというレベルならこの3種類でとりあえず大丈夫かと。
個人のブログでこういうところを変えても単なる自己満足にすぎないけど(笑)、お気に入りとかに登録してくれている人にとっては見分けやすいというメリットはあるかな。
QRコード
