⭐ favicon ジェネレーター
PNG / SVG をドラッグ＆ドロップ → 16 / 32 / 48 / 64 / 180 (apple-touch) / 192 / 512 px のリサイズ画像を一括生成 → ZIP でダウンロード。HTML スニペットもコピー可能。
🔒 プライバシーについて
- ・すべての処理はあなたのブラウザ内で完結します
- ・画像データは一切サーバーに送信されません
- ・保存ログ・アップロード履歴・データベース等は存在しません
- ・登録・ログイン・課金は一切不要です
正方形の PNG または SVG をドラッグ＆ドロップ (推奨 512x512 以上)
📋 HTML スニペット
📖 つまずきやすいポイント
正方形の PNG または SVG から、必要なサイズを一括で書き出して ZIP にまとめ、<head> に貼る HTML スニペットも生成します。処理はブラウザ内で完結します。ファイルを揃えることと、狙いどおりに表示されることは別の問題です — favicon はブラウザ・OS・検索エンジンがそれぞれ違う規則で取りに来るうえ、キャッシュが極端に強いので、確認の仕方まで含めて手順にしておかないと必ずはまります。
| ケース | 何が起きるか | どうする |
|---|---|---|
| 差し替えたのに古いアイコンが出続ける | favicon はページの HTML とは別のキャッシュに入り、通常のリロードでは再取得されません。Chrome は専用の favicon データベースを持っていて、スーパーリロード (Ctrl+Shift+R) でも消えないことがあります。ブックマークバーやタブ、履歴、OS のショートカットがそれぞれ別のタイミングで更新されるので、「タブは新しいのにブックマークは古い」という状態が普通に起きます。CDN を挟んでいれば、そこにも古いファイルが残ります。 | ファイル名かクエリを変えるのがいちばん確実です — <link rel="icon" href="/favicon-v2.png"> のようにパスごと変えるか、最低でも ?v=2 を付けます。検証はシークレットウィンドウで行ってください — 通常ウィンドウで何度リロードしても、古いキャッシュを見続けるだけで時間を浪費します。それでも古いままなら、キャッシュの問題ではなく <link> のパスが間違っている可能性が高いので、DevTools の Network タブで実際に取得できているかを見てください (404 が出ていれば一目で分かります)。 |
| 16px でつぶれて何のロゴか分からない | ブラウザのタブに出るのは実質 16×16です (高 DPI でも 32×32)。ロゴをそのまま縮小すると、1px 未満の線は消え、細い文字はグレーの塊になります。文字数の多い社名ロゴは全滅で、遠目に「灰色の四角」としか認識されません。これは書き出しの品質の問題ではなく、情報量が入りきらないという物理的な制約です — 16×16 は 256 ピクセルしかなく、これは 1 文字を描くのがやっとの面積です。 | 16px と 32px は別デザインを用意してください。頭文字 1 文字だけを大きく置く、シンボル部分だけを切り出す、線幅を 2px 以上に太らせる — 大手サービスのファビコンがどれも極端に単純なのはこのためです。SVG favicon (<link rel="icon" type="image/svg+xml">) を併用すると、大きいサイズでは元のデザインを見せつつ小さいサイズだけ差し替えられます (SVG 内で @media (max-width: 16px) は使えないので、実際には PNG を別途用意して sizes 属性で振り分けます)。確認は必ず実寸で — 拡大表示したプレビューで判断すると、まず失敗します。 |
| iOS のホーム画面に追加すると背景が黒くなる | apple-touch-icon に透過 PNG を渡すと、iOS は透明部分を黒 (環境によっては白) で塗りつぶします。デザイン上は「背景なしで置きたい」つもりでも、OS 側が必ず不透明な正方形にするためです。同じ理屈で自分で角丸にした画像を渡すと、OS の角丸と二重になって四隅が欠けます。ホーム画面のアイコンだけ妙に汚い、という症状の大半はこの 2 つです。 |
このツールの「背景色を付ける」を有効にして、正方形の隅まで塗った不透明な画像を書き出してください。角丸は付けず、余白 (セーフエリア) は全体の 10% 前後を目安に取ります — OS が角を丸めるときに、端まで攻めたデザインは切られます。サイズは 180×180 を用意すれば現行の iPhone / iPad をカバーできます。<link rel="apple-touch-icon"> を書かない場合、iOS はページのスクリーンショットをアイコンにします — 「なぜかページの縮小画像が並んでいる」という症状はこれです。 |
<link rel="icon"> と site.webmanifest の icons は別物で、両方必要です。前者はブラウザのタブ用、後者は Android のホーム画面と PWA 用で、片方だけ更新して「Android だけ古いまま」という事故がよく起きます。検索結果に出るファビコンにも独自の規則があり、Google は基本的にサイトのルートを見に行くので /favicon.ico を必ず置いてください — さらに 48×48 の倍数 (48/96/144…) が推奨で、16×16 しか無いと検索結果では拡大されてぼやけます。忘れやすいのが robots.txt でアイコンのディレクトリをブロックしないことです。Disallow: /assets/ のような広い指定をしていると、ファビコンだけ取得できず検索結果に既定の地球儀アイコンが出ます。反映には数日から数週間かかるので、リリース直後に判断しないでください。
📖 使い方
-
1
画像を読み込む正方形の PNG または SVG をドラッグ＆ドロップ。512x512 以上を推奨します。
-
2
全サイズが自動生成される16 / 32 / 48 / 64 / 180 (apple-touch) / 192 / 512 px がプレビューされます。背景色を追加することも可能。
-
3
ZIP とスニペットを取得ZIP をダウンロードし、表示される HTML スニペットを <head> に貼り付けます。
❓ よくある質問
画像はサーバーに送られますか？
SVG を読み込むとぼやけませんか？
.ico ファイルは作成されますか？
🔗 関連ツール
🐛 このツールで問題が発生しましたか？
完全無料・登録不要。再現手順だけでも結構です。届いたご報告は運営者に直接届き、修正の参考にします。
ご報告ありがとうございます！
運営者に届きました。改善の参考にさせていただきます。