Zenn
🌟

【2021年版】favicon（ファビコン）の設定方法と画像の作り方

2021/08/30に公開
CSS
HTML
JavaScript
React
favicon
tech

はじめに

新しく作成したサイトにfaviconの設定をしようとしたら、たくさんの詰まりポイントがありました。

  • 記述内容が多すぎる…　結局どれが必要なの？
  • ダークモードで画像が見えない！
  • Safariだけ画像が出てこない！

そこで今時の記述の仕方や、画像データの仕様について、まとめました。
同じように詰まった人の参考になれば嬉しいです。

結論

指定方法

faviconを表示させたいページのhead内に以下の記述を追加します。

<head>
  <link rel="icon" sizes="16x16" href="/favicon.ico" />
  <link rel="icon" type="image/svg+xml" href="/favicon.svg">
  <link rel="apple-touch-icon" href="/apple-touch-icon.png">
  <link rel="manifest" href="/manifest.json" />
  <title>Sample</title>
  ...
</head>

// manifest.json
 {
  "short_name": "Sample App",
  "name": "Sample App",
  "icons": [
  {
    "src": "logo192.png",
      "type": "image/png",
      "sizes": "192x192"
    },
    {
    "src": "logo512.png",
      "type": "image/png",
      "sizes": "512x512"
    }
  ],
  "start_url": ".",
  "display": "standalone",
  "theme_color": "#000000",
  "background_color": "#ffffff"
 }



favicon画像はルートディレクトリの直下に置きます。
理由は、一部のブラウザでルートディレクトリ以外の階層にあるfavicon画像を読み込まないためです。

Create React App の場合は、publicディレクトリがルートディレクトリになります。

// Create React App の場合のディレクトリ構造

public
 ├ index.html // このHTMLに上記の <link> を追加
 ├ favicon.ico // 画像も同じディレクトリに配置
 ├ favicon.svg
 ├ apple-touch-icon.png
 ├ logo192.png
 ├ logo512.png
 ├ manifest.json
 └ ...

画像データ

favicon用の画像と、必要あればiPhone/Androidのホーム画面用の画像を用意します。
それぞれの拡張子、サイズ、透過の有無は以下のとおりです。

使用
箇所		 サンプル
画像		 使用イメージ 拡張子 サイズ 余白 背景色
favicon ブラウザのタブ、ブックマーク等


※svgでダークモード対応した場合		 svg,
ico		 16x16
32x32
48x48		 なし お好みで

ダーク
モードに
注意
apple-
touch-
icon		 iPhoneのホーム画面、
Safariのお気に入り画面等
 png 180x180 あり あり

四角に塗る
mani
fest.
json		 Androidのホーム画面等 png 192x192
512x512		 なし あり

円形に塗る

詳細

ICO

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

ICOはfaviconで最もよく使われているファイル形式です。
元々はIEの独自機能でしたが、現在は全てのブラウザでサポートされています。

ICOはマルチアイコンとも呼ばれ、複数のサイズのアイコンを含めることができます。
一般的なサイズは、16x16px、32x32px、48x48pxです。

PNG

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

PNG形式のfaviconも、モダンブラウザでサポートされています。

ただし、IE10以下 と iOS11以下のSafari では未対応のため、古いブラウザに対応する場合は注意が必要です。（参考：https://caniuse.com/link-icon-png）

今のところ、ICOがあればPNGはなくても良いかもしれません。

SVG

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

（※type属性 type="image/svg+xml" を付けます）

SVG形式のfaviconも、モダンブラウザでサポートされています。

SVGの場合、

  • 複数サイズの画像を用意しなくて良い
  • ダークモードに対応できる

というメリットがあり、将来的にはSVGを使うことが増えるのではないかと思います。

ですが、今のところ Safariが未対応 なので、
SVGとICO（またはPNG）を併記するのが良さそうです。

（Safariは後述するsafari-pinned-tab.svgというSVGには対応していますが、これは単色のSVGしか使用できません）

SVG favicons | Can I use... Support tables for HTML5, CSS3, etc
（参考：https://caniuse.com/link-icon-svg）

ダークモードの対応方法

SVGのファイル内にはCSSを記述することができます。

次のように<style> 要素を追加し、メディアクエリ @media (prefers-color-scheme: dark) を使えば、ダークモードの色を指定することができます。

<svg ...>
  <style>
    // ここにダークモードの色を指定
    @media (prefers-color-scheme: dark) {
      .background {
          fill: #5C413C;
      }
      .text path{
        fill: #DBCFCB;
      }
    }
  </style>
  <rect class="background" width="16" height="16" fill="#DBCFCB"/>
  <g class="text">
    <path d="..." fill="#5C413C"/>
    <path d="..." fill="#5C413C"/>
    <path d="..." fill="#5C413C"/>
  </g>
</svg>



見た目は以下のようになります。

元画像 PC Chrome タブ
表示イメージ
ライトモード


ダークモード（明るい色を指定）

ダークモード対応時の注意点

ICOとSVGを併記すると、現在Chromeではicoが優先されてしまうようです。くっ…。

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



