faviconの作り方と設置方法

こんにちは。hacknoteのr.katoです。

favicon ファビコン って知っていますか?

faviconとはこのようなwebサイトのタブに表示されるアイコンのことです。

これがあることでたくさんのタブを開いていても見たいタブを探すことが容易になります。
今回はこのfaviconの作り方とhtmlでの設定の仕方を紹介していきます。

作り方&設定方法

  1. フォトショップやイラストレーターなどの画像を作ることのできるソフトを使って256px ✖️ 256pxの正方形の画像を作成する。
  2. 作成した画像をこのサイトこのサイトを使ってico形式のファイルに変換する。(画像サイズに関してはこのサイトを参考にしてください)
  3. htmlファイルのheadタグ内に <link rel="shortcut icon" href="icoファイルのpath"> を追加する。

これでfaviconを自身のサイトに設置することができるようになると思います。