ホームページにファビコン・タッチアイコンを設定

ホームページを開くと上部にタブがいくつも表示されますが、その際にテキストの前に生じされる「ファビコン」。
目を引くこともあり、最近はホームページを作成した際に同時にお願いされる事が多くなったので実装方法をメモ。

ファビコン・タッチアイコンの設置方法

ファビコン（タッチアイコン）用画像を用意する

専用のソフトで画像を用意。
タッチアイコンを兼用する場合も考慮して「192×192ピクセル」サイズのpng画像形式で作成。

ファビコン画像に変換する

「Faviconジェネレーター」というサービスで、サイト内の手順に従って上記の画像をファビコンに変換・ダウンロードします。
サイズは最小サイズの「16×16」が一般的ですが、それよりも大きく表示される箇所もあるようですので「32×32」を使用しています。

• Faviconジェネレーター

HTMLに記載する

最後に変換した「ファビコン（favicon.ico）」と「タッチアイコン用画像（apple-touch-icon.png）」をサーバーにアップロードしたら表示したいページのhead内にソースを記載。
パスは絶対パスでも相対パスでも可。

<!-- ファビコン -->
<link rel="icon" href="https://○○○○/favicon.ico">

<!-- iOS Safari and Chrome -->
<link rel="apple-touch-icon" href="https://○○○○/apple-touch-icon.png">

<!-- Android標準ブラウザ(一部) -->
<link rel="shortcut icon" href="https://○○○○/apple-touch-icon.png">

• 【ホームページ制作】ホームページのアイコン(ファビコン)を設定しよう
• タッチアイコンの設定方法