ファビコンを設定する

<link rel="icon" href="/favicon.ico">

faviconに関しては明示せずとも、暗黙的にドキュメントルートに存在する「favicon.ico」を参照するブラウザが多いようです。一応上記タグでファイルを明示することが可能。

画像サイズに関しては、表示される箇所によって異なり、16×16ピクセル～256×256ピクセルまで幅がある。

マルチサイズアイコン形式のicoファイルを設置することで最適なサイズを自動的に表示してくれる仕様がほとんどのようなので、できる限りマルチサイズアイコンを利用するほうがいいと思われる。

https://yamasakimasaki.com/tool/favicon/

ファビコンジェネレータを作ったのでマルチサイズアイコン形式でファビコンを作りたい方はご活用ください。

ショートカットアイコンを設定する

<link rel="apple-touch-icon" sizes="180x180" href="/apple-touch-icon.png">

ショートカットアイコンは基本的にiPhoneやAndroidなどのスマートフォン端末において、ショートカットを作成した際に適用されるアイコンとなる。サイズに関しては複数あるが、180×180ピクセルを設置するのが一般的？apple-touch-iconとなっているが、Android端末でも認識してくれる。

Androidは192×192ピクセルがいいらしいが・・・。

OSとかブラウザとか全部に対応しようと思うと結構な種類のアイコンファイルを準備する必要があってまぁまぁ手間ですね・・・。

基本的には上記2つの設定だけでそれっぽくなるので必要最低限はこれでいいのかと。

ていうかicoファイルがマルチサイズアイコンに対応してるんだから全部それで対応してよって思ってしまう。

ちゃんと調査してくれている人が・・・

ちょっと調べてみたら下記のサイトがヒットしました。2017年の記事ですが。

faviconやホーム画面アイコンの指定方法2017

https://mamewaza.com/support/blog/favicon2017.html

詳しくはこの記事を参照していただくとして、結論からいうと

<link rel="icon" href="/favicon.ico">
<link rel="apple-touch-icon" sizes="180x180" href="/apple-touch-icon.png">

この2つの指定で概ねカバーできるということだった。