【2026年1月29日更新】全体の内容を見直すとともに、記事内の情報を最新に更新しました。

この記事のレベル

初心者	（4.0）
重要度	（3.0）
難しさ	（3.0）

こんにちは、編集長のカワウソです！

ホームページをブックマークすると、「ページ名」と一緒に「アイコン」が表示されるときがありますよね。

ブックマークに表示された他社ホームぺージのアイコンを見て、「自社にも設定したい」と考えていませんか？

そこで今回は、ホームページのアイコンについて、作り方や設定方法を解説します。

この記事を読めば、ブックマークはもちろん、さまざまな場所にホームページのアイコンを表示できます。

また、法人利用を前提とし、既存の企業ロゴをホームページのアイコンに転用するときの注意点も紹介するので、おすすめです。

なお、この記事はホームページアイコンの基礎知識から解説します。
「すぐにアイコンの作り方や設定方法を知りたい！」という人は、以下のリンクをクリックしてください。

それではどうぞ！

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

ホームぺージのアイコンとは、分かりやすく言うと「シンボル（象徴）」です。

たとえばリアルの世界だと、郵便局や警察署といった施設の入り口には、シンボルが提示されていますよね。

シンボルがあれば、何の施設か一目見て判断できます。

ホームぺージも同じで、アイコンがあれば、何のホームぺージかすぐに分かるのです。

ホームページのアイコンは、さまざまな場所で表示されます。

それぞれ弊社の『エックスサーバー』のサービスサイトを例に解説しますね。

ブラウザのブックマーク

ホームページをブラウザのブックマークに登録すると、「ページ名」の左側に「アイコン」が表示されます。

ブラウザのタブ

ホームページのアイコンは、ブラウザのタブにも表示されます。
ブックマーク同様、「アイコン」と「ページ名」が表示されるのです。

Windowsのショートカット（デスクトップ）

Windowsのパソコンでホームページのショートカットを作成すると、デスクトップにアイコンが現れます。

なお、Windowsのショートカットを作成する方法は、ブラウザによって異なります。

たとえば、Google Chromeだと、「画面右上（︙）＞ キャスト、保存、共有 ＞ ショートカットを作成」から作成可能です。

スマホのホーム画面

スマホのホーム画面にホームぺージへのリンクを追加すると、アイコンが表示されます。

たとえばiPhoneの場合、Safari（ブラウザ）でホームぺージを開き、画面下にあるタブバーの表示に合わせてそれぞれ以下の方法で作成可能です。

検索結果

検索結果には、ホームぺージのアイコンが表示されます。

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

前提として、ホームぺージのアイコン設定は必須ではありません。

ホームページにアイコンを設定するには、多少なりとも時間がかかります。
急いでホームページを公開する必要があるときは、後回しにしてもかまいません。

しかし、アイコンを設定しないまま、ホームページを公開し続けるのはもったいないのです。

次に、ホームページにアイコンを設定する3つのメリットを解説します。

ホームページにアイコンを設定するか悩んでいる方は、参考にしてください。

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

ホームページにアイコンがあれば、ビジュアルを通して、企業のイメージをユーザーに印象付けることが可能です。

人間の脳は、「右脳」と「左脳」に分かれていますよね。
イメージによる記憶は右脳、文字による記憶は左脳が得意だと言われています。

そして、「右脳の記憶力は左脳の約10倍以上ある」という説もあるのです。

つまり、情報を伝える時は、「文字」のみよりも「画像」を加えたほうが記憶してもらいやすくなると、考えられます。

ホームぺージに再訪問されやすくなる

アイコンを設定すれば、自社のホームぺージが認識されやすくなるため、ユーザーの再訪問が期待できます。

以下、アイコンを「設定したページ」と「設定していないページ」のブックマークの比較です。

アイコンがあるほうが目立ちますよね。
※設定されていないホームページは、「地球」のアイコンが表示されます。

また、アイコンによって、自社と他社のホームページの違いをより明確化することが可能です。

ユーザーに自社のホームぺージを見落とされないようにするためにも、アイコンの設定をおすすめします。

ホームぺージの信頼性をアピールできる

ホームページにアイコンを設定すると、「公式サイト」であることを検索結果でアピールできます。

