【スマホ検索でファビコンが表示されない!?】知識0の初心者ブロガーが「ファビコン」を表示させた3つの手順

blogについて
はじめに
初心者だっておしゃれなブログが作りたい!開設後、たくさんの苦難を乗り越えながら約1年になりますが、そういえばスマホで検索した時のファビコンがずっとワードプレスのテーマ「Cocoon」のデフォルトのまま。今回執念でなんとか表示させましたのでその手順をご紹介します。(初心者でも分かる簡単な手順ですがおそらく正規の方法ではありませんのでご了承ください)

◉ この記事を読んで欲しい人

  • モバイル検索でのファビコン表示について調べ尽くしているのにやっぱり反映されない人
  • もう最終手段でもいいからすぐに表示させたい!と思っている人

◉ 今回学んだこと ↓

A.  PC ・ i phone ・ android それぞれの設定がてっとり早かった。

スポンサーリンク

ファビコンって

「ファビコン」なんていう言葉はブログをやっていなければ永久に知らない言葉だったと思います。(ウィンドウ上部のピンク丸のこれ↓)

上記はPCのウィンドウですが、スマホで検索した時にはブログのタイトルの左に小さく表示されます。小さなものだからなんでもいいように感じますが、結構目立つんですよね。
人は色を見ただけで、ブログのイメージや作成者のなんとなくの人柄まで勝手な情報を作ります。そのため、色にひかれてクリックする人も中にはいることを考えるとクリック率にも影響があると思っています。何より選んだファビコンが表示されると自分が嬉しい。

初心者びっくり豆知識
自分のサイトアドレスの後ろにfavicon.icoと付けて「enter」を押してみて下さい。当サイトの場合だと、「https://negaposi.info/favicon.ico/」。これで設定されているファビコンが画面の真ん中にポツンと表示されます。それに!!他人のサイトでも同じ方法で表示させられます。びっくりですよね。

面白いですが、これで確認するとちゃんと表示されているのにスマホでは見られないからこの記事を書いていますので、あてにはしていません。個人的には。

基本的に示されることの多いファビコン設定の手順や考え方

もちろん初心者は「基本に沿って設定したい」のはヤマヤマです。その方が安心できますよね。
知識もないのに無駄なことをして、あとで取り返しのつかないことになった失敗をたくさん経験していますからT_T そのためにまずは穏やかな試行錯誤の経過をご報告しますね。これでできたらそれがいいと思います。

基本中の基本の手順

ワードプレスの編集画面の左枠の 外観 → カスタマイズ → サイト基本情報 →1番下にある「サイトアイコン」から設定するだけ。

1つ気をつけて欲しいのは、この基本手順で設定するとPCのファビコンはすぐに変わります。そのため、モバイル表示」については、ご自分のスマホなどで確認してみないと分かりません。(反映に時間がかかることもあるらしいので、設定後にクローラーを呼ぶ人もいるみたいです。)

この設定方法は、ワードプレスで最初に行う一通りの手順の中に組み込まれていますし、この手順で設定すれば、すべて自動でやってくれるんだと思っていました。120%何も考えていませんでした。

でも反映されない。同じ悩みを抱えている人の書き込みやその回答に、2,3日、もしくは数週間!?もかかったという人もいて、そうか待てばいいのか・・・と放置していました。が、1ヶ月経過も反映されない。

ファイル形式と画像の大きさの問題か?

検索してみると、サイズがどうのこうの、ファイル形式がどうのこうのという記事をよく見かけます。もともとサイトアイコンの設定で「512×512以上の正方形にして下さい」と注意書きが書いてあります。本ブログでも使用させてもらっているcocoonの作成者(わいひらさん)も同サイズを勧めています。

サイトアイコンを設定する方法(ファビコン、アップルタッチアイコン等の設定)
テーマ用のファビコン、アップルタッチアイコン、マイクロソフトメトロスタイルの、タイル表示に使用するアイコンの設定です。

ところが、ブログ開設から半年以上経過していてもやっぱりそのまま。(目前の問題が山ほどあったので手が回りませんでした><)

なぜだ?
ちなみにファイル形式(最後の部分)がpngよりicoが良いとか、サイズが32×32がいいとか、色々な意見があったので、考えられる限り試しましたよ!

