faviconを作る！設定する！

一目見ただけで何のサイトか判断できる「favicon」の設定は必須ですね。パソコンでサイトを開いたときのタブに表示されるマーク。スマホでサイトをホームに置いたときのアイコン。あれです。HTML、CSS、JavaScriptを書くだけでもいいのかと思いきや、その他諸々の重要な作業がありますね。faviconはその中の一つです。いわばサイトの顔。

どんなサイズで作ればいいのか？どのように設定すればいいのか？ハテナだらけですが、まずどの大きさが何に対応しているのか解説していただいている下記サイトが参考になります。

「favicon大解剖 〜必要サイズから検証時の注意点まで〜 | WebNAUT」https://note.com/hitomeal/n/n0afb4cf25fb2

私はイラレで180×180で作り、それを16×16、32×32に変換して設定することにしました。変換で使用したサイトのご紹介。

「ファビコン作成 favicon.ico 無料で半透過マルチアイコンが作れます」https://ao-system.net/favicon/

あとはheadタグの中に記載するだけです！

<link rel="icon" href="画像" sizes="16x16"> 
<link rel="icon" href="画像" sizes="32x32">  
<link rel="apple-touch-icon" href="画像">

「画像」にそれぞれ作成した画像ファイルを貼り付けてくださいね。