試しに、「エックスサーバー 特徴」と検索してみましょう。
検索結果には、『エックスサーバー』の特徴に関する情報を記載したぺージが、複数表示されています。

『エックスサーバー』のアイコンを認知している方であれば、どれが公式サイトなのか一目で判断できるでしょう。

もしアイコンがなければ、ユーザーは公式サイトが見つかるまで、一つずつホームぺージにアクセスしなければなりません。

つまり、ホームぺージのアイコンは、ユーザーの負担を減らす効果もあるのです。

ホームぺージのアイコンを作るための準備

メリットが分かったところで、ホームぺージのアイコンを作成する準備を始めましょう。
まず、アイコンの素材データを用意します。

もし企業のロゴデータがある場合は、新しくアイコンをデザインから作る必要はありません。
ロゴデータを加工して、ホームページのアイコンを作ればよいのです。

企業ロゴをアイコンに使用すれば、ユーザーがより理解しやすくなります。

特別な理由がない限り、企業ロゴをホームぺージのアイコンに使用しましょう。

企業ロゴがない場合は先に作ろう

企業ロゴがない場合は、ホームページのアイコンよりも先に作りましょう。

ロゴは投資対効果が高いです。
ホームページだけでなく、名刺、パンフレット、チラシなど、さまざまな場面で利用できます。

このように、あらゆるシーンで「会社の顔」となるロゴは、クオリティにもこだわりましょう。
質の高いロゴを作るには、「フリーランスのデザイナー」や「デザイン会社」などのプロに依頼するのがおすすめです。

ロゴについては、以下の記事で詳しく解説しているので、ぜひ参考にしてください。

企業ロゴをホームページのアイコンに使うときの注意点

企業ロゴには、そのままホームページのアイコンとして使いやすいものもあれば、そうでないものもあるため、注意が必要です。

企業ロゴをホームぺージアイコンとして効果的に表示させるために、「使いやすさ」について確認しておきましょう。

それぞれ詳しく解説します。

ホームぺージのアイコンに使いやすい企業ロゴ

まず、ホームページのアイコンに使いやすい企業ロゴの特徴を見てみましょう。

ロゴに「シンボル」が含まれる

企業ロゴの種類は、大きく分けて3つあります。

ホームページのアイコンに使いやすいのは、「シンボル」が含まれているロゴです。

シンボルタイプのロゴで作られたアイコンなら、ユーザーは一目で何のホームぺージか判断できます。

また、ホームぺージのアイコンは正方形です。
そのため、正方形に近いシンボルであれば、さらに使いやすいでしょう。

ロゴのデザインがシンプル

ロゴのデザインは、できるだけシンプルなほうがアイコンに転用しやすいです。

ホームページのアイコンは、ブラウザのブックマークやタブなど、非常に小さな領域に表示されます。

シンプルなデザインのロゴなら、小さな領域でも見てすぐ分かるので、ユーザーに認識されやすいでしょう。

ホームぺージのアイコンに使いづらい企業ロゴ

次に、ホームページのアイコンに使いづらい企業ロゴの特徴を紹介します。

ロゴが「ロゴタイプ（文字のみ）」

文字のみのロゴは、「ロゴタイプ」と呼ばれています。
ロゴタイプは、基本的にホームぺージアイコンには使いづらいです。

ホームページのアイコンは、ブラウザのブックマークやタブなど、狭い領域に表示されます。
表示サイズが小さくなれば、文字は読みづらくなるでしょう。

また、ロゴタイプの多くは長方形のため、正方形に整形しにくいのも難点の一つといえます。

ただ、ロゴタイプでも工夫すれば、ホームぺージのアイコンに使用可能です。

以下、Yahoo! JAPANのアイコンをご覧ください。

このように、ロゴタイプでも、頭文字のみ利用すればアイコンとして成り立ちます。

もし自社のものが「ロゴタイプ」であっても、全体を詰め込もうとせず、最も印象的な一文字を抜き出してみましょう。

そうすれば、小さな表示枠でもパッと見て判別できるアイコンが作成できます。

ロゴのデザインが複雑

複雑なデザインのロゴは、ホームページのアイコンに適していません。

