初心者だっておしゃれなブログが作りたい！でもスマホで検索した時のファビコンがずっとワードプレスのテーマ「Cocoon」のデフォルトのまま。今回なんとか表示させましたのでその手順をご紹介します。
◉ この記事を読んで欲しい人
- モバイル検索でのファビコン表示について調べ尽くしているのにやっぱり反映されない人
- もう最終手段でもいいからすぐに表示させたい！と思っている人
◉ 今回学んだこと ↓
A. 「テーマヘッダー」に書き込むのがてっとり早かった。
ファビコンって
「ファビコン」なんていう言葉はブログをやっていなければ永久に知らない言葉だったと思います。（ウィンドウ上部のピンク丸のこれ↓）
上記はPCのウィンドウですが、スマホで検索した時にはブログのタイトルの左に小さく表示されます。小さなものだからなんでもいいように感じますが、結構目立つんですよね。
人は色を見ただけで、ブログのイメージや作成者のなんとなくの人柄まで勝手な情報を作ります。そのため、色にひかれてクリックする人も中にはいることを考えるとクリック率にも影響があると思っています。
自分のサイトアドレスの後ろにfavicon.icoと付けて「enter」を押してみて下さい。当サイトの場合だと、「https://negaposi.info/favicon.ico/」。これで設定されているファビコンが画面の真ん中にポツンと表示されます。他人のサイトでも同じ方法で表示させられます。
基本的に示されることの多いファビコン設定の手順や考え方
初心者は「基本に沿って設定したい」のはヤマヤマです。知識もないのに無駄なことをして、あとで取り返しのつかないことになった失敗をたくさん経験していますからT_T
下記の順番でもしできたらそれがいいと思います。
試行錯誤その1. 基本中の基本の手順
ワードプレスの編集画面の左枠の 外観 → カスタマイズ → サイト基本情報 →１番下にある「サイトアイコン」から設定するだけ。
この基本手順で設定するとPCのファビコンはすぐに変わりますが、「モバイル表示」については、ご自分のスマホなどで確認してみないと分かりません。（反映に時間がかかることもあるらしいので、設定後に即クローラーを呼ぶ人もいるみたいです。）
この設定方法は、ワードプレスで最初に行う一通りの手順の中に組み込まれていますし、この手順で設定すれば、自動ですべてのサイズで反映されると思っていましたが、ずっと反映されない日々。同じ悩みを抱えている人の書き込みやその回答に、２，3日、もしくは数週間！？もかかったという人もいて、そうか待てばいいのか・・・と放置していました。
試行錯誤その２. ファイル形式と画像の大きさの問題か？
サイズやファイル形式が違うという記事をよく見かけます。もともとサイトアイコンの設定場面でで「512×512以上の正方形にして下さい」と注意書きが書いてあります。本ブログでも使用させてもらっているcocoonの作成者（わいひらさん）も同サイズを勧めています。
ところが、ブログ開設から半年以上経過していてもやっぱりそのまま。（目前の問題が山ほどあったので手が回らなかっただけですが）ファイル形式（最後の部分）がpngよりicoが良いとか、サイズが32×32がいいとか、色々な意見があったので考えられる限り試しましたが、やっぱり無理でした。
試行錯誤その３. グーグル側に認識してもらえないデザインとは？
グーグル（検索エンジン）は利用者にとっての利便性を考えており、「質」を求めているとよく言われます。ファビコン画像が「サイトの“ロゴ”として機能するデザインなのかどうか」も判断しているという意見も見つけました。でもこればっかりは正誤での判定ができない分何とも言えませんが、当サイトはとりあえず２年間安定しています。
要確認！ヘッダーに「favicon」の行が存在しない！？
上記のことを試してもできない時は、初心者はあまりやりたくありませんが「テーマ」領域を触るしかありません。
ファビコンの設定がされているのかをテーマで確認
色々なサイトを読み進めていくうちに、ファビコンを設定すると、テーマヘッダーの中に「link rel =・・・〇〇 favicon.・・・ 」みたいにファビコンについて触れている行があるとのこと。
外観 → テーマエディター → スタイルシート右上の「編集するテーマを選択」欄で「親テーマ」を探して選択→ すると右側にこういったものがずらっと並びます。
その中で「テーマヘッダー」を探してクリック。
「favicon」らしき言葉が含まれている行がありますか？
私はありませんでした。。。
理由はわかりません。
3つの手順で表示させましょう！
① 手順１ 「ファビコンジェネレーター」であなたの使っているファビコンを色々なファイルで作ります。
② 手順２ その中で以下の３枚のサイズをワードプレスの メディアを追加ボタンからアップロードします。（アップロードとは自分のPC内のものをワードプレスで使えるようにすること）
語尾が 「favicon.ico」「apple-touch-icon-180×180」「android-chrome-192×192」の３枚です。
③ 手順３ 下記のコードをテーマヘッダー内のどこかにどうぞ。（ごめんなさい！そのまま貼り付けられるのコード表示は私の技術ではまだできなくて・・・）
<!– ファビコン設定–>
<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Ⅹ」「iPhone12」「アンドロイドキュアタブ」です。
まとめ
知識０からブログを始めて1年放置笑も含めて2年。血と涙の結晶。。
最初は大きな問題が多すぎて小さなことには手がまわりませんよね。
これで反映されなかった場合も責任は負いかねます 😥 負いたくても腕がない・・・
でも明日にはまた私も消えているかもしれないのがブログです・・・
一応1年以上経過しましたが、安定して表示されています。