Bloggerでファビコンを登録した記録

2023/04/05 ｜2023/12/14

ブログを始めたらファビコンを登録しよう

Bloggerを始めるにあたり、まずはブログのアイコンである、ファビコンを作ることにしました。手元に有ってかつ美しいイラストが色々活用できるiPad版Keynoteで作成しました。コンセプトがお知らせなのでメガホンをモチーフに。これをブログのアイコン、ファビコンにしたいと思います。

メガホンが鳴っている丸い画像。Android Chrome用の明るい色使いの画像で、512ピクセル。

調べるうちにライトモードとダークモードのどちらにも対応したくなり、やってみることにしました。

2023/8/6追記
結局、ブラウザがダークモードとライトモードの両方に対応してくれることは少なく、どうせタブや履歴などでは上手く表示されない様です。~~分かりにくいのでファビコンはメガホンのみの透過画像↓一本のみにしました。~~

メガホンが鳴っている背景透過画像。ブログ内で使うことを想定した暗い色使いの画像で、512ピクセル。

2023/11/4追記
さらにその後、やはり基本に立ち返り、元の空色のファビコンに一本化しました。きっかけはGoogleの検索結果でapple-touch-iconに指定していた空色の方のファビコンが出てきたことです。空色のファビコンは小さなタブ上のアイコンとしては潰れすぎて見にくかったり、ダークモードで違和感があったりしたのですが、Googleの検索結果と違うのも違和感があるので。いつか僕が愛用するMacやiPhoneのSafariがSVGファビコンに対応したら、ライトモードとダークモードでファビコンを変えたいですね。

以下は執筆当時の記述です。

必要な画像のファイル種類とサイズを調べる

今回、実に様々なサイトを見ましたが、ファビコンはデバイスにより求めるサイズやファイル種類が異なる様で、大変に混乱しました。とりあえず以下の様な基準で考えました。

iPhoneのSafariできちんと出て欲しい
AndroidのChromeできちんと出てほしい
Google検索できちんと出て欲しい
(一番多いであろう)WindowsのChromeできちんと出て欲しい

といった所ですね！結構必要なものが様々で大変そうだったのですが、どうやらApple系はApple系でまとまっていて、その他は48の倍数の正方形で作っておけばいいとの事でした。

具体的にやってみて分かった事

iPhoneのSafariでは、ファビコンを切り替えた時にすぐに反映されない。時間がかかるが3日ほどすると反映された。Webサイトデータを消しても無効なので、きちんと指定ができたら待つしか無い。

沢山の指定方法がある様に見えるけど、汎用の用途としては基本的に192ピクセルのPNG画像を用意して指定すれば問題ない。後はブラウザ側でタブやお気に入りを表示する時に合わせてくれる。(古いブラウザについては分かりません…。)

AppleのiPadやiPhoneのホーム画面用にはapple-touch-iconの指定が必要で、180ピクセルの画像が必要。背景有りの正方形がベスト。一方、Androidのホーム画面用にはPWA(Progressive Web Apps)と言う仕組みへの準拠が必要。今後PWAに対応した環境が増える。

参考サイト

スマホ版のファビコンを設定する方法-Blogger Labo
https://blogger-learning-rab.blogspot.com/2020/09/favicon.html

Bloggerに大変詳しい著者の方で、ファビコン作りも参考になりました。ただ、apple-touch-icon-precomposedの指定は現在は不要だそうです。

Keynote 図形の商法利用
https://discussionsjapan.apple.com/thread/251002569

こちらのサイトの情報によれば、Keynoteの図形単体をロゴにしてはどうやらダメな様子です。今回は四角形や円形も組み合わせて一応自分の意思で考えて作ったので、自分で使えるはず。問題は無さそうです。

チャレンジ石垣島制作秘話「ライトモード／ダークモードでファビコンを切り替える」編
https://designblog.kayac.com/entry/challenge-ishigaki-jima-switch-favicon-color-scheme

これを参考に、ダークモードの指定を行いました。PNG画像だけでなんとかなりそうで助かりました。

