ファビコンを差し替えてみました

業務外

井戸掘りブログのファビコンを差し替える方法です。備忘録として残しておきます。
今回は失敗談です。

---

スマホのショートカットアイコンを変更したら、ちょー格好良くなりました。今度はPCのファビコンも見直してみましょう。
ファビコンはブラウザのタブ等に表示される画像です。画像が粗くて格好悪いです。

ブラウザのタブとURLにファビコンが表示されます

デスクトップにショートカットを作ると
ここにもドキュメント枠内に
ファビコンが表示されます

私の使っているブログサービス（Blogger）にはファビコンを登録する機能があります。
テンプレートメニューから100KByte未満の正方形の画像を登録すると、自動的にファビコンが生成されて、組み込まれます。
前に登録した画像が粗いので、100KByteギリギリの大きさの画像ファイルを用意して登録し直しました。でも画像の精度が上がりません。ぐぬぬ。
どうやら、どんなサイズの画像ファイルでも16×16pxの画角に圧縮されてしまうようです。

んー、どうしましょ？
じゃあ、ブログテンプレートを直接修正すれば良いかと思いましたが、ブログテンプレート上にファビコンの指定がありません。うーん判らん。追記して上書きすればいいのかな？

まず、シンボルマークのpng画像から、48×48px、32×32px、16×16pxのマルチサイズのアイコンファイルを作成しました。末尾の参考記事に紹介されているサイトを利用させてもらいました。もちろん無料です。

作成したマルチアイコンです

これをlinkタグでリンクタイプを指定して、読み込ませれば良いらしい。

リンクタイプは、rel="icon"を指定せよという記事と、rel="shortcut icon"だという記事があります。で、Bloggerブログのソースコードを見ると、rel="icon"なのでこれで試してみました。

<link rel="icon" 
href="https://1.bp.blogspot.com/-Mz6k2MYajjU/V2ts7hKf21I/AAAAAAAAgns/Onarb67VYaU42jvRWaO0S-gqROEZghvaACKgB/s1600/favicon.ico"
type="image/vnd.microsoft.icon" 
sizes="16x16 32x32 48x48" /> 
 

変化ありません。1人悩みます。
ファビコンの指定方法が悪いのか？　既定のファビコンの指定を上書きできないのか？　それとも作成したアイコンファイルが拙いのか？

ちょっと待て！！
マルチサイズのアイコンファイルって、用途に応じてサイズの異なる画像を使い分けるためにあるんだよね？　だとしたら画角の大きな画像が圧縮されて表示される訳ないじゃん！！　お直しお直し…。

128×128pxで再作成しました

感想と構想

何だか上手くいきません。ブラウザのキャッシュのせいか謎の動きをします。出来たり出来なかったり安定しません。また今度チャレンジします。

---

ファビコンの作り方は、以下の記事を参考にさせていただきました。

ファビコンの作成方法｜faviconの簡単な作り方