「モバイルでのファビコンが表示されない」という相談への回答も読みまくったのですが、「表示されない」という症状は同じでも、経過が人それぞれなので参考にしにくく・・・というよりアドバイス(指摘)そのものが理解できなかったので、分からないものには触れられないという状態でした。

グーグル側に認識してもらえないデザインなのか?

グーグル(検索エンジン)は利用者にとっての利便性を考えており、「質」を求めているということはよく言われますよね。ファビコンがその画像を「サイトの“ロゴ”として機能するデザインなのかどうか」も判断しているという意見も見つけました。なるほど・・・とも関心しましたが、こればっかりは正誤での判定ができない分何とも言えません。

「ファビコン表示についてはグーグル側の判断なので、はっきりとしたことは言えませんが・・・」と言われる通り、天才肌の人々のみが理解できる異世界である気がして仕方ありません。

他のサイトはおしゃれなファビコンが並んでいるのに、地味に目立っている私のファビコン。凡人の悲しい日々が続きます。

ヘッダーに「favicon」の行が存在しない!?

私のような初心者も投稿画面から「ビジュアル」と「テーマ」という言葉を学びました。
ビジュアル(要はみためのデザイン)を触ると、裏側にあるテーマ領域で細かな命令が行われています。線を一本書くのもアルファベットと数字で命令されています。ビジュアルは対人間、テーマは対PCといったところでしょうか?

そもそもファビコンの設定がされているのかをテーマで確認

色々なサイトを読み進めていくうちに、ファビコンを設定すると、テーマヘッダーの中に「link rel =・・・〇〇  favicon.・・・ 」みたいにファビコンについて触れている行があるとのこと。早速それを探してみました。

外観 → テーマエディター → スタイルシート右上の「編集するテーマを選択」欄で「親テーマ」を探して選択→ すると右側にこういったものがずらっと並びます。

その中で「テーマヘッダー」を探してクリック。
すると、訳の分からないコードたちがでてきます。

恐ろしい・・・
触りたくない・・・

でもまず探してください。「favicon」らしき言葉が含まれている行があるかないか。

私はありませんでした。。。
理由はわかりません。テーマでのサイト基本情報からのアップロードではテーマヘッダーに何も示されないの?

こうなったら3つの手順で表示させましょう!

① 手順1 「ファビコンジェネレーター」であなたの使っているファビコンを色々なファイルで作ります。ずらっと。ひとまずPCに全て保存してみました。私は。

② 手順2 その中で以下の3枚のサイズをワードプレスの メディアを追加ボタンからアップロードします。(アップロードとは自分のPC内のものをワードプレスで使えるようにすること)
語尾が 「favicon.ico」「apple-touch-icon-180×180」「android-chrome-192×192」の3枚です。

③ 手順3 下記のコードをテーマヘッダー内のどこかにどうぞ。(ごめんなさい!貼り付け用のコードの貼り付けは私の技術ではできないのです・・・)

<!– ファビコン設定–>
<link rel=”icon” href=“/image/favicon.ico”>
<link rel=”shortcut-icon” href=”https://自分のサイト/wp-content/uploads/西暦/ 月/favicon.ico” >
<link rel=“apple-touch-icon” href=“https://自分のサイト/wp-content/uploads/西暦/月/apple-touch-icon-180×180-1.png”>
<link rel=“android-touch-icon” href=“https://自分のサイト/wp-content/uploads/西暦/月/android-chrome-192×192-1.png”>

href=のあとは、アップロードした画像を表示させるとそれぞれの画像アドレスが表示されるのでそれをコピーして貼り付けて下さいね。

私は即反映されました。
確認したモバイルは「iPhoneⅩ」「アンドロイドキュアタブ」です。

まとめ

知識0からブログを始めて早1年。血と涙の結晶といっても過言ではないブログ。最初は大きな問題が多すぎて小さなことには手がまわらないけれど、今回ずっと気になっていたスマホ(iphoneとandroid両方)検索結果のファビコンに着手しました。
心が折れかけながらもなんとかできました。

これで反映されなかった場合も責任は負いかねます 😥 負いたくても腕がない・・・

でも明日にはまた私も消えているかもしれないのがブログです・・・
一応1ヶ月以上経過しましたが、安定して表示されています。

タイトルとURLをコピーしました