favicon(ファビコン)とは?覚えておくべき使い方・作り方まとめ

フォーザウィン社員発のIT業界にまつわる豆知識。
「フォーザウィンアカデミー」

HOMEフォーザウィンアカデミー 〉favicon(ファビコン)とは?覚えておくべき使い方・作り方まとめ

favicon(ファビコン)とは?覚えておくべき使い方・作り方まとめ

shutterstock_318872585

Webページをパッと見で分かりやすくしてくれる重要なfavicon(ファビコン)ですが、Webページ制作時につい忘れがちになってしまいます。

今回はこのfaviconについて使い方や作り方をご紹介いたします。

もくじ

  1. faviconとは
  2. favicon設置の目的
  3. faviconのサイズや作り方
  4. まとめ

 

◆faviconとは

faviconとは、「Favorite icon」の略で、ホームページのアイコンとして使われる、画像ファイルです。
「ファビコン」と呼ばれ、Webページをブックマークしたり、別タブでWebページを表示した際にWebページ名の横に並んでいる小さいアイコンのことを指し、様々なWebページに、faviconが設置されているので開いてみてすぐに確認することができます。

◆favicon設置の目的

faviconは絶対に設置しないといけないというルールはありませんが、faviconを設置することにより、複数のタブでWebページを開いている時にそのタブのページが何のページなのかが一目で素早くわかるようになり、タイトルだけのWebページに比べてfaviconがあることでユーザーに記憶されやすく、ページのリピート率アップに繋がりやすくなるというメリットもあります。

◆faviconのサイズや作り方

faviconの推奨サイズは各ブラウザによって異なります。
主なサイズは、

・16px × 16px
・24px × 24px
・32px × 32px
・48px × 48px
・64px × 64px

になります。
全てのサイズを用意する必要はありませんが、1サイズだけだと縮小した際に、綺麗に表示がされない場合もあるので、何サイズか作成しておいた方がいいでしょう。
フォーマットは、「.png」「.gif」「.ico」がありますが、「.ico」がおすすめです。
デザインはわかりやすく、どのサイズでも視認性が優れたデザインにしましょう。
Photoshopなどの画像ソフトで作ることが出来ますが、favicon作成専用のツールを使用しても簡単に作成することができます。

 

◆まとめ

faviconは作成サイズや作り方を覚えれば簡単に作成する事ができます。
ユーザーに認識してもらうためにも、faviconは無いよりもあった方がいいでしょう。

自分のWebページにまだfaviconを設置していなかったら、ぜひこの機会に設置しましょう。

フォーザウィンはIT業界で働く仲間を募集しています!
経験、未経験は問いません。是非当社の採用情報をご覧ください。
採用情報を見る >

最新記事

2019.10.18
2019.10.17
2019.10.04
2019.09.26
2019.09.19

カテゴリー

TOP