概要
サイトにfaviconとapple-touch-iconを設定する際のサンプルについて整理。用途
-
サイトにfavicon（ファビコン）とapple-touch-iconを設定する。
- faviconは、PCブラウザでWebサイトを表示した時にURLの左側やブラウザのタブ、お気に入りに追加した時に表示されるアイコン。
- apple-touch-iconは、スマートフォン（SP）でホームやブックマークに登録した時や検索結果などに表示されるアイコン。
- 特にWordpressは5.4以降faviconを設定していないとWordpressのfaviconが自動的に表示される仕様になっているので、favicon設置は必須。
注意事項
- faviconのサイズ：16px以上の正方形。32pxや64pxが多い。ico画像（拡張子が.ico）とする。
- apple-touch-iconのサイズ：72px以上の正方形。180pxや256pxが多い。png画像。
- いずれもheadタグ内に記載する。
- Google検索結果への表示については公式ドキュメントを参照。
実装方法
HTML
※いずれも<head>タグ内に記載すること
<!-- favicon -->
<link rel="icon" href="/favicon.ico">
<!-- apple-touch-icon -->
<link rel="apple-touch-icon" sizes="180x180" href="/apple-touch-icon.png">
※faviconでico以外の画像を使用する場合は以下
<link rel="icon" type="image/png" href="/favicon.png"><!-- png画像の場合 -->
<link rel="icon" type="image/gif" href="/favicon.gif"><!-- gif画像の場合 -->
ローカル環境にコードを移設した際に動作しない場合はこちら。（トラブルシューティングページへ）
