こんな方に読んで欲しい！
- Favicon（ファビコン）を印象的なものにして差をつけたい！
- パソコンやスマホのブックマークから探しやすくしたい！
- Faviconを無料で手に入れたい！
Favicon（ファビコン）とは、ブラウザのタブ部分に表示されるアイコンのことです。サイトをデザインするうえで優先順位が低くなり忘れがちですが、印象的なFaviconを使うことは思いのほかメリットがあります。
本来、サイトにオリジナルのFaviconを導入するには、いろいろな制約をクリアしなければいけないのでとても面倒な作業ですが、WordPressプラグインを使えば驚くほど簡単です。
今回は、サイトにオリジナルのFaviconを簡単に設置できるWordPressプラグイン「Favicon Rotator」について徹底解説します！
1. Faviconの入手方法、作り方
WordPressプラグイン「Favicon Rotator」は、ブログにFaviconを設置するのが目的のプラグインなので、Faviconを事前に用意する必要があります。
1-1. Faviconとは
Faviconとは、ブログやホームページのシンボルのようなもので、ブラウザのタブやブックマークなどにアイコン表示されます。
例えば、Googleだとこんな感じ。
ヤフーだとこんな感じです。
GoogleやYahooなどは有名なので、Faviconを見ただけで何のページか分かります。
1-2. 「Favicon Rotator」のメリット
本来サイトにオリジナルのFaviconを表示させるには、WordPressテーマの編集(header.php)をしなければなりませんが、それにはリスクを伴います。
WordPressテーマの編集に失敗すると、最悪の場合画面が真っ白になりWordPressの管理画面すら表示されないこともあります。
「Favicon Rotator」を使えば、安全でしかも簡単にオリジナルのFaviconを自分のサイトに表示できます。
「Favicon Rotator」のメリットは下記のとおりです。メリットは多くありますが、デメリットは特に考えられないので、非常におすすめです。
- 無料で使える
- 初期設定が不要でインストールすればすぐに使える
- 説明が要らないほど簡単に使える
- スマホ用のFavicon（Touch Icon）の登録ができる
- プラグインの更新が頻繁に行われるので、安心して使える
- 使い方の説明が日本語対応している
- 画像がアップロードされたと同時に自動でサイズを調整する
1-3. Faviconを作るときの注意点
Faviconは、OSに付属しているお絵描き用のソフトなど（Windowsなら「MSペイント」、Macなら「プレビュー」）を使って自作することも可能ですが、その場合に注意しなければならない点がいくつかありますので解説します。
1-3-1. 拡張子
Faviconを自作する場合、画像の保存形式を注意する必要があります。主なブラウザで表示が確認されている拡張子は、下記のとおりです。
- .ico
- .png
- .gif
ブラウザによって.pngや.gifでFaviconが表示されないこともあるので、可能な限り.icoを使うべきです。
1-3-2. サイズ
下記のようにブラウザによってFaviconのサイズに制限がありますので、Faviconを自作する場合は注意が必要です。
- Chrome、Firefox、Safari … 32px × 32px
- internetExplere 9: 24px × 24px
1-3-3. デザイン
ブログやホームページの特徴がイメージできるデザインの方が良いのは言うまでもありませんが、Faviconは
小さくても、分かりやすいものがいいので、単純なデザインのほうがかえって見栄えがいいです。
1-3-4. 配色
ブラウザやOSによっては、「ダークモード」と呼ばれる暗い色の背景を採用している場合があります。そのため、Faviconに黒色を使っていると見にくい場合があるので、Faviconのデザインにはなるべく黒色を使わないほうが無難です。
1-4. Favicon作成ツール
下記のサイトではマウス操作でかんたんなFaviconをウェブ上で作れるほか、元画像があればそこからもFaviconを生成できます。
[blogcard url=”https://www.favicon.cc/”]
favicon.ccは、会員登録の必要なく使える無料のサービスなので、アクセスすればすぐにオリジナルのFaviconが作れます。
ここがポイント！
使い方は非常に簡単です。中央のパネルにマウスでマークを描くと、プレビュー画面にイメージが表示されるので、そのイメージでよければ「Download Favicon」と表記されているダウンロードボタンをクリックします。そうすればあなたのパソコンに完成品がダウンロードされます。
1-5. 無料のFaviconをダウンロード
Faviconを自作するのもいいですが、下記サイトからは高品質のFaviconが無料でダウンロードできます。
大量のストックから日本語でFaviconを検索できるので、きっとあなたのイメージにあったFaviconが見つかるはずです。
[blogcard url=”https://icon-icons.com/ja/”]
2. 「Favicon Rotator」の使い方
「Favicon Rotator」の使い方は驚くほどシンプル！
サイズ操作画面からパソコン用とスマホ用のFaviconをそれぞれアップロードするだけで完了！
操作画面からパソコン用とスマホ用のFaviconをそれぞれアップロードするだけで完了です。
「Favicon Rotator」の操作画面には、「WordPress管理画面＞外観＞Favicon」から入ります。
Faviconを自作して手動で登録する場合、Faviconのサイズに注意が必要ですが、このプラグインを使うと画像のアップロードと同時に、自動でサイズを調整してくれるので簡単です。
2-1. ランダムに複数のFaviconを表示させる
パソコン用とスマホ用に2つ以上のFaviconをアップロードした場合は、それぞれの画像がランダムに表示されます。
2-2. Faviconの登録解除
Faviconの登録を解除するには、登録されたFaviconの右上に小さく✖ボタンが表示されているので、それをクリックします。
3. 「Favicon Rotator」の導入方法
「Favicon Rotator」はWordPress公式プラグインなので、「WordPress管理画面＞プラグイン＞新規追加」から簡単にインストールできます。
右側のキーワード検索テキストボックスで「Favicon Rotator」と検索すると1番目にヒットしますので、「今すぐインストール」をクリックし、有効化します。
インストール済みプラグイン一覧に「Favicon Rotator」が表示されていれば、インストール完了です。
次に、「外観 ＞Favicon」をクリックし、画面が切り替わったら、「Browser Icon」の「Add Icon」ボタンをクリックします。
「ファイルをドロップしてアップロード」と書かれている場所に、登録したいアイコンのファイルをドロップすればOK！
画面の下部にさきほど登録したアイコンが表示されました。「Add Blowser Icon」をクリックすれば完了です！
5. まとめ
サイトのデザインをする場合、Faviconの導入は優先順位が低く、忘れられがちでもありますが、ユーザーにとっては重要な機能です。
ここがポイント！
適切に作られたオリジナルのFaviconは強く印象に残りますので、ユーザーはFaviconを頼りにブックマークの中から何度でもブログにアクセスしてくれます。
Faviconにまで気を配り作りこまれたサイトは、ユーザーにいい印象を持たれやすく、信頼も得られやすいです。
Webサイトを作ったら、「Favicon Rotator」と無料Webサイトのファビコンで、サイズは小さいけれど存在感のあるファビコンを導入しましょう！