HTML/CSS

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

こんにちは。yuki(@Ryuki_4648)です。
サイトとブログのファビコンを設定したので、記事にまとめてみました。

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

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

2.ファビコンのサイズ

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

  • 16px × 16px:Internet Explorer
  • 32px × 32px:Chrome,Firebox,Safariなど
  • 48px × 48px:Windowsのサイト
  • 180px × 180px:スマホやタブレットのショートカットを作成する際の最大サイズ

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


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

フォーマットについて

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


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



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

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

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

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

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

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


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


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

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

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

5.おわりに

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