Googleの検索結果でも他に比べるとなんか小さいんだよな。。。
Bloggerのファビコン
Bloggerはファビコンの設定は非常に簡単ですね
設定→ファビコン→ファイルを選択
これでファビコンの設定終わりです
Googleの検索結果で出てくるファビコンが小さいけど、、、
まぁ、いいか、、、と放置してました
ファビコン作成
ファビコン表示について調べていると、、、
なんて気軽に言うんですが、どうもBloggerはできないみたい
なのでファビコンを作ってページにアップして画像アドレスを貼り付けるってやり方でいきます
元になる画像(ロゴマーク)はあるので無料のファビコン製作サイトに行ってファビコンを作ります
![Faviconジェネレーター](https://favicon-generator.mintsu-dev.com/siteimg.png)
Faviconジェネレーター
Faviconジェネレーターは、ブラウザ上で、JPEG, PNG, GIF などの画像ファイルから favicon 用の画像(favicon.ico)を生成・変換するサービスです。透過、マルチアイコン、各種サイズに対応しています。変換はすべてローカルで行われ、高速に変換できます。
![ファビコン 作成 - 完全無料 ファビコン ジェネレーター](https://www.duplichecker.com/asets/og_images/home.png)
ファビコン 作成 - 完全無料 ファビコン ジェネレーター
私たちの favicon 作成 を使用すると、完全に無料で画像から ファビコン 作成 できます。 使いやすい ファビコン ジェネレーター あなた向け。
そのページを公開する必要はないです
ただただ画像をアップするだけ
画像アドレスを使うだけですから
アップする画像は大きいサイズをひとつでもOKです!!
画像パラメータ
またまたまたまたまたふじやんさんにアドバイス頂きましたm(__)m
Bloggerの画像はひとつ画像をアップしとけば表示のサイズ指定して使いまわしができるそうです
詳しくはコチラを見てください
![Bloggerの画像の小技 (2021/10/08: 新仕様 URL に関して追記しました) | ふじろじっく](https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgS_TrVd4NkSqBNQSqN-kSpG5mtg-EjqLeuhYDgL0tK_we9sNdsQ8k1hVHOMAsPG3iq94fZdtCVf82VIgKY0u_qOriarmOGY209tGI79gevL0ZHf1k4BeLVFqXprv8BHVA2Zog1iZhycoM/w1200-h675-p-k-no-nu/Blogger-image-tips.png)
Bloggerの画像の小技 (2021/10/08: 新仕様 URL に関して追記しました) | ふじろじっく
Bloggerにアップロードした画像に関するちょっとした便利ワザをご紹介します。
https://blogger.googleusercontent.com/img/b/.../s1600/画像ファイル名.png
赤字のs1600って所を変えればサイズ指定できるようです
https://blogger.googleusercontent.com/img/b/.../s32-cc-e365/画像ファイル名.png
これでひとつの画像でファビコンの各サイズを指定できます
ccとかeは円形にトリミングしています
HTML編集
ウチはF-light(テーマ)使用しています
F-lightでの説明になります
F-light以外の方は、ご自身が使用されているテーマのファビコンの箇所を探してください
まず <!-- Favicon --> を検索してください
<!-- Favicon -->
<link expr:href='data:blog.blogspotFaviconUrl' rel='icon' type='image/x-icon'/>
<!-- 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も設置してましたが削除しました
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
で良いようです
こちらも設置してみました
サイズは256×256のPNGをアップ
無事Safariのタブでもファビコン表示されるようになりました
Google Search Console
ファビコン表示
設定してから7日、やっと反映されました
今時のiPhone、スマホでも問題なく表示されるとは思います
未だにガラケーなもんで(^^;
![登山向け地図アプリ専用スマホのススメ~中古スマホで格安導入 | Trekking from Kochi](https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgOxZOphckWXH7jEnO5ueZey-mheW5fpfS48E4YNvXjhyphenhyphenUKNWJHUC_M2OV7wGuj6_1HwCPDsozzkRJaxs4iGqzl8th_30eFTE_t56EYGFTjre9m0Lp5Opij6J7m4uYtpUNSPZ3NA4ABODXD/w560-h315-p-k-no-nu/2019-04-11+15.18.41.jpg)
登山向け地図アプリ専用スマホのススメ~中古スマホで格安導入 | Trekking from Kochi
スマホ持っていない方も登山向け地図アプリは格安導入可能です!!
Bingに関しては現時点でも当ブログを開くとEdgeのタブには表示されています
しかし検索結果にはファビコンが表示されません
Bingはややこしいですね。。。
引き続きBingはなんとかなるのか調べてみます。。。
コメントを投稿
別ページに移動します