ファビコン(favicon.ico)の設定方法 [HTML] | IT SKILL MAP STUDY -- WEBプログラミング知識【実務的なHTML,CSS,JavaScript,JQuery,PHPの知識】

ファビコン(favicon.ico)の設定方法

　ファビコンの設定方法については過去IEへの対応方法（その他のEdge、firefox、Chrome等ブラウザはどの書き方でも可）によって以下の通り分かれます。2017年4月11日をもってIE10のサポート期間が終了しており、一般的にはIE11以降の対応、つまりrel要素に「shortcut icon」ではなく「icon」を利用し、icoファイルもしくはgif、pngファイルを指定する方法で良いと思います。

ファビコンの使用例

　～　IE8以下にも対応した書き方　～　

HTML

　～　IE9以上に対応した書き方　～　

HTML

　　rel要素に「shortcut icon」ではなく「icon」を指定します。

　～　IE11以上ならgif、pngファイルも利用可能　～　

HTML

　～　firefox、Chromeだけ対象なら<link>タグ自体記載する必要なし　～　

HTML

記載不要

　　記載不要ですが、favicon.icoファイルをウェブサイトのルートにを配置しておく必要があります。

icoファイルの作成方法

　PhotoshopやIllustratorにはpng、gifへの書き出しはできますが、icoファイルへの書き出しができません。フリーソフトを利用して変換するのでしょうか？
　違います。pngないしはbmpファイルの拡張子をicoファイルに変更するだけです。(8ビット形式～32ビット形式どれでも可)
　これはico形式が単なるMIMEタイプの一つで、結局は画像ファイルとして認識されることによります。ただしブラウザ（特にIE）によってjpgファイルをicoファイルに変更したものやgifファイルをicoファイルにした場合には認識できない場合がありますので、pngないしはbmpを元ファイルとして利用するようにして下さい。

　ただしフリーソフトを利用する利点はもちろんあります。icoファイル内に複数のファイルサイズのpng等画像を埋め込むマルチアイコンを作成できるのです。サイズごと細かな対応を必要とするのであればフリーソフトの利用もひとつの方法です。IE11以上を対象にするのであれば、以下のようにlinkタグで分岐することもできます。

icoファイルの作成サイズ

　1ファイルで対応する場合は256p×256pxで十分です。512px×512pxは大きすぎると思います。

非常に手間ですが、各ブラウザ、モバイル端末ごとアイコンを最適化する場合は以下のようになります。

種類	サイズ
各ブラウザの標準	16px × 16px
IE9以降「ピン留め」アイコン	24px × 24px
Chrome、Firefox、Safariなどのタブアイコン、Retina	32px × 32px
Windowsのディスクトップショートカットアイコン	64px × 64px
スマホのホームアイコン	152px × 152px 192px × 192px さらに高解像度の機種有り

IE11以上の場合に利用できるアイコンの分岐例

HTML