複数サイズも一つのファイルで！マルチアイコンの「favicon（ファビコン）」作成方法

ウェブサイトのシンボルマーク「favicon（ファビコン）」の作成方法

favicon（ファビコン）はウェブサイトのシンボルマークとなるものです。見栄えを良くするだけではなく様々な効果が期待できます。

ファビコンはデバイスの多様化とブラウザのバージョンアップなどによって様々なサイズが使用されるようになってきています。

今回は複数サイズのファビコンを一つのファイルで対応できる.icoフォーマットを使用したマルチアイコンの作成方法を解説していきたいと思います。

favicon（ファビコン）とは

favicon（ファビコン）とは、ウェブサイトに設定するアイコンで、そのサイトのシンボルマーク（主にロゴマークが使用されます）のことです。

ブラウザのお気に入りやタブ、RSSなどのウェブサービスに主に使用され、サイトの印象を決める重要な要素になります。

ファビコンを設定すると以下の様なメリットがあります。

有名な企業のサイトは必ずと言っていいほど設定されています。サイトの完成度の向上に一役買っており、手抜き感を無くしてくれます。

お気に入りに追加した際は、ページタイトルとファビコンが表示されます。ファビコンが設定されていないと他のお気に入りの中に埋もれてしまい、見つけづらくなる可能性があります。

あまり大きなメリットには感じないかもしれませんが、それでも設定するのとしないのとではユーザビリティと見栄えに差があるのは事実です。

ファビコンには複数のサイズがあります。一番使用されているのはブラウザのタブやお気に入りなどに使用される16×16と32×32のものですが、スマートフォンの登場やデバイスの多様化によってファビコンサイズも多種多様になってきています。

最低限用意したいサイズは前述の16×16と32×32の2サイズです。スマートフォンに対応する場合は152×152も用意しましょう。スマートフォンの場合、これ以下のサイズが使用される場合、自動で縮小されます。

サイズ（px）	使用箇所
16×16	お気に入り、タブ、IEのアドレスバー・ピン留めサイトなど
24×24	ピン留めサイトのブラウザUI
32×32	IEの新しいタブとタスクバーボタン
48×48	Windowsのサイトアイコン
64×64	高解像度デバイスでのWindowsのサイトアイコン
57×57	iOSのホームアイコン
72×72	iPadのホームアイコン
96×96	GoogleTVのアイコン
114×114	RetinaディスプレイのiPhoneのアイコン
128×128	Chrome ウェブストアのアイコン
144×144	IE10 Metroのピン留めサイトアイコン
152×152	RetinaディスプレイのiPadのアイコン
195×195	Operaスピードダイヤルのアイコン
228×228	OperaのiPad向けブラウザ「Coast」のアイコン