モダンな Favicon と PWA アイコンの設定
favicon、Apple touch icon、PWA 用 PNG サイズをローカルで生成し、HTML の link タグと manifest の icons をロゴをアップロードせずに配線します。
サイトや PWA を公開するには、ブラウザやホーム画面が期待する小さなアイコンファイル一式を用意する必要が依然としてあります。それらの PNG サイズをローカルで生成し、参照用の HTML / manifest スニペットをコピーできます。
通常必要なもの
| アセット | 一般的なサイズ | ファイル名 |
|---|---|---|
| Favicon | 16 / 32 / 48 | favicon-16x16.png など |
| Apple touch | 180×180 | apple-touch-icon.png |
| PWA | 192 / 512 | icon-192.png, icon-512.png |
モダンブラウザは <link rel="icon" type="image/png" …> 経由の PNG favicon を受け付けます。PNG リンクがある場合、従来の .ico 1 ファイルは任意です。
ローカルワークフロー
- 正方形または高解像度のロゴ PNG から始める。
- Favicon Generator を開く。
- マークをタイルいっぱいに敷き詰めたい場合は Cover、余白が必要な横長ロゴには Contain を選ぶ。
- 余白を塗りつぶしたい、または透明度を平坦化したい場合のみ背景色を有効にする。
- Generate icons をクリックし、zip をダウンロードする（
manifest.webmanifestを含む）。 - HTML link スニペットを
<head>にコピーし、manifest のiconsを PWA manifest に貼り付ける。
Cover と Contain
- Cover — 正方形にクロップ。マークをアイコンタイルいっぱいに表示したいときに適する。
- Contain — 余白付きでロゴ全体を表示。ワードマークや横長ロゴ向け。
App Store 掲載用グラフィックではない
App Store と Google Play のスクリーンショットは異なるプリセットとチェックリストを使います。ストアアセットには App Market Image Resizer を使ってください。favicon generator はウェブサイト / PWA 公開専用です。
関連ツール
- Responsive Image Generator — 複数幅のページ画像と
srcsetスニペット。 - Image Cropper — アイコン出力前にロゴのフレーミングを調整。