Web Survive

Webで生きる道を模索するブログ

結局どのサイズが必要?サイトに必要なファビコンサイズを調べてみた!

      2015/06/16

faviconsize

ファビコンサイズって毎回悩むし忘れるし
「結局どのサイズまで作ればいいの?」って気持ちになりますよね
なので今回調べた結果を簡潔にまとめます!

そもそもファビコンとは

Favorite icon(フェイバリット・アイコン)の略で、
ブラウザの「URL」「タブ」「お気に入り」に表示される、
小さなアイコンのことです。

独自ファビコンを設定すると、ブックマークされた際に、
オリジナルのアイコンが表示されるようになります。

ファビコンに必要なサイズは現在「4つ」

①16px×16px(ウェブブラウザでの表示)
②32px×32px(デスクトップにショートカットを置いた場合)
③48px×48px(エクスプローラーでアイコン表示にした場合)
④152px×152px(タブレットPC、スマホでの表示)

①〜③のpngを下記サイトを利用して
ico形式で一つにまとめたマルチアイコンを作りましょう。

▼半透過マルチアイコンfavicon.icoを作ろう!
http://ao-system.net/alphaicon/

ファイル名を「favicon.ico」にすればOKです
(ダウンロード時にすでにfavicon.icoになってますが)

④に関してはpng形式で
ファイル名を「apple-touch-icon.png」にすれば大丈夫です。

このサイトで制作したファビコンのサイズも上記の4つのみです。
アイキャッチのファビコンは、左から順に①~④のサイズになってます。

様々なファビコンサイズが生まれてますが
自分が調べた結果、この4つのサイズがあれば現状は十分だと思います。

ファビコンの形式

favicon.ico

WindowsやMAC用になります。1ファイルで3パターンのサイズ別画像を組み込むことができるマルチアイコンを作れます。

apple-touch-icon.png

タブレットPCやスマートフォン用になります。
ファイル名どうりアップルが策定したんですが、
Androidでも同じコードでアイコンを表示することができます。
ただし、Androidは端末ごとで仕様が違いますので、
アイコン表示に対応している機種のみということになります。

ファビコンの設置

ルートで表示させる場合

ファビコンは通常、ウェブサーバーのドキュメントルートに「favicon.ico」を設置すれば認識されます。
これだけでもブラウザによっては自動的にFaviconのアイコンとして認識し、表示してくれる場合があります。
あとは、下記の記述をhead内すればOKです。

ルート以外で表示させる場合

ファビコンをルートに設置できない場合、
また、ディレクトリごとで違うfaviconを表示させたい場合は
セクション内に以下の記述をすることで指定できます。
(URLは適宜変更して下さい)

ファビコンが表示されない場合

ファビコンを初めて設置した直後は
すぐには表示されない場合があります。
何度かリロードしたり、キャッシュを削除してみてください。
faviconを更新した場合は古いキャッシュの削除が必要な場合があります。

 - Webサイト制作

  関連記事