WordPressというのでブログが作れる・・・でインストールをしてテーマ設定をして投稿を始めてみると・・・ん？ブラウザのタブの左に表示されてる画像って何？？設定もしてないのに青いWマーク表示されてるし・・・。不思議に思ったことありませんか？またWマークではなく卵マークだったりして不思議に思ったことないですか？？
この画像やマークのことをfavicon(ファビコン)と言います。faviconとはfavolite iconの略で直訳するとお気に入りのアイコンということになり、サイトを示すマークになります。
冒頭で書いたようにインストール直後はWマークが表示されています。これはWordPressのシンボルマーク、要するにWordPressで作ってることをアピールして、このツールを世に広めたい！！という意図があります。
また、有効化するテーマによっては、Wの代わりにいろいろなマークを表示させるものもあり、これについても理由は同じです。
まあ気にならない場合はいいのですが、せっかく作ったサイトなんだし、できれば気に入ったものに変更したいと思いませんか？そんな方のために今回はfaviconを独自のものへ変更する方法を紹介します。
サイトにfavicon(favolite icon)を設定する一番簡単な方法
何も難しいことしなくても、WordPressには初めからfavicon(WordPressではサイトアイコンと呼びます)が設定できるようになっています。そのことは公式コーデックfavicon の作成で紹介されています。実際にどうするのかというと、管理画面から「外観」→「カスタマイズ」とクリックし、「サイト基本情報」をクリックすると出てきます。
そこにサイトアイコンという項目があり、クリックするとメディアのように画像をアップロードする画面が出てきます。そこへ500px x 500px以上の正方形画像をアップロードすれば設定できます（正方形の画像でなくてもこの画面で切り抜くことができるようになってます）。
あとはテーマを保存（「公開」）をクリックすればハイ終わり！実に簡単な話でした。
気になるのはどんな情報がサイト上に出力されるかということ。実際にやってみたところ、
<link rel="icon" href="アイコンのURL" sizes="32x32" />
<link rel="icon" href="アイコンのURL" sizes="192x192" />
<link rel="apple-touch-icon" href="画像のURL" />
<meta name="msapplication-TileImage" content="画像のURL" />というのが自動で追加されました。最低限の情報は出力されているから問題なし！
でも、ちょっとfaviconについて調べてみたら、結果これだけでは足りないことが発覚してしまい、泥沼状態になりました。いったい何が必要なのか？どれが必要なのか？本当にキリがない位情報があって戸惑う一方。そこで・・・そんな細かいことが気になるという方に、私が可能な限り網羅したfavicon設定の仕方を紹介しましょというのが今回の記事になります。
前述したWordPressの設定で表示されたからいいや！という方はこの先読み進めても意味がないと思いますので閉じていただいて構いません（恐らくこの記事をご覧になっている方は少なくとも「faviconについてググってたら頭がうにうにになってきた」、「WordPressで出力するfaviconってどんな環境でも表示されるの？」という疑念を抱いた方かと思いますから、きっと続きを読んでくれると信じてます・・・）。
いろいろな環境にできるだけ合わせてfaviconを設定する方法
調べれば調べるほどfaviconって扱いが難しいものだとわかってきます。ブラウザの種類、パソコン・モバイルといった機器の環境、中にはブラウザのバージョンによってどのfavicon用のタグが読み込まれ、認識され、表示されるかが変わってきます。
そんな中、大変便利なサイトを発見しました。Favicon Generator. For real.です。
このサイトはfaviconを使ってアイコン表示できるさまざまな環境用のタグをザーッと出力してくれるものです。画像やアイコンの生成も自動でしてくれるのでそれをサーバー内へアップロードし、htmlタグをテーマのheader.phpへ挿入すればハイ！完成！！というすごく便利なサイトです。
アクセスするとこんな画面が出てきますので
右側の「お気に入りの画像を選択してください」から進めれば多分躓くことはないかな？と思います。
※WordPressの標準機能のように大きな画像の内側で切り抜くことができませんので、あらかじめ500px x 500px以上の正方形の画像を用意しておいてください
faviconについて疑問を持ってググった際に見つけたのですが、そのきっかけとなったページがあります。「Favicon Generator. For real.」の操作方法なども掲載されていますので、ぜひ参照ください。
ここからは「Favicon Generator. For real.」で作成したファイルを使って、WordPressへ導入する方法を紹介します。直接テーマのheader.phpへタグを挿入することなく実装できますので、特にテーマ？header.php?という方にはこちらの方法の方が無難かも知れません。
「Favicon Generator. For real.」から入手したファイルのプチ加工
「Favicon Generator. For real.」で作成したファイルのセットをパソコンへダウンロードし、解凍してください。
解凍したフォルダの名前を「favicon」へ変更します
「browserconfig.xml」というファイルをテキストエディタ（メモ帳）などで開き、5～6行目あたりにある
/mstile-150x150.pngを
/favicon/mstile-150x150.pngへ変更して保存します。
次に同じフォルダ内に「site.webmanifest」というファイルがあるので、それをテキストエディタで開いて、
6行目の
"src": "/android-chrome-192x192.png",を
"src": "/favicon/android-chrome-192x192.png",へ、また、11行目にある
"src": "/android-chrome-512x512.png",を
"src": "/favicon/android-chrome-512x512.png",へ変更して保存します。
プチ加工したファイル類のアップロード
ファイルの加工が終わったら、FTPで「favicon」としたフォルダをサイトのルート（index.phpのある場所）へアップロードします。
※下層フォルダのサイトをドメイン名で表示させる（「/wp」を表示上では取る）措置をしているサイトでは調整が必要かも知れません
アップロードしたら、「https://サイトのトップページのアドレス/favicon/favicon.ico」へアクセスして小さなアイコン画像が表示されればOKです（ここは大事なので必ず確認してください）。
ヘッダー内にhtmlタグを挿入（出力）させる
WordPressの管理画面から「外観」→「テーマエディタ」を開き、functions.phpを選択します。
※初めてこの画面を開くときに警告が出ますが「了解しました」をクリックします
以下のコードを一番下に追加します
/* 表示画面上のファビコン */
function ha_site_favicon() {
echo '<link rel="shortcut icon" type="image/x-icon" href="/favicon/favicon.ico" />';
echo '<link rel="apple-touch-icon" sizes="180x180" href="/favicon/apple-touch-icon.png">';
echo '<link rel="icon" type="image/png" sizes="32x32" href="/favicon/favicon-32x32.png">';
echo '<link rel="icon" type="image/png" sizes="16x16" href="/favicon/favicon-16x16.png">';
echo '<link rel="manifest" href="/favicon/site.webmanifest">';
echo '<link rel="mask-icon" href="/favicon/safari-pinned-tab.svg" color="#5bbad5">';
echo '<meta name="msapplication-TileColor" content="#ffffff">';
echo '<meta name="theme-color" content="#ffffff">';
}
add_action('wp_head', 'ha_site_favicon');保存してエラー等が出なければ設定完了です。
きちんと設定したはずなのにfaviconが表示されないときは
手順通りにやってみたけどfaviconが表示されない・・・そんなときは以下の点について確認してみてください。
きちんとhtmlタグが出力されているかを確認する
今回の措置をしたサイトのトップページを開き、ブラウザで「右クリック」→「ソース表示」を行ってください。
ざざーっとhtmlタグが表示されますので、
</head>の上あたりに以下のコードが出力されているかを確認ください
<link rel="shortcut icon" type="image/x-icon" href="/favicon/favicon.ico" />
<link rel="apple-touch-icon" sizes="180x180" href="/favicon/apple-touch-icon.png">
<link rel="icon" type="image/png" sizes="32x32" href="/favicon/favicon-32x32.png">
<link rel="icon" type="image/png" sizes="16x16" href="/favicon/favicon-16x16.png">
<link rel="manifest" href="/favicon/site.webmanifest">
<link rel="mask-icon" href="/favicon/safari-pinned-tab.svg" color="#5bbad5">
<meta name="msapplication-TileColor" content="#ffffff">
<meta name="theme-color" content="#ffffff">もしも出力されていないようであれば、設定手順のどこかに誤りがありますので、見直してください。
ブラウザのキャッシュをクリアしてみる
ウェブブラウザには表示速度を上げるため、一度見たページの情報を一時保存する「キャッシュ」という機能が備わっています。このキャッシュが原因でfaviconが表示されないということがよくあります。
ブラウザの設定からキャッシュのクリアを行うこともできますが、ページを表示した状態で「Ctrl」＋「F5」をクリックすればそのページのキャッシュだけクリアできます。
自動で再読み込みされますので表示を確認してみてください。faviconが表示されれば実装完了です。もしもそうでない場合には手順の見直しを行ってください。
※稀に別のhtmlタグでfaviconの設定がされている場合があり、それが邪魔をして表示されないということがありますが、そうした場合にはページのソースを見て該当開所へ適切な処置を行う必要があります。
管理画面やログイン画面でもfaviconを表示させる方法
ここまでの作業で、訪問者が見る画面についてはfavicon表示できるようになりました。が、せっかくなので管理画面側も同じファビコンを表示させたいと思いませんか？？また、誰かに提供しているサイトなので、なるべくWordPressで制作していることを伏せておきたいといった場合にも有効かと思います。
そもそも何で管理画面側には適用されないの？と思われるかも知れませんので少々解説すると、WordPressのデザイン要素や動作は「閲覧画面側」と「管理画面側」で分かれています。ここまでの対応では閲覧画面側だけの措置のため、管理画面側には適用されないというのが結論です。これはfaviconに限らず、CSSなどでも同じことが言えます（今回の記事の主旨と外れますのでこの位にしておきます）。
それを踏まえ、管理画面側でfaviconを適用するには、テーマのfunctions.phpへ以下を追記します。
/ 管理画面のファビコン /
function ha_admin_favicon() {
echo '<link rel="icon" href="/favicon/favicon.ico">';
}
add_action('admin_head', 'ha_admin_favicon');
add_action('login_head', 'ha_admin_favicon');これでパソコンの管理画面上ではfaviconが表示されるようになるはずです。ダメな場合は上の「表示されないときは」の項目を確認ください。
また、管理画面はパソコンでのみ操作するでしょ！というのが前提ですので、スマホでも同じようにしたいという方は、閲覧画面側のコードとにらめっこして何をどうすればいいかを判断ください。
ブラウザのソース表示でfaviconが表示されないのはなぜ？どう対処すればいいか？
最後に残ったのが、ページをソース表示する際のアイコン。ここまでやってもまだWordPressアイコンが表示されるんです。まあそれほどソース表示する機会なんてないかと思いますが、ここまでやったんだから、ついでに対処しておきましょう。
まず何でソース表示の時には独自のfaviconが表示されないのかについて少し触れておきましょう。ブラウザは特に指定されたfaviconがない時は、そのサイトのある場所を必死に探すんだそうです（必死にかどうかは不明ですが・・・）。そして最初に尋ね当たったものを「これだ！！」と表示するようになっているそうです。これまで行ってきたWordPress上の表示は、ページに何が書かれているのかを示すコードの中（headerタグの中）にアイコンはこれにしてください！と指示していたので表示されるのですが、ソース表示の場合にはWeb上で表示させるページではなく、あくまでも書かれているものを表示している窓なのでheaderタグがそもそも存在しないことから、必死に探した最初のアイコン（つまりWordPressロゴ）が表示されてしまうんです。何となく理解いただけたでしょうか？？
この必死にアイコンを探す順番は
- そのドメインが向いているディレクトリにある「favicon.ico」というファイル
- ディレクトリに存在するフォルダの中にある「favicon.ico」というファイル
という順に行われるようです。
ということは、単純な話、WordPressのインストールされているディレクトリ（index.phpやwp-config.phpなどがある場所）へ「favicon.ico」を入れてやれば表示されるようになります。
ただ注意しておきたいのは、サブディレクトリに別のWordPressサイトがある場合などでは必死に探して尋ね当たったものが違ってくる可能性があったり、下階層にあるWordPressサイトはすべて一番上階層にある「favicon.ico」が適用されてしまう可能性があることです。これについては実際に表示させながらどこに置くのが一番ベストなのかを判断するしかないでしょう。
冒頭の方でリンク表示している公式コーデックス（faviconの作成）の中にも、このことがちらっと書かれていますけど、気が付かないですよねぇ～～。
ただ、本当にソース表示などブラウザ依存の機能を使うときにだけ必要なものですから、特に気にならない方はそこまでやらなくてもいいのでは？というものでもありますので、好みで行ってください。
いかがでしたか？？これで青いWordPressではないものが表示され「WordPressで作ってます！」と知られてしまうことも少なくなりますし、何よりブックマークされたときなどにオリジナルマークだと再訪してくれる確率が上がる・・・かも知れません。
まったくアクセスアップやSEOなどには関係ないことですが、せっかく作ったサイトなのでできるだけオリジナルにしてみませんか？？
ポチップ
ポチップ
