2023年版 サイトのicon(ファビコン)設定の最適解はコレ
サイトのアイコン設定は2023年最新でどうすれば最適でしょうか
少なからず、この問いを求めている人はいるんじゃないでしょうか？かくいう自分はずっと古いやり方のまま2023年まできてしまったわけですが、ふと最新のicon事情が急に気になってしまい、調べた情報をまとめてみました。
- iconとは
- 2023年の最新のベストプラクティス
- 対応している拡張子は？
- type属性は気にしなくていいの？
- iconのサイズはどれが最適解？
- rel="shortcut icon"はもう書かなくて良いのでしょうか？
iconとは
ウェブサイトのアイコン（通常はファビコンまたはfaviconと呼ばれます）は、ウェブサイトの顔ともいうべき正方形の32×32などの小さなiconです。
2023年の最新のベストプラクティス
結論から書きます。
<!-- 通常アイコン -->
<link rel="icon" href="ファイル名.{拡張子}">
<!-- モバイルデバイス用アイコン -->
<link rel="apple-touch-icon" href="ファイル名.png">がベストプラクティスな記述方法です。
個人的には 通常アイコンはsvgがおすすめで
モバイルデバイス用アイコンはpngがおすすめです。
対応している拡張子は？
対応している拡張子はこちらとなっております。
AppleとAndroidに関してはpng対応となっております。
| 対応拡張子 |
| icon |
| png |
| gif |
| svg |
| jpg |
type属性は気にしなくていいの？
最新のブラウザは type 属性を指定せずにファビコンを正しく解釈できます。したがって、必ずしも type 属性を指定する必要はありません。
心配な方はブラウザの互換性を確保するために指定しても良いでしょう。
<!-- 通常アイコン -->
<link rel="icon" href="ファイル名.{拡張子}" *type="拡張子に合わせた記述"*>
<!-- モバイルデバイス用アイコン -->
<link rel="apple-touch-icon" href="ファイル名.png">| 拡張子 | 記述内容 |
| icon | image/x-icon |
| png | image/png |
| gif | image/gif |
| svg | image/svg+xml |
| jpg | image/jpeg |
iconのサイズはどれが最適解？
結論から書きます。
- 通常用のiconに関しては64px x 64pxで作成
- Apple・Android用に関しては256px x 256pxで作成
| 対応 | サイズ | 用途 |
| 必要なし | 16px x 16px | 各ブラウザタブ |
| 必要なし | 32px x 32px | 各ブラウザタブ |
| 全てのブラウザ | 64px x 64px | 各ブラウザタブ |
| Apple | 180px x 180px | iOS,Safariのホーム画面、Android Chromeのタブ、ホーム画面、Mac Safariのお気に入り |
| Android | 256px x 256px | Android Chromeのブラウザタブ、ホーム画面 |
rel="shortcut icon"はもう書かなくて良いのでしょうか？
結論、書かなくて良いです。
shortcut icon"（ショートカットアイコン）という表現は、ウェブサイトのファビコン（favicon）を指定するためのHTMLタグ の一部として使用されてきました(されてます)
この指定は、ブラウザに「これがウェブサイトのファビコンである」と伝え、ブラウザがウェブページにアイコンを関連付けるための指示を提供していましたが、shorcutは現在では無効です。
"shortcut"をとして記述することは、過去には一般的でしたが、HTML5の仕様においては正式には非推奨とされています。現代のブラウザは、"shortcut icon"を正しく解釈することができるため、特別な記述をする必要はありません。
したがって、アイコンを指定する際には「rel="icon"」のみを記述すれば問題ありません。
- 完全無料Basicはオープンソースで運営されています。誰しもが自由にBasicを利用できます。
- 超軽量化で超高速配信通常のCMSよりページ容量を70%以上を自動で圧縮を行い更に自動で静的化・圧縮化されたページが配信されます。
- SEOにつよつよ70%以上軽量化に加えて最新SEOに対応した構造で静的化・圧縮化されたページはライバルサイトより圧倒的に評価されます
ライバルサイトより一歩前にいけるCMSでサイトを構築しませんか？
