普段、ブラウザでホームページを閲覧しているとき、タブに表示されるアイコンや、ブックマークをしたときに表示されるアイコンが目に留まることはありませんか。それらをもとにページを認識していることもあるでしょう。
そのホームページのアイコンについての役割やメリットのほか、これからホームページを制作する方へ向けて、簡単な設定方法や注意点をご紹介します。
ホームページのアイコンとは？
ホームページのアイコンというと、きっと多くの方が企業やサイトのロゴマークをイメージするでしょう。例えば、Twitterのページをブックマークすれば、青い鳥が象徴的なTwitter社のロゴのアイコンとページタイトルが記録されます。
ホームページのアイコンは、ブラウザのタブの一番左側やブックマーク一覧に表示されるほか、PCではデスクトップに置くショートカットアイコン、スマートフォンではホーム画面に置かれるアイコンなど、さまざまな箇所に設置されます。
それらは、それぞれのホームページを表す、もしくは識別するためのシンボルで、「アイコン」や「ファビコン」と呼ばれるものです。
ホームページのアイコンを設定するメリット
ホームページにアイコンやファビコンを設定することは、ホームページを構築する上で必須ではありません。実際、設置していないホームページはいくつもあります。しかし、企業がホームページを作る場合には、ぜひ設定しておくのをおすすめします。なぜなら、次のようなメリットがあるためです。
●ブランディングになる
アイコンやファビコンはそのホームページのトレードマークになります。ブックマークやショートカット、ホーム画面にそのアイコンが設置されれば、目印になりますし、すぐに「あの企業のホームページだ」とユーザーに認識して覚えてもらいやすくなります。つまり、ブランディングに役立つといえるのです。
●ブックマークをしたときに識別しやすくなる
もっと機能的なメリットもあります。例えば、ブラウザでブックマークをしたときに、ホームページタイトルだけでは、初めて訪れたのであれば特に、どんなサイトだったのかイメージがつきにくいですが、アイコンやファビコンがあることで、「あのサイトか」とすぐに思い出しやすくなります。
スマートフォンやタブレットなどでは、ホームページへのショートカットをデスクトップやホーム画面に置くことができますが、そのときにアイコンが設定されていれば、そのアイコンがデスクトップやホーム画面に置かれることになります。ホームページそのものがアプリのようになって置かれ、判別しやすくなる上に、覚えてもらいやすくもなります。
●ブラウザで複数のサイトを開いているときに見分けやすくなる
時には、ブラウザで複数のホームページを開いてタブを切り替えながら作業することもあるでしょう。その場合、やはりアイコンがあったほうが、どのホームページなのか瞬時に見分けやすいので便利です。
ホームページのアイコンを作る方法
ホームページのアイコンやファビコンを設定するためには、まずアイコンやファビコンを作る必要があります。ここではどんなサイズのどんな形式のものを作ればいいのか、またどんな方法で作ることができるのかを解説します。
●2種類の画像形式で用意する
アイコンとファビコンの画像には次の2つの画像形式があります。サイズについては、使用される場所によって変わってきます。
1.favicon.ico
拡張子は「ico」で、名称は「favicon（ファビコン）」です。サイズによって使用先が異なるので、複数のサイズを作ります。すべて正方形です。IE用は16px×16px、Chrome・Firefox・Safari用は32px×32px、Windowsのスタート画面のピン留めなどに使われるものは48px×48pxで作ります。
2.apple-touch-icon.png
これはiPhoneやiPadなどのiOSやAndroidスマホのホーム画面に使われる「ウェブクリップアイコン」と呼ばれるアイコンです。サイズは180px×180pxの1サイズを用意すればよいといわれています。デバイスごとに自動的にリサイズされます。
●アイコン・ファビコンの作り方
作り方は概ね次の方法があります。
1.描画ツール・描画ソフトで作る
Windows標準の「ペイント」や、「Adobe Illustrator」「Adobe Photoshop」などの描画・グラフィックソフトを使用して作るという方法があります。こうしたツールに慣れているのであれば、それらを使うとよいでしょう。
2.無料ツールを使用する
描画ツールを持ち合わせていない、操作に慣れていないといった場合には、Web上で簡単にファビコンを作ることのできる無料ツールを利用するのも一つの方法です。ドットで描いて作ることができる「favicon.cc」や、既存画像をファビコンに変換してくれる「Favicon generator」などがあります。
ホームページのアイコンを設定する方法
ホームページのアイコンやファビコンを作ったら、いよいよ設定していきます。ここではホームページにアイコンとファビコンを設定する方法と、WordPressにアイコンを設定する方法それぞれを解説します。
1.ホームページにアイコンを設定する場合
（1）アイコンとファビコンをサーバーのルートディレクトリに設置する 「favicon.ico」と「apple-touch-icon.png」の2つのファイルを、ホームページのルートディレクトリ内にアップロードします。ルートディレクトリとは、一番上のディレクトリのことです。
（2）HTMLファイルのheadタグ内にコードを書き込む 次に、アイコンやファビコンを表示させたいページのheadタグ内に、次のコードを記述します。
<link rel=”apple-touch-icon” href=”./apple-touch-icon.png” sizes=”180×180″>
<link rel=”icon” type=”image/x-icon” href=”./favicon.ico”>
上がアイコンの設定、下がファビコンの設定です。
もし、アイコンやファビコンを設置したルートディレクトリとは異なるディレクトリにあるHTMLファイル内に記述する場合には「href=”./apple-touch-icon.png”」と「href=”./favicon.ico”」のルート記述方法を変えてください。
例えば、ルートディレクトリにある「information」というディレクトリの配下に設置するHTMLファイルからアイコンとファビコンを指定する場合には、
「href=”../apple-touch-icon.png”」と「href=”../favicon.ico”」とアイコンとファビコン画像のある場所を指定する記述をしましょう。
ファビコンはPCの場合、favicon.ico というファイル名でルートディレクトリに設置するだけで、headタグ内にコードを書き込まなくとも、ブラウザが自動的に読み込んでくれ、そのホームページのどのページを開いたときでもファビコンが表示されるようになっています。しかし、ブラウザによっては非対応のものもあり、スマートフォン等では表示されませんので、できるだけ全ページのheadタグ内にファビコンとアイコンのコードを記述しておいたほうがよいでしょう。
2.WordPressにアイコンを設定する場合
WordPressでホームページを作成している場合、WordPressの管理画面からアイコンを設定することができます。
WordPress では、512px×512pxのpng画像を使用します。この画像を用意しておき、管理画面から「外観」→「カスタマイズ」→「サイト基本情報」を開きます。すると「サイトアイコン」を指定できる箇所がありますので、png画像をアップロードします。これにより、headタグ内に直接記述することなく、アイコンを設定することができます。
ただし、この設定をしてもスマホのショートカットアイコンには適用されないため、もし適用させたいのであれば、WordPressのheadタグ内に1の方法で直接コードを記述してください。
ホームページのアイコンにまつわる注意点
ホームページのアイコンやファビコンを設定する際には、ぜひ次のことを押さえておきましょう。
●アイコンに使用するイメージの著作権侵害に注意
アイコンは他の使用画像と同じく、オリジナルでなければなりません。著作権侵害にならないよう、十分注意して作成・設定してください。
●自社ホームページだとすぐにわかるようなアイコンを設定する
アイコンには自社やブランドのロゴマークを使用するなどして、一目見ればすぐに自社ホームページだとユーザーに認識してもらえるようにしましょう。そうすれば識別されやすくなり、覚えてもらいやすくもなるので、ブランディング効果が期待できます。
●できるだけシンプルにする
自社やブランドのロゴマークをそのままアイコンに使用するケースもありますが、アイコンは小さなアイコンのため、分かりづらいものになることもあります。そこで、デザインを簡略化する、ロゴマークの先頭文字だけを使うなどして、できるだけシンプルにするのがアイコン作りのコツです。
まとめ
◆ホームページのアイコンは、ブラウザのタブの一番左側やブックマーク一覧、デスクトップに置くショートカットアイコン、スマホのホーム画面に置かれるアイコンなどに使われ、それぞれのホームページを表す、もしくは識別するためのシンボルで、「アイコン」や「ファビコン」と呼ばれる。
◆ホームページのアイコンは「favicon.ico」と「apple-touch-icon.png」の2種類を必要なサイズで複数作り、サーバーのルートディレクトリに設置し、HTMLファイルのheadタグ内にコードを書き込むことで設定できる。
◆ホームページのアイコンを作る際には、アイコンに使用するイメージの著作権侵害に注意し、自社ホームページだとすぐにわかるようなアイコンを設定し、できるだけシンプルにすることを心掛けるとよい。
