⭐favicon作成ツール
1枚の画像から、favicon.ico（16・32・48px 入り）、apple-touch-icon、PWA 用のアイコン、site.webmanifest を作り、HTML に貼るタグも出力します。画像はブラウザの中だけで処理します。
作られるファイル
| ファイル | 用途 |
|---|---|
| favicon.ico | ブラウザのタブ（16・32・48px） |
| favicon-16x16.png / favicon-32x32.png | PNG の favicon |
| apple-touch-icon.png | iPhone のホーム画面（180px） |
| android-chrome-192x192 / 512x512 | Android・PWA |
| site.webmanifest | PWA の設定 |
スマホアプリのアイコンは アプリアイコン サイズ一括生成 で作れます。
よくある質問
- Q. faviconとは？
- ブラウザのタブやブックマークに表示される小さなアイコンです。サイトの見分けやすさと信頼感に関わります。
- Q. faviconのサイズは？
- favicon.ico に 16・32・48px を入れておけば、ほとんどの場面をカバーできます。iPhone のホーム画面用に 180px の apple-touch-icon も用意します。
- Q. Next.jsでfaviconを設定するには？
- App Router なら app フォルダに favicon.ico と apple-icon.png を置くだけで、自動で head にタグが入ります。
- Q. faviconが変わらないときは？
- ブラウザが古い favicon をキャッシュしています。強制再読み込みするか、しばらく待つと更新されます。