ファビコンが表示されない？

検索結果からファビコン表示が消える。

ファビコン表示不可。GoogleでもYahooでも。

ふと気がついたら、Google検索結果からサイトのファビコンが表示されなくなっていた。

突然のことであり、Yahooでもファビコンは表示されていなかった。

ファビコン表示がされないときの主な確認事項。

• 画像の形式や拡張子。（favicon.icoとfavicon.svgなど。）
• 画像のサイズ。（正方形。数百Bと数十KB程度。）
• ファイル名に日本語や全角英数などのマルチバイト文字が含まれていないか。
• ファビコン画像へのパスに間違いがないか。
• ブラウザのキャッシュの有無。
• robots.txtでのGoogleクロールのブロック有無。
• metaタグでのGoogleクロールのブロック有無。

上記の項目には問題がなかった。

そもそも、特にコードや画像を変えたわけでもなく、Googleのガイドラインもチェックしていた。

ファビコンは、metaタグ内に下記のように指定。

HTML

<link rel="shortcut icon" href="/path/to/favicon.ico">
<link rel="icon" href="/path/to/favicon.ico" id="favicon">
<link rel="apple-touch-icon" href="/path/to/favicon.svg">

（※/path/to/の箇所は自分の環境。）

そこで、前兆があったことを思い出した。

ファビコン表示不可の前兆。

WordPressのメディアライブラリの表示不可。

WordPressの投稿画面へ、メディアファイルを追加できなかった。

このときも突然、投稿記事のサムネイル画像や、記事中に挿入する画像ファイルが追加できなくなった。

その数週間ほど前から、メディアライブラリの画面が反転表示のようになることがあり、すっかりブラウザのキャッシュかダークモードの拡張機能の問題だと思っていた。

ところが原因はそうではなかった。

画像ファイルと文字コード。

ネット上では下記の「wp-admin/admin-ajax.php」の記述を変えて改善したという例がいくつか見られた。

ただし、WordPressのいわゆるコアファイルがある「wp-admin」フォルダは、アップデートで上書きされることがあるので、基本的に触らないファイル類。

admin-ajax.php（変更前）

header('Content-Type: text/html; charset=' . get_option('blog_charset'));

admin-ajax.php（変更後）

if( in_array( $_POST['action'], array( 'query-attachments', 'send-attachment-to-editor' ))){
 header( 'Content-Type: application/json; charset=' . get_option('blog_charset' ));
}else{
 header( 'Content-Type: text/html; charset=' . get_option( 'blog_charset' ) );
}

この事例で非常に助かったことは、画像ファイルの表示不可の原因がcharset（文字コードの指定）にあり得ることが確認できたこと。

また、文字化けは起こっていない。

サーバーの文字コードがEUC-JPの場合は要注意。

普通、文字コードが画像ファイルへ影響することは考えにくい。

すべての環境下で起こるわけではないが、ネット上の事例はひとつやふたつではなく、いくつかあったので、信頼性も持てた。

上記のPHPコードをコピペして検索すると、それらの事例が確認できる。

サムネイル画像の表示不可。

サムネイルも表示されない。GoogleでもYahooでも。

数ヶ月前からは、Googleの検索結果でサムネイルが表示されなくなっている。Yahooで検索してみても、やはりサムネイルは表示されない。

ファビコン表示不可の対処例。

ファビコン表示の解決例。

文字コードの対応で、ファビコンが表示。

今回変更したのは下記の3箇所。

• php.iniへの文字コードの指定追加。（サーバーのデフォルト文字エンコーディングをUTF-8へ。）
• .htaccessへの文字コードの指定追加。（ApacheやPHPファイルの文字エンコーディングをUTF-8へ。）
• ファビコンの設置場所をテーマのルートディレクトリへ変更。（念の為。）

php.ini

// Set the default character encoding of the server to UTF-8 / サーバーのデフォルト文字エンコーディングをUTF-8に設定
default_charset = "UTF-8"

.htaccess

# Forcibly convert the character code of the image file / 画像ファイルの文字コードを強制的に変換
<FilesMatch "\.(jpg|jpeg|png|gif|webp|ico|svg)$">
  AddDefaultCharset UTF-8
  php_value default_charset UTF-8
  php_value mbstring.internal_encoding UTF-8
