#はじめに
PCのブラウザを利用する際において、ウェブサイトを一目で識別する方法にfaviconを利用する方法がある。これは遥か昔から用いられてきた方法ではあるが、近年においてはスマートフォンでのウェブサイト閲覧が主流になり、faviconが見えないという問題がある。
しかしながら、熱心なウェブサイト利用者はウェブサイトをショートカットとして、ホーム画面に残しておくと聞いた。
だが、残念なことにこのショートカットアイコンを設定していないとデフォルトではタイトルの一文字目になったり、システム画像になったりする。そして、faviconはそのショートカットアイコンにはならない。
#Favicon
faviconはないとconsole.logにエラー吐かれるんでできれば早いうちに作っておきたい。精神衛生上よろしくないからね。confer.2 なんかを使えば簡単に画像をfaviconにできる。
#shortcut icon for SmartPhone
自分はほとんどの場合、スマホで何かあとで見たいページがあった時は、ブラウザのブックマークに入れる。ホーム画面にショートカットを残すことはほとんどないと思う…
#shortcut icon for Windows
これfavicon設定するだけでいいのかと思ってたんだけどだめっぽい…
#でどう記述するか
<!--Favicon-->
<link rel="shortcut icon" href="http://nanatsu.jp/favicon.ico" type="image/x-icon">
<!--icon for SmartPhone-->
<link rel="apple-touch-icon" href="http://nanatsu.jp/apple-touch-icon.png" sizes="180x180">
<link rel="icon" href="http://nanatsu.jp/android-touch-icon.png" type="image/png" sizes="192x192">
<!--icon for Windows-->
<!--ここよくわかんなかったんで後で調べます-->
#参考文献
cf.1 https://gray-code.com/html_css/setting-favicon-for-smartphone/
cf.2 https://ao-system.net/favicon/