先ほど説明したとおり、ホームページのアイコンは狭い領域に表示されます。
デザインが複雑だと、小さなサイズでは何が描かれているのか判別できず、アイコンのイメージがユーザーに伝わりづらくなるのです。

自社のロゴが複雑なデザインの場合、ホームページのアイコン用に別途新しいものを作りましょう。

ホームページのアイコンは、無料の「画像編集ツール」を使って簡単に作成可能です。

なお、作り方はのちほど詳しく解説します。
「今すぐツールを知りたい」という方は、「アイコンをデザインから自作するときに役立つ画像編集ツール」から確認してください。

ホームぺージのアイコンを作る方法

ここからは、ホームぺージのアイコンを作る方法を具体的に解説します。

企業ロゴのデータを手元に用意したら、手順に添ってホームページのアイコンを作成していきましょう。

手順1：画像編集ソフトを用意する

手持ちのロゴデータの「ファイル形式」を確認してください。
企業ロゴをフリーランスのデザイナーやデザイン制作会社に作ってもらった場合は、「Aiファイル（.ai）」である可能性が高いです。

「Aiファイル」は、デザイン業界でよく利用される『Illustrator（イラストレーター）』という画像編集ソフト独自のファイル。開くためには、基本的に同ソフトが必要です。

そのため、Aiファイルをもとに、ホームぺージのアイコンを自社で作る場合は、『Illustrator』を用意しましょう。

『Illustrator』の料金プランは、月額と年額の2種類です。
ホームぺージのアイコン作成だけを目的とするなら、ひと月だけに限定して使用すれば、費用を抑えられます。

また、7日間であれば無料で試用可能で、その期間中に解約すれば料金は請求されません。（※2026年1月16日時点。参考：Illustratorを無料で始める | Adobe Illustrator）

ホームページのアイコンを外注する場合は、次に紹介する「サイズ」と「ファイル形式」を参考にしてください。

手順2：サイズとファイル形式を知る

ホームページのアイコンに使う画像は、用途によって、サイズとファイル形式が異なります（※1）。

用途	サイズ	ファイル形式
Chrome、Edge、Firefoxのタブ	16px × 16px	favicon.ico
ブックマークアイコン 高解像度ディスプレイの各ブラウザタブ	32px × 32px	favicon.ico
Windowsのショートカット（デスクトップ） Google検索結果の画面（※2）	48px × 48px	favicon.ico
iPhone（iOS）のホーム画面	180px × 180px	apple-touch-icon.png
Androidスマホのホーム画面	192px × 192px	favicon.png
WordPressで作るホームページのアイコン	512px × 512px 以上	favicon.png

（※1）表示する機種によってファイル形式、サイズは異なる場合があります。
（※2）48px × 48px以上の倍数なら可。（参考：Google 検索セントラル「検索結果に表示されるファビコンを定義する」）。

「icoファイル」はマルチアイコンと呼ばれる形式で、複数サイズの画像をまとめて格納できます。※pngファイルをicoファイルに変換する方法は、手順4で詳しく解説しますね。

WordPressならpng画像1枚でOK

もし、ホームページを「WordPress（ワードプレス）」で作成している場合は、「サイトアイコン」に設定すれば、1枚の画像（png）から各用途に合わせたサイズのファイルを自動生成してくれます。

WordPressは、HTMLやCSSなどのWeb制作スキルがなくても、ホームページの制作や更新が簡単にできる無料のシステムです。
詳しくは、以下の記事で解説しています。

手順3：画像編集ソフトで調整やリサイズをする

ここでは一番多く想定される「Aiファイル形式のロゴデータ」を、『Illustrator』で調整やリサイズをする方法を解説します。

手順4：ファイル形式を変更する

pngファイルをicoファイルに変更するには、無料ツール「favicon generator」がおすすめです。

以下の手順に沿って、進めましょう。

ダウンロードしたzipファイルを展開すると、多くのファイルが表示されます。

しかし、すべてのファイルを使う必要はありません。
今回使用するのは、以下の3つのファイルのみです。

※favicon.icoには、「16px × 16px」「24px × 24px」「32px × 32px」「48px × 48px」など、複数のサイズの画像がまとまっています。
※WordPressの場合は、上記とは別に『Illustrator』で作った「512px × 512px」の画像ファイルのみを使用します。

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

