ファビコン(favicon)の作成方法まとめ

ファビコンを設定についてまとめました。

1.ファビコン(favicon)とは？

ファビコンとは、Webブラウザのタブやアドレスバーに表示されるアイコン画像のことです。お気に入り（favorite）に登録する際に表示されるアイコン（icon）を意味します。
そのサイトのシンボル的な役割を担っています。ユーザーが複数のサイトを開いていても、ファビコンがあることにより、どのサイトかが分かりやすくなります。

2.ファビコンのサイズ

次に、ファビコンのサイズについて解説します。
ブラウザや使用するデバイスによって異なります。一般的には16px × 16pxのサイズが使用されることが多いです。
代表的なサイズを下記のリストにまとめてみました。

複数のサイズの画像を用意するか、大きめのサイズを一つ作っておく方法とがあります。実際に、一枚の画像をアップするだけで、色々なサイズで描きだしてくれる無料ツールがあります。（後述）

3.ファビコンの作成方法

フォーマットについて

ファビコンは、.icoというフォーマットを使用します。

「.png」や「.gif」でも設定可能ですが、Internet Explorer(IE)10以前のバージョンでは対応していないため、「.ico」形式で作成するのがおすすめです。

作成ツールを利用する方法

実際に、無料でファビコンを作成できるサイトを見ていきます。
今回は「Favicon ジェネレーター」を使用しました。

こちらのサイトです→　Favicon ジェネレーター

今回私は、700px×700pxの大きめのアイコンを1つ作りました。

必要なサイズをチェックします。

画像をアップロードしたら、「ダウンロード」ボタンを押すと、.ico形式で画像が保存されます。
head内に下記のコードを追加したら完了です。

ファビコンが追加されました！

4.Wordpressでのファビコン設置方法

WordPressでのファビコンの設置は簡単にできます◎

管理画面から「外観」＞「カスタマイズ」を開きます。
「カスタマイズ」の中にある「サイト基本情報」を選択すると、「サイトアイコン」という項目が表示されます。
そこに作成したファビコン用の画像をアップロードすると設置することができます。
512px × 512px以上の正方形の画像が推奨されているそうです。

5.おわりに

Googleの検索結果にもファビコンが表示されるようになりました。企業やブランドのロゴマークが使用されることもあり、ファビコンを設置していることでサイトの信頼性、ユーザーの利便性向上にもつながると思います。
SEO効果も期待できると思うので、できるかぎり設定しておくことがおすすめです。