ファビコンとは?サイトのアイコンを制作して設置しよう【基本解説つき】

ファビコンとは?サイトのアイコンを制作して設置しよう【基本解説つき】
まめ丸
まめ丸

タブの左にあるアイコンって何?

LiDo
LiDo

ファビコンっていうよ!
サイトの目印になるものだよ

今日はこの内容について解説します。

【記事の内容】

  • ファビコンとは
  • 制作の注意点
  • 無料ツール紹介

初めまして、リドです。
私はベンチャー起業でデザイナーをしていました。

今回は「サイトの差別化で必要なファビコンについて」解説します。

ファビコンとは?基本解説

ファビコンとは?基本解説

ファビコンの正式名称は「favorite icon」と言います。

表示される場所は、webサイトを開くとタブに表示されるアイコンのことです。

このファビコンは小さいですが、サイトのブランディングに関わる重要な役割があります。

設定してないサイトをちらっと見かけますが、設定した方が「プラス」に働きます。

LiDo
LiDo

設定ていないのは勿体無いよ

ファビコンの役割は主に2つです。

  • ブックマーク、タブ上での他サイトとの識別化
  • ユーザービリティの強化

などが挙げられます。

簡単に掘り下げて説明します。

ブックマーク、タブ上での他サイトとの識別

検索をしている時、多くのタブを開いていることありませんか?

開きすぎるとページが埋もれて識別が難しいですが、ファビコンを設定していれば識別が可能になります。

多くのサイトをブックマークをしている場合にも有効です。

ブックマーク、タブ上での他サイトとの識別
LiDo
LiDo

リドブログもすぐにわかるね

ユーザービリティの強化

ブランディングにも有効的です。
サイト名がうる覚えでもファビコンで判別することが可能になります。

サイト内でのユーザー体験の構造に一役を担います。

ユーザーの再訪率のアップも見込めます。

LiDo
LiDo

ユーザーにとっても大切だね

サイトのアイコンを制作しよう

ファビコンは小さく表示されるので、複雑なデザインは避けましょう

できるだけシンプルで、尚且つオリジナル性があるデザインが良いです。

サイトとの関連性を持たせるために、サイトの象徴的なものをお勧めします。

デザイン例は、1文字、シルエットアイコン、ロゴなど
色も1色か2色で構成しましょう

LiDo
LiDo

サイトから抽出するといいね

ファビコンのサイズと拡張子

大きさは多種多用に渡ります。

代表的なサイズは以下の通り。

  • 16px × 16px:IEのタブ
  • 24px × 24px:IE9ピン留め機能
  • 32px × 32px:Chrome、Firefox、Safariなどのタブ
  • 48px × 48px:Windows
  • 64px × 64px:高解像度のWindows

拡張子は基本的に「.ico」を使用します。
「png」でもOKの場合もあります。

サイズや拡張子は設定方法で左右されるのでよく確認しましょう。

ファビコンの無料制作ツールについて

一から作りたい方はAdobe Illustrator、Adobe Photoshop、Canvaなどがお勧めです。
「もっと簡単に作りたいよ」という方向けにツールを紹介します。

favikon 

画像をトリミングして使用できるサイト。

favikon

xiconeditor

アップロードした画像の編集、オリジナルアイコンの制作ができるサイト。

xiconeditor

favicon.cc

アップロードした画像をドッド風に加工できるサイト。
オリジナルアイコンもできます。

favicon.cc
LiDo
LiDo

たくさんの無料ツールがあるよ!探してね

cocoonでファビコンを設置しよう

当ブログはcocoonを使用しています。

Cocoonの場合は、

外観>カスタマイズ>サイト基本情報から設定が可能です。

拡張子はpngでOK!

他のワードプレスはテーマによって異なるので要注意です。
プラグインを使用すれば簡単に設置できます。

LiDo
LiDo

コードをいじらずに設定できるよ

ファビコンはオリジナルが良い

ファビコンはオリジナルが良い

本記事のポイントは3つ

  • ファビコンはブランディング
  • オリジナルで識別させる
  • ユーザービリティの強化

小さいデザインでもユーザーやサイトブランディングに重要な役割を持っています。

サイトと統一性がありオリジナルのファビコンを制作しましょう。

コメント

タイトルとURLをコピーしました