Parts & Tips

サイトにfaviconを設定する

更新情報

  • 25/11/23: 「manifest.webmanifestファイルを作成する」に追記、「Basic認証下のサイトやページにおけるfaviconの挙動について」項目を追加と最後に参考リンクを掲載しました
  • 25/4/17: 「manifest.webmanifestファイルを作成する」項目に追記しました

サイトにfavicon（サイトアイコン）を設定する方法について解説しています。
この記事は静的HTMLサイトでのfavicon追加を想定しています。WordPressでの設定については、こちらの記事をご参考ください。

INFO

この記事の一部内容は、下記サイトを参考にさせていただいてます。

2025年版、ファビコン画像の作成方法と設置方法、さまざまなデバイスに対応させるには3つのアイコンが必要 | コリス

favicon用の画像を用意する ​

favicon用の画像を用意します。最初に512px正方形の画像を用意して、各サイズにリサイズしていくとよいです。
必要なファイルとサイズは以下です。

ファイル名サイズ（px）
favicon.ico32 * 32
icon.svg-
icon-192.png192 * 192
icon-512.png512 * 512
apple-touch-icon.png180 * 180

favicon.icoはオンラインの変換ツールを利用して作成可能です。また、SVG形式の画像は、対応しているペイントソフトのほか、オンラインの変換ツールを利用して作成することも可能です。

manifest.webmanifestファイルを作成する ​

テキストエディタでmanifest.webmanifestという名前のファイルを作成し、以下内容を記載して保存します。ファイルの拡張子は.webmanifestです。
サイト名とファイルのパスは適宜修正してください。

json
{
  "name": "サイト名",
  "icons": [
    {
      "src": "/favicon/icon-192.png",
      "type": "image/png",
      "sizes": "192x192"
    },
    {
      "src": "/favicon/icon-512.png",
      "type": "image/png",
      "sizes": "512x512"
    }
  ]
}

Android OSにおいてホームに追加されるアイコンは、通常は丸い枠内に視覚画像で収められますが（丸い枠内に余白がある状態）、丸い枠内いっぱいにアイコンを表示させたい場合は、各アイコンの設定に"purpose": "maskable"を追加します。

json
{
  "name": "サイト名",
  "icons": [
    {
      "src": "/favicon/icon-192.png",
      "type": "image/png",
      "sizes": "192x192",
      "purpose": "maskable"
    },
    {
      "src": "/favicon/icon-512.png",
      "type": "image/png",
      "sizes": "512x512",
      "purpose": "maskable"
    }
  ]
}

なお、ホーム画面に追加したサイトは通常はブラウザが起動して表示されますが、以下のように"display": "standalone"を追加すると、スマホやiPadなどでホーム画面追加時にブックマークするページやサイトをアプリのように単体で開くことが可能になります（この技術をPWA、プログレッシブウェブアプリ（Progressive web apps）といいます）

json
{
  "name": "サイト名",
  "icons": [
    //（略）
  ],
  "display": "standalone",
  "theme_color": "#fff",
  "background_color": "#fff"
}

theme_colorはアプリ的にページを開いた際のツールバーやアドレスバー、ステータスバーなどのUIに適用されます。background_colorはページのCSSが読み込まれる前に表示される画面（アプリの起動画面のようなもの）で表示される背景色に適用されます。

当サイトもホーム画面追加時にアプリのように開くように設定しています。

headにタグを追加する ​

faviconを追加するための以下HTMLタグを<head></head>内に追加します。
ファイルのパスは適宜修正してください。

html
<link rel="manifest" href="/favicon/manifest.webmanifest">
<link rel="icon" href="/favicon/favicon.ico" sizes="32x32">
<link rel="icon" href="/favicon/icon.svg" type="image/svg+xml">
<link rel="apple-touch-icon" href="/favicon/apple-touch-icon.png">

favicon設定の手順は以上です。

Basic認証下のサイトやページにおけるfaviconの挙動について ​

サイト全体や特定のページにBasic認証がかかっている場合は、ブラウザ側などにBasic認証に対するアクセス権がないため、以下の事象が発生します。

  • faviconが表示されない
  • manifest.webmanifestに"display": "standalone"を追加したけど、アプリのように立ち上がらない（ブラウザで開いてしまう）

この場合は、以下の対応をすることで上記の事象が解消されます。

  • manifest.webmanifestやアイコンファイルが格納されているディレクトリをBasic認証の対象から外す
  • manifest.webmanifestを指定しているlink要素にcrossorigin="use-credentials"を追加指定する
html
<link rel="manifest" href="/favicon/manifest.webmanifest" crossorigin="use-credentials">
<link rel="icon" href="/favicon/favicon.ico" sizes="32x32">
<link rel="icon" href="/favicon/icon.svg" type="image/svg+xml">
<link rel="apple-touch-icon" href="/favicon/apple-touch-icon.png">

crossorigin属性は、link要素やscript要素など外部サイトからデータ（リソース）を読み込む際に、「CORS」と呼ばれる仕組みに対する対応を指定します。
詳細はここでは割愛しますが、値にuse-credentialsを指定することで、ブラウザがリソースを読み込む際にブラウザ側にユーザー認証情報（この場合はBasic認証のIDとパスワード）が送られます。

なお、manifest.webmanifestやアイコンファイルが格納されているディレクトリをBasic認証の対象から外す処置は、Safariにおける対応です。
Google ChromeやFirefoxの場合はcrossorigin="use-credentials"の追加のみで十分なのですが、Safariの場合はおそらくこの認証情報が送られていない（あるいはセキュリティの関係でSafari側で弾いている）と推測されるため、この処置をしています。

補足

Safariの認証に関しては各所確認していますが、公式の情報が見当たらなかったため、筆者の推測の域を出ません。

画像変換ツール ​

.icoや.svg形式の画像は、以下オンラインのツールを利用して変換可能です。

本記事の解説は以上です。

補足

PWAやウェブマニフェストについてなどの詳細は、専門的になりますが以下のサイトもご参考ください。

< Back to Home