ホームページアイコンはどう設定するの？作り方や効果について解説！

インターネットでホームページを閲覧する時に必ず目にするのがアイコンです。

特徴的なアイコンは一目見れば、ユーザーの記憶に残りやすくなります。

しかし、どのようにアイコンを作成すればいいか分からない方も多いのではないでしょうか？

そこで今回はホームページのアイコンについて解説していきます。

ユーザーの印象に残るような効果的なアイコンを作成したい方は、ぜひ本記事を参考にしてください。

ホームページアイコンとは

ホームページアイコンとはブラウザのタブやブックマーク、PCのデスクトップやスマホのホーム画面、検索結果などあらゆる場所に表示されるロゴのようなものです。

「ファビコン」とも呼ばれており、ホームページがどのようなものかを識別するために役立ちます。

たとえば、Googleの場合は、4色で彩られたGの文字、Yahoo!であれば赤いY!の文字などのロゴが表示されます。

このように、一目見てこのサイトがどういったものなのかわかるようになっているのがホームページアイコンです。

ホームページアイコンの効果

ホームページアイコンは必ず設定しなければならないものではありません。

しかしアイコンを設定することで下記のような効果が得られます。

• 企業やサービスの認知度UP
• 企業やサービスの信頼性UP
• ユーザーの再訪問率UP
• ユーザーの使用率UP

ホームページを運用するにあたって必要なものとなるでしょう。

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

企業やサービスの認知度UP

ホームページを閲覧するユーザーは、幾度となくホームページアイコンを目にする機会があり、アイコンがあるとそのデザインを通して企業やサービスを認知してもらうことにつながります。

人の脳は文字を記憶する時には左脳が働き、イラストや画像などでイメージとして記憶する時には右脳が働きます。

そのため文字とアイコンが揃うことで両方の脳にアプローチができ、ユーザーの記憶に残りやすくなるのです。

企業やサービスの信頼性UP

ホームページにアイコンが設定されていると、ユーザーから公式サイトであると認識してもらいやすくなります。

理由は検索をかけた際に、企業やサービスのアイコンが表示されればユーザーは一目見てそのサイトへ辿り着くことができるからです。

もし、アイコンが設定されていない場合は検索して出てきた項目を全てしらみ潰しに開いていかないと行けないためユーザーは不便と感じてしまうことでしょう。

ホームページアイコンがあることで、企業は公式サイトとしての信頼性が得られ、ユーザーは検索後に該当ページに辿り着きやすくなり、目的のものを探す負担が減るという効果があります。

ユーザーの再訪問率UP

ホームページアイコンを設定することでユーザーから認識されやすくなり、再訪問をしてもらいやすくなります。

同じ項目が複数並んでいる際にアイコンがあると、過去利用したことのあるユーザーに認知してもらいやすくなるためです。

また、アイコンがあることで自社のホームページとその他のホームページで明確に分けることができます。

ユーザーの使用率UP

ユーザーがアイコンとサイトの内容を連動させて認識できるようになれば、ページにアクセスせずともブックマークなどで選別しやすくなります。

その結果として、「これを見たい時には◯◯を見ればいい」となるため、ユーザーの使用率が上がります。

企業側は、ユーザーが利用しやすい・分かりやすいホームページにすることで使用率を上げることができます。

ホームページアイコンの設定方法

画像データが完成したらいよいよアイコン設定を行いますが、やり方はホームページの作り方によって異なります。

ここではHTML・WordPressの2種類の設定方法を解説していきます。

HTMLでの設定方法

1．まず画像の拡張子を『.ico』の形式に変換しましょう。

※『.jpg』『.png』はPCでは表示されますが、スマホには対応していない場合があり、アイコンが表示されないことがあります。

もし、拡張子の変更をしたい場合はFaviconジェネレーターがおすすめです。

FaviconジェネレーターはJPEG・PNGなどの画像ファイルからファビコン用の画像ファイルを生成・変換することができます。

引用：https://favicon-generator.mintsu-dev.com

2．HTMLファイルを開き、ヘッダー（</head>）の真上に

<link rel=“shortcut icon” href=“favicon.ico>を入力する。

※上記のソースを記述する場合は対応するすべてのHTMLファイルにソースの入力が必要です。

Favicon.icoは16px（IE）32px（Safariなど）48px（Windows）の3つの画像サイズを1つにまとめたファビコン用の画像ファイルのことであり、このソースを記述すればブラウザでアイコン表示が可能になります。

iPhoneやAndroidのホーム画面にもアイコンを表示できるようにしたい場合は、

<link rel=“apple-touch-icon”href=“apple-touch-icon-180×180.png”size=“180×180”>

<link rel=“icon”type=“image/png”href=“android-chrome-192×192.png”size=“192×192”>

を入力しましょう。

入力する場合はヘッダー（</head>）の真上に記述してください。

3．favicon.icoファイルとHTMLファイルをサーバにアップロードする。
ファイルのアップロードが完了したら、アイコンが表示されるかを各デバイスで確認してしましょう。

WordPressでの設定方法

WordPressでアイコンを設定する場合は、ダッシュボードを開きます。
「外観」⇨「カスタマイズ」⇨「サイト基本情報」⇨「サイトのアイコンを選択」と進んでいきます。
512px×512px以上で作成したアイコンの画像ファイルを『.png』の拡張子でアップロードを行い、公開をクリックすれば設定は完了です。

