favicon/PWAの設定がうまくいかない
きっかけ
業務でfavicon/PWAを設定する機会があり実装に時間がかかったためメモとして残しておこうと思い記載しました。
記事にないこと
- ダークモード対応
- 古いブラウザ向け対応
- PWA機能拡張のためのサービスワーカー設定
faviconの設定について
favicon
PC、スマートフォンでブラウザを閲覧するときにタブの左側に表示されるアイコンです。
よく使用される拡張子はfavicon.ico, favicon.png, favicon.svgがあります。
ブラウザはドキュメントルートディレクトリに設定してあるfavicon.icoをデフォルトで探しに行きます。よくあるケースではpublic配下を指します。推奨する理由としては一部のブラウザでドキュメントルートディレクトリ以外の階層にあるfavicon画像を読み込まないためです。
※今回はドキュメントルート外に配置。
faviconがドキュメントルートディレクトリに設定してあっても、HTMLのメタデータにfavicon設定がある場合は優先的に記載されている情報を採用します。アイコンが複数設定されている場合、type, size属性などを使って、自動でブラウザ側でアイコンを選択します。
apple-touch-icon
iPhoneのホーム画面や、Safariのお気に入り画面で使われるアイコンです。
apple-touch-iconもfavicon同様にドキュメントルートディレクトリに配置するほうが望ましいようです。
※今回はドキュメントルート外に配置。
head部分
<head>
<link rel="icon" type="image/png" sizes="16x16" href="/images/favicons/favicon-16×16.png" />
<link rel="icon" type="image/png" sizes="16x16" href="/images/favicons/favicon-32×32.png" />
<link rel="apple-touch-icon" sizes="180x180" href="/images/favicons/apple-touch-icon.png">
<link rel="icon" type="image/png" sizes="192x192" href="/images/favicons/android-chrome-192x192.png" />
<link rel="icon" type="image/png" sizes="512x512" href="/images/favicons/android-chrome-512x512.png" />
<link rel="manifest" href="/images/favicons/android-chrome-manifest.json" />
...
</head>
※android-chrome-manifest.jsonはmanifest.jsonに名前を変更してpublicなどの直下に配置することが推奨されているようです。
設定したファビコンは検証ツールのネットワークタブで確認できます。
PWAの設定について
PWAとは
PWAとはProgressive Web Appの略称で、Webアプリケーションをネイティブアプリケーションのように動作させるための技術です。
Webアプリケーションで表示させていたページをホーム画面に追加することができたり、ホーム画面のアイコンからすぐアクセスしたり、通知を受け取ることができるという点があります。
やり方は基本的にブラウザで任意のサイト開いてから、共有アイコンの「ホーム画面に追加」で体験することが可能です。
iphone/ios関連
iphone,iosの場合、特にjsonファイルを必要としないようです。代わりに先ほど設定したapple-touch-iconの情報を参照してデザインを制御するようです。
android関連
androidスマホの場合
manifest.jsonまたはandroid-chrome-manifest.jsonを設定することによりホーム画面追加時にjsonファイル情報を参照してアイコン・テーマ色・表示モードを制御します。
json部分
{
"short_name": "Sample App",
"name": "Sample App",
"icons": [
{
"src": "/images/favicons/android-chrome-192x192.png",
"type": "image/png",
"sizes": "192x192"
},
{
"src": "/images/favicons/android-chrome-512x512.png",
"type": "image/png",
"sizes": "512x512"
}
],
"start_url": "/",
"display": "standalone",
"theme_color": "#000000",
"background_color": "#ffffff"
}
※name, icon, display, color関連を記述していればとりあえず問題なしでした。
つまずいた部分
上記でうまくいくだろうと意気揚々としていましたが、apple-touch-icon,PWA関連がうまく動作していないことがわかり試行錯誤しました。
その時自分で思った原因と考えた解決策は以下です。
-
manifest.jsonに名前を変更する。- 大手のサイトを見に行くと
manifest.jsonをドキュメントルートに置いているケースがほとんどだったため名前を変更してみる。
- 大手のサイトを見に行くと
- パスの設定ミス
- パスの見直しの実施。
- キャッシュ関連
-
<link rel="manifest" href="/images/favicons/manifest.json?v=2">URLにバージョンパラメータを付与してキャッシュ対策を施す。
-
- その環境ではBasic認証がかけられおり、それにより
json,favicon(apple-touch-icon)が認証にひっかかった扱いになり画面表示されなかった。- Basic認証がかかっていないディレクトリで試す。
エラーの原因
結論Basic認証がかかっているとうまく設定されないようです。具体的にはディレクトリ内全体でBasic認証がかかるような設定になっているとはじかれてしまい、うまく表示されないようでした。
解決策
Basic認証がかかる範囲を操作することです。
具体的には使用しているWebサーバー(apache,nginx)のhttpd.conf,.htaccessファイルの<Directory> / <Location> 設定で今回追加したファイル群を認証対象から外す必要があったり、
<link rel="manifest"> にcrossorigin="use-credentials"を付与してサーバで設定が必要になるようです。
所感
サクッと終わる実装かと思っていましたがこんなにfaviconの設定が大変だとは思いませんでした。実際あまり考えずにコピペで済ませていたので調べてるとfaviconの奥深さを感じることができました。
引用/使用したAIツール
- AIツール
- Claude Sonnet 4
- ChatGPT GPT-5
- Google Gemini 2.5 Flash
Discussion