ファビコンの設定方法｜HTML・WordPress・各CMS別に完全解説【コピペOK】

ファビコンは「作る」だけでは表示されない

ファビコンの画像ファイルを用意しただけでは、ブラウザのタブにアイコンは表示されません。サイトに正しく設定する必要があります。

設定方法はサイトの構築環境によって異なります。この記事では、HTMLの基本設定からCMS別の手順まで、コピペ可能なコードとともに解説します。

ファビコン画像の準備がまだの方は、先にファビコンの作り方を参照してください。

HTMLで設定する方法（基本）

もっとも基本的な方法は、HTMLの<head>タグ内に<link>要素を追加することです。

最小限の設定

<link rel="icon" href="/favicon.ico" type="image/x-icon">

これだけで、ルートディレクトリに配置したfavicon.icoがファビコンとして認識されます。

推奨される完全な設定

複数のブラウザ・デバイスに対応する場合は、以下のセットを<head>に追加します。

<!-- 標準ファビコン -->
<link rel="icon" href="/favicon.ico" type="image/x-icon">
<link rel="icon" type="image/png" sizes="32x32" href="/favicon-32x32.png">
<link rel="icon" type="image/png" sizes="16x16" href="/favicon-16x16.png">

<!-- Apple Touch Icon（iOSホーム画面） -->
<link rel="apple-touch-icon" sizes="180x180" href="/apple-touch-icon.png">

<!-- Android/PWA -->
<link rel="manifest" href="/site.webmanifest">

<!-- Microsoft -->
<meta name="msapplication-config" content="/browserconfig.xml">

これらのファイルをまとめて生成するなら、アプリアイコン一括生成ツールが便利です。ZIPファイルにHTMLスニペットも含まれているので、コピー&ペーストで設定できます。

アプリアイコン一括生成全プラットフォーム対応のアイコンをZIPで一括ダウンロード

ファイルの配置場所

すべてのファイルをサイトのルートディレクトリ（https://example.com/ 直下）に配置するのが標準です。サブディレクトリに置く場合はhref属性のパスを調整してください。

「ICO・PNG・SVGどの形式を使えばいい？」という方は以下を先にお読みください。

ルートにfavicon.icoを置くだけの方法

実は、/favicon.icoというファイル名でルートディレクトリに配置するだけで、HTMLに何も書かなくてもブラウザが自動的に読み込んでくれる仕様になっています。

これはHTTP仕様の慣例で、ほぼすべてのブラウザが対応しています。ただし、以下の理由から明示的に<link>を書くことを推奨します。

サブディレクトリのページでも確実に適用される
PNG形式やApple Touch Iconなど複数形式を指定できる
パフォーマンス面で無駄な404リクエストを防げる

CMS別設定ガイド

WordPress

WordPress 4.3以降は、管理画面から画像をアップロードするだけで設定できます。

「外観」→「カスタマイズ」→「サイト基本情報」→「サイトアイコン」

512×512px以上のPNG画像を用意してアップロードすればOKです。詳しい手順は以下の記事で解説しています。

Shopify

管理画面 →「オンラインストア」→「テーマ」→「カスタマイズ」→「テーマ設定」→「ファビコン」

32×32px以上のPNG画像をアップロードします。詳しくはShopifyでファビコンを設定する方法を参照してください。

Wix

ダッシュボード →「設定」→「ファビコン」

16×16px以上の画像をアップロード。ただし、高品質な表示のためには512×512pxの画像を推奨します。

STORES

ダッシュボード →「ストアデザイン」→「基本設定」→「ファビコン」

ペライチ

ページ編集 →「ページ情報編集」→「ファビコン」

ペライチはプランによってファビコン設定が制限されている場合があります。レギュラープラン以上で対応。

Wix・STORES・ペライチの詳細手順はWix・STORES・ペライチでファビコンを設定する方法で解説しています。

EC-CUBE

テンプレートファイル（default_frame.twig）の<head>部分にlinkタグを直接追加する方法が一般的です。詳しくはEC-CUBEでファビコンを設定する方法を参照してください。

SPA・フレームワーク別の設定

Next.js（App Router）

app/ディレクトリにfavicon.icoを配置するだけで自動認識されます。追加でicon.pngやapple-icon.pngを置くことも可能です。

app/
├── favicon.ico
├── icon.png          ← 32x32 PNG（オプション）
└── apple-icon.png    ← 180x180 PNG（オプション）

React（Create React App / Vite）

public/ディレクトリにfavicon.icoを配置し、index.htmlの<head>にlinkタグを追加します。

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

Vue.js / Nuxt

Nuxtの場合はnuxt.config.tsで設定できます。

export default defineNuxtConfig({
  app: {
    head: {
      link: [
        { rel: 'icon', type: 'image/x-icon', href: '/favicon.ico' }
      ]
    }
  }
})

設定後の確認方法

ファビコンを設定したら、正しく表示されているか確認しましょう。

ブラウザで確認

サイトにアクセスし、タブのアイコンを目視確認
ブックマークに追加して、ブックマーク一覧での表示を確認
シークレットモード（Ctrl+Shift+N）で開くと、キャッシュの影響なく確認できます

デベロッパーツールで確認

F12でデベロッパーツールを開き、Networkタブでfaviconと検索。ステータスコードが200であればファイルは正しく読み込まれています。404の場合はパスが間違っています。

ICOファイルの中身を確認

ダウンロード済みのICOファイルに正しいサイズが含まれているか確認するには、ICOファイル分析ツールにアップロードしてみてください。推奨サイズ（16, 32, 48）の有無もチェックできます。

ICOファイル分析ツールICOファイルの中身を解析・各サイズをPNG抽出

よくあるトラブルと対処法

ファビコンが反映されない

原因の90%はキャッシュです。ブラウザキャッシュのクリア → CDNキャッシュのパージ → シークレットモードでの確認を順に試してください。

特定のブラウザだけ表示されない

ICO形式のファビコンが壊れている可能性があります。分析ツールでICOファイルの中身を確認してみてください。PNG形式も併記することで、ICOに対応していないブラウザでも表示できます。

httpsサイトでファビコンが表示されない

ファビコンのURLがhttp://で指定されていないか確認してください。mixed contentブロックが原因でファビコンが読み込まれないケースがあります。/favicon.icoのような**相対パスかhttps://で始まるURL**を使いましょう。

まとめ

環境	設定方法	難易度
HTML	`<head>`にlinkタグ追加	★★☆
WordPress	カスタマイザーから画像アップロード	★☆☆
Shopify/Wix/STORES等	管理画面のファビコン設定	★☆☆
Next.js/React/Vue	public/配置 or 設定ファイル	★★☆
EC-CUBE	テンプレートファイル編集	★★★

ファビコンの画像準備から設定までの全体フローは、ファビコンの作り方でまとめて解説しています。