使い方

最小限の設定

  • 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-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">
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) 作成 – Qiita

アイコンファイル (.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

記事をシェアする:

コメントを残す

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

Protected by reCAPTCHA