</FilesMatch>

ファビコンの設置場所。

もともと他の画像と同じ「imgフォルダ」内で問題なかったが、念の為、「テーマのルートディレクトリ」直下へ移動。

ファビコン表示の解決とサムネイル表示への再対応。

ファビコン表示は解決、サムネイル表示は未解決。

ファビコン表示は可、サムネイル表示は不可。

上記の3箇所の変更で、ファビコン表示は2日で解決。サムネイル画像の表示不可の問題は解決せず。

サムネイル非表示への再対応。

.htaccessの記述は、ファイル類にPHPとHTML、CSS、JavaScriptを追加し、下記のように再度変更。

header.phpへも記述を追記。HTTPS接続時にHTMLのコンテンツタイプをUTF-8に設定。

.htaccess

# Forcibly convert the character code of the image file / 画像ファイルの文字コードを強制的に変換
<FilesMatch "\.(php|html|css|js|jpg|jpeg|png|gif|webp|ico|svg)$">
 AddDefaultCharset UTF-8
 php_value default_charset UTF-8
 php_value mbstring.internal_encoding UTF-8
</FilesMatch>

header.php（headタグ内）

<?php
 if ($_SERVER['HTTPS'] === 'on') {
 header('Content-Type: text/html; charset=UTF-8');
 }
?>

ひとまずこれで、もうしばらく様子を見てみる。

以上、参考になれば幸いです。

※Webデザインは実務数年、職業訓練校講師数年、フリーランス数年、計15年以上のキャリアがありますが、一気にがぁっと書いているので「です・ます調」ではありません。（元々はメモ書きでした。） ※事実や経験、調査や検証を基にしていますが、万一なにかしら不備・不足などがありましたらすみません。お知らせいただければ訂正いたします。 ※写真は主にUnsplashやPixabayのフリー素材を利用させていただいております。その他の写真や動画もフリー素材やパブリックドメイン、もしくは自前のものを使用しております。

WordPress 関連メモ。

• Simple Image XML Sitemapの使い方の例。画像サイトマップをGoogleへ。
• WordPressのリビジョン。正しく表示されないときの復元の例。
• PerplexityとWordPressの名前と意味合い。著作権と知的財産。
• WordPressのセキュリティ対策。脆弱性の疑問と強化設定。
• WordPressのテーマ。有料と無料の違いと、ウェブサイトの例。
• Googleアナリティクスでの自分のアクセスを除外。【WordPress】
• WordPressの不要なメディアファイルを削除する方法。Media Cleaner。
• WordPress 画像のキャプション表示を削除したい場合。

• WordPressのログインパスワードを変更する方法。セキュリティ対策にも。
• WordPressのトップページがindex.phpでもfront-page.phpでもhome.phpでも問題はない。
• reCAPTCHAの導入例と、バッジ（マーク）をCSSで非表示に。
• WordPressから届く「モデレートしてください」を止めたい。
• WordPress投稿の目次が消えたら！Table of Contents Plusの表示方法。
• 「データベース接続確立エラー」の対処。wp-configに問題がないとき。
• WordPressの投稿IDを確認したい時は、ここを見るのが簡単。
• WordPressのセキュリティをオンラインチェック、「Sucuri」。
• WordPress pタグを投稿記事から削除する1行のコード。
• アイキャッチ画像（WordPressのサムネイル画像）がない場合、いらない場合は、これで解決。

• さくらインターネットのコンテンツブーストの設定方法。（数ステップで。）
• さくらのサーバーからさくらのサーバーへの引越しで、「DNSゾーンが既に登録されています」のエラーが出たとき。
• WordPressで動画が再生されない！ときの対処。
• WordPressの投稿とカスタム投稿を振り分けたい時はこれで解決。（条件分岐できない時の対処方法。）
• 辿ったリンクは期限が切れています！？ WordPressテーマのアップロードエラー対処。
• PHPの配列の括弧の違いは？WordPressでよく見るarray()と[]。
• Contact Form 7に確認画面がない！の対処方法。CSSか固定ページで。
• WordPressの引越しは、ささっとAll-in-One WP Migrationで。
• WordPressの検索ハイライト表示の仕方。（functions.phpに追加するだけ。）
• 引越しなどで、WordPressのメディアが消えた場合の、Moving Media Library。