favicon生成ツール
画像を1枚選ぶだけで、favicon.ico とスマートフォン用を含む各サイズのPNGをまとめて作ります。
HTMLに貼り付けるコードも一緒に出力。ブラウザ上で完結するので、画像がサーバーに送られることはありません。
faviconを生成する
1. 元になる画像を選ぶ
ここに画像をドラッグ＆ドロップ
またはクリックして選択（PNG / JPEG / WebP / SVG・正方形推奨）
透過PNGをそのまま使うと、ダークテーマのブラウザで見えにくいことがあります。
「単色で塗る」を選んだときだけ使われます。
ロゴが四辺いっぱいに入っている画像は、10〜15%ほど余白をつけると収まりが良くなります。
faviconとは
faviconは、ブラウザのタブやブックマーク、スマートフォンのホーム画面に表示される小さなアイコンです。タブをいくつも開いた状態で自分のサイトを見つけてもらうための目印であり、検索結果のスマートフォン表示ではサイト名の横にも出ます。設定されていないと、多くのブラウザで無地のアイコンが表示され、それだけで作りかけの印象を与えてしまいます。
このツールで作られるファイル
| ファイル | サイズ | 使われる場所 |
|---|---|---|
favicon.ico | 16 / 32 / 48px | ブラウザのタブ、ブックマーク。古い環境も含めて最も広く読まれる |
favicon-16x16.png | 16px | タブ表示の標準サイズ |
favicon-32x32.png | 32px | 高解像度ディスプレイのタブ、タスクバー |
apple-touch-icon.png | 180px | iPhone・iPadのホーム画面に追加したとき |
android-chrome-192x192.png | 192px | Androidのホーム画面、PWA |
android-chrome-512x512.png | 512px | スプラッシュ画面、アプリ一覧 |
site.webmanifest | — | PWAの設定ファイル。アイコンの場所をAndroidに伝える |
元画像の準備で気をつけること
- 正方形にする ─ 縦横比が違う画像は、中央を基準に正方形へ収めます。意図しない切れ方を避けるため、あらかじめ正方形で用意するのが確実です。
- 512px以上を用意する ─ 小さい画像を引き伸ばすとぼやけます。大きい画像から縮小するぶんには劣化しません。
- 細部を削る ─ 16pxまで縮むと、細い線や小さな文字は潰れて読めなくなります。会社のロゴをそのまま使うより、頭文字1文字やシンボル部分だけを切り出したほうが視認性は上がります。
- 背景を考える ─ 透過のまま使うと、ダークテーマのブラウザでは黒い背景に黒いロゴが乗って見えなくなることがあります。心配な場合は「単色で塗る」を選んでください。
WordPressで設定する場合
WordPressには「サイトアイコン」という機能があり、外観 → カスタマイズ → サイト基本情報 → サイトアイコンから512×512pxの画像を登録すると、必要なサイズを自動生成してくれます。まずはこちらを試すのが簡単です。
一方で、この方法では favicon.ico がルートに置かれません。一部のRSSリーダーや社内ツールはルートの /favicon.ico しか見に行かないため、確実を期すなら、このツールで作った favicon.ico をFTPでサイトのルートに置いておくと安心です。
よくある質問
faviconを設定したのに変わりません。
faviconはブラウザに強くキャッシュされます。スーパーリロード（Windowsは Ctrl+F5、Macは Cmd+Shift+R）を試すか、シークレットウィンドウで開いて確認してください。それでも変わらない場合は、<link> のURLに ?v=2 のような文字を足すと確実に読み直されます。
SVGの画像は使えますか？
使えます。ただし外部の画像を読み込んでいるSVGや、フォントに依存したSVGは、正しく描画されないことがあります。その場合はあらかじめPNGに書き出してからお使いください。
画像はサーバーに送られますか？
いいえ。すべてブラウザの中だけで処理しています。未公開のロゴでも安全にお使いいただけます。
site.webmanifest は必ず必要ですか？
必須ではありません。Androidでホーム画面に追加したときの表示や、PWAとして扱う場合に使われます。不要であればZIPから削除して構いません。