WEBデザイン 2022.06.23(木)

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

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

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

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

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

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

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

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

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

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

ホームページにアイコンを設定する3つのメリット

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

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

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

メリット1.ホームページはアイコンでブランディング可能

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

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

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

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

メリット2.アイコンでホームページを覚えやすくなる

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

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

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

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

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

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

メリット3.アイコンでホームページを識別しやすくなる

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

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

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

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

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

ホームページのアイコンの作り方とは?

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

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

ホームページのアイコンは2種類の画像形式で準備

ホームページで使用される、アイコン・ファビコンは「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のみ。

ホームページアイコンの作り方1.有料ツール・ソフトを使用する場合

「Adobe illustrator」「Adobe Photoshop」などを使用する方法です。

オリジナリティのあるアイコン・ファビコンを作れますが、ある程度の知識と慣れを要します。

アイコン・ファビコン作り初心者におすすめなのは、Adobe illustratorです。

詳しくは「PhotoshopでWebデザインする方法とは?基礎やポイントを解説」に掲載していますが、Adobe illustratorは細かい作業向け。

そのため、Adobe illustratorはアイコン・ファビコン作りに向いています。

ホームページアイコンの作り方2.無料ツール・ソフトを使用する場合

無料ツール・ソフトには「favicon.cc」「Favicon generator」などを使います。

favicon.ccはドットでデザインでき、Favicon generatorは既存画像をファビコンに変換可能です。

無料ツールは手軽な反面、機能が制限されがちになってしまう点に気をつけましょう。

アイコン・ファビコン作りは、まずは無料ツールを試してみて、物足りなさを感じた場合有料ソフトに移行するのがおすすめです。

【構築方法別】ホームページのアイコン設定方法

ホームページの構築方法は、大きく分けて下記の2つです。

  1. HTMLで構築する
  2. WordPressで構築する

それぞれに、アイコン・ファビコンを設定する方法を見てみましょう。

アイコン設定方法1.HTMLでホームページを構築した場合

HTMLとは、ホームページを形成するのに使用される、プログラミング言語です。

HTMLで構築されたホームページに、アイコン・ファビコンを設定する手順は以下の通り。

  1. favicon.icoとapple-touch-icon.pngを、ルートディレクトリ内にアップロードする
  2. HTMLファイルにある、haedタグ内にコードを書き込む
  3. アイコン・ファビコンを表示させるページのheadタグにコードを書き込む

書き込むコードは、

<link rel=”apple-touch-icon” href=”./apple-touch-icon.png” sizes=”180×180″>
<link rel=”icon” type=”image/x-icon” href=”./favicon.ico”>

の2行です。

コピペで使用できるため、ぜひご活用ください。

ルートディレクトリとは?

ルートディレクトリとは、ホームページの最も上の部分です。ルートは枝分かれの根の部分、ディレクトリはフォルダを意味しており、ルートフォルダと呼ばれる場合もあります。

アイコン設定方法2.WordPressでホームページを構築した場合

WordPressとは、プログラミングの知識がなくても、ホームページを簡単に構築できるシステムです。

世界的に有名で、多くのホームページで利用されています。

WordPressに、アイコン・ファビコンを設定する場合の手順は以下の通りです。

  1. 管理画面の外観をクリック
  2. カスタマイズ→サイト基本情報、とすすむ
  3. サイトアイコンのボタンをクリックし、png画像をアップロードする

WordPressに使用する画像サイズは、512×512pxです。

基本的には、コードの書き込みが不要で、初心者も簡単に設定できます。

スマートフォンのショートカットに、アイコン・ファビコンを表示させる場合のみ、コードの設定が必要です。

HTMLで構築されたホームページで使用するコードをWordPressのheadタグに設置しましょう。

ホームページのアイコン設定に欠かせない3つのポイント

ホームページのアイコンが、トラブルの原因になったり、効果を発揮しなかったりするのは避けたいもの。

そういった事態に備えて、注意すべきポイントを解説します。

ホームページアイコン設定のポイント1.著作権に注意する

著作権は、訴訟トラブルに発展するリスクがあります。

特に、アイコンに使用する素材に要注意です。

商用利用は可能なのか、確認してから使うようにしましょう。

ホームページアイコン設定のポイント2.シンプルなデザインにする

ホームページのアイコンを、複雑にしすぎると、かえって見栄えが悪くなる場合があります。

「シンプル・イズ・ザ・ベスト」を意識して、覚えてもらいやすいアイコンにしましょう。

ホームページアイコン設定のポイント3.見分けやすいデザインにする

見分けやすさは、覚えてもらいやすさに直結します。

出来る限り、独創的なオリジナルデザインを考えましょう。

独創的なデザインにするポイントは、下記の2つです。

  • 社名・サービス・イメージなど、幅広い視点から考える
  • できるだけ素材サイトに頼らない

検討チームを結成すると、より洗練されたデザイン検討が可能です。

ホームページのアイコンに便利、おしゃれなダウンロードサイト3選

著作権侵害のリスクがなく、アイコンをおしゃれに彩る、素材のダウンロード先を紹介します。

アイコンを作りに、お役立てください。

ホームページのアイコン素材サイト1.ICOOON MONO

引用元:ICOOON MONO

ICOOON MONOは、モノトーンのアイコン素材を扱うサイトです。

6,000種類以上の素材があり、いつでも無料でアイコン素材に利用できます。

ホームページのアイコン素材サイト2.SILHOUETTE DESIGN

引用元:SILHOUETTE DESIGN

SILHOUETTE DESIGNは、影絵のようなアイコンをダウンロードできます。

人物・食べ物・乗り物など、幅広いデザインのアイコンが豊富です。

ホームページのアイコン素材サイト3.ハンコでアソブ

引用元:ハンコでアソブ

ハンコでアソブは、フリーの透過PNGハンコ素材サイトです。

クレジット記載が不要で、商用利用も可能。

かわいい系のデザインが人気です。

ホームページにオリジナルアイコンを設定したい方へ

今回は、下記3つのポイントをお伝えしました。

  • ホームページにアイコンを設定すると、様々なメリットが得られる
  • ホームページのアイコンは、設定先にあわせて複数サイズを準備する
  • ホームページのアイコンを有効活用するために、気を付けるポイントがある

アイコンは自力で設定できますが、ときには専門知識を要する場面もあるでしょう。

人材育成スクールChapter Twoでは、Webデザインの知識が、スムーズに身に付く講座をご用意しております。

より質のいいホームページ用アイコンを作成したい方は、ぜひ無料相談会へお越しください。

Related Article
関連記事