最近、仕事で「教える」という立場で仕事をする事が増えてきました。今回は後輩が知らなかった(!)「faviconの制作」についてちょっとメモしておきます。

faviconについて

080920_fav.jpg

今や設定するのが当たり前になってきていますが、ここに表示されるアイコンの事です。サイトのブックマークにも保存されるので、利用者にとっては目印になりますね。

マルチアイコンについて

通常、ブックマークなどに登録するfavicon(.ico)は16px*16pxで表示されます。ですが、マルチアイコンでは16px×16pxの情報の他に32px×32pxの画像情報を持たせることができます。

このマルチアイコンで具体的な違いが見られるのは、IEなどのブックマークからfaviconのあるサイトをドラッグアンドドロップした場合です。

左がマルチアイコン(32px×32px)
右が単独アイコン(16px×16px)

上記のように、マルチアイコンの場合は16pxの他に32pxの画像情報を持っているので、ショートカットなどを登録した場合はキレイに表示されます。

マルチアイコンの作成方法

用意するもの

まず16px×16px、32px×32pxでアイコンを作成してPNG形式で保存します。

080920_makefav.jpg


PNG形式なので透過も使用可能です。

続いてフリーソフトの@icon変換を起動します。icon制作で色々フリーソフトを使用してみましたが、これが一番楽で便利でした。

080920_16_32_03.jpg
080920_16_32_04.jpg
  1. 作成した2つのPNGファイルを【ファイル(F)】→【開く(O)】から読み込みます。
  2. 左に表示されている二つのアイコンを選択状態にします。
  3. 【ファイル(F)】→【マルチiconとして保存(M)】で.icoを書き出します

以上で完成です。

マルチアイコンにすると16pxの時のファイルサイズ(=1.1kb前後)に比べて5.3kbと若干大きくなります。

あとは<head>~</head>内に

<link rel="shortcut icon" href="/favicon.ico" />

のようにfaviconへのリンクを貼れば完成です。

ただ正直なところ、マルチアイコンにする必要性があるかどうか問われれば微妙なトコロです。

favicon.icoはアクセス解析で見ると、大抵読み込み回数のベスト10にランキングしているファイルになるので、負荷面で考えれば小さいサイズのままでも良いかもしれません(とはいえ、気にする程のファイルサイズの違いではないですが)

次の機会があれば「動くfavicon」を紹介したいと思います。

▽関連リンク
→フリーソフト:@cion変換

Trackbacks Trackbacks (0)

コメントする