Favicon ジェネレーター
任意の画像から favicon.ico と PNG・manifest アイコン一式を生成
ローカル実行
loading…
このツールについて
画像を 1 枚——できれば 512px 以上の正方形ロゴ——ドロップするだけで、favicon 一式が手に入ります:タブとブックマーク用に 16・32・48 px を格納した favicon.ico、180px の Apple タッチアイコンと 192/512px の PWA アイコンを含む標準サイズの PNG、スターターの site.webmanifest、そして <head> に貼るだけの <link> タグ。すべてが慣例どおりの名前で 1 つの ZIP にまとまります。
favicon チュートリアルが間違えがちな細部にも対応済みです:ICO には PNG 圧縮エントリを埋め込み(Windows Vista 以降どこでも対応、旧式の BMP アイコンよりはるかに小さい)、iOS は透過を黒に置き換えるため Apple タッチアイコンは選んだ背景色に合成し、PWA アイコンはアルファチャンネルを保持します。正方形でない元画像は潰さずに中央でトリミングします。
ロゴを 16px まで縮小するのは本質的に破壊的で、細かいディテールは残りません。だからプレビュー行は各サイズを実寸で表示し、公開前に判読性を確かめられます。すべてローカルの canvas 上でレンダリングされ、ICO と ZIP のコンテナはページ内でバイト単位に組み立てられます——ロゴはどこにもアップロードされません。
よくある質問
- 2026 年に実際必要な favicon サイズは?
- 巷の言い伝えより少なくて済みます:レガシーとアドレスバー用に 16/32/48 入りの favicon.ico、180px の apple-touch-icon.png、そして Web アプリマニフェストから参照する 192/512px の PNG。現代のブラウザはまさにこのセットから最適なものを選びます——一部のジェネレーターが吐く 20 ファイル構成はカーゴカルトです。
- なぜ私のロゴは 16px で判読できないのですか?
- 16 ピクセルは容赦なく小さく、ワードマークも細い線も繊細なグラデーションも溶けてしまいます。強い favicon はブランドを高コントラストの太いグリフや図形 1 つに還元したものです。ここの 16px プレビューが潰れて見えるなら、マークの特徴的な部分をきつめにクロップするか、小サイズ用の簡略版を使ってください。
- .ico ファイルはまだ必要?PNG favicon では不十分?
- 現代のブラウザはどれも PNG favicon を受け付けますが、/favicon.ico は今も UA・クローラー・古いツールが無条件にリクエストするパスです。そこに本物の ICO を置くコストは数 KB で、404 やフォールバックの奇妙な挙動を丸ごと排除できます——PNG の link と併用してください。
- なぜ Apple タッチアイコンに背景色が要るのですか?
- iOS はホーム画面アイコンの透過を描画せず、PNG のアルファは黒に合成されてしまいます。選んだ色へ事前に合成しておけば結果を意図どおりに保てます。アイコンに合う背景を選んでください。なお角丸は iOS 側が付けるので、全面塗りの正方形を渡すのが正解です。