01
手元でいちばん大きく正方形に近い画像から始める
SVGか512px以上の正方形PNGがもっともきれいに仕上がります。正方形でない画像は切り抜かずに中央へ配置し、512px未満のラスター画像は実際のサイズを添えて警告します。512pxのAndroid用アイコンが拡大になるためです。
- スクリーンショットやコピーした画像はCtrl/Cmd+Vでそのまま貼り付けられます。
- .icoをドロップすると、中でいちばん大きい画像が元画像になります。
画像・SVG・アイコン
ファビコン作成1枚の画像から全サイズ
ロゴか既存の.icoを入れて16pxのタブ表示を確認し、パッケージごとダウンロードします。
ファビコン作成ツール
元画像
PNG・JPG・WebP・GIF・SVG・ICOファイルをここにドロップするか、クリップボードの画像を貼り付けてください。
画像はこのブラウザタブ内で読み込み・縮小され、アップロードされません。
パッケージのプレビュー
画像を選択・ドロップ・貼り付けすると始まります。
画像を選択・ドロップ・貼り付けすると始まります。
サイト公開、ロゴ変更、Lighthouseの指摘。どれも最後は「ロゴは1枚あるのに、サイズ違いのアイコンが6種類とlinkタグが要る」という作業に行き着きます。このファビコン作成ツールは1枚の元画像から現行のファイル一式をまとめて作るので、画像編集ソフトで同じ画像を何度も縮小する必要はありません。
逆方向にも使えます。引き継いだサイトのfavicon.icoをドロップすれば、中に保存されているサイズを一覧し、1枚ずつPNGとして保存でき、いちばん大きい画像を元に足りないAppleやAndroid用アイコンも作れます。
このファビコン作成ツールを使う理由
今のブラウザとスマートフォンが実際に読むファイルだけを作り、使われなくなったサイズは出しません。
1枚の元画像から現行の一式
複数サイズのfavicon.ico、16pxと32pxのPNG、180pxのapple-touch-icon、192pxと512pxのAndroid用アイコン、site.webmanifestを同じ画像から作ります。HTMLタグは入力した実際のパスで出力されるので、/static/配下のサイトでも6か所を手で直す必要はありません。
ICOを開いて中身を確認
既存のfavicon.icoをドロップすると、埋め込まれた画像ごとに実際の寸法、ビット深度、PNGかBMPか、バイト数を一覧します。1枚ずつPNGで保存することも、まとめてZIPにすることもでき、ICO変換のために別のサイトを探す必要はありません。
iPhoneのホーム画面で黒背景にならない
iOSは透明なタッチアイコンを黒で塗ります。そのためapple-touch-iconは常に背景色で塗りつぶし、角丸もiOS側のマスクに任せて四角のまま出力します。ブラウザ用のアイコンは透明を保ちます。
仕上がりを左右する3つのポイント
02
大きなプレビューより16pxのタブで判断する
変更のたびに約300ms後に自動で再生成します。ライト・ダーク2種類のタブ表示と4倍拡大を見てください。細い線や小さな文字は16pxではほぼ消えます。横長のロゴは少し余白を付けると見やすくなり、角丸はブラウザ用とAndroid用にだけ効きます。
- 「自動生成」をオフにすると手動になり、Ctrl/Cmd+Enterで生成できます。
- 256pxのデスクトップショートカットが要らなければ、ICOは16・32・48のままで十分です。
03
HTMLをコピーする前にパスを決める
サイト上のパスはすべてのlinkタグとmanifestのアイコンsrcに書き込まれます。/assets/icons/に置くならまずそれを入力し、ZIPをダウンロードしてからHTMLを各ページのheadに貼り付けます。
- アプリ名が空欄なら、manifestには空文字ではなく項目ごと出力しません。
- クリアや画像の差し替えのあとは「元に戻す」で1回だけ前の状態に戻せます。
パッケージの中身と確認できること
現行のファイル一式をフラットなZIPで
favicon.ico、favicon-16x16.png、favicon-32x32.png、apple-touch-icon.png、android-chrome-192x192.png、android-chrome-512x512.png、site.webmanifest。元画像がSVGならfavicon.svgも加わります。すべてZIPの最上位にあるので、そのままトップページと同じ場所に置けます。
ICOのサイズを選べる
16・24・32・48・64・128・256pxを自由に組み合わせられ、中身はPNGデータで保存するので現行のブラウザとWindowsで読めます。Favicon作成だけでなく、PNGからのICO変換にも使えます。
サイズを数字で確認
元画像の形式は拡張子ではなく中身で判定し、警告には実際の幅と高さを表示します。SVGは劣化せずに拡大できるので「小さすぎる」とは判定しません。
HTMLタグとmanifestが食い違わない
linkタグ、theme-colorのmeta、manifestのアイコン一覧は同じパスと色から作るので、ZIPにないファイルをHTMLが指すことはありません。
作らないものとその理由
- URLからの取得や公開中サイトのチェックはしない
- ネットワークには一切リクエストしないため、既存サイトのアイコンの取り込みや公開済みサイトの診断はできません。ファイルを保存してからドロップしてください。
- 役目を終えたプラットフォーム向けファイルは作らない
- Windowsタイル画像とbrowserconfig.xml、Safariのmask-icon、57〜152pxの旧Appleサイズは出力しません。現在のEdge・Safari・iOSはこのパッケージのファイルを使います。
- マスカブルアイコンはまだ未対応
- manifestのアイコンにpurposeは付けません。Androidは外周の約5分の1を切り取るので、マスカブルアイコンにはセーフゾーンのプレビューが必要です。誤った指定は指定しないより悪い結果になります。
- 縮小して収めるだけで、切り抜かない
- 元画像は余白を取った正方形に収まるよう縮小して中央に置きます。切り抜き枠はないので、被写体が中央にない場合は先にトリミングしてください。
- SVGはコピーするだけで描き直さない
- favicon.svgは元のファイルそのものです。余白・角丸・背景はPNGとICOにだけ反映され、ダークモード用の自動生成もありません。
- 出力するICOはPNG形式
- 旧形式のBMPや256色のICO画像は読み込みと抽出ができますが、新しく作るICOは常にPNGデータです。アニメーションGIFは最初のフレームだけを使います。
- 入力の上限
- 元画像は20MB・一辺8192pxまで、ICOファイルは10MB・画像64枚までです。アプリ名は60文字までです。
ファビコン作成のよくある質問
ファビコンのサイズは何pxにすればいい？
今のブラウザとスマートフォン向けには、16・32・48pxを含むfavicon.ico、16pxと32pxのPNG、180pxのapple-touch-icon、site.webmanifestに記載する192pxと512pxのアイコンです。このページのファビコン作成でZIPに入るのがちょうどこの組み合わせです。
ICOとPNGのどちらで作ればいい？
両方用意するのが確実です。ICOは/favicon.icoを直接取りに来る古いブラウザやクローラー向け、PNGとSVGは現行ブラウザ向けです。このツールはファビコン生成の段階で両方を同じ元画像から作ります。
ファビコンはHTMLでどう設定する？
ZIPのファイルを入力したパスにアップロードし、コピーしたHTMLを全ページのheadに貼り付けます。manifestへのlinkとtheme-colorのmetaも含まれているので、ほかに書き足すものはありません。
ファビコンを丸型にできる？
角丸を50%にすると円形になります。ただしブラウザ用とAndroid用のアイコンだけで、apple-touch-iconはiOSが自分で角を丸めるため四角のまま出力します。
画像はサーバーに送信される？
送信されません。読み込み・縮小・PNGとICOの書き出し・ZIPの作成まで、すべて開いているブラウザタブの中で行います。
ファビコンが表示されないのはなぜ？
ブラウザはファビコンを強くキャッシュするので、まずスーパーリロードかシークレットウィンドウで確認します。次に各linkタグのhrefが実際の置き場所と一致しているかを確認してください。パスを入力してからHTMLをコピーすれば食い違いません。
必要なサイズやプラットフォームが足りませんか？
ファビコン作成を今すぐ始める
ロゴをファビコン作成ツールに入れて、ライトとダークのタブで16pxの見え方を確かめたら、ZIPとheadタグを持ってサイトに反映しましょう。
元のロゴファイルは後の修正用に残しておきましょう。