COLUMNコラム
初心者が簡単にWordPressのファビコンを設定できる方法を紹介！効果的なファビコン作成のポイントも解説！
「ファビコン」とは、Webサイトを個別に見分けるための小さなアイコンです。これ1つで、Webサイトの認識度は格段に上がります。
しかし、ファビコンを設定するメリットやその方法についてしっかりと理解されていない方は多くいらっしゃるかと思います。
そこで、本記事ではファビコンのメリットや設定方法などについて詳しくご紹介します。
効果的なファビコンの作成についても解説しますので、ブログ運営をしている方の参考となれば幸いです。
ファビコンとは
「ファビコン」とは、Webサイトのブランドを象徴する小さなアイコンのことです。
ブラウザのタブやアドレスバー、ブックマーク一覧、検索結果等に表示されます。
正式には「Favorite icon」と呼ばれますが、省略形の「ファビコン」が使われることが一般的です。
通常は16×16ピクセルや32×32ピクセルのサイズとなり、ICOやPNG、またはJPEG形式で作成されます。主流はICO形式です。
WordPressでファビコンを設定するメリット
ここでは、WordPressでファビコンを設定するメリットや必要性について解説します。
サイトのブランディング
ファビコンの設定により、そのWebサイトが専門性の高いプロのサイトであることを示すことができます。
また、細部まで注意を払い管理されている証拠にもなるでしょう。これはユーザーに信頼感を与え、サイト訪問数の増加にも期待できます。
また、一貫性のあるブランドイメージは、ブランディングにも役立つものです。
ブログのテーマに合うファビコンを設定することで、より多くの方にブログの認知を広めることができます。
検索結果がファビコンと共に表示される
ファビコンは検索結果のリストに表示されます。そのため、サイトを見つけてもらいやすなるでしょう。独自のファビコンを設定することは、他のWebサイトと区別するためにも重要です。
また、モバイル端末の検索結果では、ファビコンはWebサイトのURLの左側に表示されます。そのため、信頼できるサイトであると印象づけられやすくなるでしょう。
ユーザーの利便性の向上
ユーザーが多数のタブを開いている場合でも、ファビコンは表示されます。そのため、ユーザーはファビコンを見てそのタブがどのサイトかをすぐに認識できるでしょう。
また、ブックマークされたWebサイトは、そのサイトのファビコンと共に表示されます。これによりユーザーは一目で自分のお気に入りのWebサイトを見つけ出すことができます。
ファビコンがない場合、サイト名かサイトを開いて記事の内容を確認する必要があります。ファビコンがあれば、見つけられやすくクリックもされやすいです。
ファビコンを設定することはユーザーの利便性を大いに向上させ、アクセス数アップを図るための重要なステップとなります。
WordPressにファビコンを設定する方法
ここでは、実際にWordPressにファビコンを設定する方法を3つ紹介します。
①：サイト基本情報から設定する
最も簡単にファビコンを設定する方法となります。
まず、WordPressの管理画面の「外観」メニューから「カスタマイズ」を選択し、メニューの中のサイト基本情報を選択してください。
次に、サイトアイコンを選択を押下してファビコンの画像をアップロードします。アップロードが完了したら、「選択」を押しましょう。
最後に、サイト基本情報の上部分にある「公開」をクリックすると、ファビコンの設定が反映されます。
②：header.phpを編集する
ファビコン設定には、テーマファイルエディターを開きheader.phpを編集する方法もあります。
まずは管理画面の左のメニューから「外観」を選択し、「テーマファイルエディター」を選択してください。
次に、右側の「テーマファイル」から「テーマヘッダー」を選択して編集画面を開きます。このテーマヘッダーのファイル名がheader.phpです。
選択したファイルの内容から<head> ～</head>と記述されているコードを探し、<head>と</head>の間に以下のコードを記述しましょう。
<link rel="shortcut icon" href="Webサーバーに保存したファビコン画像のURL">最後に、画像をFTPソフトやサーバーのファイルマネージャーを使用してアップロードします。
③：プラグインを使用する
WordPressのプラグインを導入して、ファビコンを設定する方法もあります。
使用するプラグインは「Favicon Rotator」です。
プラグインをインストールしていない場合、まずはWordPressの管理画面にあるプラグインの新規追加からFavicon Rotatorを検索してインストールしてください。
インストール完了後、Favicon Rotatorを有効化すると外観メニュー内にFaviconという項目が新たに追加されます。
続いて、Faviconを選択して、ファビコン設定画面を開き、「Add Icon」のボタンをクリックします。
その後、画像ファイルのアップロード、もしくはライブラリから画像を選択してAdd Browser Iconボタンをクリックしてください。
最後に、設定画面の「設定の保存」を押して完了です。
WordPressのファビコンを用意する方法
WordPressのファビコンを用意する方法は大きく分けて3種類あります。
それぞれ説明します。
自作する
最初にWordPressのファビコンとして使いたい画像を準備します。
画像は「.png」または「.jpg形式」で、高品質であることが重要です。
ペイント等でも作れますが、CanvaやAdobe Sparkなどのフリーのグラフィックデザインツールを使用して自分で画像を作成することもできます。
次に作成した画像をWebブラウザで表示できる形式である「.ico形式」に変換する必要があります。変換には「Faviconジェネレーター」などのWebサービスを使用すると良いでしょう。
ファビコンをWordPressにアップロードするには上記で説明した通りです。
プロに依頼する
ファビコンを自分で作成するスキルや時間がない場合はプロのデザイナーに依頼することもできます。
ファビコン作成を依頼するためには、クラウドワークスなどのフリーランスが集まるプラットフォームを利用するのがおすすめです。
クラウドワークスには多くのデザイナーが登録しており、自分のプロジェクトに合ったデザイナーを見つけることができます。
依頼する際には、具体的な要件と期待を明確に伝えることが重要です。ブランドの色やロゴ、テーマなど、ファビコンに反映したい要素を伝えるとよいでしょう。デザインの締め切りや予算も忘れずに伝えることが大切です。
デザイナーが作成したファビコンを確認し、必要な場合は修正を依頼します。
素材サイトからダウンロードする
ファビコンは、素材サイトからダウンロードする方法もあります。
まず、素材サイトからブログやWebサイトのテーマに合ったアイコンを探します。
素材の使用に関しては、必ず利用規約を確認しましょう。商用利用可能か、著作権表示が必要かなど、使用許可の条件を理解することが重要です。
WordPressのファビコンの画像素材サイト3選
ここでは、おすすめのファビコンの画像素材サイトを3つ紹介します。
いずれも素材・アイコン配布サイトとしては有名です。ぜひ活用していきましょう。
FLAT ICON DESIGN
FLAT ICON DESIGNとは、WebデザインやスマートフォンUIなどで注目されている
フラットデザインのアイコン素材をストックしたサイトです。
すぐ使える商用利用可能なフラットアイコン素材が無料でダウンロードできます。
使用許可やクレジット表記も要りません。illustratorやPhotoshopで編集できるデータのダウンロードも出来るため、本格的にカスタマイズしたい方にもおすすめのサイトです。
icooon-mono
ICOOON MONOは、商用利用可能なモノトーンのアイコン素材を無料でダウンロードできる素材サイトです。
『ICOOON MONO』は、WEBデザインやDTPのほかビジネスシーンで活用できるアイコン素材をストックしています。
クレジット表記や使用許可なしで自由に利用できます。
ダウンロードするときに任意のカラーを選ぶことができるため、Web上で簡単に色の編集ができます。
イラストAC
イラストACは無料素材のダウンロード＆アップロードサイトです。
商用目的で作成されるDTPやWebサイトにも、無料で自由にダウンロードして利用できます。
イラストの種類が豊富にあるため、好きなジャンルのアイコンを見つけやすいのもポイントです。切り抜きや色変更などの加工も自由に行えます。
ただし、素材のダウンロードには会員登録が必要になりますので注意してください。
効果的なWordPressのファビコン作成のポイント
ここでは、効果的なWordPressのファビコンを作成するためのポイントを紹介します。
ブランドを強化し、Webサイトを訪れた人に印象を与えるためにこれらのヒントを活用してみてください。
目立つデザインにする
ファビコンは小さいため、他の多くのタブと一緒にブラウザで表示されるときに目立つようにすることは、ユーザー体験とブランドを知ってもらうという点から重要です。
まず、明るい色を使用しましょう。明るい色やコントラストの高い色は、他のファビコンやブラウザの背景と比較して目立つ可能性が高いです。
しかし、色はブランドの一部であるため、サイト内容と一致している必要があります。
また、ファビコンは正方形ですが、中に表示される形は特徴的であっても良いでしょう。特徴的な形は視覚的に目立ち、多くのファビコンと区別できます。
サイト内容を表わすものにする
ファビコンはWebサイトのブランドや内容を表現する小さなビジュアル要素です。サイトの内容を的確に表していると、サイトが認識されやすくなります。
また、Webサイトが特定のテーマやトピックに特化している場合、そのテーマに関連するシンボルをファビコンとして使用することもおすすめです。
たとえば、料理ブログで合った場合はフライパンのファビコンを使用するなどがあるでしょう。
シンプルで見やすいものにする
ファビコンはサイズが小さいため、デザインはシンプルで分かりやすいものであることが重要です。
ファビコンの細かいディテールは見えにくくなります。
デザインを考える際は、シンプルな形状や線、大胆なパターンを用いたデザインが有効です。小さいサイズでもはっきりと識別できるようにしましょう。
また、明るい色と暗い色の組み合わせはファビコンがはっきり見えるなどの良い効果をもたらします。
WordPressのファビコンが表示されない場合
WordPressのファビコンが表示されない場合、下記2つのポイントをチェックしてみてください。
ブラウザにキャッシュが残っている
ファビコンが表示されない一般的な理由は、ブラウザのキャッシュです。
ブラウザはファビコンをキャッシュしてページのロード時間を短縮します。
新しいファビコンが正しくアップロードされていても、古いものが表示されるか、まったく表示されない場合があります。
この問題を解決するにはブラウザのキャッシュをクリアしてください。または、キャッシュを無視してリロードできる「スーパーリロード」を試してみましょう。
Googleのガイドラインに反している場合がある
ファビコンは識別可能なものでなければなりません。
不適切な表現やミスリーディングとなるもの、又は著作権侵害のファビコンは許可されません。
ファビコンがGoogleのガイドラインに反していると、デフォルトのファビコンに置き換えるか、何も表示されなくなってしまいます。
まとめ
本記事では、WordPressのファビコンの概要と用意する方法、設定方法、効果的な作成方法などについて解説してきました。
ファビコンは小さなビジュアルアイコンですが、ブランディングや集客に役立つ要素です。
この機会にファビコンを設定あるいは見直し、Webサイトをより集客性の高い魅力的なサイトにしましょう。