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"
}
コメント
コメントを投稿