ファビコン作成ツール

使い方

1. 「画像から」か「文字・絵文字から」を選びます
2. 画像なら、ロゴなどの画像をドロップするか、クリックして選びます。文字なら、1〜2文字の文字や絵文字を入れ、文字の色・書体・太字を選びます
3. 「デザイン」で形（四角・角丸・円）、背景色、余白を決めます。背景を透明にもできます。正方形でない画像は「全体を収める」か「中央を切り抜く」を選べます
4. 「見え方」で、ブラウザのタブ（ライト・ダーク）、実際の大きさ、iPhone と Android のホーム画面での見え方を確かめます
5. 「サイトの情報」にサイト名・テーマカラー・ファイルを置く場所を入れます。site.webmanifest と HTML のタグに使います
6. 「まとめてZIPで保存」を押すか、ファイルを1つずつ保存します。サイトの情報を変えたら、保存し直してください
7. HTML のタグ（または Next.js での置き場所）をコピーして貼り付けます

設定を変えると、すぐにすべてのファイルが作り直されます。画像と文字はブラウザの外へ送信されず、保存もされません。

作られるファイル

• favicon.ico: 16・32・48px の3つの大きさを1つにまとめたアイコンです。ブラウザのタブ、ブックマーク、Windows のショートカットで使われます。古いブラウザやツールも読めるよう、中身は32ビットのビットマップ（透明度つき）にしています
• favicon-16x16.png・favicon-32x32.png: タブ用の PNG です。高解像度の画面では32pxが使われます
• apple-touch-icon.png（180×180px）: iPhone・iPad で「ホーム画面に追加」したときのアイコンです。角は iOS が自動で丸めるので、四角いまま背景を塗りつぶして作ります
• android-chrome-192x192.png・android-chrome-512x512.png: Android のホーム画面や、PWA としてインストールしたときのアイコンです
• maskable-icon-512x512.png: Android が円や角丸の形に切り抜いても欠けないよう、中身を中央の安全な範囲（直径80%の円）に収めたアイコンです
• site.webmanifest: サイト名、アイコン、テーマカラーを書いたファイルです
• favicon.svg: SVG の画像から作ったときだけ作られます。どの大きさでもくっきり表示されます

具体例

ファイルをサイトのトップ（/）に置き、サイト名を「サンプル工房」、背景色を #2563eb にしたとき、HTML の <head> に貼るタグは次のとおりです。

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

「ファイルを置く場所」に /icons/ と入れると、タグと site.webmanifest のパスが /icons/favicon.ico のように変わります。

きれいに仕上げるコツ

• 元の画像: 正方形で512px以上の画像がおすすめです。小さい画像から作ると、180・192・512px のアイコンが引き伸ばされて粗くなるので、注意を出します。SVG ならどの大きさでもくっきり描けます
• 16pxで読めるか: 「16px を4倍に拡大」で確かめます。細い線や小さな文字は消えやすいので、ロゴの一部（頭文字やマーク）だけにするか、余白を減らします
• 透明の背景: ダークモードのタブでは、黒っぽいロゴが見えにくくなります。「ブラウザのタブ（ダーク）」で確かめ、見えにくければ背景色を付けます
• 縮小のしかた: 大きな画像は半分ずつ段階的に縮めてから最後の大きさにするので、一気に縮めるよりも細い線が残ります

Next.js で使うとき

「貼り付け方」で「Next.js（App Router）」を選ぶと、ファイルの置き場所が出ます。app/favicon.ico、app/icon.svg、app/apple-icon.png のように決まった名前で app/ に置くと、Next.js が <link> タグを自動で出力します。site.webmanifest は app/manifest.webmanifest として置き、Android 用の PNG は public/ に置きます。テーマカラーは app/layout.tsx の viewport で指定します。

FAQ

favicon.ico と PNG のどちらが必要ですか？

今のブラウザはどちらも読めますが、両方置くのが確実です。ブラウザは <link> タグが無くてもサイトのトップの /favicon.ico を探しにいき、PDF を開いたときやフィードリーダーなども favicon.ico を使います。PNG は大きさごとに用意できるので、タブでは32pxの PNG がくっきり表示されます。

ファビコンを変えたのに表示が変わりません。

ブラウザはファビコンを長くキャッシュします。ページを再読み込みしても変わらないときは、ブラウザのキャッシュを消すか、ファイル名やパスに ?v=2 を付けて読み込み直させます。Google の検索結果のファビコンは、Google がサイトを再びクロールするまで変わらず、数日から数週間かかることがあります。

Google の検索結果にもファビコンを出したいです。

トップページの <head> に rel="icon" か rel="apple-touch-icon" のタグを入れ、正方形の画像を使います。Google は 8×8px 以上を必須とし、48×48px より大きい画像をすすめています。作られる favicon.ico（48px を含む）と apple-touch-icon（180px）はこの条件を満たします。Google は SVG を対象の形式に挙げていないので、SVG だけにせず PNG や ICO も置きます。

マスカブルアイコンとは何ですか？

Android は機種によって、アプリのアイコンを円・角丸の四角・しずく形などに切り抜きます。マスカブルアイコンは、どの形に切り抜いても大事な部分が欠けないよう、中央の直径80%の円の中に中身を収め、周りを背景色で塗ったアイコンです。site.webmanifest に "purpose": "maskable" として書いています。

背景を透明にしたのに、iPhone 用のアイコンには色が付いています。

iPhone のホーム画面のアイコンは透明にできず、透明の部分は黒く表示されます。そのため、apple-touch-icon とマスカブルアイコンだけは「Apple・Android用の背景色」で塗りつぶします。タブ用の favicon.ico と PNG は透明のままです。

文字から作ったアイコンの書体を指定できますか？

ゴシック・明朝・等幅から選べます。文字はこの端末にある書体で描くので、Mac と Windows では形が少し変わります。作った PNG と ICO は画像なので、サイトを見る人の端末には左右されません。

ファイル名を変えてもよいですか？

かまいません。ただし <link> タグや site.webmanifest に書いたパスも同じ名前に直してください。favicon.ico だけは、ブラウザがタグを見ずに探しにいくことがあるので、この名前のままサイトのトップに置くのがおすすめです。