Favicon Tools検証作成
Reference

ファビコンは正方形でなければならない?

実質的には、はい。ファビコンは正方形の枠(タブ、ブックマーク、ホーム画面のタイル)に表示されるため、正方形でない画像は余白で埋められるか、収めるために歪められます。ファイルは厳密には正方形である必要はありませんが、そうでないものは誤って見えます。だからこそすべてのアイコンサイズが N×N の正方形として定義されているのです。横長のロゴは押し込むのではなく、正方形のシンボルに縮約しましょう。

どこもかしこも正方形の枠

ファビコンを表示するあらゆる表示面が、それのために正方形を確保します。長方形を正方形に入れると、ブラウザはそれをレターボックスにする(マークが縮み周りに空の帯ができる)か、比率を崩して引き伸ばします。どちらも意図的には見えません。

だからこそ標準のサイズはすべて N×N なのです。最初から元画像を正方形に設計すれば、あらゆる表示面が期待どおりのものを得られます。

ファビコンの形に関するよくある質問

ファビコンは正方形でなければなりませんか?

実質的には、はい。正方形の枠に表示されるため、正方形でない画像は余白で埋められるか歪められます。両方を避けるために元画像を正方形にしましょう。

ロゴが横長の場合は?

組み全体ではなく、シンボルか頭文字だけを使いましょう。横長のロゴを正方形のファビコンに押し込むと判読不能になります。

ファビコンはどのアスペクト比にすべきですか?

1:1、完全な正方形です。16px から 512px まで、すべてのファビコンサイズが幅と高さの等しいものとして定義されています。

関連用語