faviconとapple-touch-iconの記述方法

[ ID : 2320 ]
faviconとapple-touch-iconの記述方法

概要

サイトに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画像の場合 -->

この記事をシェアする

全ての記事を見る

KONOCODEのメリット 無料会員登録