仕組み
画像や文字を、ブラウザやスマホが必要とするすべてのサイズでキャンバスに描き、PNGファイルとして保存します。16・32・48pxの画像は1つのfavicon.icoにまとめます。すべてブラウザ内で作成し、アップロードは行いません。
favicon.ico (16 + 32 + 48) · favicon-32.png · apple-touch-icon.png (180) · icon-192.png · icon-512.png · site.webmanifest
各ファイルの役割
- favicon.ico：ブラウザのタブに表示される定番のアイコンです。今でもすべてのブラウザとWindowsがサイトのルートでこのファイルを探します。
- apple-touch-icon.png：iPhoneやiPadでサイトをホーム画面に追加したときに使われるアイコンです。背景は常に塗りつぶされます。
- icon-192.png, icon-512.png：Androidやインストール可能なWebアプリ（PWA）が、マニフェストから読み込んで使います。
- site.webmanifest：サイト名、色、アイコン一覧を書いた小さなJSONファイルです。
ヒント
- すべてのファイルをサイトのルートフォルダ（index.htmlと同じ場所）に置き、コードを各ページのheadに貼り付けてください。
- 16pxでは、シンプルで太い形が最も見やすくなります。細かい文字や細い線は見えなくなります。
- ブラウザはファビコンを強くキャッシュします。変更を確認するには、アイコンのURLを直接開くか、プライベートウィンドウを使ってください。
- theme-colorタグを使うと、Androidのブラウザバーが背景色に色付けされます。
計算の基準と出典
- HTML Standard — link rel="icon" · WHATWG
- Web Application Manifest · W3C
- Configuring Web Applications（apple-touch-icon）· Apple Developer
最終確認 2026年10月15日
よくある質問
どのサイズのファビコンが必要ですか？
16・32・48pxを含むfavicon.ico、180pxのapple-touch-icon、Android用の192pxと512pxのアイコンがあれば、現在のブラウザとスマホに対応できます。
ロゴはアップロードされますか？
いいえ。アイコンの描画とまとめる処理はブラウザ内で行われます。
SVGは使えますか？
はい。SVG、PNG、JPG、WebP、GIFに対応しています。512px以上の正方形の画像を使うと最もくっきり仕上がります。
Appleのアイコンが透明にならないのはなぜですか？
iOSは透明な部分を黒で塗りつぶすため、180pxのアイコンには常に背景色を使います。
新しいファビコンが表示されません。
ブラウザはファビコンを長期間キャッシュします。アイコンのアドレスを直接開くか、キャッシュを削除するか、プライベートウィンドウでお試しください。