タブの左にあるアイコンって何？
ファビコンっていうよ！
サイトの目印になるものだよ
今日はこの内容について解説します。
【記事の内容】
- ファビコンとは
- 制作の注意点
- 無料ツール紹介
初めまして、リドです。
私はベンチャー起業でデザイナーをしていました。
今回は「サイトの差別化で必要なファビコンについて」解説します。
ファビコンとは？基本解説
ファビコンの正式名称は「favorite icon」と言います。
表示される場所は、webサイトを開くとタブに表示されるアイコンのことです。
このファビコンは小さいですが、サイトのブランディングに関わる重要な役割があります。
設定してないサイトをちらっと見かけますが、設定した方が「プラス」に働きます。
設定ていないのは勿体無いよ
ファビコンの役割は主に2つです。
- ブックマーク、タブ上での他サイトとの識別化
- ユーザービリティの強化
などが挙げられます。
簡単に掘り下げて説明します。
ブックマーク、タブ上での他サイトとの識別
検索をしている時、多くのタブを開いていることありませんか？
開きすぎるとページが埋もれて識別が難しいですが、ファビコンを設定していれば識別が可能になります。
多くのサイトをブックマークをしている場合にも有効です。
リドブログもすぐにわかるね
ユーザービリティの強化
ブランディングにも有効的です。
サイト名がうる覚えでもファビコンで判別することが可能になります。
サイト内でのユーザー体験の構造に一役を担います。
ユーザーの再訪率のアップも見込めます。
ユーザーにとっても大切だね
サイトのアイコンを制作しよう
ファビコンは小さく表示されるので、複雑なデザインは避けましょう。
できるだけシンプルで、尚且つオリジナル性があるデザインが良いです。
サイトとの関連性を持たせるために、サイトの象徴的なものをお勧めします。
デザイン例は、１文字、シルエットアイコン、ロゴなど
色も1色か2色で構成しましょう
サイトから抽出するといいね
ファビコンのサイズと拡張子
大きさは多種多用に渡ります。
代表的なサイズは以下の通り。
- 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
画像をトリミングして使用できるサイト。
xiconeditor
アップロードした画像の編集、オリジナルアイコンの制作ができるサイト。
favicon.cc
アップロードした画像をドッド風に加工できるサイト。
オリジナルアイコンもできます。
たくさんの無料ツールがあるよ！探してね
cocoonでファビコンを設置しよう
当ブログはcocoonを使用しています。
Cocoonの場合は、
外観>カスタマイズ>サイト基本情報から設定が可能です。
拡張子はpngでOK！
他のワードプレスはテーマによって異なるので要注意です。
プラグインを使用すれば簡単に設置できます。
コードをいじらずに設定できるよ
ファビコンはオリジナルが良い
本記事のポイントは3つ
- ファビコンはブランディング
- オリジナルで識別させる
- ユーザービリティの強化
小さいデザインでもユーザーやサイトブランディングに重要な役割を持っています。
サイトと統一性がありオリジナルのファビコンを制作しましょう。
コメント