ホームページのアイコンとは？設定・変更方法や作り方を4ステップで解説

ホームページのアイコンはファビコンと呼ばれる

ホームページのアイコンは、一般的にファビコン（favicon）として知られています。ファビコンは「favorite icon（お気に入りのアイコン）」の略で、WEBサイトにおけるシンボルイメージやロゴとして捉えられるでしょう。

ファビコンやアイコンには直接的なSEO効果はありませんが、Webサイトの評価を向上させる重要な要素です。

ファビコンが表示されることで、ユーザーは一目でどのWebサイトかを識別できます。ファビコンを設定しないことはマイナスイメージに結びつきかねないため、デフォルトのWebデザイン要素として不可欠です。

ホームページのアイコンが果たす5つの役割とは

ホームページのアイコンは以下5つの役割を果たします。

Web上のさまざまな場所に表示されることで、ユーザーの視認性を高めて自社サイトの認知度向上やアクセス誘導に大きく寄与します。

1. ブラウザのブックマークに表示される

Webサイトをブラウザのブックマークに登録した場合、サイト名とともにブックマークバーにアイコンが表示されます。アイコンはサイト名の左側に配置されユーザーに視覚的な印象を与えるでしょう。

ブックマーク上のアイコンにマウスカーソルをあわせた際には、Webサイトのtitleタグが表示されます。titleタグとはページタイトルを表すHTMLタグの1つです。サイトの概要や情報が記させており、検索ユーザーの1番目に付く部分です。

2. ブラウザのタブで見られる

アイコンは画面上部のブラウザタブにも表示されます。ブラウザのタブにアイコンが表示されることで、ユーザーは現在開いているWebサイトのページを視覚的に識別可能です。

3. Windowsデスクトップのショートカットで表示される

OSがWindowsのパソコンの場合、特定のWebサイトのショートカットを作成することでデスクトップにアイコンが表示されます。

ショートカットとは利用頻度の高いアプリケーションやファイル、フォルダを元の場所から移動させずにデスクトップから開くことができる機能です。ショートカットアイコンの場合は、画像の左下に矢印マークが付きます。

Google Chromeを使っている場合には、下記の手順でデスクトップにショートカットを作成できます。

詳しく見ていきましょう。

ウィンドウ右上の縦に3つの点が並んだマークが「設定」です。クリックすると出てくる「その他のツール」を選択し「ショートカットを作成…」を選びます。

アラートが出てくるため任意の名称をつけて「作成」をクリックします。

デスクトップにショートカットのアイコンが表示されます。

4. スマホのホーム画面に表示される

スマホの場合はホーム画面にWebサイトのアイコンを表示できます。サイト名は省略されるためアイコン画像から情報を得ることが特徴です。

特定のWebサイトのショートカットアイコンをホーム画面に追加する場合には下記の手順に従います。

5. 検索結果に表示される

パソコンでもスマホでもWeb上で検索をした場合には、検索結果にアイコンが表示されます。サイト名とURLの左に配置されることで、ユーザーの視認性を高めるための役割を果たします。

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

ホームページのアイコンを設定する方法は大まかに3つにわけられます。

WordPressで作ったホームページの設定方法

ホームページの運用にWordPressを使用している場合は、以下の手順でアイコンを設定できます。

上記の方法はWordPressバージョン4.3以降のみに対応しています。

HTMLで作ったホームページの設定方法（エックスサーバーを利用）

HTMLで作ったホームページにアイコンを設定するためには下記の手順でおこないます。

1. エックスサーバーのファイルマネージャを開く

エックスサーバーのファイルマネージャから、アイコンを表示させるページのHTMLファイルを選択します。

2. アイコンファイルをアップロードする

アイコンを表示させたいページのHTMLファイルに、下記3つのファイルをアップロードします。

• favicon.ico
• apple-touch-icon-180x180.png
• android-chrome-192x192.png

3. アイコン用のHTMLコードを記述する

アップロード完了後にアイコンを表示させるHTMLファイルを開き、 〜 タグの中に以下のソースコードを記述します。

4. HTMLファイルをアップロードする

ソースコードの記述が終了した後にファイルを更新して設定は完了です。

5. 完了

ホームページを確認してブラウザのタブや検索結果にアイコンが表示されていた場合は成功です。

ルートディレクトリに画像をアップロードする設定方法

Webサイトのルートディレクトリに画像をアップロードすることでホームページのアイコンを設定できます。ルートディレクトリとは、階層型ファイル構造における最上階層のフォルダです。

用意したアイコン画像のファイル名を下記に変更して、ルートディレクトリにアップロードしましょう。

• favicon.ico
• apple-touch-icon-180x180.png

画像のファイル名を間違えたりルートディレクトリ以外に画像を配置した場合には、設定が反映されない可能性があります。

ホームページのアイコンが表示されないときの3つの対処法

アイコンの設定をおこなっても表示されない場合には、下記の対処法が効果的です。

1. キャッシュを消去する

新しく設定したアイコンが表示されない場合、ブラウザのキャッシュを消去しましょう。キャッシュとは、ブラウザが以前訪れたWebページを高速に読み込むために、一時的に古い情報を保持していることです。

