編集

Bloggerファビコンの設定

2024/08/02 ｜2024/10/02

Bingの検索結果でファビコンが表示されていない。。。

Googleの検索結果でも他に比べるとなんか小さいんだよな。。。

Bloggerのファビコン

Bloggerはファビコンの設定は非常に簡単ですね

設定→ファビコン→ファイルを選択

これでファビコンの設定終わりです

Googleの検索結果で出てくるファビコンが小さいけど、、、

まぁ、いいか、、、と放置してました

ファビコンの周りに余白があるでしょ

画像が小さいので拡大するとボケボケですがこんな感じ
Bloggerのファビコンは
『100KB未満の正方形の画像』
って指定されている影響じゃないかな？？？

Bingは、、、

なんだコレは、、、
BingではBloggerのファビコンはこれっぽい。。。

BloggerもBingもなんかヤダ！！

って事でHTMLでファビコンを直接設定してやろうかと。。。

ファビコン作成

ファビコン表示について調べていると、、、

ファビコンをサーバーのルートディレクトリーにアップして

なんて気軽に言うんですが、どうもBloggerはできないみたい

なのでファビコンを作ってページにアップして画像アドレスを貼り付けるってやり方でいきます

元になる画像（ロゴマーク）はあるので無料のファビコン製作サイトに行ってファビコンを作ります

Faviconジェネレーター

Faviconジェネレーターは、ブラウザ上で、JPEG, PNG, GIF などの画像ファイルから favicon 用の画像(favicon.ico)を生成・変換するサービスです。透過、マルチアイコン、各種サイズに対応しています。変換はすべてローカルで行われ、高速に変換できます。

16x16、24x24、32x32、48x48、64x64、128x128、256x256

が作れます

16x16～180x180まで12種類作れます

それぞれで欲しいサイズのファビコンを作ってください

作ったファビコンはBloggerのページにアップ
そのページを公開する必要はないです
ただただ画像をアップするだけ
画像アドレスを使うだけですから

こんな感じでファビコンのページ作って（公開はせず下書きのまま）
PNGの画像を各サイズアップ

※追記
アップする画像は大きいサイズをひとつでもＯＫです！！

画像パラメータ

またまたまたまたまたふじやんさんにアドバイス頂きましたm(__)m

Bloggerの画像はひとつ画像をアップしとけば表示のサイズ指定して使いまわしができるそうです

詳しくはコチラを見てください

Bloggerの画像の小技 (2021/10/08: 新仕様 URL に関して追記しました) | ふじろじっく

https://blogger.googleusercontent.com/img/b/.../s1600/画像ファイル名.png

赤字のs1600って所を変えればサイズ指定できるようです

https://blogger.googleusercontent.com/img/b/.../s32-cc-e365/画像ファイル名.png

こんな感じに変えます

32ってのがサイズです
これでひとつの画像でファビコンの各サイズを指定できます
ccとかeは円形にトリミングしています

HTML編集

ウチはF-light（テーマ）使用しています

F-lightでの説明になります

F-light以外の方は、ご自身が使用されているテーマのファビコンの箇所を探してください

まず  を検索してください

  <!-- Favicon -->
<link expr:href='data:blog.blogspotFaviconUrl' rel='icon' type='image/x-icon'/>

こんな感じになっていると思います

※F-light Ver1.37

これを削除して、、、

  <!-- Favicon -->
<link href='画像URL' rel='icon' sizes='32x32' type='image/png'/>
<link href='画像URL' rel='icon' sizes='96x96' type='image/png'/>
<link href='画像URL' rel='icon' sizes='144x144' type='image/png'/>
<link href='画像URL' rel='icon' sizes='152x152' type='image/png'/>
<link href='画像URL' rel='icon' sizes='192x192' type='image/png'/>
<link href='画像URL' rel='icon' sizes='256x256' type='image/png'/>
<link href='画像URL' rel='apple-touch-icon' type='image/png'/>
<link href='画像URL' rel='apple-touch-icon-precomposed' type='image/png'/>

こんな感じにしました
”画像URL”にアドレスを貼り付けます
※当初16×16も設置してましたが削除しました

変更しました

  <!-- Favicon -->
<link href='画像URL' rel='icon' sizes='32x32' type='image/png'/>
<link href='画像URL' rel='icon' sizes='192x192' type='image/png'/>
<link href='画像URL' rel='apple-touch-icon' type='image/png'/>

これでOKっぽいです

Google先生に聞きまくって、ChatGPTにも聞いて、、、

~~どのサイズをアップしたら良いか正解が判らなくなり、、、~~
~~とりあえず思いつくのを全部アップしてしまえ！！って事です(^^;~~

apple-touch-icon はiPad・iPhone用

apple-touch-icon-precomposed はスマホ用？？？

と、とあるブログに書いてたんですが、別のブログでは光沢の有り無しって事だと書いてる方もいて、、、

まぁ、、、スマホ用って事だと思います(^^;

それぞれ違いはあるようなので両方アップする意味はあるかなと。。。

apple 指定するなら android も指定しなくていいの？？？と思ったんですが、apple-touch-icon、apple-touch-icon-precomposed でandroidにも適用されるようです
サイズは
apple-touch-iconが180×180
apple-touch-icon-precomposedが152×152
で良いようです