ですが、PCのChromeでは、以下のようにICOにsizes属性を追加を追加すれば、SVGが優先されるそうです！

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



ただし、この方法はスマホのChromeでは効かないようです。くっ……。

じゃあICOを外せばいいかというと、
今度はSVG対応していないSafariでfaviconが表示されなくなります………。

Safariが早くSVGに対応してくれることを祈りつつ、
以下の対応が考えられるかなと思います。

  • ライト/ダークモードのいずれでも視認性のあるfaviconデザインにして、ICOかPNGを使う（SVGは使わない）
  • OSやブラウザごとに<link>を出し分ける
  • 上記のsizesのフォールバックで対応し、スマホのダークモード対応は諦める

apple-touch-icon

iPhoneのホーム画面や、Safariのお気に入り画面で使われるアイコンです。

apple-touch-iconは次のような画像を用意するのがオススメです。

  • 背景色と余白込み
  • 角にはデザインがない

iPhoneのホーム画面では、透過画像の場合、背景が黒くなる仕様になっています。
また、角丸はiPhone側で勝手に設定されるため、角までデザインがあるようなデザインだと削られてしまいます。

元画像 iPhone ホーム画面
表示イメージ		 備考
NG例 ・透過されている部分が黒くなる
・領域いっぱいに画像が表示される
・角丸になる
OK例 背景色&余白ありならキレイに見える

また、apple-touch-iconはfaviconと同様にサイトのルートディレクトリに置きましょう。
ルート以外の階層に置いてしまうと、<link>にパスを記述しても、Safariで表示されないようです。

manifest.json

PWA（Progressive web apps）で使用されるファイルで、
Androidのホーム画面で使われる画像を設定することができます。

この画像はapple-touch-iconとは異なり、透過 or 円形背景の画像にしましょう。
どちらの背景にするかは、faviconのデザインによって決めると良さそうです。

元画像 Android ホーム画面
表示イメージ		 備考
イマイチ
な例		 △四角い背景があると、小さく表示されてしまう
OK例
背景透過		 ◎ちょうど良い余白感
△少し小さい
OK例
背景円形		 ◎丸く大きく表示される
△デザインや壁紙によっては見えづらい

古いブラウザ向けの対応

以下の記述を見かけることがありますが、これらは古いブラウザ向けの対応なので、現在は不要です。

shortcut

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

以前は icon と shortcut を併記していました。

shortcut はIE8の為の記述です。
現在は不要になっており、MDNでもかなり強い言い方で「書くな」と言っているようです。

Warning: The shortcut link type is often seen before icon, but this link type is non-conforming, ignored and web authors must not use it anymore.

（参考：https://developer.mozilla.org/ja/docs/Web/HTML/Element/link）

type属性

IE9, 10向けにはtype属性の指定が必要でした。

<link rel="icon" type="image/x-icon" href="./favicon.ico"> // IE9, 10
// または
<link rel="icon" type="image/vnd.microsoft.icon" href="./favicon.ico"> // IE9, 10

msapplication

以前はWindows用のタイルアイコンがあるとベターでした。
これは主にWindows7向けの対応なので、現在は必要なさそうです。

<meta name="msapplication-square70x70logo" content="/mstile-70x70.png">
<meta name="msapplication-square150x150logo" content="/mstile-150x150.png">
<meta name="msapplication-wide310x150logo" content="/mstile-310x150.png">
<meta name="msapplication-square310x310logo" content="/mstile-310x310.png">
<meta name="msapplication-TileColor" content="#DBCFCB">

または

// browserconfig.xml
<?xml version="1.0" encoding="utf-8"?>
<browserconfig>
  <msapplication>
    <tile>
      <square150x150logo src="/mstile-150x150.png"/>
      <TileColor>#DBCFCB</TileColor>
    </tile>
  </msapplication>
</browserconfig>

safari-pinned-tab

<link rel="mask-icon" href="/safari-pinned-tab.svg" color="#DBCFCB">

iOS 12およびmacOS Mojaveまでは、SafariでWebサイトをピン留め表示した時に表示されるアイコン画像として、単色のSVG画像を用意する必要がありました。

今はSafariでもfavicon画像がサポートされるようになったので、不要になりました。

むしろ safari-pinned-tab.svg があると、faviconより優先されるようなので、書かない方が良さそうです。

precomposed

<link rel="apple-touch-icon-precomposed" href="apple-touch-icon-precomposed.png">

iOSのアイコンがツヤツヤしていた頃の仕様です。

iOS 7より前のデバイスのSafariは「apple-touch-icon.png」を見に行く前に、輝く感じのエフェクトなどを前処理済みの「apple-touch-icon-precomposed.png」を探しにいく仕様でした。

おわりに

favicon設定がこんなに大変だとは思いませんでした…！
でも今までコピペで適当に書いてきたものをきちんと知ることが出来て良かったです。

誰かの参考になれば嬉しいです。
（間違いやもっと良い書き方があれば教えて下さい）

早くSafariがSVG対応してくれるといいなぁ…

参考

Discussion