ファビコンとは
favicon（ファビコン）は「Favourite icon（お気に入りのアイコン）」の略で、アドレスバーやブラウザのタブ、スマートフォンやタブレットなどでWebページを"ホーム画面"に置いた際に表示されるアイコンなどを指します。
主なサイズ
16px × 16px：IE タブ
32px × 32px：Chrome、Firefox、Safari などのタブ
64px × 64px：Windowsデスクトップアイコン
180px × 180px：iPhone＆iPad
など。
今回は初めてなので、とりあえず 32px × 32pxだけで作成しました。
この辺りは余裕が出てきたら色んなサイズにも対応していきたいです。
デザイン
デザインアプリやウェブブラウザでまずはデザインを作成する。
私は自分のリングネームにちなんでこのようなデザインを作成してみました。
SHUだけにShoe(片方の靴)。。。
空調の音は響き渡りましたでしょうか？
気をつける点
デザインを作成する上で気をつける点としては大きく以下の２点が挙げられます。
- アイコンはとても小さいのでシンプルなデザインを心がける事
- 統一感を持たせるために、アイコンのカラーとアプリのテーマカラーを揃える事
フォーマットの変換
今回はこちらのサイトを利用して、サイズとフォーマットを変更しました。
サイト内で拡張子をicoに変更し、出来上がったファイルをpublicフォルダ直下に置きました。
32pxだと分かりやすくする為に、ファイル名をfavicon32.icoとし、
headダグの中で以下の記述をします。
index.html
<link rel="icon" href="%PUBLIC_URL%/favicon32.ico" />
結果
これを使って
↓
こう！
ひとまず初めてファビコンを作成から設定まで出来ましたが、他にももっと良いやり方があればぜひ教えてください。