正方形に近い単純なロゴを用意し、16、32、48、64、128、256pxを含むICOを作ります。ブラウザ表示では特に16pxと32pxを確認します。
小さくしても分かる図形を選ぶ
faviconはタブやブックマークで非常に小さく表示されます。細い文字、複雑な写真、長いロゴは潰れやすいため、頭文字や単純なシンボルが向いています。
元画像は正方形が理想です。長方形でも変換できますが、中央へ縮小配置されるため余白が大きくなる場合があります。
背景と透明部分を確認する
PNGは透明背景を保持できます。暗いブラウザテーマと明るいテーマの両方で見える色を選び、輪郭が背景へ溶けないようにします。
JPEGは透明を持てません。写真や背景色付き画像を使う場合は、四隅の色も意図どおりか確認します。
複数サイズを1つのICOへ入れる
ICOは複数解像度の画像を1ファイルへ格納できます。Pixel Toolboxでは16、32、48、64、128、256pxから必要なサイズを選べます。
特別な理由がなければすべてを選ぶと、ブラウザやWindowsが表示場所に近い解像度を使いやすくなります。
設置後はキャッシュに注意する
faviconをサイトへ設置しても、ブラウザが古いアイコンをキャッシュしてすぐ変わらない場合があります。別ブラウザやプライベート表示でも確認します。
ICOだけでなくPNGアイコンやWeb App Manifestを使うサイトもあります。利用するシステムの指定ファイル名とサイズを確認してください。
ICOへ格納できるサイズ
各サイズのPNGを作り、1つのICOコンテナへ順番に格納します。
ICO作成前後の確認
- ✓単純で正方形に近い画像を使った
- ✓明暗両方の背景で見た
- ✓必要なサイズを選んだ
- ✓16pxと32pxを確認した
- ✓設置先の指定を確認した
ICO変換
JPEG・PNGから、選択した複数サイズを含むICOファイルを作成できます。
ICO変換→この記事は一般的な操作方法を案内するものです。提出先や印刷会社などに指定がある場合は、その要件を優先してください。
A SMALL NOTE FROM SPACE小さな星ほど、形の特徴が大切です。16ピクセルでも分かる印を、宇宙の片隅に置きましょう。