Favicon Generator

Favicon Generator (realfavicongenerator.net) を使って SVG 画像から各種 favicon とそれ用の head 内記述用タグを自動生成できる。

今回は、Blogger サイト用の favicon を生成して、Blogger の外部サイト（www2.scaredeer.com）を用意してそこに各種の favicon データを置いてみた（👉 Blogger と独自ドメインの設定）。Blogger の favicon ガジェットを使うと、自動で 16x16 に圧縮された物凄く汚ないアイコン画像しか使えないからである。

以下、Blogger のテーマの HTML を修正するわけだが、その場合の注意点：

• 各タグが閉じられていないので、タグの最後の > の直前に / を入れて /> の形式にしておく必要がある。
• head 内記述用タグの挿入する位置は CSS 定義よりも前にした方が良い（自分はテーマ HTML の viewport 定義と title の間にした）。そうしないと、meta theme-color が反映されなかった。cf. This value is used by the user agent to draw the background color of a shortcut when the manifest is available before the stylesheet has loaded.
• 生成される manifest のファイル名が web.manifest となっているが、これは json ファイルなので、manifest.json にファイル名を変更して Web サーバー側で .json ファイルとして適切に MIME が認識されるようにした。これに伴って、head 内記述用タグの manifest のリンク先も修正した。
• ついでに manifest の中のエントリーとして description の情報も補っておいた。

head 内記述用タグ

manifest.json

{
    "name": "ししおどし",
    "short_name": "鹿威し",
    "description": "「虚仮威し」ではありません、「鹿威し」です。",
    "icons": [
        {
            "src": "https://www2.scaredeer.com/favicon/android-chrome-192x192.png",
            "sizes": "192x192",
            "type": "image/png"
        },
        {
            "src": "https://www2.scaredeer.com/favicon/android-chrome-512x512.png",
            "sizes": "512x512",
            "type": "image/png"
        }
    ],
    "theme_color": "#ff9900",
    "background_color": "#ff9900",
    "start_url": "https://www.scaredeer.com",
    "display": "standalone"
}