この記事に関連するツール
ブラウザ上ですぐに試せます。記事の内容を確認しながら使うと、作業の流れをつかみやすくなります。
はじめに
Webサイト制作に不可欠なfavicon（ファビコン）。最近は favicon.ico だけでなく、スマートフォン向けの Apple Touch Icon や様々なサイズの PNG など、用意すべき画像の種類が増えています。
これらを一つずつリサイズして書き出すのは非常に手間です。そこで、1枚の画像をアップロードするだけで、必要なアイコンセットを一括生成して ZIP ダウンロードできるツールを作りました。
https://devtoolkits.app/ja/tools/favicon-generator
どんなツール？
1024x1024 程度の大きな画像（PNG/JPG/WebP）をアップロードすると、標準的な favicon 構成に必要なファイルをすべて生成します。
特徴
- 📦 まとめて生成:
favicon.ico(16x16, 32x32 内包),apple-touch-icon.png(180x180), 各種 PNG (16x16, 32x32, 192x192, 512x512) を一挙に作成します。 - 🔒 ブラウザ完結で安全: 画像処理はすべて Canvas API 等を使用してブラウザ上で行われます。サーバーには一切保存されないため、ロゴなどの機密データでも安心です。
- ⚡ ZIPダウンロード: 生成された画像群を1つの ZIP ファイルにまとめてダウンロードできるため、すぐにプロジェクトに導入できます。
- 🖼️ 透明度維持: 元画像が透過 PNG であれば、透過を維持したまま各サイズに書き出します。
使い方
- ファビコン生成 を開きます。
- 正方形に近い（推奨）画像をドラッグ＆ドロップまたは選択します。
- プレビューで各サイズの状態を確認します。
- 「Download All as ZIP」ボタンを押して一式を保存します。
公開前に見るポイント
faviconは小さく表示されるため、元画像ではきれいに見えても、16x16では文字がつぶれることがあります。ロゴに細い文字や複雑な線が入っている場合は、背景色を足す、余白を広げる、シンボルだけにする、といった調整をしてから再生成すると見やすくなります。
導入後は、ブラウザのタブ、ブックマーク、スマホのホーム画面追加で見え方を確認します。既存サイトの差し替えではキャッシュが残ることもあるため、ファイル名やHTMLの参照先、manifest.webmanifest のアイコン指定も合わせて確認しておくと安心です。
<link rel="icon" href="/favicon.ico">
<link rel="apple-touch-icon" href="/apple-touch-icon.png">用意しておくと安心なファイル構成
主要ブラウザとモバイルに一通り対応するなら、次の構成を押さえておくと困りません。HTMLの <head> でそれぞれを参照します。
| ファイル | サイズ | 主な用途 |
|---|---|---|
favicon.ico | 16/32px内包 | ブラウザのタブ・ブックマーク（旧環境含む） |
apple-touch-icon.png | 180px | iOSのホーム画面追加 |
icon-192.png | 192px | Android・PWA |
icon-512.png | 512px | PWAスプラッシュ・高解像度 |
manifest.webmanifest | – | PWAのアイコン・テーマ定義 |
近年はSVGファビコン（<link rel="icon" type="image/svg+xml" href="/favicon.svg">）にも対応するブラウザが増え、1ファイルで高解像度に対応できます。ただしSVG非対応の環境向けに favicon.ico を併記しておくのが無難です。<meta name="theme-color"> を合わせて指定すると、モバイルのアドレスバーの色も整えられます。
おわりに
面倒なアイコン作成作業を数秒で終わらせて、本質的な開発・デザイン作業に集中しましょう！
よくある質問
faviconはどのサイズを用意すればいいですか？
最低限 favicon.ico（16x16・32x32を内包）と apple-touch-icon.png（180x180）があれば主要ブラウザとiOSに対応できます。PWAやAndroidのホーム画面対応まで含めるなら、192x192・512x512のPNGと manifest.webmanifest も用意します。このツールはこれらを一括生成します。
元画像はどんな形式・サイズが最適ですか？
1024x1024程度の正方形に近いPNG/JPG/WebPが推奨です。透過PNGなら透明度を維持したまま各サイズに書き出します。16x16では細部がつぶれるため、細い文字や複雑な線はシンボル化したり余白を足したりすると見やすくなります。
faviconを差し替えたのに反映されません
ブラウザはfaviconを強くキャッシュします。ファイル名を変える、HTMLの参照先と manifest.webmanifest のアイコン指定を確認する、スーパーリロードやキャッシュクリアを行う、といった対応で反映されることが多いです。
SVGファビコンだけでも大丈夫ですか？
最近の主要ブラウザはSVGファビコンに対応しており、1ファイルで高解像度に対応できる利点があります。ただし古い環境やiOSのホーム画面では使えないことがあるため、favicon.ico と apple-touch-icon.png を併記しておくのが安全です。このツールはこれらのラスター画像を一括生成するので、SVGと組み合わせて両対応にできます。
おすすめリソース
このセクションにはアフィリエイトリンクが含まれる場合があります。リンク経由で購入すると、追加費用なしでDevToolKits.appが紹介料を受け取ることがあります。
