大阪のホームページ制作会社 株式会社TREVO
                   
スタッフブログ

小さい画像でも効果はあります。favicon(ファビコン)は設定しよう

2021.02.25.

ホームページ制作

運用

twitter Facebook Pocket LINE はてブ

株式会社TREVOの月額制ホームページ制作サービス
PR

WEBブラウザでホームページを見ているとWEBブラウザのタブに画像が表示されています。
普段あまり気にすることもないかもしれませんがこれは、favicon(ファビコン)と呼ばれる画像で、WEBページを開いた時に出来る複数のタブの中から見たいページを見つける目印になります。
WEB制作の現場ではSEO対策などに比べて重要度が高いわけではありませんが、WEB
サイトの象徴をになっているので必ず作成はします。
今回はfavicon(ファビコン)の役割について解説していきます。

ファビコンとは

タブブラウザでWEBページを開いた時にタブに表示される画像、検索結果に表示されるページタイトルの横に表示される画像で、WEBサイトのシンボルマーク的な役割をはたしている画像です。また、WEBサイトをお気に入りに登録した時にはファビコンも登録されるのでユーザとっては見つける目印になります。
また、実際にファビコンが設定してるWEBサイトとそうでないWEBサイトではユーザーに残る印象が随分と異なってきます。ファビコンがあることによってユーザは無意識にこのWEBサイトはどのようなサイトをかを判断しています。

ファビコンが表示される個所

WEBブラウザの場合

ブラウザのタブ、お気に入りのショートカット、検索結果のタイトル、に表示されます。

スマートフォンの場合

ショートカットを作成した時にファビコンが適応されます。

このようにファビコンは様々な場所に適応されWEBサイトのブランディングや知名度アップに貢献しています。
ファビコンが有ると無いでユーザーには親近感や信頼感を与えることが出来ます。

ファビコンの大きさと作り方

ファビコンの大きさ

ファビコンは様々なあブラウザやスマートフォン、タブレットに使われるため対応するサイズが制作数えたことはありませんが10~20程度あります。
16×16
ファビコンのサイズ
16×16
32×32
36×36
48×48
72×72
96×96
144×144
180×180
192×192
256×256

WEBブラウザやお気に入りに使われるのは「16×16」になりスマートフォンやタブレットに利用されるのは「180×180」になります。
ただ、用途に合わせて、種類ごとにファビコンを制作するのは合理的ではありませんでので
対応させたい一番大きなファビコンを用意するのがおすすめです。
ファビコンは用途に合わせて自動的に適応したサイズに変更されるので大きめのファビコンを用意しておけば、ファビコン縮小されても綺麗に表示されます。

ファビコンの作り方

ファビコンの作り方は、まずファビコンにしてたい正方形の画像を作成します。
※ほどんどの場合あロゴがファビコンにする方が多いです。
作成した画像をファビコンに自動変換してくれるサイトがありますのでそこに画像をアップすることでファビコンを作成することが出来ます。
オススメとしては下記の3サイトが比較的簡単にファビコンを作成することが出来ます。

Faviconジェネレーター
favicon generator
ファビコン favicon.icoを作ろう!

まとめ

ファビコンは自体は小さい画像ですが、ファビコンを設定するこでユーザーに無意識にWEBサイトのことを認知してくれるようになります。画像は小さながら様々なブラウザやデバイスで活躍してくれます。設定方法は非常に簡単なのでまだ設定されていなのであればこの機会に設定してみてはいかがでしょうか?

大阪のホームページ制作会社TREVOでは、ホームページ制作に関する情報を掲載しています。最短2日で仮サイトを公開するサービスやSEO対策に特化したホームページ制作、オリジナルホームページデザイン、ライティング、リスティング広告、WEBマーケティングなどのサービスをご紹介しています。

経歴: 3DCG制作の専門学校を卒業後、デザイン会社に就職。デザイン会社では主にWEB制作を担当し、旅館の予約システムや商店街にWEBカメラを設置したプロモーション等を展開し、4年後に転職。 株式会社TREVOでデザイン、コーディング、ディレクション、システム開発を担当

twitter Facebook Pocket LINE はてブ
                   

関連の記事