ファビコンの設置 (favicon)

最小限の設定

  • favicon.ico (16px / 32px /48px / 64px)
  • apple-touch-icon (180 × 180)
<link rel="icon" type="image/x-icon" href="/favicon.ico">
<link rel="apple-touch-icon" sizes="180x180" href="/apple-touch-icon-180x180.png">

Windows 用の設定

  • msapplication-configbrowserconfig.xml )
  • msapplication-TileColor
  • msapplication-TileImage
<meta name="msapplication-config" content="/browserconfig.xml">
<meta name="msapplication-TileColor" content="#a2bff4">
<meta name="msapplication-TileImage" content="/mstile-144x144.png">

Safari 11 用の設定

  • ピン留めタブ用のアイコン (SVG ファイル)
<link rel="mask-icon" href="/safari-icon.svg" color="#555">

※ Safari 12 以降を対象にする場合は、通常のファビコンに対応しているので不要。

Android Chrome 用の設定

  • PNG アイコン (192 × 192)
  • マニフェスト (manifest.json)
  • タブのテーマカラー
<link rel="icon" type="image/png" sizes="192x192" href="/icon-192x192.png">
<link rel="manifest" href="/manifest.json">
<meta name="theme-color" content="#abaa9b">

参考:

2018年版 ホームページのタブ画像 (favicon/touch-icon) 作成と設定方法まとめ | 新宿のWeb制作会社Btiesが教える!ホームページ制作のすべて

2019年版 Webサイトのファビコンや各種アイコンの正しい設定方法 | Web Design Trends

favicon やホーム画面アイコンの指定方法 2017 | まめわざ

正しい favicon の設定方法を対応ブラウザ別にまとめる | Glatch グラッチ

2018年の Favicon 設定 | Corredor

Favicons, Touch Icons, Tile Icons, etc. Which Do You Need? | CSS-Tricks

Apple touch icon: The Good, the Bad and the Ugly | Favicon’s blog

Enabling Hi-Res Favicons in the new Windows UI (Windows) | Microsoft Docs

Creating custom tiles for IE11 websites (Windows) | Microsoft Docs

How do I add a Safari icon to my website? – Stack Overflow

Favicon not showing in Safari – Stack Overflow

ツール

参考:

様々なファビコンを一括生成。favicon generator | エーオーシステム

RealFaviconGenerator – Favicon Generator for all platforms

コメントを残す

メールアドレスが公開されることはありません。 * が付いている欄は必須項目です