最近、仕事で「教える」という立場で仕事をする事が増えてきました。今回は後輩が知らなかった（！）「faviconの制作」についてちょっとメモしておきます。
faviconについて
今や設定するのが当たり前になってきていますが、ここに表示されるアイコンの事です。サイトのブックマークにも保存されるので、利用者にとっては目印になりますね。
マルチアイコンについて
通常、ブックマークなどに登録するfavicon(.ico）は16px*16pxで表示されます。ですが、マルチアイコンでは16px×16pxの情報の他に32px×32pxの画像情報を持たせることができます。
このマルチアイコンで具体的な違いが見られるのは、IEなどのブックマークからfaviconのあるサイトをドラッグアンドドロップした場合です。
左がマルチアイコン（32px×32px）
右が単独アイコン（16px×16px）
上記のように、マルチアイコンの場合は16pxの他に32pxの画像情報を持っているので、ショートカットなどを登録した場合はキレイに表示されます。
マルチアイコンの作成方法
用意するもの
- PNGが扱える画像ソフト（PhotoShop,Fireworks等）
- @icon変換（フリーソフト）
まず16px×16px、32px×32pxでアイコンを作成してPNG形式で保存します。
PNG形式なので透過も使用可能です。
続いてフリーソフトの@icon変換を起動します。icon制作で色々フリーソフトを使用してみましたが、これが一番楽で便利でした。
- 作成した2つのPNGファイルを【ファイル(F)】→【開く(O)】から読み込みます。
- 左に表示されている二つのアイコンを選択状態にします。
- 【ファイル(F)】→【マルチiconとして保存(M)】で.icoを書き出します
以上で完成です。
マルチアイコンにすると16pxの時のファイルサイズ（＝1.1kb前後）に比べて5.3kbと若干大きくなります。
あとは<head>～</head>内に
<link rel="shortcut icon" href="/favicon.ico" />のようにfaviconへのリンクを貼れば完成です。
ただ正直なところ、マルチアイコンにする必要性があるかどうか問われれば微妙なトコロです。
favicon.icoはアクセス解析で見ると、大抵読み込み回数のベスト10にランキングしているファイルになるので、負荷面で考えれば小さいサイズのままでも良いかもしれません（とはいえ、気にする程のファイルサイズの違いではないですが）
次の機会があれば「動くfavicon」を紹介したいと思います。
▽関連リンク
→フリーソフト：@cion変換
WEBディレクター。FLASHは趣味で少々。去年の2月にパパデビューしたのがきっかけでブログをスタート。
コメントする