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"
}

コメント

このブログの人気の投稿

EP-805A 廃インク吸収パッド交換

m3u8 ファイルをダウンロードして ffmpeg で MP4 に変換・結合

WZR-HP-AG300H with OpenWrt