ホームページのアイコン設定方法とは？おしゃれな素材サイトも紹介

アイコンは、目にとまるホームページ作りには欠かせない存在です。

ホームページにアイコンを設定すると、様々なメリットが得られます。

しかし、具体的にはどんなメリットがあるのでしょうか。

そして、ホームページにアイコンを設定するにはどうするといいのでしょうか。

それぞれについて解説します。

目次表示

アイコンはホームページのシンボルマーク

アイコンは、ブラウザの上部にあるタブの左側や、ブックマーク一覧に表示されます。

さらにパソコンでは、デスクトップに設置するショートカット、スマートフォンではホーム画面に表示される場合もあります。

アイコンのほかに「ファビコン」と呼ばれる場合もあり、サービスや企業の象徴的な存在です。

ホームページへのアイコン・ファビコン設置は、必ずしも必要ではありません。

しかし、アイコン・ファビコンの設置には、以下3つのメリットがあります。

それぞれについて解説します。

ブランディングとは、ブランドを形成するための様々な活動を意味します。

例えば、Facebookをイメージしてみてください。

ひと目で「Facebookだ」とわかる、よく目にするアイコンが思い浮かぶでしょう。

アイコン・ファビコンの設定は、見ようとしているのがどの企業・サービスなのか、をユーザーに認識してもらいやすくなるのがメリットです。

魅力を感じるホームページの、URLやタイトルを覚えるのは難しいものです。

そこでアイコン・ファビコンが活躍します。

アイコン・ファビコンがあれば、どのホームページを見たのかが、簡単に覚えられます。

さらに、スマートフォンやタブレットの場合、ホームページのショートカットはホーム画面に設置できます。

そうなったとき、アイコン・ファビコンを設定しているかによって、印象は大きく違います。

アイコン・ファビコンがあれば、より判別しやすく、覚えやすいでしょう。

例えばパソコンやスマートフォンで、複数のホームページを開いて、見比べるシーン。

アイコン・ファビコンがなければ、どれがどこのホームページなのかを、見分けがつきにくくなってしまいます。

いつもは、アイコン・ファビコンを使って、何気なく見分けているかも知れません。

しかし、アイコン・ファビコンがなければ、それぞれのホームページを開いて確認する手間がかかります。

アイコン・ファビコンは、ホームページにとって、縁の下の力持ちのような役割を担っています。

ホームページの、アイコン・ファビコンを作る方法は以下の２つです。

使用先による、画像形式やサイズの違いも解説します。

ホームページで使用される、アイコン・ファビコンは「favicon.ico」と「apple-touch-icon.png」の2形式があります。

それぞれの使用するサイズ・シーンの違いを表で見てみましょう。

	favicon.ico	apple-touch-icon.png
特徴	ファビコンと呼ばれる形式。使用先によって、サイズが異なるのが特徴。	ウェブクリックアイコンと呼ばれ、iPhone・iPad・Androidなどのスマートフォン及びタブレットに使用される形式。デバイスごとに自動的にリサイズされるのが特徴
作成するサイズ	Microsoft edgeの場合は16×16px、Google Chrome・Firefox・Safariは32×32px、Windowsのスタート画面用は48×48px。	180×180pxのみ。