◎ WordPress を使って作成した web ページにファビコン（favicon）を簡単に追加、設定する方法

ファビコン（favicon）とは、Web ページを開いたときに、タブのページタイトルの横に表示されるシンボルマーク的なアイコン画像を指し、ブックマークの一覧などにも利用される。なお、favicon というネーミングは「お気に入りのアイコン（favorite icon）」を縮めた俗称らしい。

 

かなり以前は、ファビコンを Windows ブラウザで表示させるために、拡張子「.ico」のアイコン用ファイルが必須だったり、ファビコンが反映するまで時間がかかったりで、結構面倒だった。現在でもべた書きの web サイトで表示させるためには、ico 画像や png 画像などをサーバーにアップしておき、トップページのhead部分に次のように記述することになるが、WordPress ならこの記述無しで簡単に設定できる。

<link rel="shortcut icon" href="（ファビコン画像のパス）">
<link rel=“icon” type=“image/png” href=“（ファビコン画像のパス）”>
<link rel=“apple-touch-icon” href=“（ファビコン画像のパス）”>

WordPress でファビコンを簡単に設定

WordPress で webサイトを作成、公開すると、ファビコンは自動で WordPress のもの（「W」のマーク）が表示される。そのままでは、サイトの信頼性が疑われるし、SEO的にも不利になるので、オリジナルのアイコンに変えることが推奨される。

● WordPress のダッシュボードから［メディア］を開いて、ファビコン用の png 画像などをドロップして追加しておく。

 

● ダッシュボードの［外観］から［カスタマイズ］をクリックする。

 

● ［サイト基本情報］をクリックする。

 

● ［サイトアイコンを選択］をクリックする。

 

● 「画像を選択」画面が開くので、追加しておいたファビコン用の画像を選択し、右下の［選択］ボタンををクリックする。
（※追加した画像の1つはこの時点で省いています）

 

● 「画像切り抜き」画面に移動する。今回はトリミングの必要が無い正方形の画像をアップしているので、［切り抜かない］をクリックする。

 

● 「サイト基本情報」の画面に戻るので、下側のプレビュ＝でファビコンの具合を確認し、上側の［公開］ボタンをクリックする。公開後、ファビコンは直ぐに反映する。

 

● 各ブラウザから設定したwebサイトを開き、ファビコンの視認性などを確認する。

 

なお、WordPress のbサイトアイコン（ファビコン）は、512 × 512px 以上の正方形が推奨されている。今回はそれよりも小さい 180 × 180px の ico 画像を使用したが、特に問題は起きていない。

 

※スクリーンショットの撮り忘れがあり、別の Mac を使用して補完したため、macOSのバージョンの違いによる見た目の差異が少しありますが、操作の違いはありません。