【HTML】ファビコンの設置方法

ファビコンの設置はファビコンファイル以外にも
スマホ用のアイコンと一部Androidで表示出来ない場合があるためAndroid用のアイコンの
ファイルとしては3つを最低限準備します。

解像度としては、16×16、32×32、180×180、192×192の4つになります。

favicon用・・・favicon.ico
スマホ用(iOS)・・・apple-touch-icon-180×180.png
Android用・・・android-touch-icon-192×192.png

<link rel="icon" href="/favicon.ico" id="favicon">
<link rel="apple-touch-icon" sizes="180x180" href="/apple-touch-icon-180x180.png">
<link rel="icon" type="image/png" sizes="192x192" href="/android-touch-icon-192x192.png">

もっと厳密に設置したい方はコリスの紹介方法を参考に設置するのが良いかと思います。
https://coliss.com/articles/build-websites/operation/work/how-to-favicon.html

HTMLテンプレートにもデフォルトで入れておくと便利です。
https://www.uki213.com/memo/html-template/

参考:https://blog.senseshare.jp/favicon.html
https://keywordfinder.jp/blog/seo/favicon/

関連記事

コメントを残す

*