calendar

ファビコン（favicon）の設定方法について調べてみた

category HTML
tag HTML tag Web tag Favicon
toc目次

はじめに

ファビコン（Favicon）とは、ブラウザーのタブやブックマークなどで表示される小さなアイコンです。

このブログでは、サイトのルートディレクトリに「favicon.ico」ファイルを配置していたのですが、最近はスマホやタブレットにも対応したファビコンを設置したほうがよさそうなので、どういう設定が良いのか調べてみました。

このブログでのファビコン（favicon）の設定

色々調査した結果、このブログのファビコン設定は以下のようにしました。
（※ 現状は下記の設定しましたが、環境に変化があれば適宜変更します。）

 <!-- PCブラウザ向けの設定 -->
<link rel="icon" href="/favicon.ico" sizes="32x32">

<!-- Appleデバイス向けの設定 -->
<link rel="apple-touch-icon" href="/apple-touch-icon.png" sizes="180x180">

<!-- Androidデバイス向けの設定 -->
<link rel="icon" type="image/png" href="/icon-192.png" sizes="192x192">
<link rel="icon" type="image/png" href="/icon-512.png" sizes="512x512">

以下、調べた内容のメモです。

PCブラウザ向けのファビコン設定

ICOファイル

ファビコンに.icoファイルを使用する場合は、以下のように記載します。

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

レガシーブラウザに対応する場合は、以下のように記載します。

<!-- IE5～IE8に対応、「rel="shortcut icon"」という書き方は、現在非推奨 -->
<link rel="shortcut icon" href="/favicon.ico">

<!-- IE9～IE10に対応、IE11以降は「.ico」の場合、type属性の記載不要-->
<link rel="icon" type="image/x-icon" href="/favicon.ico">
<link rel="icon" type="image/vnd.microsoft.icon" href="/favicon.ico">

📝 メモ

  • ICOファイルのMIMEタイプは「image/vnd.microsoft.icon」ですが、MIMEタイプが登録される以前は未登録トークンを「x-」で表すという規則から「image/x-icon」が使われていました。

ICOファイル以外

モダンブラウザ（Chrome、Edgeなど）やIE11以降は、PNG形式の画像ファイルなどをファビコンに設定することが可能です。

ICOファイル以外を使用する場合は、type属性にMIMEタイプを設定します。

<!-- PNGファイル -->
<link rel="icon" type="image/png" href="/favicon.png">

<!-- GIFファイル -->
<link rel="icon" type="image/gif" href="/favicon.gif">

<!-- SVGファイル -->
<link rel="icon" type="image/svg+xml" href="/favicon.svg">

アイコンサイズ指定

sizes属性でアイコンサイズの指定ができます。

必須の設定ではないですが、複数の<link rel="icon">が存在する場合、ブラウザーはsizes属性をヒントに、もっとも適切なアイコンを選択するため、設定が推奨されています。

<!-- サイズ指定 16x16 -->
<link rel="icon" type="image/png" href="/favicon-16.png" sizes="16x16">

<!-- サイズ指定 32x32 -->
<link rel="icon" type="image/png" href="/favicon-32.png" sizes="32x32">

Appleデバイス用のファビコン設定

iOSでアイコンのショートカットを表示するには、<link rel="apple-touch-icon">を記載します。

アイコンサイズの推奨値は以下のとおりです。

デバイス アイコンサイズ
iPad 2まで 152px × 152px
iPad 3以降 167px × 167px
iPhone 180px × 180px

一致するサイズのアイコンが提供されていない場合、iOSは「rel="apple-touch-icon"」を持つ最大のアイコンを選択し、自動的に拡大縮小するため、現在は180pxのアイコンを1つ設置すれば良いようです。

<link rel="apple-touch-icon" href="/apple-touch-icon.png" sizes="180x180">

Androidデバイス用のファビコン設定

Androidデバイスでは以下のサイズのアイコンが推奨されています。

用途 アイコンサイズ
アイコン 192px × 192px
PWA 512px × 512px

推奨値に合わせたファビコンの設定は以下のとおりです。

<link rel="icon" type="image/png" href="/icon-192.png" sizes="192x192">
<link rel="icon" type="image/png" href="/icon-512.png" sizes="512x512">

AndroidはWebマニフェストファイルもサポートしているため、以下のように記載することもできます。

<link rel="manifest" href="/manifest.webmanifest">

{
  "icons": [
    { "src": "/icon-192.png", "type": "image/png", "sizes": "192x192" },
    { "src": "/icon-512.png", "type": "image/png", "sizes": "512x512" }
  ]
}

その他

Safariのページピンアイコン

「rel="mask-icon"」でアイコンを設定しますが、古いmacOS向けで現在は不要のようです。

<link rel="mask-icon" href="mask-icon.svg" color="green">

ダークモードへの対応

SVGファイルは内部にスタイルシートを持てるので、SVGファイルにダークモード用のCSS（@media (prefers-color-scheme: dark)）を埋め込み、ファビコンの設定を行うことで対応できます。

<link rel="icon" type="image/svg+xml" href="/favicon.svg">

<svg ...>
  <style>
    path {
      fill: #000; <!-- ライトモード時の色 -->
    }

    @media (prefers-color-scheme: dark) {
      path {
        fill: #fff; <!-- ダークモード時の色 -->
      }
    }
  </style>
  <path ...>
</svg>

参考