ファビコン(favicon)はブラウザのタブやブックマークバー、検索エンジンの検索結果など、様々な場所で見られます。

これまではWindowsのタイルアイコンや高解像度ディスプレイ、IEやiOSのホーム画面などにも対応するとなると、複数のfavicon画像や設定が必要でした。

しかし、2025年の現在では、全ブラウザの77%がSVGアイコンをサポートしてる為、それも不要になりました。
SVGはピクセルではなく数式で描画する為、拡大・縮小しても劣化しない便利なファィル形式です。

caniuse.com

上記の画像の通り、Safariや古いブラウザではSVGが対応してませんので、それらに対応する必要があります。

必要なファィル

結論、必要なファィルは以下の3つとなります。

favicon.ico(48x48)
古いブラウザやSVGが対応してないブラウザ(Safariなど)に対応する為に必要。

favicon.svg
メインで使用するファィル。ほとんどこれで対応できる。

apple-touch-icon.png(180x180)
iOS / Android でホーム画面追加した時に使われる。
パソコンでの閲覧が前提のWebサイトなら、これも不要かと思いましたが、
近年ではモバイルユーザーが増えてますので、設定しておくのがベターかと思います。

apple-touch-iconはiOSのホーム画面用のアイコンを指定する為のものですが、 link 要素で rel="apple-touch-icon" を指定してあげると、 Androidでもそのアイコンが使用されるみたいです。

実際に私のAndroid環境では、ホーム画面アイコンで、apple-touch-icon.pngが使用されてるのを確認しました。

PWA対応

PWA(プログレッシブウェブアプリ)は、Webサイトをアプリ化する仕組み・技術のことで、Andoridsでホーム画面にアイコンを追加した時の ホーム画面に表示される名前、アイコン、起動時に開くURLなどが指定できます。
もし、PWAの対応も考えると、下記のファィル3つが追加で必要になります。

web-app-manifest-192×192.png
Androidでホーム画面のアイコンとして使用するファィル。

web-app-manifest-512×512.png
ホーム画面のアイコンからWebサイトを起動する時のローディング画面で使用するファィル。

site.webmanifest
上記の2つのファイルを表示させるための設定ファィル。

site.webmanifestの中身の例⬇︎

{
  "name": "サイトタイトル",
  "short_name": "サイトタイトル",
  "icons": [
    {
      "src": "/web-app-manifest-192x192.png",
      "sizes": "192x192",
      "type": "image/png",
    },
    {
      "src": "/web-app-manifest-512x512.png",
      "sizes": "512x512",
      "type": "image/png",
    }
  ],
  "theme_color": "#999999",
  "background_color": "#999999",
  "display": "standalone"
}

URLやサイト名は環境に合わせて変更する必要があります。 特にホーム画面のアイコンにこだわりがなければ、先程の3つで十分だと思います。

ファビコンの作成

ファビコンの作成はRealFaviconGenerator がおすすめです。
先程言ってた必要なファィルを一括で作成してくれます！

まず、RealFaviconGeneratorにアクセスして、Pick your favicon imageをタップし、自分のfaviconを選びます。 私は512pxのサイズでpngアイコンを作り、選択しました。

そこからfaviconがどのように見えるかを確認しながら、色や明るさなどを調整できます。

ホーム画面に追加された時の設定も細かく調整できます！

設定が完了し、次に進むと、 Downloadというボタンをクリックすると、faviconのzipファィルをダウンロードできます！

zipを展開すると、次の7個のファィルがあると思いますが、今回使うのは、svgと、ico、apple-touch-iconだけです。

これらをWebサイトのルートに置いてください！

HTMLでの指定方法

HTMLで指定は下記のように指定します。

<link rel="icon" href="/favicon.ico" sizes="48x48" >
<link rel="icon" type="image/svg+xml" href="/favicon.svg" sizes="any" />
<link rel="apple-touch-icon" href="/apple-touch-icon.png"/>

sizes="48x48"や、anyなと指定してるのは、svgが対応しているブラウザにsvgを選んでもらう為だそうです。
Chromがicoを選ぶバグ？的なのがあるらしく、sizes="48x48"を指定することで、Chromが48pxは大きすぎると判断し、svgを選ぶだそうです。

すると、無事にアイコンを表示させることができました！

PWA対応(おまけ)

先程、RealFaviconGeneratorで作成しmanifestファィルを使って対応していきます。
必要なファィルは下記の３つです。

これをWebサイトのルートに置き、下記のようにhtmlを付け足します

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

これでPWA対応は完了です！
お疲れ様でした！

参考

• DEV - Definitive edition of “How to Favicon” in 2023（参照日: 2025 年 03 月 23 日）
• Evil Martians - How to Favicon in 2025: Three files that fit most needs（参照日: 2025 年 03 月 23 日）
• pacchiy - 【2021年版】favicon（ファビコン）の設定方法と画像の作り方（参照日: 2025 年 03 月 23 日）
• coliss - 2025年版、ファビコン画像の作成方法と設置方法、さまざまなデバイスに対応させるには3つのアイコンが必要（参照日: 2025 年 03 月 23 日）