ホームページを目立たせるアイコン画像ファビコンとは？
WEBサイトに設置したいファビコンとはどのようなものか？その存在について皆さんはご存知でしょうか。
ファビコンは、サイトを表示した場合に、アドレスバーやタブ、ブックマーク項目の先頭、URL左横部分に表示されるアイコン画像のことを言います。
この小さなアイコンは、サイトのシンボルマークとなって、会社やサービスのブランディングに大きな効果を発揮してくれます。
また、ファビコンの存在は、SEO対策やWEBサイトの運営に携わる方から「URLの先頭部分に表示されているロゴマークを付けたい。」という質問をいただくことが多い要望でもあります。
今回は、多くのホームページ制作会社も活用している、ファビコンについて紹介をさせていただきます。
ユーザーの注目が集まるファビコンとは？
ファビコンの名前の由来は、「favorite icon：フェイバリットアイコン：お気に入りアイコン」の英語の語句が要約されて「favicon：ファビコン」と呼ばれるようになりました。
別名では、お気に入りに登録した場合に表示される、「アイコン：icon」という意味でもあります。
サイトにファビコンを設置していることで、複数のタブを開いて、WEBぺージを閲覧する場合やお気に入り、ブックマークに入れたページを表示させる場合に、目印として役目を果たしてくれます。
ファビコンが設置してあるWEBサイトは、他社のサイトより注目を集めて見つけやすくなることで、リピートユーザーを増加させるメリットを持っています。
また、多くの大手企業がファビコンをサイトに導入していることから、同じようにロゴから連想させるファビコンを設置しているだけで、会社やサービスのイメージアップにつながりブランディングの効果も向上します。
ファビコンを作成する際のポイント【解説】
ファビコンは、WEBサイトやECサイトの内容を伝えるシンボルマークで、誰にでもわかりやすくシンプルなものになるように作成します。
ファビコンの拡張子は、ico,png,gif形式に対応していますが、古いブラウザで対応していない場合もありますので、株式会社セレクト・ワンでは、ico形式の拡張子を推奨しています。
icoのファイルは、サイズの違う画像をひとつのファイルにまとめられるメリットがあって、それぞれの環境に対応して、最適な大きさの画像を表示してくれます。
ファビコンの表示サイズは、ブラウザや使用する環境によって指定があります。
基本的なサイズは16px×16pxですが、こちらはChrome,Edge,Firefox,Safariなどブラウザのタブの表示サイズで、ブックマークのアイコンは、32px×32pxが表示サイズになります。
また、Windowsのホームページアイコンの場合は、48px×48pxで作成することになります。
現時点では、約20種類以上のサイズがあるとも言われていますが、今回はその中でも代表的なものを紹介させていただきます。
主なファビコンのサイズ例 6選
1.16px×16px・・・・Chrome,Edge,Firefox,Safariなどブラウザのタブ
2.24px×24px・・・・IE9のピン留め機能
3.32px×32px・・・・ブックマークのアイコン
4.48px×48px・・・・Windowsホーム画面のサイトアイコン
5.64px×64px・・・・高解像度のWindowsのホームページアイコン
6.180px×180px・・・・Android,iOSなどのスマホのホーム画面アイコン
WordPressを利用しない場合やWordPressが4.3以前のバージョンの場合は、各サイズのアイコンを用意する必要があります。
各ブラウザのファビコン表示サイズは、16px×16px が一般的なサイズですが、表示される場所によっては表示サイズがこれらよりも大きい場合もあります。
そのため、作成する際は32px×32pxで対応するか、表のサイズのファビコンを作ってマルチアイコンにしておくをオススメしています。
また、WordPressが4.3以降のバージョンであれば、512px×512pxのPNG形式ファイルを作成すれば全てに対応してくれるようなっています。
ロゴマークからファビコンは作れない？
お客様からの質問の多くに、ロゴマークからファビコンが作れないか？という相談をされることがあります。
たまたま、ロゴマークが縮小できるケースもありますが、殆どのロゴを縮小することは、デザインの判別ができなくなるため難しい状況です。
ロゴを一つのファビコンとして使用する場合には、ロゴマークの頭文字だけを見せる方法か、デザインを起こし簡略化することが必要です。
主なファビコンのケース
CASE1：ロゴマーク自体を縮小している
CASE2：ロゴマークの頭文字だけを見せている
CASE3：デザインを起こし簡略化しているケース
おわりに
今回は、多くの制作会社も活用しているファビコンについて、弊社の制作実績を元に紹介をさせていただきました。次は、かなり珍しいケースと言えるかもしれませんが、皆さんに紹介させていただきたい事例があります。
ファビコンを作成して設置したハズなのに、なぜか？アイコンが表示されないようなケースがまれに出てきます。
この場合は、WEBサイトのキャッシュや閲覧履歴が以前のもので残っていることが考えられますので、「スーパーリロード（強制再読み込み）」でキャッシュをクリアにしてから、再度の確認をすることが必要です。
また、サイトのブランディングに重要な役割を果たすファビコンは、どなたでも無料のツールで簡単に作成することができます。
この記事をご覧になった方は、今後のホームページ制作の参考にしていただいて、デザイン性も高くメリットの多いファビコンを導入してみてはいかがでしょうか。
【株式会社セレクト・ワン】
東京本社：03-5953-7160
株式会社セレクト・ワンの社員によってオススメ情報を執筆している【編集チーム】です。”初心者の方にもわかりやすく”をモットーに、記事を読んだら直ぐに実践できるWEBマーケティング関連の情報を紹介しています。
また、弊社の実績や導入事例から見る・コンテンツマーケティング・SEO対策・WEB制作など、様々な最新情報やノウハウも発信していきます。
