Favicon ジェネレーター

Favicon ジェネレーターとは？#

favicon とは、ブラウザのタブ、ブックマークリスト、スマートフォンの「ホーム画面に追加」プレビュー、Windows タイルなどに表示される小さなアイコンです。厄介なのは、「favicon」が 1 つのファイルではないことです。プラットフォームごとに異なるサイズとファイル名を要求します。デスクトップブラウザは古典的な favicon.ico を、iOS は 180×180 の apple-touch-icon.png を、インストール可能な PWA は site.webmanifest に 192 と 512 を、そしてモダンブラウザは単体の PNG も拾い上げます。これらを手作業で生成し、さらに配線用の <head> タグを揃えるのは、二度と手作業でやるべきではない類の細かい作業です。

本ページは、単一のソースから完全なセットを生成します。指定した画像か、単色背景上の文字（「頭文字」のブランドマークとして手軽）のいずれかを使います。必要なサイズを選ぶと、すべてを 1 つの .zip にまとめます — マルチイメージ ICO、単体 PNG、webmanifest、そして貼り付けに使う <link> と <meta> タグを正確に列挙した HTML スニペットです。すべてのラスタライズはブラウザ内で行われます。

使い方#

1. ソース を選びます。
   • 画像 — 概ね正方形の画像をドラッグ（または選択）。各選択サイズに描き込まれます。
   • 文字 — 1〜2 文字を入力（既定 A）し、背景色（既定はスカイブルー）と 文字色（既定は白）を選びます。文字は全サイズで背景の中央に配置されます。
2. 必要な サイズ にチェックを入れます（16, 32, 48, 180, 192, 512）。既定で 6 つすべてがオンです。48 は favicon.ico 内にしか存在しない（単体 PNG は無い）ため、16 と 32 がオンなら自動的に同梱されます。
3. プレビュー キャンバスを確認します。選択された最大サイズが、透過チェックボード上に描画されるため、透過部分も分かります。
4. .zip をダウンロード をクリックします。既定の全サイズ選択では、アーカイブに次のものが含まれます。
   • favicon.ico — 16、32、48 を埋め込み PNG として同梱したマルチイメージ ICO（Vista 以降の形式で、モダンブラウザはすべて受け付けます）。
   • favicon-16x16.png、favicon-32x32.png — 単体 PNG。
   • apple-touch-icon.png — 180×180 の iOS アイコン。
   • android-chrome-192x192.png、android-chrome-512x512.png — PWA マニフェストアイコン。
   • site.webmanifest — 192/512 アイコンを参照し、テーマ色と背景色を含みます。
   • html-snippet.html — <link rel="icon">、<link rel="apple-touch-icon">、<link rel="manifest">、<meta name="theme-color"> タグ。
5. サイトルートに展開し、スニペットを <head> に貼り付けると、アイコンが / から解決されます。

主な機能#

• 1 つの zip に、慣習的な名前の完全なセット。 ファイル名（favicon.ico、apple-touch-icon.png、android-chrome-512x512.png、site.webmanifest）は、ブラウザやビルドツールがサイトルートで既定で探すものと一致します。
• 自作の ICO エンコーダ。 ゼロから書かれた本格的なマルチイメージ Vista+ ICO（ICONDIR + ICDIRENTRY テーブル + 埋め込み PNG ペイロード）であり、32×32 単体のスタブではありません。
• 瞬時にブランドマークを作れる文字モード。 2 文字、2 つのカラーピッカー、それだけ。30 秒で認識可能なアイコンが必要な内部ツールやデモに便利です。
• 本当に必要なファイルだけ。 サイズのチェックを外すと、その PNG もマニフェストのエントリも出力されず、HTML スニペットもそれに合わせて再生成されます。
• 貼り付け即効の head スニペット。 存在するアセットのみに絞った <link> と <meta> 行が正確に出力されるため、生成していないファイルへの参照を貼り付けることはありません。
• 100% ローカル。 ソース画像も文字もブラウザ内でラスタライズされ、zip もブラウザ内で組み立てられます。アップロードはありません。

実例#

“Glide” というサイドプロジェクトの favicon が欲しいとします。ソース: 文字 を選び、G と入力、背景色 を #0ea5e9、文字色 を #ffffff にし、6 サイズすべてにチェックを入れたまま .zip をダウンロード をクリックします。展開すると次が得られます。

favicon.ico
favicon-16x16.png
favicon-32x32.png
apple-touch-icon.png
android-chrome-192x192.png
android-chrome-512x512.png
site.webmanifest
html-snippet.html

html-snippet.html には次が正確に含まれます。

<link rel="icon" href="/favicon.ico" sizes="any">
<link rel="icon" type="image/png" sizes="16x16" href="/favicon-16x16.png">
<link rel="icon" type="image/png" sizes="32x32" href="/favicon-32x32.png">
<link rel="apple-touch-icon" sizes="180" href="/apple-touch-icon.png">
<link rel="manifest" href="/site.webmanifest">
<meta name="theme-color" content="#0ea5e9">

この 8 つのファイルをサイトルートに置き、6 行を <head> に貼り付ければ、ブラウザのタブ、iOS ホーム画面、Android PWA のいずれでも適切なアイコンが解決されます。

よくある質問#

48×48 の単体 PNG がないのはなぜですか？#

48 は favicon.ico 内でしか消費されないためです（一部のレガシーツールは ICO の 48 エントリを読みます）。単体の favicon-48x48.png を出力しても、ブラウザが取得しない無駄なファイルになるだけです。そのため、本ツールは 48 を ICO に同梱し、単体ファイルはスキップします。

6 サイズすべてが本当に必要ですか？#

完全なカバーが目標なら、はい。ブラウザのタブだけを気にし、iOS や PWA は不要なら、180、192、512 のチェックを外せば、ICO と 16/32 の PNG だけの、はるかに小さなバンドルが得られます。スニペットには icon リンクだけが含まれ、マニフェストや apple-touch の行は入りません。

ICO が「埋め込み PNG」と説明されているのは正しいのですか？#

はい。Windows Vista 以降、ICO は（古い BMP 形式ではなく）PNG ペイロードを埋め込め、モダンブラウザはすべてこの形式を読みます。別途 BMP エンコーダが不要になり、48 サイズではより小さなファイルが得られます。

文字が一部のサイズで中央からずれているように見えます。#

文字はすべてのサイズで一貫したフォントを使ってキャンバスの中央に配置されますが、M のような四角い文字や、上行・下行を持つ文字は、フォントメトリクスの関係でわずかに高く、あるいは低く見えることがあります。ピクセル単位の完全な中央寄せが重要なら、画像エディタでマークを描き、ソース: 画像 を使ってください。