サイトのタブに表示されるファビコンの作成方法です。
【1】サイズは 16px × 16px 、32px × 32px で制作する
ファビコンはサイトのタブに表示される他にIEでのブックマーク時のアイコンにもなるので 16px × 16px 、32px × 32px のふたつをマルチアイコンとして制作します。(サイズは16px、32pxの2種類で十分ですが厳密に制作する場合は各サイズを全て制作しマルチアイコンにする事もできます。)- 16px × 16px:IEのタブ
- 24px × 24px:IE9の「ピン留め機能」
- 32px × 32px:Chrome、Firefox、Safariなどのタブ
- 48px × 48px:Windowsのサイトアイコン
- 64px × 64px:高解像度のWindowsサイトアイコン
【2】マルチアイコンファイル作成手順
.png .jpg .gif 等でファビコンを制作して、.ico形式のマルチアイコンに変換してくれるサイトで変換します。 マルチアイコンにする場合はpng等で書きだしてから下記サービスを利用します。◆ 複数マルチアイコンを作ろう! https://ao-system.net/alphaicon/
【3】ファビコンの表示設定
サイトのルートフォルダに作成したマルチアイコンを保存します。(例:favicon.ico)
HTMLのheader内で、ファビコンの表示を記述します。
<link href=”/favicon.ico” rel=”SHORTCUT ICON” type=”image/x-icon”>