サイトアイコンジェネレーター：プロンプト1つで全サイズの Favicon
サイトアイコンは3つの試験を同時に受けます。ブラウザタブでは16ピクセル、Google のモバイル検索結果では48ピクセルの倍数、iPhone のホーム画面では180ピクセル。欲しいマークを一度言葉にすれば、サイトアイコンジェネレーターがすべての favicon サイズへ変換し、1024px のマスター1枚から書き出します。
サイトアイコンとファビコンの制作例
実際のウェブサイト向けに生成したロゴマークです。フラット、ライン、グラス、ミニマルの各スタイルが512pxから16pxのブラウザタブまでシャープさを保ちます。
サイトアイコンを無限キャンバスで仕上げる
ファビコンの最終サイズは16px。細部がすべてを左右します。キャンバス上で生成・分岐し、ワンクリックで背景を除去。全サイズの書き出し前に、実際のタブ表示で候補を一つずつ確認できます。
視覚的系統樹 (Visual Lineage)
プロンプトの調整履歴やバリエーションをベジェ曲線で繋ぎ、質感や色彩の分岐を横並びで比較可能。
組み込みの後処理 (Post-Processing)
ワンクリック自動切り抜きに対応。Apple App Storeの透明背景禁止規約に準拠した単色塗りつぶしとカラー調整を完備。
セーフゾーン保護 (Safe Zone)
システムによるアイコン角の急激なクリッピングから重要グラフィックを守るスライダー式インナーパディング。
サイトアイコンのプロンプト例
どれかをサイトアイコンジェネレーターにコピーし、被写体・スタイル・色の言葉を自分のものに差し替えてください。良いサイトアイコンのプロンプトは3つのことを伝えます：被写体、スタイルと配色、そしてそのマークが16ピクセルでも読めること。
ミニマルなレターマーク
Minimal site icon for a developer blog, one bold letter P centered on a dark slate square, white mark with high contrast, readable at 16 px, flat style, no fine detail, no text besides the letter
親しみやすいショップマーク
Site icon for a plant shop, simple monstera leaf glyph centered, deep green on a cream background, soft rounded shapes, flat minimalist style, crisp edges that survive tiny sizes
ガラス調の SaaS favicon
Glassy site icon for a SaaS dashboard, abstract cube mark with a subtle highlight, blue gradient background, single clear silhouette, thick shapes, nothing that breaks below 32 px
3ステップでサイトアイコンを作る
1文から favicon 一式まで。リサイズはサイトアイコンジェネレーターが担い、画像エディタは開きません。
- 1
マークを言葉で描写する
被写体・スタイル・色を1文にまとめます。例："a flat compass mark, navy on white, site icon for a travel planner"。形の描写がシンプルなほど、AI は favicon に必要な輪郭の明瞭さに近づけます。
- 2
1024 マスターを生成し、縮小して確認
1024x1024 で生成したら、16 px と 32 px のプレビューを見てから判断します。タブこそアイコンの住処です。拡大時だけ映えるマークは、タブバーでは機能しません。
- 3
favicon 一式を書き出す
マルチサイズ ICO、180px の Apple タッチアイコン、192 と 512 の manifest PNG、そして最新の WEBP を一括書き出しし、サイトにアップロードするかリポジトリに置きます。
サイトアイコンのサイズとフォーマット一覧
ブラウザ、Apple、Android、Google 検索は、それぞれ別のファイルを取りに来ます。サイトアイコンジェネレーターはそのすべてを揃える必要があります。以下が現行の数字です。
| 表示場所 | 提出するもの | フォーマット規則 | 表示される場所 |
|---|---|---|---|
| ブラウザタブ | 16x16 と 32x32 px の PNG | 正方形。アイコンが埋める最小の表面だから、モチーフは1つ、強いコントラストを保つ | タブバーとウィンドウタイトル。Chrome は標準ディスプレイで 16 px、HiDPI で 32 px を使う |
| レガシーの favicon.ico | 16、32、48 px を収めたマルチサイズ ICO が1つ | サイトルートの /favicon.ico に置けば、link タグを読まないツールでも見つかる | 旧ブラウザ、フィードリーダー、ルートファイルを直接取りに来るクローラー |
| Google 検索結果 | 正方形のファイル。辺は 48 px の倍数：48、96、144 または 192 px | PNG、ICO、GIF、JPEG または SVG。クロール可能で、トップページの head で宣言され、サイトを視覚的に表現していること | モバイル検索結果のサイト名の横。サイズやブランドの規則を満たさないアイコンは外される |
| Apple タッチアイコン | 180x180 px の PNG | 透明を使わない完全な正方形。角丸は iOS が施し、そのままホーム画面に置かれる | iOS のホーム画面ショートカットとお気に入りブックマーク |
| Web manifest（PWA） | 192x192 と 512x512 px の PNG | web manifest に宣言。コンテンツはマスカブル・セーフエリアに収める。Android が独自の形に切り抜く | Android のインストール催促、ホーム画面アイコン、スプラッシュ画面 |
| SVG アイコン | 任意サイズの正方形 SVG が1つ | どんな表面でも鮮明に拡大縮小でき、prefers-color-scheme のダークモード版も持てる | 最新の Firefox、Chrome、Safari は宣言があればビットマップ favicon の代わりに使う |
サイズは Google の favicon ガイドラインと現在のブラウザ挙動に対照して確認済み（2026年9月時点）。
マークを描写し、タブサイズでプレビューし、上表の ICO・Apple タッチ・manifest・WEBP を一括で書き出します。
サイトアイコンジェネレーターを開く1枚のマスター、すべての表示先
上の表の各表示先は、同じマスターから別々のファイルを取りに来ます。手書きコードのサイトなら、head に必要なのは最大3行。<link rel="icon"> と <link rel="apple-touch-icon">、そして manifest へのリンクです。気に入ったロゴが既にあるなら、無料のアプリアイコンリサイザーで全サイズに切り分けられます。
16px のタブバー
サイトアイコンが埋める最も厳しい表面。1024px マスターは64分の1に縮み、ディテール豊富なロゴは崩れます。生き残るマークはモチーフ1つ、色は多くて2色、半分のピクセルが消えても見える太いストロークを持ります。
favicon.ico のフォールバック
1996年から使われ続けるフォーマット。link タグを無視するブラウザも、head を読まないクローラーも、今なおサイトルートの /favicon.ico を取りに来ます。そこにマルチサイズ ICO を1つ置くのが、最も安い互換性の保険です。
Google の 48px ルール
モバイル検索結果はサイト名の横に favicon を表示しますが、対象はガイドラインを満たすアイコンだけ。正方形、辺は 48px の倍数、トップページで宣言、クロール可能、ブランドを表現していること。32px しか出していなかったサイトは、表示が消えるのを見てきました。
CMS はコード不要
WordPress は favicon をサイトアイコンと呼び、サイト基本情報で 512x512 の正方形をアップロードすれば小さいサイズを自動で切り出します。Squarespace、Wix、Shopify も設定に favicon 欄があり、512px の書き出しをそのまま受け付けます。
サイトアイコンが実際に表示される場所
ブラウザタブが最も目立つ場所ですが、同じファイルはもっと遠くまで行きます。ブックマークバーや後で読むリスト、閲覧履歴ページ、新規タブのよく見るサイトのグリッド、Google モバイル結果の URL の上、iOS と Android のホーム画面ショートカット、インストール済み PWA のタスクスイッチャーまで。それぞれの表面はアイコンの切り抜き方も縮め方も違います。だから上の表があるのです。タブの 16 px で耐えるマークは、どこでも耐えます。逆は成り立ちません。
サイトアイコンを手に入れる3つの方法
サイトアイコンジェネレーターと favicon コンバーターは問題の別の半分を担います。コンバーターは既にあるアートワークを縮小し、AI ジェネレーターはアートワークそのものを作ります。
| AI サイトアイコンジェネレーター | Favicon コンバーター | デザイナー | |
|---|---|---|---|
| 起点 | プロンプト1つか参照画像1枚 | アップロードする既成の正方形ロゴ | ブリーフと複数回のレビュー |
| 得られるもの | 要望に合わせて生成されるオリジナルマーク | 既存アートワークを favicon ファイルに切り分けたもの | 手で仕上げたオリジナルアートワーク |
| 16 px での読みやすさ | タブバーで耐えるまで再生成できる | 最初のロゴの出来に依存 | 反復する時間があれば十分に良い |
| 一式の書き出し | マスター1枚からマルチサイズ ICO、Apple タッチ、manifest PNG、WEBP を書き出す | 多くのコンバーターの全機能がまさにこれ | 契約の範囲次第 |
| 納期 | 1コンセプト1分未満 | 数分 | 1ラウンドごとに数日 |
| コスト | 無料クレジットで開始、以降はバッチごとにクレジット | 無料 | プロジェクトごとに数百ドル〜 |
一般的なワークフローの比較。2026年9月に確認。
ジェネレーターが肩代わりすること
最初のプロンプトから、リポジトリや CMS フィールドに置けるファイルまで。サイトアイコンジェネレーターがその間のすべてを担います。
1024px マスターが1枚
高解像度は1度だけ生成。すべての favicon サイズはそこから縮小され、16 px でもにじみません。
そのまま使える favicon 書き出し
マルチサイズ ICO、180px の Apple タッチアイコン、192/512 の manifest PNG。画像エディタは不要です。
PNG・ICO・WEBP
各プラットフォームが求めるフォーマットをそのまま書き出します。軽量な最新 WEBP も含めて。
透過またはベタ塗りの背景
カスタムヘッダーのあるサイトには透過 PNG を。どんなタブの色やダークテーマにも耐えるベタ塗りも選べます。
バリエーションと履歴
同じコンセプトで方向性を再生成し、一式が出るまで全バージョンを保持します。
ブランド資産を参照
既存のロゴをアップロードして配色と形状の言語を引き寄せ、favicon をブランドシステムの残りと揃えます。
16 ピクセルを生き延びるサイトアイコンのスタイル
スタイルは、タブサイズまで縮めたときにデザインが何を残すかを決めます。サイトアイコンジェネレーターで2、3の候補を試して比べましょう。フラットとミニマルのマークが最も安定します。グラデーションや細線に頼らないからです。ガラス調のプリセットは、シルエットが1つの塊として太く保たれていれば機能します。3D スタイルは Apple タッチや manifest サイズで映え、輪郭が明確ならタブでも許容範囲です。ピクセルアートは、小さいキャンバスという制約そのものを美学に変えます。生成の前にアイコンスタイルギャラリーでアイコンサイズを比較しましょう。ミニマル、3D、ガラスの各ページに実際のマークが表示されています。
タブバーで生き延びるサイトアイコンのデザイン
favicon の問題のほとんどは、間違ったズームでデザインすることから始まります。4つの習慣でほぼ防げます。モチーフは1つに絞る。16 px で2つの形が張り合えば、それはノイズになるだけです。色数は2〜3色まで。アンチエイリアスが微妙なコントラストを削る速度は、思うより速いのです。ライトとダークの両方のブラウザテーマで試す。ダークなタブはダークなマークを飲み込みます。そして言葉をやめる。16 px で成立するのはアルファベット1文字までで、単語は絶対に収まりません。書き出してからではなく、決める前にタブサイズでプレビューしましょう。
このワークフローが合う場面
サイトアイコンジェネレーターが作ったマスター1枚を、サイト名の横に小さな正方形を置くすべての場面へ。
WordPress のサイトアイコン
サイトアイコン設定に 512x512 の書き出しファイルをアップロードすれば、小さいサイズも link タグも WordPress が自動で作ります。
Squarespace・Wix・Shopify
いずれもサイト設定に favicon（ブラウザアイコン）欄があり、512 px の書き出しファイルをそのまま受け付けます。
手書きコードのサイト
書き出したファイルをサイトルートに置き、link タグを一度足せば、ブラウザも検索結果もショートカットもカバーします。
PWA とウェブアプリ
192 と 512 のマスカブル書き出しは web manifest に直行。同じマスターがタブアイコンも供給します。
スタジオとクライアントワーク
プロジェクトごとに履歴を保持し、リブランドのたびに一式を再生成、すべてのサイトに一貫したアイコンセットを納品します。
サイドプロジェクトとポートフォリオ
無料クレジットで開始し、プロンプト 1 つで完全な favicon セットを作成。同じ晩にタブアイコンを公開できます。
関連ツール
ブログ
さらに読む
アイコンデザイン、サイズ、ワークフローについての読み応えのある記事。
サイトアイコンのよくある質問
サイズ、フォーマット、CMS へのアップロードなど、favicon について実際によく聞かれる質問。
サイトアイコンのサイズはいくつにすべきですか？
1024x1024 でデザインし、そこから書き出します。ブラウザタブに 16 と 32 px、Google 検索結果に 48 px の倍数の正方形、Apple タッチアイコンに 180x180、web manifest に 192 と 512 px。サイトアイコンジェネレーターは 1024 のマスター1枚からすべてを書き出します。どのサイズもきれいな縮小で済むからです。
サイトアイコンをウェブサイトに追加するには？
ファイルをサイトルートにアップロードし、トップページの head で宣言します。ICO・SVG・PNG を指す <link rel="icon">、180 px ファイルの <link rel="apple-touch-icon">、PWA サイズを出すなら manifest へのリンクの3行です。WordPress、Squarespace、Wix、Shopify なら、サイト設定でアイコンをアップロードするだけで、プラットフォームがすべてのタグを書いてくれます。
favicon が Google の検索結果に表示されないのはなぜですか？
Google はガイドラインを満たす favicon だけを表示します。正方形のファイルで辺が 48 px の倍数、トップページの head で宣言、安定してクロール可能な URL、robots.txt によるブロックなし、そしてサイトを視覚的に表現していること。32 px しかないアイコンはサイズ規則を満たしません。ファイルを修正しても、Google が再クロールするまで数日かかります。
サイトアイコン・favicon・アプリアイコンの違いは？
favicon とサイトアイコンは同じものの別名です。タブ、ブックマーク、検索結果でサイトを表す小さな正方形のこと。サイトアイコンは WordPress での呼び方です。アプリアイコンはホーム画面とストア用の大きな素材で、独自の仕様があります。詳しくはモバイルアプリケーションアイコンのガイドをどうぞ。
favicon に透明な背景は使えますか？
使えます。手書きサイトの第一選択は透過 PNG や ICO です。ただし公開前にダークテーマで確認を。暗いマークは暗いタブバーに消えます。Apple タッチアイコンは不透明にしてください。iOS は透明部分を黒で埋めます。
ICO・PNG・SVG、どのフォーマットを使うべき？
現在の最小セットは3ファイルです。/favicon.ico に置くマルチサイズ ICO（フォールバック）、モダンブラウザ用の正方形 SVG、Apple 端末用の 180x180 PNG。PWA としてインストールされるなら、web manifest に 192 と 512 px の PNG を加えます。それ以上は冗長です。
WordPress のサイトアイコンを変更するには？
外観 → カスタマイズ → サイト基本情報を開き、512x512 px 以上の正方形画像をアップロードします。WordPress が自動でトリミングし、すべての小さいサイズと link タグを生成します。上のツールで 512 px ファイルを生成してアップロードすれば、キャッシュが切れた後にタブアイコンが更新されます。
生成したサイトアイコンの権利は？
あなたのものです。作成したすべてのアイコンの商用利用の権利を保持します（利用規約の定める範囲内）。クライアントサイトや商用サイトに載せる favicon もカバーされます。