favicon.jpg
2019.12.21

知らなきゃ損!?複数のファビコンをマルチアイコンでまとめる方法

あなたのホームページには、もう「ファビコン」が設定されていますか?

ブラウザ上でWebサイトを閲覧する際、タブ左端に表示されるアイコンであるファビコンですが、実は、使用用途によって複数のサイズを用意しておく必要があります。

しかし、いくつもファビコンを用意するのは非常に面倒です。今回は、異なるサイズのファビコンをひとつにまとめることができる、便利な「マルチアイコン」について解説してまいります。

ファビコンを設定する必要性

まずはじめに、ファビコンはただの装飾物ではなく、Webサイトで重要視されているユーザービリティに深く関わっているということを覚えておいていただけると幸いです。

「調べものやネットサーフィンの最中、ふと気付くとタブを大量に開いていた」なんて経験がある方も、私を含め大勢いらっしゃるのではないでしょうか。

ブラウザ上で複数個のタブを開いた際、1Webサイトあたりのタイトル表示領域が狭まることはご存知かもしれませんが、実はこれ、最終的にはファビコンの表示領域しか残りません

そのような場合にファビコンを設定していなければ、ユーザー側から見るとあなたのホームページを示すタブがどれなのかわかりにくい状態です。
些細なことだと片付けてしまうのは簡単ですが、「神は細部に宿る」といった言葉もあります。ぜひこの機会に、ご自身のホームページと関連性の高いマークを使用してファビコンを作成しておきましょう

用意しておくべきファビコンのサイズ

冒頭でも触れたように、ファビコンは使用用途によって適正サイズが異なります。そのため、用途別に複数個のファビコンを作成しておくことが必要です。ここからは、代表的なサイズをいくつかご紹介してまいります。

ブラウザ(表示タブ)

  • 「Internet Explorer」:16px × 16px
  • 「Google Chrome」:32px × 32px
  • 「Mozilla Firefox」:32px × 32px
  • 「Safari」:32px × 32px

デスクトップ・ホーム画面(ショートカットアイコン)

  • 「Microsoft Windows」:64px × 64px
  • 「iphone」:180px × 180px
  • 「ipad」:180px × 180px
  • 「Android」:256px × 256px

複数のファビコンをひとつにまとめるにはマルチアイコンが便利

ホームページのユーザービリティを高めるためには、上記でご紹介した使用用途を含め、いくつもファビコンを作成しなければならず、とても手間がかかってしまいます。

複数のファビコンをサーバーにアップロードして、用途別にリンクパスを変えるといった作業は、ただでさえ膨大なタスクを抱えがちなホームページ運営には向きません。
そこで登場するのが、サイズがバラバラなファビコンをひとつにまとめることができる、便利なマルチアイコンです。

おすすめのマルチアイコン生成ジェネレータ

本記事では、背景色を透過させたきれいなファビコンを作成できる、こちらのマルチアイコン生成ジェネレータをおすすめしています。

半透過マルチアイコンfavicon.icoを作ろう!

https://ao-system.net/alphaicon/

使用方法はとても簡単。用途別の適正サイズに整えたpng画像を用意してアップロード・変換するだけで、.ico形式のマルチアイコンが生成可能です。

ぜひマルチアイコンを活用して、ファビコン作成のストレス軽減にお役立てください。

魅力的なファビコンはユーザーファーストへの第一歩

魅力的なファビコンは、ユーザーファーストへの第一歩。もちろん、ファビコンばかり気にするユーザーもそうはいないかもしれませんが、ちょっとした工夫でホームページへの興味を引くこともできます。

本記事をご覧になった後、ファビコンが設定していないデザイン性の高いホームページを見付けた際に、“もったいない”と感じるようになっていただけたらうれしいです。


WEB制作・WEBデザイン事務所 MATSUI WEB WORKSのブログでは、本記事以外にも、ホームページ制作にまつわるHow to情報を発信しております。お時間のある方は、ぜひご覧ください。