様々なファビコンを一括生成。favicon generator
https://ao-system.net/favicongenerator/

このサイトはあらゆるシーンに対応したファビコンを作ってくれます。でも、シンプルに180と192の2つでも良いんですって。下の方に具体的な根拠の記載が有ります。

【2021年版】favicon（ファビコン）の設定方法と画像の作り方
https://zenn.dev/pacchiy/articles/e4dcd7bd29d387

円形か正方形か、透過か塗りつぶしか、ライトかダークか、それぞれのデバイスでの表示イメージを分かりやすく書いてくださっています。ただ、icoで上手くいかないのならpngにすれば良いんじゃないかと思いました。これについては当時と今のブラウザ事情の違いが有るのかも知れません。

ファビコン画像をアップロード

丸い画像はメインのファビコンです。ダークモードバージョンも用意しました。ただ、色々と試したのですが、“manifest.json”と言うファイルをBloggerに直接アップロードすることができないので、PWA対応は断念しました。残念ですが、ある意味すっきり。Appleデバイスは180ピクセルの画像を要求するだけでした。これなら画像さえアップロードできれば対応可能です。また、正方形で塗りつぶしたものが望ましいようです。このページにアップロードすることによってリンク用のアドレスを取得します。512ピクセルの画像はPWA対応のために作りましたが、後々サイト内で使いそうなのでアップロードはしておきます。

メガホンが鳴っている丸い画像。ダークモード用の暗い色使いの画像で、192ピクセル。

メガホンが鳴っている丸い画像。ライトモード用の明るい色使いの画像で、192ピクセル。

ファイルをアップロードしたら、ライトとダークでそれぞれ指定。

先ほどのチャレンジ石垣島制作秘話さんの指定のまんまです。192ピクセルの画像を指定していきます。HTML編集モードで、<head>の領域に書いていきましょう。

<link rel="icon" href="「ライトモードで出したいファビコンのアドレス」" media="(prefers-color-scheme: light)" />
<link rel="icon" href="「ダークモードで出したいファビコンのアドレス」" media="(prefers-color-scheme: dark)" />

シンプルで分かりやすいです！

Appleデバイス向けの指定をする

180ピクセルのデータに対してapple-touch-iconの指定をします。

<link href='「アイコンのアドレス」' rel='apple-touch-icon' sizes='180x180'/>

これだけでOKです！！

Android向けの指定、マニフェストを書く

今回は出来ませんでしたので、対応したい方は上記参考サイトのリンクを見てみてください。普通に自分のサイト内に何でもアップロード出来る方は、“manifest.json”と言う小さなファイルをアップロードしておけば良い形になります。

一部のブラウザでは、Bloggerのアイコンがそのまま出てしまう？

Bloggerでは各ブログでアドレスの最上層(ルートディレクトリ)にBlogger公式ロゴのBのマークのアイコンがFavicon.icoの名前で作られてしまい、そちらが優先されて表示されることもあるようです。この場合は、普通にBloggerの機能を使って登録をし、上書きしていくしかないですね。問題は、アップロードをすると16ピクセルまで画像が小さくされてしまうことです。これはかなり厳しく、私のメガホンのアイコンは全く見えなくなりました。仕方なく、どんなに画質が低くても見えるように、アイコンの形態を正方形のみのシンプルデザインに変えたものもアップロードしておきました。結構面倒ですが、仕方がないことです。Bloggerの機能で普通に200ピクセルくらいの画像を表示してくれれば全く問題ないのですが…。ご覧の環境では、どのファビコンが表示されていますか？

2023/8/6追記　ファビコンを金色のメガホンの画像に統一しました。基本的に、ファビコンの表示に成功している場合には金色っぽいメガホンの画像が出ているはずです。もしも失敗している場合は、何も出ないか、Bloggerの公式ロゴが出ると思います。

2023/12/5追記
その後、いつの間にかBloggerの生成するファビコンのサイズは48ピクセルになった様です。便利になりました。このサイズなら普通に使っても違和感なく、潰れず表示されます。現在のファビコンはこちら。→https://muunaka.blogspot.com/favicon.ico