使い方
最小限の設定
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">Code language: HTML, XML (xml)Windows 用の設定
msapplication-config(browserconfig.xml)msapplication-TileColormsapplication-TileImage
<meta name="msapplication-config" content="/browserconfig.xml">
<meta name="msapplication-TileColor" content="#a2bff4">
<meta name="msapplication-TileImage" content="/mstile-144x144.png">Code language: HTML, XML (xml)Safari 11 用の設定
- ピン留めタブ用のアイコン (SVG ファイル)
<link rel="mask-icon" href="/safari-icon.svg" color="#555">Code language: HTML, XML (xml)※ 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">Code language: HTML, XML (xml)参考：
ホームページのタブ画像 (favicon / touch-icon) 作成と設定方法まとめ | Bties が教える！ホームページ制作のすべて
ファビコンの設定方法とおすすめの作成ツール | Web Design Trends
Favicon やホーム画面アイコンの指定方法 2017 | まめわざ
正しい Favicon の設定方法を対応ブラウザ別にまとめる | Glatch
2018年の Favicon 設定 | Neo’s World
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 | Microsoft Docs
Creating Custom Tiles for IE11 Websites | Microsoft Docs
How do I add a Safari icon to my website? – Stack Overflow
Favicon not showing in Safari – Stack Overflow
ICO 形式のファイルを作成する
参考：
アイコンファイル (.ico) の作り方 | 純規の暇人趣味ブログ
ファビコンを再読み込みする
Chrome
ファビコンを再読み込みするには、ファビコンの URL (https://example.com/favicon.ico など) にアクセスして、スーパーリロードを実行する。 (Ctrl + Shift + R / Command + Shift + R )
参考：
Chrome の Favicon のキャッシュを上書きする | 約束の地
サイトのファビコンを確認する
Google が提供している明文化されていない API を使用してファビコンを取得するには、次の URL にアクセスする。
https://www.google.com/s2/favicons?domain=example.com
参考：
サイトからファビコンを取得／保存／ダウンロードする方法 | kasumiblog
ファビコン画像を取得する便利な Web サービス／API | 俺の開発研究所
Get Favicon – 訪問サイトのファビコンを表示するツール | PersonWriter’s Room
ファビコンを取得できる Web API を使ってみる | ぽぽづれ。
ツール
Favicon Generator – 様々なファビコンを一括生成 | エーオーシステム
Real Favicon Generator – Favicon Generator for All Platforms