キャッシュを消去するためには、ブラウザが新しいページのデータを再度サーバーから取得する必要があります。新しいアイコンやコンテンツが正しく表示される可能性が高まります。

Google Chromeの場合、下記の手順でキャッシュクリアが可能です。

2. ファイル名や画像指定パスを確認する

HTMLファイルにおけるheadタグ内のコードでファイル名と画像指定パスを確認します。下記は、スマホやタブレット端末のホーム画面にショートカットとして登録した際に表示されるアイコンのコードです。

コード中のhref=以降の箇所がアイコン画像の保存場所を示しています。後からファイル名を変更したり画像を別の場所にアップロードしたりするとアイコンが表示されません。正しいファイル名とパスであるかを確認してください。

3. 画像のファイル形式を確認する

画像をアップした後はファイル形式を確認しましょう。アイコンに使用している画像のファイル形式が誤っている場合は表示されない可能性があります。

ファイル形式が「png」または「ico」であれば問題ありません。アイコン画像ファイルの拡張子を確認しましょう。

ファイル形式の誤り以外に画像データそのものが損傷している場合もアイコンは表示されません。

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

ホームページのアイコン設定は任意ですが、さまざまなメリットがあるため現在ではデフォルトでWebデザインに組み込まれています。ホームページにアイコンを設定するメリットには下記の3つがあります。

1. 企業の認知度向上に貢献する

ホームページのアイコンは企業の認知度向上に貢献し、ユーザーエクスペリエンス（UX）を向上させます。ユーザーエクスペリエンスとは、ユーザーが製品やサービスを通じて得られる体験のことや使い勝手のよさを表すことです。

人間の脳は、文字よりもイメージの方が記憶に残りやすいため、ホームページを印象付ける目的で画像を使うことは効果的です。

ホームページのアイコンに企業のロゴを採用することで、文字で読んだ内容と画像がリンクしやすい状態を作ることができます。ブックマークやPC・スマホのショートカットにアイコンを設定することは、視認性を高め使い勝手のよさに影響するでしょう。

2. ホームページへの再訪問を誘導しやすくする

ホームページのアイコンはユーザーの再訪問を誘導しやすくするメリットがあります。アイコンは画像であるため名前やページが思い出せない場合に役立ちます。

アイコンが設定されていないサイトは、地球のマークで設定されてしまい他のWebサイトとの差別化が困難です。アイコンとページ内容がリンクしないため、再訪問しにくい状態に陥ります。

アイコンはユーザーに直感的に情報を伝えられるため、リピーターを増やすのに効果的なツールです。

3. ホームページの信頼性をアピールできる

アイコンを設定することで、ホームページの信頼性をアピールできるメリットがあります。アイコンの有無により公式サイトかどうかを一目で判別できるためです。

たとえばスマホで「比較ビズ」と検索した場合、複数の関連ページが表示されますが、公式サイトが最上位に表示されることが一般的です。アイコンが設定されていることでユーザーは直感的に公式サイトと判断します。

アイコンがない場合は、ユーザーは公式サイトを見つけるために手間をかける必要があり不便を感じるでしょう。ホームページのアイコンが設定されていることは、ユーザーにとって使いやすく信頼性の高いサイトの提供につながります。

ホームページのアイコンを作成する方法4ステップ

自社の企業ロゴをアイコンに使用しにくい場合には自作することも可能です。ホームページのアイコンを作成する方法を4ステップで解説します。

ステップ1. 画像編集ソフトを用意する

アイコン画像を作成するためには画像編集ソフトが必要です。画像編集ソフトは無料で利用できるものからプロが使用するレベルまで幅広く存在しています。企業のロゴを使用したアイコン画像などは「ai」ファイルでやり取りされることが一般的です。

ファイル形式が「ai」の場合は、Adobe社のIllustratorを使用する必要があります。

ステップ2. サイズとファイル形式を知る

アイコンを設定する場合、サイズとファイル形式を知っておくことが重要です。ホームページのアイコン画像の比率は1:1の正方形で、表示される場所によってサイズは異なります。

以下は、一般的なアイコンのサイズ一覧です。

ステップ3. 画像編集ソフトで調整やリサイズをする

画像編集ソフトを使用して、アイコンのデザインやサイズを調整します。アイコンは表示される領域が小さいため、デザインはシンプルでわかりやすいことが重要です。デザインや色合いを整えてアイコンが視覚的に映えるようにしましょう。

ステップ4. ファイル形式を変更する

作成したアイコンを適切なファイル形式に変換することで、異なるデバイスやブラウザ上でも表示されます。アイコンに使える主なファイル形式には「.svg」「.png」「.ico」「.gif」などがあります。

アイコンを自作するときに役立つ画像編集ツール

Adobe社のIllustrator以外にもアイコン画像を作成できる画像編集ツールはあります。下記2つの画像編集ツールはブラウザ上での編集作業が可能で、無料で利用ができます。

1. Canva

参照：Canva

Canvaは、デザイン作成ツールとして世界中で1,000万人以上に利用されており、ブラウザ上で使用できます。Canvaには豊富なテンプレートが用意されいるため、レイアウト、色、文字などのカスタマイズも簡単です。

