Parts & Tips

サイトに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"
    }
  ]
}

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

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設定の手順は以上です。

画像変換ツール ​

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

< Back to Home