準備した画像ファイルをアイコンとして表示させるための設定を進めましょう。

アイコンの設定方法は、ホームページの作り方によって異なります。

ここでは代表的なホームページの作り方である、「WordPress」と「HTML」の場合を解説しますね。

WordPressで作ったホームページ

WordPressでは、ホームページのアイコンを管理画面から簡単に設定できます。

WordPressなら、「512px × 512px」のpngファイルを1つアップロードすればOKです。
表示場所に合わせて、システムが自動で最適なサイズに調整してくれます。

それでは、アイコンの設定手順例を見ていきましょう。

HTMLで作ったホームページ

HTMLで作ったホームページにアイコンを設定するには、サーバーへファイルをアップロードするためのFTPソフトが必要です。

ここでは、弊社『エックスサーバー』のWebFTP機能「ファイルマネージャ」を例に、ホームページのアイコンを設定する方法を解説します。

なお、「HTMLやFTPソフトのことをよく知らない……」という方は、以下の記事で解説しているので、参考にしてください。

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

ホームぺージにアイコンを設定したにもかかわらず、上手く表示されない場合は、以下の対処法をお試しください。

それぞれ解説します。

キャッシュを消去する

ブラウザのキャッシュを削除すると、ホームページのアイコンが表示されるかもしれません。

キャッシュは、ホームページに素早くアクセスするためには便利な機能ですが、以前ダウンロードしたファイルを参照してしまいます。
そのため、新しく設定したアイコンをうまく表示できない場合があるのです。

キャッシュを消去する方法は、ブラウザごとに異なります。

ここでは、Google Chromeでキャッシュを消去する方法をご紹介します。

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

HTMLで設定した方は、コード内の「href="～"」に書かれたファイルの保存場所（パス）や名前が間違っていないか確認しましょう。

具体的には、以下の赤文字部分が、画像ファイルの場所や名前を指定している箇所です。

この内容は、無料ツール「favicon generator」で作った画像の名前を変更せず、HTMLファイルと同じ場所にアップロードしていることが前提です。

しかし、ファイル名を変更したり、画像を別のフォルダにアップロードしたりした場合は、この赤い部分を書き換える必要があります。

アイコンを設定するために追加した3行のコードを確認し、実際のファイル名や保存場所と違う場合は、正しい内容に修正しましょう。

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

ホームページのアイコンに指定できないファイル形式の画像を、アップロードしているおそれがあります。

基本的に、アイコンに使用できるのは「png」、もしくは「ico」形式の画像です。それ以外のファイル形式（jpgやaiなど）では、ホームぺージのアイコンとして表示できません。

アイコン用にアップロードした画像の末尾（拡張子）を確認し、違う場合は「.png」か「.ico」のファイルに変更しましょう。

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

企業ロゴによっては、ホームページのアイコンに使いにくい場合もあります。
その場合、ホームページのアイコン用に別途新しい画像を作りましょう。

「無料の画像編集ツール」なら費用を掛けずに作成可能です。

ここでは、おすすめの画像編集ツールを二つ紹介します。

Canva

▲出典：Canva

『Canva（キャンバ）』は、無料で使えるオンラインのグラフィックデザインツール。
無料プランだと機能に制限がかかるものの、十分に使えます。

ロゴのテンプレートも多く用意されているため、初めての方でも簡単にデザイン可能。

アイコンはもちろん、ホームページ、名刺、パンフレットなど、さまざまな用途に活用できるツールです。

favicon.cc

▲出典：favicon.cc

『favicon.cc』は、ホームページのアイコン作成に特化したツール。
正方形のマス目をクリックしていくだけで、簡単にホームページのアイコンを作成できます。

作成中は随時プレビュー画面に反映され、実際の見え方を確認しながら作業可能なのもポイントです。

完成した画像は、「icoファイル」としてダウンロードできます。

フリー（無料）で使えるアイコン素材サイト

一からデザインを考えるのが難しい場合は、「アイコン素材サイト」を利用してみてはいかがでしょうか。

パーツを組み合わせたり、カラーを変更したりすれば、オリジナリティを発揮できるでしょう。

