1枚の画像からfavicon一式をブラウザだけで生成できるツール

favicon.icoやApple Touch Icon、各解像度のPNG画像をブラウザ完結で一括生成できるツールの紹介です。

この記事に関連するツール

ブラウザ上ですぐに試せます。記事の内容を確認しながら使うと、作業の流れをつかみやすくなります。

Webサイト制作に不可欠なfavicon（ファビコン）。最近は favicon.ico だけでなく、スマートフォン向けの Apple Touch Icon や様々なサイズの PNG など、用意すべき画像の種類が増えています。

これらを一つずつリサイズして書き出すのは非常に手間です。そこで、1枚の画像をアップロードするだけで、必要なアイコンセットを一括生成して ZIP ダウンロードできるツールを作りました。

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 であれば、透過を維持したまま各サイズに書き出します。

faviconは小さく表示されるため、元画像ではきれいに見えても、16x16では文字がつぶれることがあります。ロゴに細い文字や複雑な線が入っている場合は、背景色を足す、余白を広げる、シンボルだけにする、といった調整をしてから再生成すると見やすくなります。

導入後は、ブラウザのタブ、ブックマーク、スマホのホーム画面追加で見え方を確認します。既存サイトの差し替えではキャッシュが残ることもあるため、ファイル名やHTMLの参照先、manifest.webmanifest のアイコン指定も合わせて確認しておくと安心です。

<link rel="icon" href="/favicon.ico">
<link rel="apple-touch-icon" href="/apple-touch-icon.png">

面倒なアイコン作成作業を数秒で終わらせて、本質的な開発・デザイン作業に集中しましょう！