ファビコンの作成方法とワードプレスで簡単に設置する方法
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」をおいた場合は、特に何の記述も必要ありません。すべてのページにのアドレス欄にファビコンが自動的に表示されます。
ルートディレクトリ以外におきたい場合は、以下のタグを各ページの
～