ファビコンの作成方法とワードプレスで簡単に設置する方法
Webサイトのアクセス数を増やすのに必要なのがサイトのブランディング。
最近のSEOではサイト名を直接検索する指名検索が重要ともいわれています。そしてサイトのブランディングに重要なのが今回説明するファビコンの設置
この記事では、はじめてでも簡単にファビコンを設定する方法、デザインの良いファビコンを作成できるツールや素材を紹介します！
ファビコンを設置してあなたのWebサイトをワンランクアップさせましょう。
目次
ファビコンとは
ファビコンとは、Webサイトを開いたときにブラウザのアドレスやタブの横に表示されるアイコンのことです。
このアイコンは、縦と横の比率が同じ単なる画像ファイルで、Photoshopやペイントなどどの画像作成ソフトでもつくれます。ブラウザ上でファビコンを作れるツールもたくさんでています。
タブをたくさん開いたときに、タブが小さくなってどれがどのサイトかわからなくなってしまいますが、ファビコンがあれば、どのサイトかわかりやすくなります。
ファビコンがなくともSEOで不利になることはありませんが、ユーザーがわかりやすい。ブランドが確立できるため、有名なサイトほど設置している割合は多いです。
設定するメリット
ファビコンを設定するメリットは、大きく２つあります。
サイトを識別しやすい
ファビコンを設定する一番の目的とも言えるのが、サイトを識別しやすいということ。複数サイトを開いているときに、ファビコンが設定されていれば、サイト名を読まなくともすぐに目的のサイトがわかるので便利です。
ブランディングが強化される
お店や会社のロゴを見ればどのブランドかわかるように、ファビコンでサイトのブランド力を強化することができます。サイトの認知度が低い場合はそれほど効果的ではありませんが、有名サイトになればアイコンだけで認知されるようになります。
ファビコンのサイズ
ファビコンのやっかいなところが、ブラウザやOSで必要なサイズが異なるところです。
必ずしもサイズを規定値に合わせなくても、設定すればファビコンが表示されます。しかし、アイコンがぼやけるためターゲットとするプラットフォームのサイズが抑えておくべきです。
ファビコンのサイズは下記の通りです。
| 種類 | サイズ(px) |
|---|---|
| Internet Explorer | 16 × 16 |
| Chrome、Firefox、Safari | 32 × 32 |
| Windows | 48 × 48 |
| 高解像度Windows | 64 × 64 |
| iOSのホーム画面 | 180 × 180 |
| Androidのホーム画面 | 256 × 256 |
| WordPress | 512 × 512 |
この表を見ると
「うわぁ…面倒臭い」
ってきっと思いますよね…
抜けが無いように一応全部書き出しましたが本当に必要なサイズは、
16×16と32×32
の２種類です。この2種類でほとんどのブラウザをカバーできます。
iOS,Andoroidのファビコンとは
じゃあ、他のWindowsとかiOS、Andoroidのファビコンは何かというと、スマホでWebサイトのショートカットをホーム画面に置いたときのアイコンです。
Androidでホーム画面にショートカットを置いたとき(例:Wikipediaの場合)
たぶんほとんどの人が、ホーム画面にWebサイトのショートカットを置いたことはないと思います。よほど有名なサイト以外では使われないので、Windows、iOS、Androidでのサイズはこだわらないなら設定する必要はありません。
そして、Wordpressの512×512、これはWordpressでファビコンを設定するときの非常に便利な機能のためです。
これは次の設定方法で説明します。
ファビコンの設定方法
ではファビコンの具体てな設定方法を手順を追って説明します。
2. サーバーにファビコンファイルをアップロードする
3. 表示したいページにファビコンを表示する記述を加える
※ワードプレスの場合はもっと簡単です。
ワードプレスでファビコンを設定する方法
1．ファビコンファイルを作る
さきほど説明したように、16×16、32×32の2種類のアイコンを作ればＯＫです。アイコンファイルは、WindowsのペイントやMacのプレビューアプリでつくっても、ブラウザ上で作れるツールを使ってもいいです。
私は、無料の素材があったり、変わったフォントも使えるブラウザで使えるCanvaをつかっています。ファイル形式は加工しやすいためPNG形式がおススメです。
pngファイルをicoファイルに変換する
16×16だけ、32×32だけと1種類なら拡張子を.pngから.icoに変更するだけで大丈夫です。しかし、16×16, 32×32といった複数のアイコンファイルを１つにまとめる場合は.icoファイルに変換しなくてはなりません。
icoファイルの変換には以下のサイトが日本語で使えるので便利です。16×16, 32×32, 48×48の3種類のファイルを選択して１つにまとめることができます。
https://ao-system.net/favicon/
ファビコンには拡張子が.icoのファイルを使用しますが、PNGやGIFファイルでもファビコンにできます。.icoファイルと何が違うかというとicoファイルには、16×16, 32×32の別サイズの画像ファイルを複数含めることができます。
これの何がいいかというと、ファビコンを設定するにはサーバーのルートディレクトリ(ホームページを置く最初の階層のフォルダ)にfavicon.icoという名前のファイルを置くだけでサイト全部にファビコンが設定される仕様です。
しかしicoファイル以外のPNGやGIFだと、16×16, 32×32が１つにまとめることができないのでfavicon16x16.png、favicon32x32.pngなど複数のファイルになってしまいます。
そうすると、ルートにファイルを置くだけではファビコンの設定ができず、各ページにファビコンの設定を記述しなくてはなりません。これは非常に手間がかかります。
2. サーバーにファビコンファイルをアップロードする
ファイル名「favicon.ico」のファイルが作成できたら、次はサーバーにファイルをアップロードします。
アップロードする場所は、ホームページを表示する際の一番上の階層です。通常のルートディレクトリはトップページのindex.htmlなどがある場所と同じ場所です。
3. 表示したいページにファビコンを表示する記述を加える
ルートディレクトリに「favicon.ico」をおいた場合は、特に何の記述も必要ありません。すべてのページにのアドレス欄にファビコンが自動的に表示されます。
ルートディレクトリ以外におきたい場合は、以下のタグを各ページの
～内に記述する必要があります。|
1 |
<link rel="icon" href="ファビコンのパスとファイル名"> |
この方法を使うと、ページごとに違うファビコンを使いたい場合、フォルダごとにサイトが異なる場合にも対処できます。
ルートディレクトリ意外にアップロードした場合は例えば以下のように記述します。
(imageフォルダ内にfavicon.icoを置いた場合)
|
1 |
<link rel="icon" href="/image/favicon.ico"> |
これでサイトにアクセスしたときにファビコンがブラウザに表示されるようになります。
ワードプレスでファビコンを設置する
さて、最近だと殆どのサイトでワードプレスを使用していると思うのですが、ワードプレスの場合はファビコンの設定はとても簡単です。
手順は以下の通り。
2. 管理画面からサイトアイコンの設定をする
1. 512 x 512のサイズの画像アイコンを用意する
ワードプレスでファビコンを設定する場合は、ワードプレス側で画像サイズの違う画像を複製してくれるので512×512のサイズの画像１つがあればいいです。
画像ファイルの種類もICOファイルを作る必要がなく、PNGとかJPGなんかでＯＫです。ちなみに正方形であれば特に512×512じゃなくてもファビコンは設定されますが、iOSやWindowsアイコンにも対応できるので512×512が無難です。
アイコン素材はこちらから探すことができます。
素材のところ
2. 管理画面からサイトアイコンの設定をする
以前のワードプレスではテーマファイルを編集する必要がありましたが、バージョン4.3以降からは
外観→カスタマイズ→サイト基本情報
でサイトアイコン（ファビコン）を設定できるようになりました。
簡単にできるファビコンの作成方法
ファビコンを作成する際は、画像ソフトで各サイズのファイルを作成してiconファイルに統合することが一般的でした。
しかし先に説明した通り、ワードプレスでは512×512の画像ファイルを用意すればすべての形式に対応できるようになっています。
そうはいっても、デザインセンスがなくてファビコンを作れないよ…という人は、フリー素材を少し加工して作れば、それなりにセンスのいいアイコンが作れます。
おすすめのファビコン作成ツール
Canva
無料で商用利用ＯＫ、軽くて使いやすいとブラウザ上で使える画像編集ツールではピカ一のツールです。フォントが多く無料の素材もあるのでCanvaだけでも見栄えのいいファビコンを作ることができます。
Canvaでセンスのいいファビコンを作る方法はこの辺が参考になるのでチェックしてみてください。
非デザイナーのためのいい感じのfavicon作成術
おすすめのファビコン用素材サイト
ファビコンは文字だけでも結構いい感じのものが作れますが、ちょっとこだわりたいならイラストも入れたいところ。でも、デザインセンスがないという人は、フリーのアイコンを加工するだけで、オンリーワンのファビコンがつくれます。
コツは、あまりゴチャゴチャしたアイコンは選ばずにシンプルにすることです。ファビコンに使える無料のアイコン素材を提供しているサイトを紹介します。
ICON FINDER
ビジネスで使える、モノクロ、カラーのアイコンが10万点以上あります。画像は下にスクロールしていくだけでどんどん表示されていくので、ページを切り替える手間がなく便利です。ファイル形式は、SVGかPNGでサイズも選べます。
https://www.iconfinder.com/free_icons
ICON RAINBOW
シンプルでかわいいアイコン素材を探せます。ダウンロードできるファイル形式が、JPG,PNG,SVGとイラストレータ、フォトショップで使える形式と豊富です。商用利用可能、無料で登録も不要なので安心して使用できます。
http://icon-rainbow.com/
ICON MONO
シンプルで実用性の高いモノクロアイコンがダウンロードできます。ファイル形式は、PNG、JPG、SVGと３種類でサイズも選べます。クセがなくどんなサイトや資料にも使えるので、ビジネス系のWebサイトに多くつかわれています。
https://icooon-mono.com
まとめ
ファビコンの作成方法、設置方法について紹介しました。
ファビコンは、絶対に必要ではありませんが、ユーザーの利便性、ブランディングに重要な項目です。一昔前のファビコン設置は結構面倒で、さらにプラットフォームが多くなってきたのでサイズ違いのアイコンを作成するのが非常に大変でした。
ワードプレスでファビコンを設定する方法は非常に簡単になり、アイコンファイルも一種類でよくなりました。この機会にファビコンを設置して、ワンランク上のサイトにしてください♪