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

執筆・編集 衣川 知秀デザイン歴 20 年超、500 サイト以上を監修。ブランド戦略をビジュアルへ昇華し、使いやすさと美しさを両立させる UI/UX が持ち味。

3DCG 専門学校卒業後、広告代理店で Web デザイナーとしてキャリアを開始。旅館予約システムや商店街プロモーションなど多業種案件で「伝わるデザイン」の基礎を固めました。
その後、制作部門のリーダーとして 5 年間にわたりチームマネジメントを経験。企画立案から撮影ディレクション、公開後の AB テストまで、クリエイティブとマーケティングの橋渡し役を担ってきました。
2013 年に TREVO を共同設立。現在はデザイン、UI ガイドライン策定やアクセシビリティ監修を担当。
最近の取り組み:AI 生成画像と手描きイラストを組み合わせたブランドビジュアル開発とプロトタイプ検証。
信条:私たちが目指すのは、ホームページ制作を通じてお客様がハッピーになること。そして、そのホームページを訪れるユーザーが心地よく、笑顔になれるような体験を提供し、世の中にポジティブな影響を少しずつ増やしていくことです。
執筆記事:記事一覧ページ
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対策に強いオリジナルデザインの制作サービスを提供しています。
関連の記事
-
TREVOスタッフ
-
Android 7.0 Nougatが本日から配布開始となります。
TREVOスタッフ
-
1,300年前の琵琶とルイビトンの柄
TREVOスタッフ
-
TREVOスタッフ
-
欧米・欧州・日本徹底比較!2025年最新SERPsとAI活用SEOガイド
板浪雅樹
-
TREVOスタッフ