はじめに
Webサイトを訪れた際に、ブラウザのタブやスマホのホーム画面に表示されるアイコン。これらはすべて「favicon」「ショートカットアイコン」「apple-touch-icon」といった設定によって表示されています。
この記事では、SEOにも強く、ユーザー体験を高めるfavicon設定の完全ガイドをお届けします。
コピペできるコード、各デバイス向けの設定方法、確認ツールまでまとめました！
1. 各種アイコンの推奨サイズと形式
| 種類 | サイズ | 形式 | 用途 |
|---|---|---|---|
| favicon.ico | 16×16〜48×48 | .ico | ブラウザのタブなど |
| favicon.png | 32×32〜96×96 | .png | Android Chromeなど |
| apple-touch-icon | 180×180 | .png | iOS Safariのホーム画面 |
| android-chrome | 192×192〜512×512 | .png | Androidホーム画面 |
| safari-pinned-tab | SVG | .svg | Safariのタブ・ピン留め |
| msapplication-icon | 150×150 | .png | Windowsのタイル |
2. HTMLへの記述方法まとめ（用途別解説つき）
✅ 一般的なfavicon（favicon.ico）
<!-- ブラウザのタブに表示される基本アイコン -->
<link rel="icon" href="/favicon.ico" type="image/x-icon">faviconとは？
favicon（ファビコン）とは、ブラウザのタブ、ブックマーク、履歴一覧などに表示されるアイコンのことです。.ico形式は旧ブラウザとの互換性に優れています。
✅ PNG形式のfavicon（高解像度対応）
<!-- 高解像度ディスプレイ対応のPNG形式のfavicon -->
<link rel="icon" type="image/png" sizes="32x32" href="/favicon-32x32.png">
<link rel="icon" type="image/png" sizes="16x16" href="/favicon-16x16.png">PNG形式は透過対応しており、モダンブラウザでの高解像度表示に最適です。
✅ Apple端末用アイコン（apple-touch-icon）
<!-- iOSデバイス用ホームアイコン -->
<link rel="apple-touch-icon" sizes="180x180" href="/apple-touch-icon.png">apple-touch-iconとは？
Apple製のiPhoneやiPadで「ホーム画面に追加」したときに使われるアイコンです。背景を透過せず、フラットな正方形に整えるのがベストです。
✅ Android Chrome・PWA対応
<!-- AndroidやPWA対応のマニフェストファイル -->
<link rel="manifest" href="/site.webmanifest">PWA（プログレッシブWebアプリ）やAndroidでホーム追加される場合、manifestファイルによって複数アイコンが管理されます。
✅ Safari（macOS）ピン留めタブ用
<!-- Safariピン留め用のSVGアイコン -->
<link rel="mask-icon" href="/safari-pinned-tab.svg" color="#5bbad5">SVG形式のアイコンを使い、macOS Safariでのピン留め時にアイコンが表示されます。
✅ Windows用タイル設定
<!-- Windowsスタートメニュー用タイル設定 -->
<meta name="msapplication-TileColor" content="#da532c">
<meta name="msapplication-TileImage" content="/mstile-150x150.png">Windows 10/11のスタートメニューでピン留めされた場合に表示されるタイルの背景色と画像を指定します。
✅ テーマカラー設定（モバイルブラウザ向け）
<!-- モバイルブラウザのテーマカラー設定 -->
<meta name="theme-color" content="#ffffff">ブラウザのアドレスバーの色やUI周りに影響を与える設定です。
✅ コピペ用テンプレート
<!-- 基本のfavicon設定 -->
<link rel="icon" href="/favicon.ico" type="image/x-icon">
<!-- PNG形式のfavicon（モダンブラウザ用） -->
<link rel="icon" type="image/png" sizes="32x32" href="/favicon-32x32.png">
<link rel="icon" type="image/png" sizes="16x16" href="/favicon-16x16.png">
<!-- iOSホーム画面用アイコン -->
<link rel="apple-touch-icon" sizes="180x180" href="/apple-touch-icon.png">
<!-- Android・PWA用マニフェスト -->
<link rel="manifest" href="/site.webmanifest">
<!-- Safariピン留めタブ用 -->
<link rel="mask-icon" href="/safari-pinned-tab.svg" color="#5bbad5">
<!-- Windows用タイル設定 -->
<meta name="msapplication-TileColor" content="#da532c">
<meta name="msapplication-TileImage" content="/mstile-150x150.png">
<!-- テーマカラー設定（ブラウザUI色） -->
<meta name="theme-color" content="#ffffff">3. favicon生成ツールの使い方
複数のサイズを手作業で作るのは手間なので、以下の無料ツールを使うと便利です。
🎨 Real Favicon Generator
使い方：
- サイトにアクセス
- 512×512程度の画像（正方形）をアップロード
- 各種設定（背景色・iOSやWindows対応など）を調整
- 「Generate your Favicons and HTML code」ボタンをクリック
- ZIPファイルをダウンロードして、展開
- ファイルをサーバーにアップロード
- 提示されたHTMLを<head>内にコピペで設置完了！
4. 動作確認の方法
✅ ブラウザで確認
- Chromeでタブを開いて確認
- スマホでブックマークや「ホーム画面に追加」で確認
✅ キャッシュクリアが必要な場合
- Ctrl + F5（Windows）やShift + Reload（Mac）
- faviconのURLに?v=2のようなクエリを付けることでキャッシュ回避可
<!-- バージョン付きfaviconでキャッシュ回避 -->
<link rel="icon" href="/favicon.ico?v=2" type="image/x-icon">✅ Webサービスでチェック
- RealFaviconGenerator チェック機能
- Google Search Console（モバイル検索結果で表示確認）
5. よくあるミスとその対策
いざサイトをコーディングして確認してみると、以下の項目ができていないことがあります。
PC、iOS、Android 様々な端末で確認が必要になるので忘れずにチェックしましょう!
| ミス内容 | 対策 |
| favicon.icoだけで終わっている | PNGやiOS用など複数サイズ・形式を用意する |
| 表示が更新されない | URLにバージョン番号を付ける or キャッシュ削除 |
| サイズが合っていない | 推奨サイズ（180×180など）で作り直す |
6. まとめ
faviconはただの小さなアイコンではなく、ブランド構築・UX・SEOすべてに関わる重要な要素です。
- すべての主要デバイスに対応した複数形式を用意
- HTMLの書き方を正しく記述
- 生成ツールや確認ツールで手間なく対応
これを機に、あなたのサイトにも 信頼される顔（favicon）を持たせてみませんか？
y.kobayashi
2025.04.21この記事を共有する
この記事を共有する
Pinterest
で保存するLINE
で共有するX
で共有するこのページのURLをコピー
https://kasoudesign.com/knowledge/favicon/
Close