WordPressにファビコンを簡単に設定・表示する方法【作り方も解説】

2022年9月17日2023年12月31日

当ページのリンクには広告が含まれる場合があります。

ブラウザに表示されるアイコンて、どうやったら表示されるの？

ファビコンを作成する際のルールが知りたいです

このような疑問にお答えします。

ファビコンは、主にブラウザのタブやブックマーク、スマホでホーム画面に追加した時に表示されるアイコンです。

faviconを設置すると、検索結果やブックマーク時にブログを見つけてもらいやすくなるので再訪を促すことができます。

ファビコンを設置する方法や作り方、反映されない時の対処法などを解説します。

本記事の内容

ファビコンを設置するメリット
ファビコンの作成方法・コツ
WordPressでファビコンを設定する方法
ファビコンが表示されない場合の対処法

本記事の内容詳細（目次）

ファビコンとは

ブラウザのタブに表示される小さなアイコンの事をファビコン（Favicon）といいます。

名称の由来は、「お気に入り（favorite）のアイコン（icon）」を短縮した造語です。お気に入りとはブックマークのこと。

ファビコンはもともとはInternet Explorer5で初めて搭載された機能でしたが、現在はどのブラウザでも表示されるようになりました。

WordPressにファビコンを設定するメリット

検索結果にファビコン付きで表示されるので目立つ
サイトを覚えるきっかけになる

ファビコンを設定するメリットを一言でいうと、自サイトを発見しやすくする、です。

検索結果にファビコン付きで表示されるので目立つ

現在スマホでGoogle検索すると、検索結果画面にファビコンが表示されます。

PC版にも表示されたことがありますが、不評だったのか、すぐに削除されました。

検索結果画面はテキスト中心なので、画像があるとかなり目立ちます。

サイトを覚えるきっかけになる

ファビコンはブラウザのタブやブックマークに表示されます。

何かの課題を解決するために、繰り返し同じサイトに訪問することはよくあるものです。

何度か訪問しているうちにファビコンの色や形を覚え、サイト名や運営者名を覚えれば、ブックマークされたり再訪されやすくなります。

ファビコンがサイトの名前を覚えるきっかけになることは少なくないはずです。

ファビコンの種類・サイズ・ファイル名

種類	ファイルの種類・名前	サイズ
ブラウザ用	favicon.ico	32x32
ホーム画面用	apple-touch-icon.png	180x180

ファビコンのサイズ

ファビコンのサイズは非常に種類が多く、下記のようなものがあります。

サイズ	用途	必要？
16x16	Internet Explorerのタブ
24x24	IE9の「ピン留め機能」
32x32	ブラウザのタブ
48ｘ48	Windowsのサイトアイコン
64ｘ64	高解像度のWindowsサイトアイコン
180ｘ180	iPhoneのホーム画面アイコン
192ｘ192	Androidのホーム画面アイコン

このうち、作成が必要なのは、32x32と180x180のみです。後述しますが、WordPressなら512ｘ512の元画像を1枚作ればOKです。

Internet Explorerは既に開発・サポート共に終了しているので考慮する必要はありません。もちろん、サイトの訪問者にIE利用者が多い場合は作っても良いでしょう。

また、Windowsのサイトアイコンはデスクトップにショートカットを作成した際などに使われますが、うまく機能しない場合も多く、環境も限られていることからわざわざ用意する必要はないでしょう。

Androidのホーム画面用のアイコンは、作っても作らなくても構いません。というのも、Androidはランチャーによって、アイコンのサイズを変更できる場合があり、端末や製造元によってもアイコンの仕様が若干異なるためです。

ファビコンのファイルの種類・拡張子

ブラウザ	ico	png	gif	jpg	svg
Chrome
Safari
Edge
Firefox
Opera
Internet Explorer

全てのブラウザで対応しているファイル形式は、「.gif」「.ico」「.png」です。

