Faviconジェネレータ 画像
画像を1枚入れるだけで、favicon.ico と各サイズのPNG、apple-touch-icon、site.webmanifest、設置手順をまとめたZIPを作ります。
作られるもの
- favicon.ico : 16x16 / 32x32 / 48x48 を1つにまとめた、昔ながらの形式です。ルート直下に置いてください
- PNG 一式 : 16 / 32 / 48 / 64 / 96 / 128 / 192 / 256 / 512px
- apple-touch-icon.png : iOSのホーム画面用 (180px)
- site.webmanifest : PWA用の定義。サイト名の欄は空にしてあるので、入れてからお使いください
- README.txt : 置き場所、head に貼るタグ、WordPressでの手順
favicon.ico をいまも作る理由
PNGだけで足りる場面は増えましたが、ブラウザとクローラは、HTMLに記述が無くても ルート直下の /favicon.ico を直接取りに来ます。置いていないと、アクセスのたびに404が記録されます。 古い環境やRSSリーダー、一部の社内システムが .ico しか読まないこともあります。 1ファイル15KB程度で済むため、置いておくほうが確実です。
元画像の作り方
16x16で表示されたときに何に見えるかが、すべてです。文字を入れるなら2文字まで、 線は太めにしてください。細い線や小さな文字は、縮小した時点で潰れて読めなくなります。 正方形でない画像を入れた場合は、正方形に引き伸ばして処理します。余白の付け方を指定したい場合は、 あらかじめ正方形に整えた画像をお使いください。
反映されないとき
ファビコンはブラウザに強く記憶されます。差し替えたのに古いままに見える場合は、 アドレス欄に直接 /favicon.ico を入れて、新しいものが返ってくるかを先にご確認ください。 新しいものが返っているなら、ブラウザのキャッシュを消せば表示も変わります。