WordPressでFavicon（ファビコン）を設定する方法を解説します。
Favicon（ファビコン）とは
Faviconとは、Webサイトのシンボルとして使われるアイコンのことです。
ファミコンと似てますが全く関係ありません。
ブラウザの上にあるタブやお気に入り（ブックマーク）一覧、スマホのホーム画面に表示されている小さな画像です。
ZAKKIPOSTのFaviconは以下のように表示されています。
お気に入り一覧に使われていることから、
「Favarite Icon」が名前の由来とされています。
ぶっちゃけ、Faviconを設定しなくても大きな支障はありません。
大きな支障はありませんが、Faviconを設定していないと、Webサイトのイメージ低下につながる可能性があります。
Faviconを設定していないと、上の例のように紙切れがぺろーんと折り曲がったようなアイコンが表示されてしまいます。
– Chromeの場合
これだと安っぽいサイトに見えませんか？素人が運営している安っぽいサイトに見えますよね。
実際にWebの素人だったとしても、素人が運営するサイトをじっくり読もうって人は少ないでしょうから、素人感はできるだけ排除した方が良いでしょう。
あと、タブをたくさん開いているときやお気に入り一覧でリスト表示されるときにFaviconがないと目立たないし、他のサイトと見分けがつかなくなってしまいますね。
最初にご紹介した通り、FaviconはWebサイトのシンボル（=顔）なので、読者の方にサイトを見つけてもらうためにも、サイトを憶えてもらうためにも、Faviconを忘れずに設定しておきましょう。
Faviconの作成方法
Faviconの作成方法について順を追って説明していきます。
1. デザインを決める
まず、Faviconをどのようなデザインにするか考えます。
一般的には、ロゴやトレードマーク、サイト名やブランド名、企業名などを使うことが多いです。
Faviconは正方形なので、横に長いロゴやサイト名だと収まりきりません。そういった場合には頭文字だけをデザインに取り入れる方法もあります。
Faviconは表示されるサイズがとても小さいので、複雑な模様を使うと縮小したときにゴチャゴチャしたデザインになってしまいますので気をつけましょう。
2. Faviconを作成する
Faviconはブラウザごとにサイズやフォーマットが違います。
Faviconのサイズ
Faviconのサイズはブラウザとデバイスによって適正サイズが異なります。
代表的なものは以下の通りです。
| IE タブ | 16px x 16px |
| IE9 ピン留め機能 | 24px x 24px |
| Chrome、Firefox、Safari などのタブ | 32px x 32px |
| Windowsのホームページアイコン | 48px x 48px |
| 高解像度 Windowsホームページアイコン | 64px x 64px |
| iOS、 Androidのホーム画面 | 152px x 152px |
これだけでも種類が多いので、何種類かに絞って設定することもできます。
該当するサイズがない場合はブラウザが自動的に拡大・縮小してくれます。
ただ、面倒くさがって1種類しか用意しなかったりすると
- 拡大した時に画像が粗くなってしまう
- うまく縮小されず表示されない
このようなことがありますので、最低でも「16px × 16px」と「32px × 32px」くらいは用意することをオススメします。
Faviconのフォーマット
Faviconのフォーマットは「.ico」がオススメです。
「.png」や「.gif」だと一部のブラウザで表示されないケースがあります。
Favicon Generator
- 色んなサイズを用意しろ
- 「.ico」がオススメ
って言われても…
「.ico」なんて聞いたことないし、どうやって作るの？って思っている方が多いのではないでしょうか。
そこで、皆さんが馴染みの深い「.jpg」や「.png」、「.gif」ファイルを1つ用意するだけで、必要なファイル一式を自動生成してくれる無料ツールをご紹介します。
Favicon Generatorです。
Favicon用の「.jpg」や「.png」、「.gif」ファイルを1つアップロードして、「ファビコン一括生成」のボタンを押してダウンロードするだけです。
Faviconの設定方法
ここではFavicon Generatorで作成したファイルを設定する方法を解説します。
- Favicon GeneratorでダウンロードしたZipファイルを解凍
- 解凍したファイルをサーバーのドキュメントルートに設置
- 以下のコードをhead〜/headの間に挿入
※全てが必須ではありません。
※ドキュメントルートに設置しない場合は、「browserconfig.xml」と「manifest.json」のパスを書き換えてください。
最後にひとこと
以上でFaviconの設定方法の解説は終わりです。
Faviconはひとつひとつ自分で作ると大変ですがツールを使うことで作成〜設置まで簡単に済ませられますので、是非この機会に設置してしまいましょう。