gifは現在はほとんど使われなくなってきているため、ico形式かpng形式で作りましょう。

ファビコンのファイル名

ファビコンのファイル名は、特に決まりがあるわけではありません。

<head>タグ内でファイル名を含めて指定するためです。

ただ、<head>タグにファビコンの指定をせずにファビコンを表示させるようにしたい場合はファイル名を下記のようにします。

用途	ファイル名
ブラウザ用	favicon.ico
ホーム画面用	apple-touch-icon.png

後述しますが、ファビコンは上記名でFTPでルートディレクトリにアップするだけでも表示されます。

ファビコンの作成方法

ファビコンを実際に作成する方法を解説します。

元データの用意：素材を利用する

ファビコンは非常に小さいので、複雑な表現はできません。

フリーのアイコン素材を使って作成するのが簡単です。下記のサイトの素材を使って作成すれば、透過PNGでダウンロードできるので、透過の処理も不要です。

ファビコン用の元データを用意するのにおすすめのサイト

FLAT ICON DESIGN: シンプルながらカラフルなフラットデザインなのでファビコンにはうってつけです。
icooon-mono: 単色のアイコンですが、色は自由に選ぶことができます。膨大な量があります。
icon rainbow: こちらもicooon-monoと同様、単色のアイコンですが色は自由に設定可能です。数も同じくらい、操作性も似た感じなので気に入った方を使えば良いでしょう。

上記サイトで画像ファイルをダウンロードする際は、512pxの透過pngを選択してダウンロードすれば元画像の準備は完了です。

WordPressは512x512のpng画像をアップするだけ

WordPressでファビコンを設定する場合は、512ｘ512pxのPNG画像を1枚作ってアップロードします。

そうすると自動的に必要なサイズの画像を生成し、ソースにも含めてくれるようになっています。便利ですね。

元データの作成でダウンロードした画像をアップロードすれば完了します。

WordPress以外は変換ツールでファビコンを作る

WordPress以外の場合は、必要なサイズにリサイズ・画像形式の変換が必要です。

ファビコン用の変換ツールで作成すると簡単です。

元画像からファビコンに変換するツール（無料）

Faviconジェネレーター: 操作画面がわかりやすいので最もおすすめです。元画像をアップし、プレビューを見て問題なければ16x16と32x32を選択してダウンロードしてください。
マルチアイコン作成: 元画像のリサイズがあらかじめ必要なため、やや使い勝手が悪いサービスです。
favicon.cc: 画面が英語で、インターフェースに独特の癖があります。

ファビコンを作る際のコツ

かなり小さくしても何かわかるものにする
サイトのイメージにあったものにする
余白部分は透過しておく

ファビコンを作る際に意識しておくべきポイントについて整理します。

かなり小さくしても何かわかるものにする

ファビコンが使われる場所はブラウザのタブと検索結果画面です。

どちらもかなり小さく表示されるので、縮小した時につぶれて何が書かれているのかわからないようにならないように注意しましょう。

上記のように、元画像を写真のような色数の多い、複雑な画像にすると、変換後に何が表示されているのかわからなくなります。

逆にシンプルなアイコンにしておくと、変換後も何のマークか識別できますので、シンプルなアイコンを元画像に選びましょう。

サイトのイメージにあったものにする

ファビコンの絵柄を選ぶ際は、運営しているサイトのテーマやイメージに合ったものにしましょう。

ファビコンに設定するべき絵柄例

ロゴマーク
サイトが扱っているテーマ
サイト名のイニシャル（英字または日本語で1～2文字）

といっても、明確に図柄が思いつかないテーマを扱っている場合があるかもしれません。

そういった場合は下記を試してみてください。

Googleの画像検索でサイトのテーマを検索（例：副業）
検索オプションで＜ツール＞→サイズから＜アイコン＞を選択
テーマに関連したアイコンが表示されるので、良さそうな（シンプルな）絵柄を探します（例：電球のマークが出てきたとします）
アイコンの素材サイトで電球を検索し、元画像として採用します。