ここで紹介するアイコン素材サイトは、どれも「会員登録不要」に加えて、「無料」で利用可能です。
しかも、「商用利用」も許可されているため、企業のホームぺージにも使えます。

ただし、商標登録はできない点に気を付けてください。

ICOON MONO

▲出典：ICOON MONO

『ICOON MONO』は、6,000点以上のアイコンが無料でダウンロードできるサイトです。
日本語で運営されているので、使いやすいでしょう。

モノクロはもちろん、カラーを指定してダウンロードすることもできます。

ダウンロードできる画像のファイル形式は、PNG、JPG、SVG、Ai、EPSと豊富です。

icon-rainbow

▲出典：icon-rainbow

『icon-rainbow』は幅広く使える無料アイコン素材サイト。
カテゴリー分けが細かいので、目当てのアイコンを見つけやすいのがメリットです。

『ICOON MONO』と似ているものの、少しテイストが違うので、自社のイメージに合うほうを選んでください。

こちらも日本語で運営されているので、使い方には困りません。

ダウンロードできるファイル形式は、JPG、PNG、SVG、Ai、EPSです。
『ICOON MONO』同様、サイト上でカラー変更もできます。

ICON BOX

▲出典：ICON BOX

『ICON BOX』は、シンプルなデザインのアイコンが揃っている素材サイト。
丸みを帯びたデザインは、かわいらしさを感じさせます。

カテゴリはもちろん、「FUTO（太線）」「HOSO（細線）」「MINI」の三種類のテイストから、アイコンを絞り込むことが可能です。

ダウンロードできるファイル形式は、PNGとSVGの二種類。

なお、このサイトの素材はモノクロカラーのみの対応です。
アイコンの色を変えたい場合は、画像編集ソフトを利用してください。

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

ホームページのアイコンをデザインから自作するときの注意点を知っておきましょう。

商標権を侵害しない

商標権は、自社の商品やサービスを守るために存在する権利。
商標権があれば、他社による類似の名称やロゴの使用を防げます。

反対に、「おしゃれだから」「カッコいいから」などといった理由で、他社のロゴに似たようなデザインのアイコンを作成するのはやめましょう。

たとえ悪気がなかったとしても、商標権を侵害しているとみなされれば、法的トラブルに発展したり、自社の信用を失ったりするおそれがあります。

アイコンを自作するときは、オリジナルのデザインにすることが重要です。

著作権を侵害しない

著作権とは、制作物の作り手に対して与えられる権利。
著作権はアイコンそのものだけでなく、アイコンに使われている素材にも及ぶ場合があるのです。

この記事でも紹介したとおり、無料の素材サイトはいくつかあります。

しかし、著作権を持っているのは、あくまでもサイト運営者もしくは素材の作り手です。
フリーだからといって、著作権まで譲渡されるわけではありません。

著作権を侵害しないためにも、素材を利用するときは、各サイトの「利用規約」を事前にしっかり確認しましょう。
たとえば、「素材の再配布禁止」などの著作権に関わる事項も、利用規約に記載されています。

そして、定められている利用範囲を守れば、著作権侵害のリスクをできる限り減らせるでしょう。

ホームページのアイコンに関するよくある質問（FAQ）

最後に、ホームページのアイコンに関する「よくある質問」をまとめました。

まとめ

今回は、ホームページのアイコンについて、作り方や設定方法を解説しました。

ホームページのアイコンにより、ホームページの信頼性や認知度を高めるだけでなく、ユーザーの利便性も向上します。この機会に、ぜひ設定を検討してみてください。

それでは素敵なホームぺージの完成を願っております。

以上、最後まで読んでいただき、ありがとうございました。

ホームページの開設を検討している方へ

※1 2025年12月時点、W3Techs調べ。
※2 2025年12月時点、エックスサーバー・XServerビジネスにおける法人アカウント数の合計値。

『エックスサーバー』と『XServerビジネス』の違いは、以下の記事で詳しく解説しています。

なお、当メディア「初心者のための会社ホームページ作り方講座」では、初心者の方にわかりやすく会社のホームページを始められる方法を紹介しています！

ホームページの始め方・立ち上げに関する、ご質問・ご相談はツイッターDM( @kawauso_xsv )までお気軽にどうぞ！