ファビコン一括生成ツール
ICO・PNG全サイズ・PWAアイコン・manifest.jsonをまとめて生成。
全サイズプレビュー
画像をアップロードするとプレビューが表示されます
ダウンロード
ファビコンとは
ファビコン（favicon = favorite icon）とは、ブラウザのタブ・ブックマーク・スマートフォンのホーム画面などに表示される小さなアイコンです。 Webサイトのブランドを視覚的に識別するための重要な要素であり、ユーザーが複数のタブを開いている際に 目的のサイトを素早く見つけるための手がかりになります。 PWA（Progressive Web App）ではホーム画面に追加した際のアプリアイコンとしても使われます。
必要なファイル形式とサイズ一覧
| ファイル | サイズ | 用途 | 必須度 |
|---|---|---|---|
| favicon.ico | 16×16, 32×32 | ブラウザタブ（レガシー） | 必須 |
| favicon-32x32.png | 32×32 | モダンブラウザのタブ | 必須 |
| apple-touch-icon.png | 180×180 | iOS ホーム画面 | 必須 |
| icon-192x192.png | 192×192 | Android / PWA | 推奨 |
| icon-512x512.png | 512×512 | PWA スプラッシュ | 推奨 |
このツールでは上記の全サイズを1枚の画像から一括生成し、manifest.json と一緒にZIPでダウンロードできます。
設置方法
Next.js（App Router）の場合
生成した画像を public/ フォルダに配置し、app/layout.tsx の metadata に icons 設定を追加します。 または app/icon.tsx / app/apple-icon.tsx で動的生成も可能です。
通常のHTML の場合
ダウンロードしたHTMLスニペットをコピーして <head> タグ内に貼り付け、 画像ファイルをルートディレクトリに配置してください。
WordPress の場合
「外観」→「カスタマイズ」→「サイト基本情報」→「サイトアイコン」から512×512pxの画像をアップロードすれば、 WordPressが自動的に各サイズを生成します。より細かくコントロールしたい場合は、 このツールで生成したファイルをテーマの header.php に追加してください。
ファビコン作成のコツ
- シンプルなデザイン — 16×16pxでも視認できるよう、 細かいディテールは避けてシンプルな形状・配色にしましょう
- ブランドカラーを使う — サイトのメインカラーと合わせることで、 多数のタブの中でもすぐに見つけられます
- SVG元画像が最適 — ベクター形式のSVGから生成すると、 どのサイズでもシャープな仕上がりになります。512×512px以上のPNGでもOKです
- ダークモード対応 — 最近のブラウザはダークモードのタブバーを使用するため、 背景が暗くても見えるデザインにしておくと安心です
よくある質問
サイト公開に必要なものPR