余白部分は透過しておく

今回紹介している元データの素材サイトでは背景が透過されたPNGをダウンロードできるようになっていますが、自分でアイコンを作成した場合などは、なるべく背景を透過しておきましょう。

そうしておかないと、背景色と一緒にファビコンになるのでやや見た目が悪くなってしまいます。

ファビコンの設置方法

ファビコンの設置方法は大きく3つあります。

WordPressでサイトアイコンを設定する方法
手動でHTMLで書く方法
FTPでアップするだけにする方法

WordPressでサイトアイコンを設定する場合

WordPressの管理画面からカスタマイザを開き、＜サイト基本情報＞にある、「サイトアイコン」がファビコンのことです。

＜サイトアイコンを選択＞を選び、元画像をアップロードします。

設定を反映すると、必要なサイズの画像が生成され、下記のようなコードが<head>タグ内に出力されます。

<link rel="icon" href="32x32の画像のフルパス" sizes="32x32" />
<link rel="icon" href="192x192の画像のフルパス" sizes="192x192" />
<link rel="apple-touch-icon" href="180x180の画像のフルパス" />
<meta name="msapplication-TileImage" content="270x270の画像のフルパス" />

HTMLで書く場合

HTMLで直接書く場合は下記のコードを<head>タグ内に記述します。

<link rel="icon" href="32x32の画像のパス" />
<link rel="apple-touch-icon" href="180x180の画像のパス" />

スラッシュから始まるルートパスにしておくとサイト内の全ページで同じコードが使えます。

実はドキュメントルートに画像を設置するだけでも表示できる

ファビコンは実はファイルを設置するだけでも使うことができます。

<head>タグに<link>タグファビコンのパスを指定していない場合、ブラウザは「favion.ico」をサーバーにリクエストします。

元画像から変換したfavicon.icoをアップロードするだけなので簡単
HTMLソースの記述を省略できる（ほんの数行なので高速化の効果はほぼありません）

ミネヤリョウジ

当サイトはこの方法を採っています。WordPressの機能を使うとむやみに4行も出力してしまうのが嫌だったので・・

ファビコンの作成や設定でよくある質問

設定しているのに反映されていないようです

正しく設定しているはずなのに、ブラウザのタブにファビコンが表示されない場合は以下を確認してください。

サーバーのキャッシュをクリアする
ブラウザのキャッシュをクリアする
ファイルのリンクが正しいか確認する
サブディレクトリを別サイトにする場合、ルートディレクトリのサイトと別々に設定することはできません（ルートディレクトリが優先される）。

検索結果に表示されないのはどうしてでしょうか

ブラウザのタブにはファビコンが表示されているのにスマホの検索結果に反映されていない場合は下記を確認ください。

設定直後はまだクロールされていない場合があるので、URL検査からトップページをインデックスリクエストしてみる（リクエストするとrobots.txtでブロックしても無視されます）
クロールされているが、サーバーがキャッシュを返している可能性があるのでキャッシュをクリアする
わいせつなものやヘイト表現など、Googleのファビコンのガイドラインに沿っていないか確認する

ファビコンを設置しない場合にどんなデメリットがありますか？

ファビコンはサイトをアピールする手段の一つです。特にアピールしたくないなら設置しなくてもブログの運営上の直接的なデメリットは特にありません。

しいて挙げるなら、ブラウザが毎回「favion.ico」をサーバーにリクエストすることになるのでエラーログに記録され、ログが肥大化してしまうことぐらいです。

ファビコンのデザインはどのくらいの頻度で更新してもいいですか？

Googleのガイドラインでは、あまり頻繁に変更するべきではない、とされています。

ファビコンはサイトを表すロゴのような働きでもあるので、サイト名やロゴを変更する頻度に合わせる程度で、通常一度設定したらそうそう変更するべきではありません（変更してもほとんどメリットが得られないはずです）。