ブラウザでウェブページを開いた時やブックマークに登録された時に表示されるファビコン。何個もタブを開いている時や、お気に入りファイルを探している時に、ファビコンが設定されていると目的のサイトを見つけやすいですよね。
ファビコンが大切だと分かってはいるものの、設定するのを後回しにしてしまいがちです。
そこで、今回はWordPressでファビコンを設定する方法をご紹介いたします。3通りの方法をご紹介しますので、もし「ファビコンの設定ができない！」と悩んでいる場合は試してみてください。
目次
ファビコンとは
念のためファビコンについて改めて説明しておきましょう。ファビコンとは、ブラウザでサイトを表示させた時や、ブックマークに登録した際に表示される小さいアイコン画像のことです。
ロゴ画像やサイトタイトルの頭文字などを表示させることにより、一度サイトを離脱したユーザーが戻ってくるきっかけにもなります。また、ファビコンが設定されていないサイトより、しっかりと設定されているサイトの方が信頼されやすい傾向もあります。
WordPress4.3以降のバージョンからファビコンの設定がとても簡単になりましたので、ファビコンの画像が用意されていれば、初心者でも5分もかからずに設定できますのでこの機会に設定をしましょう。
ファビコンを設定する方法
それでは早速ファビコンを設定していきましょう。設定方法は3通りありますが、特にこだわりがなければ一番最初に設定する方法が簡単でおすすめです。
カスタマイズから設定するやり方
まずはWordPressの管理画面にログインし、左メニューの「外観」内にある「カスタマイズ」をクリックしましょう。
画面が切り替わりますので、左側メニュー内にある「サイト基本情報」をクリックしてください。
「サイトアイコン」と記載されている下に「画像を選択」というボタンがありますので、クリックをしましょう。
既にアップロードされている画像の中から選択するか、新たに画像をアップロードしましょう。サイトアイコンは512x512ピクセル以上の正方形の画像を用意しましょう。
設定が終わったら自分のサイトを確認してみましょう。もしファビコンが表示されない場合は、ブラウザのキャッシュをクリアしてみてください。または、別のブラウザやパソコン、プライベートブラウザで確認してみてください。
phpファイルを編集する方法
基本的には上記のやり方が一番わかりやすく確実ですが、念のためphpファイルを直接いじる方法も説明しておきます。
WordPressの管理画面にログインをしたら、左側メニューの「外観」内にある「テーマの編集」をクリックしましょう。
テーマファイルの一覧の中から「テーマヘッダー (header.php)」をクリックしましょう。
「<head></head>」内に下記コードを追記し、画面下にある「ファイルを更新」をクリックしましょう。
<link rel="shortcut icon" href="アイコン画像のURL">
これで設定は完了ですので、ブラウザでファビコンが表示されるか確認してみてください。
プラグインを使って設定するやり方
次にプラグインを利用してファビコンを設定する方法をご紹介いたします。プラグインによってはスマホアプリのアイコンとしての見え方をプレビューしながら設定することができるのでこちらも便利でおすすめです。特におすすめのプラグインをご紹介しますのでお試しいただければと思います。
Favicon by RealFaviconGenerator
プラグインの更新も問題なくされており、レビューも高評価な「Favicon by RealFaviconGenerator」。パソコンブラウザ用のファビコンだけでなく、iOSやAndroid端末やタブレットなどのアイコンも設定することができます。
WordPress管理画面の「プラグイン」で「Favicon by RealFaviconGenerator」と検索してインストールしてみてください。
ファビコン画像がない場合のおすすめフリー素材サイト
ファビコンを設定するにはもちろんファビコン画像が必要になります。もしファビコンとして使えそうな画像がなくても安心してください。フリーで使えるファビコン画像を集めたサイトがいくつかありますのでご紹介しておきます。
ICOOON MONO
モノトーンでシンプルなアイコンをダウンロードすることができるサイトです。サイト上で簡単に色を変更できますし、512x512pxのサイズもダウンロードすることができるので、おすすめです。
icons8
シンプルなアイコンが8万種類以上も無料でダウンロードすることができます。色も簡単に変えることができますので使い勝手がいいです。
まとめ
WordPressならファビコンがとても簡単に設定できます。これを機会にサイトのロゴを考えてみるのもいいのではないでしょうか。WordPressの使い方をマスターして、どんどんおしゃれでかっこいいサイトにパワーアップしていきましょう！
