2014/02/13

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

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

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

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

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

目次

favicon(ファビコン)とは

favicon(ファビコン)とは

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

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

ファビコンを設定するメリット

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

サイトの完成度を高めてくれる

サイトの完成度を高めてくれる

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

アクセスしやすくなる

アクセスしやすくなる

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

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

ファビコンのサイズ

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

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

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

参考サイト
Customizing the Site Icon
favicon-cheat-sheet
iPhoneアプリのアイコンサイズと角丸半径一覧【備忘録】

ファビコン作成ジェネレーター

favicon作成ジェネレーター

Favicon Generator

画像をアップロードすると16×16のドットアイコンを自動で生成してくれます。ドット単位での微調整も出来るので納得いくまで編集することも可能です。

.ico作成ジェネレーター

各サイズのファビコン画像をそれぞれマークアップしていくのは少し煩わしいです。

そこで複数サイズのファビコン画像を一つの.icoに格納します。.icoはWindowsのアイコンなどで使用されており、大アイコン・中アイコン・小アイコンといった切り替えの際にそれぞれ対応した大きさの画像を表示しています。

.icoファイルは以下のサイトで簡単に作成することが出来ます。

.ico作成ジェネレーター

無料で半透過マルチアイコンやファビコン(favicon.ico)作成。

格納したい画像をそれぞれアップロードし、アイコン作成をクリックするだけで複数の画像サイズが格納された.icoファイルが出来上がります。

まとめ

ファビコンは細かな仕様にまで対応していくとキリがありません。Retinaディスプレイ用だったりIE9限定のものだったり...。と言っても全てに対応する必要はなく、多くのブラウザで採用されているサイズをカバーできていれば十分です。ついつい後回しにしてしまっていた、という方はぜひ設定してみて下さい。