テキストのモノグラム
1〜3文字（例: **Co**、**C**、**JS**）を入力し、ブランドカラーを選び、iOSに馴染むシルエットの**ラウンド**を選びます。
モノグラムは細部を省く余地がない分、16pxでもっとも読みやすい形になります。太字の大文字1文字、または密度のある2文字の組み合わせを使い、文字色と背景色のコントラストを高く保ちましょう。
ファビコンジェネレーター
画像・テキスト・絵文字からファビコンを生成 — 全サイズと貼り付け用 HTML 付き。
最終更新
ソース
#5B8DEF#FFFFFFプレビューブラウザタブ、ブックマーク、iOS、Android
16px
32px
48px
64px
180px
favicon.ico · 16/32/48px PNG · 180px Apple touch · 192/512 PWA · manifest · HTML
<head> に貼り付けるHTML
<link rel="icon" href="/favicon.ico" sizes="any" /> <link rel="icon" type="image/png" sizes="32x32" href="/favicon-32x32.png" /> <link rel="icon" type="image/png" sizes="16x16" href="/favicon-16x16.png" /> <link rel="apple-touch-icon" sizes="180x180" href="/apple-touch-icon.png" /> <link rel="manifest" href="/site.webmanifest" /> <meta name="application-name" content="Coddy" />
ファビコンジェネレーターとは？
*ファビコン*とは、ブラウザのタブ、ブックマーク、履歴一覧、そしてiOS / Androidのホーム画面に追加されたときに表示される小さなアイコンのことです。小さなものですが、プロジェクトの印象に与える影響は意外と大きく、きちんとしたファビコンを用意するかどうかで、未完成の四角いプレースホルダなのか、完成されたプロダクトなのかという印象が変わってきます。
最近のブラウザは、いくつもの異なるサイズと形式でファビコンを要求してきます。タブやブックマーク用には16×16や32×32のPNG、iOS Safariには180×180の apple-touch-icon.png、Androidの「ホーム画面に追加」にはWebマニフェスト内で192×192と512×512、古いブラウザや一部の連携先には今でもマルチ解像度の favicon.ico が必要です。これらを一つひとつ手作業で切り出すのは骨が折れますが、ファビコンジェネレーターを使えばワンクリックで完了します。
このジェネレーターは完全にブラウザ内で動作します。アップロードした画像はローカルで <canvas> にデコードされ、各サイズの出力もその横でレンダリングされ、最後にPNG・ICO・Webマニフェスト・README・HTMLスニペットの一式が .zip にまとめられます。アップロードは一切発生しません。
使いながら身につくこと
- ブラウザは**複数**のファビコンサイズを要求します — 「唯一正解」のファビコン画像というものは、もはや存在しません。
favicon.icoは複数のサイズ（16・32・48）を1ファイルに束ねられるコンテナ形式なので、レガシーな呼び出し元でも必要な解像度を見つけられます。- iOS SafariとAndroid Chromeは*別々*のアイコンURL（
apple-touch-icon.pngとmanifest.webmanifestのエントリ）を使うので、両方を用意するのが正解です。
ファビコン生成の手順
ソースモードを選ぶ
1〜3文字のモノグラムなら**テキスト**、1文字アイコンなら**絵文字**、PNG / JPEG / SVGを使うなら**画像**を選びます。すでにロゴがある場合は画像モードから始めるのがおすすめです。
色と形を決める
背景色（モノグラムの場合は文字色も）を選びます。**スクエア**、**ラウンド**、**サークル**のいずれかを選択しましょう。ラウンドはiOSがホーム画面アイコンをクリップする形に合うので、ネイティブに馴染んで見えます。
サイト名を入力する
サイト名は
application-nameメタタグと、PWAのmanifest.webmanifestの short_name として使われます。ブラウザのブックマークでユーザーが目にするブランド名を入力しましょう。すべてのサイズをプレビューする
プレビュー行を見て、16pxや32px（タブで使われるサイズ）でもアイコンが読み取れるか確認します。そのサイズで判読しにくくなる場合は、文字数を減らしたりクロップを詰めたりして、ソースを単純化しましょう。
バンドルをダウンロードしてHTMLを貼り付ける
**ファビコンバンドルをダウンロード（.zip）**をクリックすると、すべての出力ファイルが一度に手に入ります。サイトのルートに配置し、HTMLスニペットを
<head>に貼り付ければ完了です。
バンドルに含まれるファイル
ダウンロードには以下のファイルが含まれます。HTMLスニペットがそれらを配線してくれるので、必要なものだけ残してサポートするプラットフォームに合わせて使うこともできます。
| ファイル | サイズ | 用途 | メモ |
|---|---|---|---|
favicon.ico | 16, 32, 48 | ブラウザのタブ（レガシー向けのフォールバック） | マルチ解像度のICOコンテナ — 今でもすべてのブラウザがこのURLにリクエストします。 |
favicon-16x16.png | 16×16 | ブラウザのタブアイコン | <link rel="icon" sizes="16x16"> 経由で高DPIディスプレイ向けに利用されます。 |
favicon-32x32.png | 32×32 | ブラウザのタブ + ブックマーク | Retinaディスプレイでメインに使われるタブアイコンです。 |
favicon-48x48.png | 48×48 | Windowsのサイトタイル、タスクバー | レガシー呼び出し元のために favicon.ico にも内包されています。 |
apple-touch-icon.png | 180×180 | iOS Safariの「ホーム画面に追加」 | 未指定だとiOSはページのスクリーンショットでフォールバックします — 必ず同梱しましょう。 |
android-chrome-192x192.png | 192×192 | Androidのホーム画面 | manifest.webmanifest から参照されます。 |
android-chrome-512x512.png | 512×512 | PWAのインストール案内 + スプラッシュ | インストール可能なPWAには必須です。 |
site.webmanifest | — | PWAインストール用メタデータ | アイコン、名称、テーマカラーを記述します。<link rel="manifest"> で読み込みます。 |
試してみたいファビコンのアイデア
絵文字のショートカット
プロジェクトの雰囲気に合った絵文字を選びましょう — ローンチなら🚀、実験なら🧪、ドキュメントなら📚です。背景はニュートラルな色に設定します。
絵文字ファビコンは個人サイト、ハッカソン、サイドプロジェクトに親しみやすい雰囲気を添えてくれます。同じ絵文字でもmacOS（Apple）とWindows（Segoe）では見た目が違うので、エクスポートするとプレビューで見えていたmacOS / Linux / Chromeのレンダリングがそのまま固定される点を覚えておきましょう。
ロゴ画像
ロゴのPNGまたはSVGをドロップし、**Padding**スライダーを上げてアートワークが縁に触れないようにします。ロゴに透過部分がある場合は**Fill the background color**もオンにしましょう。
SVG入力はどのサイズでも鮮明にレンダリングされます。PNG入力も使えますが、ネイティブ解像度を超えるとぼやけてしまうので、最低でも512×512以上のソースから始めましょう。
ファビコンでよくあるミス
- 16×16のPNGだけを用意して、Retinaディスプレイでも綺麗に表示されると思い込むこと。最近のデバイスはタブアイコンを32pxや48pxでレンダリングするので、16pxのソースはぼやけた塊にしか見えなくなります。
apple-touch-icon.pngを忘れてしまうこと。Apple touch iconが宣言されていないと、iOSはページのスクリーンショットにフォールバックします。だいたい残念な見た目になります。- ファビコンファイルをサブディレクトリに置いて、
<link rel="icon" href="/images/favicon.ico">でリンクすること。これでも動作しますが、ブラウザはサイトルートの/favicon.icoも探しにいきます。ルートにもコピーを置くか、アクセスログの404を許容しましょう。
ファビコンジェネレーターのFAQ
ファビコンとは何ですか？
ファビコンとは、ブラウザがページタイトルの隣に表示する小さなアイコン — タブ、ブックマーク、履歴一覧、ホーム画面ショートカットなどに登場するもの — のことです。名前は*favorite icon*（お気に入りアイコン）の略で、初代のInternet Explorer 5がブックマーク用に導入したのが始まりです。
2026年時点で本当に必要なファビコンサイズは？
最低限必要なのは、マルチ解像度の
favicon.ico（16/32/48）、32×32のPNG、iOS向けの180×180 apple-touch-icon.png、そしてAndroidとインストール可能なPWAのために site.webmanifest で宣言する192×192と512×512のPNGです。このツールがダウンロードするバンドルにはすべて含まれています。ICO、PNG、SVGのどれを使うべき？
ブラウザはどれも
<link rel="icon" type="image/png"> 経由でPNGファビコンをサポートしています。レガシーな /favicon.ico URLにも全ブラウザが対応しています。SVGファビコンは最近のブラウザで使え、1ファイルでどのサイズでも鮮明に表示できます — ロゴがすでにベクター形式なら最適ですが、iOS SafariのためにPNGのフォールバックは引き続き必要です。ファビコンが更新されないのはなぜ？
ブラウザはファビコンを強くキャッシュします。新しいファイルをアップロードしたら、ハードリロード（
Cmd/Ctrl + Shift + R）、DevToolsからのサイトデータクリア、またはファビコンURLにクエリ文字列を付ける（/favicon.ico?v=2）方法を試しましょう。サイトの前段にCDNがある場合は、こちらでもパージが必要なのが普通です。Apple touch iconは必要ですか？
iOSユーザーがあなたのサイトをホーム画面に保存したときに、ページのサムネイルではなく本来のアイコンを表示したいなら、必要です。Apple touch iconは180×180で、
/apple-touch-icon.png に配置します。バンドルにも含まれています。画像はアップロードされますか？
アップロードされません。画像はブラウザ内で
<canvas> を使ってデコードされ、出力（PNG、ICO、ZIP、manifest）もすべてローカルで生成されます。端末から外に何も出ません。