無料プランでも充実の機能を提供しており、ファビコンやアイコンの作成以外にもSNS用バナーやWebサイトの画像作成に便利です。

2. favicon.cc

参照：favicon.cc

favicon.ccは、ドット絵のスタイルで簡単にアイコンを作成できるツールです。

カラーパレットから色を選び、枠内にドットを配置してアイコンを作れます。会員登録やダウンロードが不要でブラウザ上ですぐに利用できます。

favicon.ccではICO形式のファイルも作成可能で、ダウンロードできるのためアイコン作りの初心者にもおすすめのツールです。

フリーで使えるアイコン素材サイト

アイコンを作成する場合、アイコンの素材を提供しているサイトを知っておくと便利です。下記3つのサイトでは、商用利用可能な素材を無料でダウンロード可能です。

1. ICOOON MONO

参照：ICOOON MONO

ICOOON MONOは、モノトーンのアイコン素材を提供するウェブサイトです。シンプルながら使いやすく、ホームページのアイコンを選ぶ際に重宝します。アイコンの色を簡単に変更できるためカラーバリエーションを増やす際にも便利です。

6,000以上のアイコン素材があり、ファイル形式はjpg・png・svgに対応しています。

2. icon-rainbow

参照：icon-rainbow

icon-rainbowは、商用利用可能な無料のアイコン素材を提供するサイトです。文房具から工具、雑貨、家電、エンタメ、スポーツまで、幅広いカテゴリーのアイコン素材が3,000以上揃っています。

ファイル形式はjpg・png・aiに対応しています。カスタマイズが容易のため多様なデザインのアイコン作成が可能です。

3. ICONBOX

参照：ICONBOX

ICON BOXは、個人利用から商用利用まで無料で利用できるアイコン素材を提供しているサイトです。トーンやテイストを統一したアイコンが揃っています。パスデータが提供されているためカスタマイズも簡単です。

ホームページのアイコンを自作するときの2つの注意点

ホームページのアイコンを自作する際には下記の点に注意が必要です。

1. 商標権を侵害しない

ホームページのアイコンでは他社の商標権を侵害しないために注意が必要です。商標権とは、商品やサービスのロゴやマーク（商標）を独占的に使用できる権利を指します。

ビジネス上のプレゼンスを高めるに独自のアイコンは欠かせませんが、独自性が求められます。他社のロゴや商標に酷似したアイコンは法的トラブルの元になりかねません。事前に調査をしたうえで慎重にアイコンをデザインしましょう。

2. 著作権を侵害しない

アイコン制作においては著作権を侵害しないことが重要です。著作権とは、著作物の創作者に与えられる権利のことです。創作された時点で著作権は自動的に発生します。

著作物を無断でコピーすることや、インターネットにアップロードすることは著作権の侵害にあたるため留意が必要です。

アイコンに使用する素材や画像が他者の著作物である場合、無断使用は法的な問題を引き起こす可能性があります。フリー素材を利用する際にも、利用規約を十分に理解して著作権を侵害しないよう留意しましょう。

まとめ

ホームページのアイコンは企業の認知度向上や信頼性を高めるためにも必要です。アイコンにSEO効果はありませんが、サイトの目印としての役割を果たしユーザーの利便性には大きく寄与します。

目につきやすいシンプルなデザインを採用することで、認知度向上やブランディング効果などアイコンを設定するメリットを最大限に引き出しましょう。アイコンのデザインを外注する際には、Webマーケティングや訴求方法を理解している会社に依頼することがポイントです。

「比較ビズ」では、必要事項を入力すると2分程度で、目的や用途にあわせたWeb制作会社やデザイン会社がスピーディーに探せます。ぜひ利用してみてください。

監修者のコメント

株式会社Mun

代表取締役 高沼 知宜

WEB制作会社を設立後、4年で上場企業を含めて50社以上の案件を担当。地域に密着したWEB制作をメインに、地元千葉をはじめとした関東一円で活動している。強みである集客以外にも、採用、物販など目的に応じたサイト制作を得意とする。多様な顧客先のWeb制作実績があるため、初心者の方でも安心して相談可能。

詳しく見る

アイコンは直感的に理解できるデザインにすることが重要です。複雑すぎると意味が伝わりにくく、ユーザーが混乱する可能性があります。また、一貫性を保つことも大切です。異なるスタイルのアイコンを混在させると、サイト全体の統一感が失われます。

さらに、サイズと解像度に注意が必要です。小さすぎるアイコンは見づらく、大きすぎるアイコンはレイアウトを崩すことがあります。解像度が低いと、ぼやけたアイコンになり、プロフェッショナルな印象を損ねます。

最後に、アクセシビリティを考慮しましょう。色覚障害のあるユーザーもアイコンを識別できるように、色だけでなく形やラベルも活用することが推奨されます。

執筆者

比較ビズ編集部では、BtoB向けに様々な業種の発注に役立つ情報を発信。「発注先の選び方を知りたい」「外注する際の費用相場を知りたい」といった疑問を編集部のメンバーが分かりやすく解説しています。