ホームページのアイコンとは？設定・変更方法や作り方を4ステップで解説
- アイコンの設定方法は？
- アイコンはどこに表示される？
- アイコンを自分で作るには？
「ホームぺージのアイコンとはなに？」とお悩みの方は、必見！
ホームページのアイコンは、ブラウザのブックマークやスマホのホーム画面に表示されることでサイト誘導の役割を果たします。検索結果の一覧にも表示されるため、アイコンにはブランドのロゴマークや視認性の高い画像を選択しましょう。
この記事では、サイトオーナーやWebデザイナーなどに向けてアイコンの設定方法を4ステップで解説します。記事を読み終わった頃には、アイコンの重要性について理解できているでしょう。
ホームページのアイコンを自作したい方やアイコンで企業認知を高めたい方は、ぜひ参考にしてください。
もしも今現在、
- どの制作会社に依頼したらいいかわからない
- 実績豊富な会社に依頼したい
- 名刺代わりにホームページがほしい
上記のようなお困りがありましたら、比較ビズへお気軽にご相談ください。比較ビズでは、複数のWeb制作会社に一括で見積もりができ、相場感や各社の特色を把握したうえで業者を選定できます。見積もりしたからといって、必ずしも契約する必要はありません。まずはお気軽にご利用ください。
ホームページのアイコンはファビコンと呼ばれる
ホームページのアイコンは、一般的にファビコン（favicon）として知られています。ファビコンは「favorite icon（お気に入りのアイコン）」の略で、WEBサイトにおけるシンボルイメージやロゴとして捉えられるでしょう。
ファビコンやアイコンには直接的なSEO効果はありませんが、Webサイトの評価を向上させる重要な要素です。
Googleなどの検索結果で自分のサイトを上位表示させる施策のことで、検索エンジンを通じてWebサイトへの流入を増やします。
ファビコンが表示されることで、ユーザーは一目でどのWebサイトかを識別できます。ファビコンを設定しないことはマイナスイメージに結びつきかねないため、デフォルトのWebデザイン要素として不可欠です。
ホームページのアイコンが果たす5つの役割とは
ホームページのアイコンは以下5つの役割を果たします。
- ブラウザのブックマークに表示される
- ブラウザのタブで見られる
- Windowsデスクトップのショートカットで表示される
- スマホのホーム画面に表示される
- 検索結果に表示される
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で作ったホームページの設定方法
- HTMLで作ったホームページの設定方法
- ルートディレクトリに画像をアップロードする設定方法
WordPressで作ったホームページの設定方法
ホームページの運用にWordPressを使用している場合は、以下の手順でアイコンを設定できます。
- WordPressの管理画面にログインする
- メニューから「外観」を選択する
- 外観から「カスタマイズ」をクリックする
- カスタマイズ画面で「サイト基本情報」を選択する
- 「サイトアイコン」オプションから用意したアイコン画像をアップロードする
- 変更を保存する
- 完了
上記の方法はWordPressバージョン4.3以降のみに対応しています。
HTMLで作ったホームページの設定方法（エックスサーバーを利用）
HTMLで作ったホームページにアイコンを設定するためには下記の手順でおこないます。
- エックスサーバーのファイルマネージャを開く
- アイコンファイルをアップロードする
- アイコン用のHTMLコードを記述する
- HTMLファイルをアップロードする
- 完了
1. エックスサーバーのファイルマネージャを開く
エックスサーバーのファイルマネージャから、アイコンを表示させるページのHTMLファイルを選択します。
2. アイコンファイルをアップロードする
アイコンを表示させたいページのHTMLファイルに、下記3つのファイルをアップロードします。
- favicon.ico
- apple-touch-icon-180x180.png
- android-chrome-192x192.png
3. アイコン用のHTMLコードを記述する
アップロード完了後にアイコンを表示させるHTMLファイルを開き、 <head>〜</head> タグの中に以下のソースコードを記述します。
<link rel="shortcut icon" href="favicon.ico" type="image/x-icon">
<link rel="apple-touch-icon" href="apple-touch-icon-180x180.png" sizes="180x180">
<link rel="icon" type="image/png" href="android-chrome-192x192.png" sizes="192x192">
4. HTMLファイルをアップロードする
ソースコードの記述が終了した後にファイルを更新して設定は完了です。
5. 完了
ホームページを確認してブラウザのタブや検索結果にアイコンが表示されていた場合は成功です。
ルートディレクトリに画像をアップロードする設定方法
Webサイトのルートディレクトリに画像をアップロードすることでホームページのアイコンを設定できます。ルートディレクトリとは、階層型ファイル構造における最上階層のフォルダです。
用意したアイコン画像のファイル名を下記に変更して、ルートディレクトリにアップロードしましょう。
- favicon.ico
- apple-touch-icon-180x180.png
画像のファイル名を間違えたりルートディレクトリ以外に画像を配置した場合には、設定が反映されない可能性があります。
ホームページのアイコンが表示されないときの3つの対処法
アイコンの設定をおこなっても表示されない場合には、下記の対処法が効果的です。
- キャッシュを消去する
- ファイル名や画像指定パスを確認する
- 画像のファイル形式を確認する
1. キャッシュを消去する
新しく設定したアイコンが表示されない場合、ブラウザのキャッシュを消去しましょう。キャッシュとは、ブラウザが以前訪れたWebページを高速に読み込むために、一時的に古い情報を保持していることです。
キャッシュを消去するためには、ブラウザが新しいページのデータを再度サーバーから取得する必要があります。新しいアイコンやコンテンツが正しく表示される可能性が高まります。
Google Chromeの場合、下記の手順でキャッシュクリアが可能です。
- 「設定」を選択する
- 「その他のツール」にカーソルをあわせる
- 「閲覧履歴を消去」を選択する
- 「全期間」を選択する
- 「Cookie と他のサイトデータ」と「キャッシュされた画像とファイル」にチェックを入れる
- 「データ消去」ボタンをクリックする
2. ファイル名や画像指定パスを確認する
HTMLファイルにおけるheadタグ内のコードでファイル名と画像指定パスを確認します。下記は、スマホやタブレット端末のホーム画面にショートカットとして登録した際に表示されるアイコンのコードです。
<link rel="apple-touch-icon" href="apple-touch-icon-180x180.png" sizes="180x180">
コード中のhref=以降の箇所がアイコン画像の保存場所を示しています。後からファイル名を変更したり画像を別の場所にアップロードしたりするとアイコンが表示されません。正しいファイル名とパスであるかを確認してください。
3. 画像のファイル形式を確認する
画像をアップした後はファイル形式を確認しましょう。アイコンに使用している画像のファイル形式が誤っている場合は表示されない可能性があります。
ファイル形式が「png」または「ico」であれば問題ありません。アイコン画像ファイルの拡張子を確認しましょう。
ファイル形式の誤り以外に画像データそのものが損傷している場合もアイコンは表示されません。
ホームページのアイコンを設定する3つのメリット
ホームページのアイコン設定は任意ですが、さまざまなメリットがあるため現在ではデフォルトでWebデザインに組み込まれています。ホームページにアイコンを設定するメリットには下記の3つがあります。
- 企業の認知度向上に貢献する
- ホームページへの再訪問を誘導しやすくする
- ホームページの信頼性をアピールできる
1. 企業の認知度向上に貢献する
ホームページのアイコンは企業の認知度向上に貢献し、ユーザーエクスペリエンス（UX）を向上させます。ユーザーエクスペリエンスとは、ユーザーが製品やサービスを通じて得られる体験のことや使い勝手のよさを表すことです。
人間の脳は、文字よりもイメージの方が記憶に残りやすいため、ホームページを印象付ける目的で画像を使うことは効果的です。
ホームページのアイコンに企業のロゴを採用することで、文字で読んだ内容と画像がリンクしやすい状態を作ることができます。ブックマークやPC・スマホのショートカットにアイコンを設定することは、視認性を高め使い勝手のよさに影響するでしょう。
2. ホームページへの再訪問を誘導しやすくする
ホームページのアイコンはユーザーの再訪問を誘導しやすくするメリットがあります。アイコンは画像であるため名前やページが思い出せない場合に役立ちます。
アイコンが設定されていないサイトは、地球のマークで設定されてしまい他のWebサイトとの差別化が困難です。アイコンとページ内容がリンクしないため、再訪問しにくい状態に陥ります。
アイコンはユーザーに直感的に情報を伝えられるため、リピーターを増やすのに効果的なツールです。
3. ホームページの信頼性をアピールできる
アイコンを設定することで、ホームページの信頼性をアピールできるメリットがあります。アイコンの有無により公式サイトかどうかを一目で判別できるためです。
たとえばスマホで「比較ビズ」と検索した場合、複数の関連ページが表示されますが、公式サイトが最上位に表示されることが一般的です。アイコンが設定されていることでユーザーは直感的に公式サイトと判断します。
アイコンがない場合は、ユーザーは公式サイトを見つけるために手間をかける必要があり不便を感じるでしょう。ホームページのアイコンが設定されていることは、ユーザーにとって使いやすく信頼性の高いサイトの提供につながります。
ホームページのアイコンを作成する方法4ステップ
自社の企業ロゴをアイコンに使用しにくい場合には自作することも可能です。ホームページのアイコンを作成する方法を4ステップで解説します。
- ステップ1. 画像編集ソフトを用意する
- ステップ2. サイズとファイル形式を知る
- ステップ3. 画像編集ソフトで調整やリサイズをする
- ステップ4. ファイル形式を変更する
ステップ1. 画像編集ソフトを用意する
アイコン画像を作成するためには画像編集ソフトが必要です。画像編集ソフトは無料で利用できるものからプロが使用するレベルまで幅広く存在しています。企業のロゴを使用したアイコン画像などは「ai」ファイルでやり取りされることが一般的です。
ファイル形式が「ai」の場合は、Adobe社のIllustratorを使用する必要があります。
ステップ2. サイズとファイル形式を知る
アイコンを設定する場合、サイズとファイル形式を知っておくことが重要です。ホームページのアイコン画像の比率は1:1の正方形で、表示される場所によってサイズは異なります。
以下は、一般的なアイコンのサイズ一覧です。
| サイズ | 用途 | ファイルの種類 |
|---|---|---|
| 16px × 16px | Chrome、Internet Explorer、Firefox、Edgeのタブ | favicon.ico |
| 32px × 32px | 高解像度ディスプレイのブラウザタブ | favicon.ico |
| 48px × 48px | Windowsのショートカット、スマホのGoogle検索結果画面 | favicon.ico |
| 180px × 180px | iPhone（iOS）のホーム画面 | apple-touch-icon.png |
| 192px × 192px | Androidスマホのホーム画面 | favicon.png |
| 512px × 512px以上 | WordPressでホームページのアイコンを設定する場合 | favicon.png |
ステップ3. 画像編集ソフトで調整やリサイズをする
画像編集ソフトを使用して、アイコンのデザインやサイズを調整します。アイコンは表示される領域が小さいため、デザインはシンプルでわかりやすいことが重要です。デザインや色合いを整えてアイコンが視覚的に映えるようにしましょう。
ステップ4. ファイル形式を変更する
作成したアイコンを適切なファイル形式に変換することで、異なるデバイスやブラウザ上でも表示されます。アイコンに使える主なファイル形式には「.svg」「.png」「.ico」「.gif」などがあります。
アイコンを自作するときに役立つ画像編集ツール
Adobe社のIllustrator以外にもアイコン画像を作成できる画像編集ツールはあります。下記2つの画像編集ツールはブラウザ上での編集作業が可能で、無料で利用ができます。
- Canva
- favicon.cc
1. Canva
参照：Canva
Canvaは、デザイン作成ツールとして世界中で1,000万人以上に利用されており、ブラウザ上で使用できます。Canvaには豊富なテンプレートが用意されいるため、レイアウト、色、文字などのカスタマイズも簡単です。
無料プランでも充実の機能を提供しており、ファビコンやアイコンの作成以外にもSNS用バナーやWebサイトの画像作成に便利です。
2. favicon.cc
参照：favicon.cc
favicon.ccは、ドット絵のスタイルで簡単にアイコンを作成できるツールです。
カラーパレットから色を選び、枠内にドットを配置してアイコンを作れます。会員登録やダウンロードが不要でブラウザ上ですぐに利用できます。
favicon.ccではICO形式のファイルも作成可能で、ダウンロードできるのためアイコン作りの初心者にもおすすめのツールです。
フリーで使えるアイコン素材サイト
アイコンを作成する場合、アイコンの素材を提供しているサイトを知っておくと便利です。下記3つのサイトでは、商用利用可能な素材を無料でダウンロード可能です。
- ICOOON MONO
- icon-rainbow
- ICONBOX
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制作会社やデザイン会社がスピーディーに探せます。ぜひ利用してみてください。
比較ビズ編集部では、BtoB向けに様々な業種の発注に役立つ情報を発信。「発注先の選び方を知りたい」「外注する際の費用相場を知りたい」といった疑問を編集部のメンバーが分かりやすく解説しています。
もしも今現在、
- どの制作会社に依頼したらいいかわからない
- 実績豊富な会社に依頼したい
- 名刺代わりにホームページがほしい
上記のようなお困りがありましたら、比較ビズへお気軽にご相談ください。比較ビズでは、複数のWeb制作会社に一括で見積もりができ、相場感や各社の特色を把握したうえで業者を選定できます。見積もりしたからといって、必ずしも契約する必要はありません。まずはお気軽にご利用ください。
ホームページ制作・デザインに関連する記事
-
2024年05月16日ホームページ制作・デザインWebサイト制作の流れを徹底解説！制作を成功させる要素2つ
-
2024年04月22日ホームページ制作・デザイン100万円で高品質なホームページは作成可能！予算別の特徴や費用相場を解説
-
2024年04月22日ホームページ制作・デザイン10万円〜20万円でホームページ作成は可能？予算ごとの機能やデザインを解説
-
2024年04月17日ホームページ制作・デザインホームページ作成に利用できる補助金・助成金とは？対象者や補助額も解説
-
2024年04月16日ホームページ制作・デザインおすすめワイヤーフレームツール10選！導入メリットや選び方も解説
-
2024年04月16日ホームページ制作・デザインホームページがない会社のデメリットや特徴とは？ホームページ作成の方法も紹介