WordPressは『.png』1つのファイルで完結し、アイコンが表示される場所によってサイズが最適化されるようになっているため、HTMLファイルよりも簡単に設定できます。

ホームページアイコンが表示されない場合の対処の仕方

手順通りにアップロードを行ってもアイコンが表示されない場合は

• キャッシュクリア
• ファイル名・画像指定のソース記述に誤りがないか
• 画像ファイルの形式変更

上記3点を確認しましょう。

キャッシュクリア

キャッシュとはWebページにアクセスした際に読み込んだデータを一時保存する機能を指し、ユーザーが再度アクセスした際にキャッシュデータを読み込むことで表示速度を早くできるようになっています。

しかし、新しくアイコンを設定した際にも過去に読み込んだデータを読み込んでしまい、アイコンを読み込むことができません。

キャッシュを消去することで、新しくWebページを読み込むことができ、アイコンを設定した場合はそのデータも反映され表示されるようになります。

ファイル名・画像指定のソース記述に誤りがないか

HTMLファイルに記述したソースコードに誤りがある場合は当然ながらアイコンは表示されません。

<link rel=“apple-touch-icon”href=“apple-touch-icon-180×180.png”size=“180×180”>

太字になっている部分は画像ファイルの保存場所を指定しています。

しかし、保存先のファイル名が変わっていたり、アップロードしたファイルが変更になっている場合もアイコンは表示されないため、変更があった際には都度ソースを書き換えていかなければいけません。

画像ファイルの名前が正しいかどうか、ソース記述に誤りがないかを確認してみましょう。

画像ファイルの形式変更

ホームページアイコンに指定できる拡張子は『.ico』『.png』の2つです。

上記の2つ以外のファイルは指定したとしてもアイコンとして表示されないため、画像ファイルの拡張子が正しいものであるか確認しましょう。

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

描画ツール・アプリで作成する

描画ツールを使用することで、企業オリジナルのアイコンを作成できます。

しかし、ツールに慣れていないと使用が難しく感じてしまうことがあったり、デザインに悩んで制作が進まないという可能性もあります。

企業やサービスのロゴが決まっていない場合は先にロゴ作成から取り掛かり、その後ホームページアイコンを作成する方が雰囲気を大きく崩さずに済みます。

もし、自社での対応が難しければデザイナーに依頼するというのも1つの方法となるでしょう。

無料のツールを使用する

アイコン制作・使用を無料で行うことができるツールもあります。

ここではデザインが行えるものと、完成したアイコンを使用できるツールとして3つ紹介します。

favicon.cc

引用：https://www.favicon.cc

favicon.ccは無料で使用できるホームページアイコンの制作に特化したツールです。

正方形のマス目をクリックするだけでアイコンのデザインができるため、簡単にアイコン作成を行えます。

サイトを開くとすぐにこの画面が表示されます。

英語で記載されていますが、右のカラーパレットから色を選択して中央にあるマス目を埋めていけば良いので制作自体は簡単に行えるでしょう。

Canva

引用：https://www.canva.com/ja_jp/

Canvaは無料で使用できるグラフィックデザインのツールです。

ロゴのテンプレートも用意されているため、初めてロゴやアイコンを制作する人にもおすすめです。

ロゴ以外にもポスターやチラシなど様々なものを作成できます。

有料の場合にはプレミアムコンテンツを無制限に利用でき、より完成度の高いものを作成できます。

ICOOON MONO

引用：https://icooon-mono.com/

ICOOON MONOはアイコンが無料でダウンロードできるサイトです。

カテゴリー別に検索ができ、モノクロ・カラーどちらのデザインもあるため雰囲気に合ったものを選択し利用することができます。

このようにカテゴリーで分けられているため、必要なデザインを検索すれば一覧で表示されます。

サイトで登録されているアイコンに関しては使用条件に違反しなければクレジット表記や許可申請などを行わなくても使用することが可能です。

ホームページアイコンを作成するときに注意すること

ホームページアイコンを作成する場合に気をつけなければならない権利があります。

それは、商標権と著作権の2つです。

これらの権利を侵してしまうと、企業・個人で責任を問われる可能性があるため十分注意が必要です。

商標権侵害

商標権がある場合には他社による類似の名称やロゴのデザインなどの使用を制限できます。

そのためロゴやアイコンのデザインをする際に「これを真似て作ろう」「これに似たデザインにしよう」などと他社のデザインを真似してしまうと、商標権の侵害に当たる可能性があるため注意が必要です。

著作権侵害

著作権は制作者に対して与えられる権利のことです。

そのため、アイコンだけでなく、アイコンを制作した際に使用した素材にも著作権がある場合があります。

無料のアイコン素材を使用する場合、アイコンの著作権は提示している運営サイトにあるため、著作者が禁止している事項をよく確認して規約違反しないよう心がけてください。

まとめ：ホームページアイコンを使って企業やサービスのイメージ向上につなげよう！

ホームページアイコンには企業側にもユーザー側にも大きなメリットがあります。

設定する際は少し大変かもしれませんが、アイコンは企業やサービスの『シンボル』となるものですからぜひ活用してみてください。