こんにちは、編集長のカワウソです！
ホームページをブックマークすると、「ページ名」と一緒に「アイコン」が表示されるときがありますよね。
ブックマークに表示された他社ホームぺージのアイコンを見て「自社にも設定したい」と考えていませんか？
そこで今回は、ホームページのアイコンについて、作り方や設定方法を解説します。
カワウソ
この記事は次のような人におすすめ！
- 企業ホームぺージを自作する人
- ホームページのアイコンを作りたい人
- ホームページにアイコンを設定したい人
- ホームぺージを本格的にWeb活用したい人
この記事を読めば、ホームページにさまざまな種類のアイコンを設定できますよ。
また法人利用を前提とし、既存の企業ロゴをホームページのアイコンに転用するときの注意点も紹介しています。
※「すぐにアイコンの作り方や設定方法を知りたい」という人は、以下のリンクをクリックしてください。
ホームぺージのアイコンを作る方法 ／ ホームぺージのアイコンを設定する方法
それではどうぞ！
目次
ホームページのアイコンとは
ホームぺージのアイコンとは、わかりやすくいうと「シンボル（象徴）」です。
たとえばリアルの世界だと、郵便局や警察署といった施設の入り口には、シンボルが提示されていますよね。
シンボルがあれば、何の施設か一目見て判断できます。
ホームぺージも同じで、アイコンがあれば、何のホームぺージかすぐに分かるのです。
ホームページのアイコンは「ファビコン」とも呼ばれます。これは、「favorite icon（フェイバリット アイコン）」すなわち「お気に入りのアイコン」の略称。お気に入り（ブックマーク）されたページ名の横にアイコンが表示されることが名前の由来です。
ホームページのアイコンは、さまざまな場所で表示されます。
どのようなところでアイコンが表示されるのか、ひとつずつ解説します。
ブラウザのブックマーク
ホームページをブラウザのブックマークに登録すると、「ページ名」の左側に「アイコン」が表示されます。
ブラウザのタブ
ホームページのアイコンは、ブラウザのタブにも表示されます。ブックマーク同様、「アイコン」と「ページ名」が表示されるのです。
Windowsのショートカット（デスクトップ）
Windowsのパソコンでホームページのショートカットを作成すると、デスクトップにアイコンが現れます。
Windowsのショートカットを作成する方法は、ブラウザによって異なります。
たとえばChromeの場合、「画面右上（︙）＞ その他のツール > ショートカットを作成」から作れます。
スマホのホーム画面
スマホでホームぺージを「ホーム画面に追加」すると、アイコンが表示されます。
たとえばiphone（OS）やSafari（ブラウザ）の場合、「アンダーバーの共有ボタン ＞ ホーム画面に追加」から作れます。
スマホの検索結果
スマホの検索結果には、ホームぺージのアイコンが表示されます。
ホームページのアイコンを設定する3つのメリット
前提として、ホームぺージのアイコン設定は必須ではありません。
ホームページにアイコンを設定するには、多少なりとも時間がかかります。急いでホームページを公開する必要があるときは、後回しにしてもかまいません。
しかし、アイコンを設定しないまま、ホームページを公開し続けるのはもったいないのです。
次に、ホームページにアイコンを設定する3つのメリットを解説します。
企業の認知度向上に貢献する
ホームページにアイコンがあれば、ビジュアルを通して企業のイメージをユーザーに印象付けられます。
人間の脳は、「右脳」と「左脳」に分かれています。イメージによる記憶は右脳、文字による記憶は左脳が得意とするところです。
そして、右脳の記憶力は左脳の約10倍と言われています。情報を伝える時は「文字」のみよりも「画像」を加えたほうが記憶してもらいやすくなるというわけです。
ホームぺージに再訪問されやすくなる
アイコンを設定すれば自社のホームぺージが認識されやすくなるため、ユーザーの再訪問が期待できます。
以下、アイコンを「設定したページ」と「設定していないページ」のブックマークの比較です。
アイコンがあるほうが目立ちますよね。
※設定されていないホームページは「地球」のアイコンが表示されます。
ユーザーに自社のホームぺージを見落とされないようにしたいなら、アイコンの設定をおすすめします。
ホームぺージの信頼性をアピールできる
ホームページにアイコンを設定すると、「公式サイト」としてアピールできるのもメリットです。
たとえば、スマホの検索結果では、さまざまなホームぺージがヒットします。
試しに「エックスサーバー ドメイン取得」と検索してみましょう。
検索結果には『エックスサーバー』のドメイン取得に関する情報を記載したホームぺージが複数表示されています。
『エックスサーバー』のアイコンを認知している方であれば、どれが公式サイトなのか一目で判断できるのです。
もしアイコンがなければ、ユーザーは公式サイトが見つかるまで、一つずつホームぺージにアクセスしなければなりません。
ホームぺージのアイコンは、ユーザーの負担を減らす効果もあります。
ホームぺージのアイコンを作るための準備
メリットが分かったところで、ホームぺージのアイコンを作成する準備を始めましょう。まず、アイコンの素材データを用意します。
もし企業のロゴデータがある場合は、新しくアイコンをデザインから作る必要はありません。ロゴデータを加工してホームページのアイコンを作ればよいのです。
企業ロゴをアイコンに使用すれば、ユーザーがより理解しやすくなります。
特別な理由がない限り、企業ロゴをホームぺージのアイコンに設定しましょう。
企業ロゴがない方は先に作ろう
企業ロゴがない場合はホームページのアイコンを作成する前に、企業ロゴを優先的に作りましょう。
企業ロゴはホームページだけでなく、名刺、パンフレット、チラシなど、さまざまな場面で利用できます。
ロゴは投資対効果が高いので、できれば費用をかけてプロに作成を依頼しましょう。
ロゴ制作は「フリーランスのデザイナー」や「デザイン会社」に依頼できます。
企業ロゴについては、以下の記事で詳しく解説しているので参考にしてください。
ホームページに適したロゴとは？会社ロゴの重要性を解説
企業ロゴをホームページのアイコンに使うときの注意点
企業ロゴはホームページアイコンに使いやすいものもあれば、使いにくいものもあります。
それぞれ具体例を紹介します。
ホームぺージのアイコンに使いやすい企業ロゴ
まず、ホームページのアイコンに使いやすい企業ロゴの特徴を見てみましょう。
- ロゴに「シンボル」が含まれる
- ロゴのデザインがシンプル
ロゴに「シンボル」が含まれる
企業ロゴの種類は、大きく分けて3つあります。
- ロゴタイプ（文字のみ）
- シンボルマーク
- ロゴマーク（文字+シンボル）
ホームページのアイコンに使いやすいのは、「シンボル」が含まれているロゴです。
シンボルタイプのロゴで作られたアイコンなら、ユーザーは一目で何のホームぺージか判断できます。
また、ホームぺージのアイコンは正方形です。そのため、正方形に近いシンボルであれば、さらに使いやすいでしょう。
ロゴのデザインがシンプル
ロゴのデザインは、できるだけシンプルなほうがアイコンに転用しやすいのです。
ホームページのアイコンは、スマホの検索結果など、非常に小さな領域に表示されます。
シンプルなデザインのロゴなら、小さな領域でも見てすぐわかるので、ユーザーに認識されやすくなります。
ホームぺージのアイコンに使いにくい企業ロゴ
次に、ホームページのアイコンに使いにくい企業ロゴの特徴を紹介します。
- ロゴが「ロゴタイプ（文字のみ）」
- ロゴのデザインが複雑
ロゴが「ロゴタイプ（文字のみ）」
文字のみのロゴは「ロゴタイプ」と呼ばれています。ロゴタイプはホームぺージアイコンには使いにくいのです。
ホームページのアイコンはブックマークやブラウザなど、狭い領域に表示されます。表示サイズが小さくなれば、文字は読みにくくなるでしょう。
また、ロゴタイプの多くは長方形です。正方形に整形しにくいのも難点の一つといえます。
ただ、ロゴタイプでも工夫すれば、ホームぺージのアイコンに使用できます。
以下、Yahoo! JAPANのアイコンをご覧ください。
ロゴタイプでも、頭文字のみ利用すればアイコンとして成り立ちます。
ロゴのデザインが複雑
複雑なデザインのロゴは、ホームページのアイコンに適していません。先ほど説明したとおり、ホームページのアイコンは狭い領域に表示されます。
デザインが複雑だと見えにくいだけでなく、アイコンのイメージがユーザーに伝わりにくくなるのです。
自社のロゴデザインが複雑である場合、ホームページのアイコン用に別途新しいものを作りましょう。
ホームページのアイコンは、無料の「画像編集ツール」を使って簡単に作成できます。
実際の作り方については、このあと解説します。
「すぐに知りたい！」という方は、以下のリンクをクリックしてください。
ホームぺージのアイコンを作る方法
ここからは、ホームぺージのアイコンを作る方法を具体的に説明します。
企業ロゴのデータを手元に用意したら、手順に添ってホームページのアイコンを作成していきましょう。
手順1：画像編集ソフトを用意する
手持ちデータの形式が「ai」となっている場合、Adobe 社の『Illustrator（イラストレーター）』というソフトが必要です。
「ai」はAdobe 社の『Illustrator（イラストレーター）』というソフト独自のファイル形式。ソフトを持っていなければ開けません。
「ai」は、企業ロゴの制作をフリーランスのデザイナーやデザイン制作会社に依頼した場合によくあります。
『Illustrator』の料金プランは月額と年額の2種類あります。ホームぺージのアイコン作成だけを目的とするなら、ひと月だけに限定して使用できるため、費用を抑えられます。
また、7日間であれば無料で試用可能です。※試用期間中に解約すると料金は請求されません。
『Illustrator』の使用予定がない方は、次に紹介する「サイズ」と「ファイル形式」を参考に、ホームぺージのアイコン用画像データを外注しましょう。
カワウソ
手順2：サイズとファイル形式を知る
ホームページのアイコンに使う画像は、「どこに」「どのOSで」表示するのかによってサイズとファイル形式が異なります。（※1）
| サイズ | 用途 | ファイルの種類 |
| 16px × 16px | Edge、Chrome、Firefox、Internet Explorerのタブ | favion.ico |
| 32px × 32px | ブックマークアイコン高解像度ディスプレイでのブラウザタブ | favion.ico |
| 48px × 48px | Windowsのショートカット（デスクトップ） スマホのGoogle検索結果画面（※2） |
favion.ico |
| 180px × 180px | iPhone（iOS）のホーム画面 | apple-touch-icon.png |
| 192px × 192px | Androidスマホのホーム画面 | favicon.png |
| 512px × 512px 以上 |
WordPressでホームページのアイコンを設定する場合 | favicon.png |
（※1）ホームページアイコンの代表的なサイズを示したものです。表示する機種によってファイル形式、サイズは異なる場合があります。
（※2）48px×48px以上の倍数なら可。表示される時は16px×16pxに縮小されて表示されます。
「icoファイル」は、マルチアイコンと呼ばれる形式です。複数サイズの画像をまとめて格納できます。
「pngファイル」を「icoファイル」に変換する方法は手順4で解説します。
手順3：画像編集ソフトで調整やリサイズをする
ここでは一番多く想定される「aiファイル形式のロゴデータ」を『Illustrator』で調整やリサイズをする方法を解説します。
まず、『Illustrator』を開いてください。
画面上部のメニューの「ファイル ＞新規」をクリックします。
今回は「512px × 512px」で作成してみましょう。
数値が入力できたら「作成」をクリックしてください。
次に、ロゴデータをドラッグ＆ドロップで挿入します。
画面上部にある「埋め込み」をクリックします。
画面左側にある白矢印の「ダイレクト選択ツール」で、不要な部分を選択して、キーボードの「delete」で削除しましょう。
残ったオブジェクトを拡大して、中央に配置します。
左上のメニュー「ファイル ＞別名で保存」から保存してください。
ai形式でファイルを保存します。
ここからはロゴデータをpngファイルで書き出す方法です。
画面上部のメニュー「ファイル ＞書き出し ＞ Web用に保存」をクリックします。
画面右上にある「プリセット」「名前」の下にあるドロップダウンから「PNG-24」を選び、「透明部分」にチェックを入れましょう。
「保存」をクリックすれば完了です。
手順4：ファイル形式を変更する
pngファイルをicoファイルに変更するには、無料ツール「favicon generator」を使います。
まず、以下のサイトにアクセスしてください。
様々なファビコンを一括生成。｜favicon generator
「画像ファイルを選択」をクリックして、『Illustrator』で作ったpngファイルをアップロードします。
次に、「ファビコン一括生成」をクリックしてください。
画面を下にスクロールして、「ファビコンダウンロード」をクリックします。
※favicon.icoには、「16px × 16px」「24px × 24px」「 32px × 32px」「48px × 48px」など、複数のサイズの画像がまとまっています。
ダウンロードしたすべてのファイルを使う必要はありません。
『Illustrator』で作ったWordPress用の「512px × 512px」とは別に、先ほど「favicon generator」から生成された以下の3つのファイルのみ使用します。
- favicon.ico
- apple-touch-icon-180×180.png
- android-chrome-192×192.png
ホームぺージのアイコンを設定する方法
アイコン画像を準備できたら、ホームページに設定して実際に表示されるようにしましょう。
ホームページをHTMLファイルで作っている場合と、WordPressで作っている場合で設定方法は異なります。
それぞれ解説します。
HTML
ここでは『エックスサーバー』の「ファイルマネージャ」を例に解説します。ファイルのアップロードやHTMLファイルの編集はご自身のお好みの方法でお試しください。
まずアイコンを表示したいページのHTMLファイルと同じ階層に、「favicon generator」で作った3つのファイルをアップロードします。
- favicon.ico
- apple-touch-icon-180×180.png
- android-chrome-192×192.png
次に、アイコンを表示したいページのHTMLファイルを開いてください。
HTMLファイルの先頭に<head>という記述があります。この<head>～</head>の中に次のソースコードを記述しましょう。
<link rel=”shortcut icon” href=”favicon.ico” type=”image/x-icon”>
<link rel=”apple-touch-icon” href=”apple-touch-icon-180×180.png” sizes=”180×180″>
<link rel=”icon” type=”image/png” href=”android-chrome-192×192.png” sizes=”192×192″>
1行目のソースコードに該当するアイコン表示場所
- ブラウザのタブ
- ブックマーク
- Windowsデスクトップショートカット
- スマホの検索結果
2行目のソースコードに該当するアイコン表示場所
- iPhoneのホーム画面ショートカット
3行目のソースコードに該当するアイコン表示場所
- Androidスマホのホーム画面ショートカット
ファイルを更新（アップロード）すると完了です。
ホームぺージのアイコンが表示されます。
スマホのホーム画面に表示されるアイコンの背景が黒いのは透過しているためです。
背景色を付けたい場合は、『Illustrator』で透過しない画像を作成してください。
WordPress
WordPressでは、ダッシュボード（管理画面）から簡単にホームページアイコンを設定できます。
WordPressなら、1サイズのpngファイルをアップロードすればOK。それぞれの場所に自動で最適化したアイコンが表示されます。
設定方法は次のとおりです。
まず、ダッシュボード左メニューの「外観 ＞ カスタマイズ」をクリックします。
次に、「サイト基本情報」をクリックしてください。
「サイトアイコンを選択」をクリックします。
画像をアップロードして、「公開」をクリックすれば完了です。
ホームぺージのアイコンが表示されました。
ホームページのアイコンが表示されないときの対処法
ホームぺージにアイコンを設定をしたにもかかわらず、上手く表示されない場合があります。
以下の対処法をお試しください。
- キャッシュを消去する
- ファイル名や画像指定パスを確認する
- 画像のファイル形式を確認する
ホームページのアイコンが表示されないときの対処法
キャッシュを消去する
キャッシュはブラウザのメモリ―機能です。
ホームページに素早くアクセスするためには便利な機能ですが、古い情報を参照します。そのため新しく設定したアイコンをうまく表示できない場合があるのです。
キャッシュを消去する方法はブラウザごとに異なります。
ここでは、Google Chromeでキャッシュを消去する方法をご紹介します。
- 「画面右上（︙） ＞ その他のツール ＞ デベロッパーツール」を選択
- 更新ボタンを長押しし、「キャッシュの消去とハードの再読み込み」をクリック
ファイル名や画像指定パスを確認する
HTMLファイルの「<head>」タグにホームページ用アイコンを指定した場合、以下のソースコードの赤い部分をよく見てください。
<link rel=”apple-touch-icon” href=”apple-touch-icon-180×180.png” sizes=”180×180″>
「href=”」のあとの赤く表示した部分は、画像ファイルの保存場所を指定しています。
今回は、アイコンを表示したいHTMLファイルと同じ場所にアップロードしたので、このコードになっています。さらに、「favicon generator」で作ったファイルの名称は変えていないという前提です。
しかしファイル名を変更したり、アップロードした場所が違ったりしていれば、この赤い部分を書き換える必要が出てきます。
画像のファイル形式を確認する
ホームページのアイコンに指定できないファイル形式の画像をアップロードしている可能性があります。
画像のファイル形式が「png」もしくは「ico」になっているか確認してください。
アイコンをデザインから自作するときに役立つ画像編集ツール
企業ロゴによっては、ホームページのアイコンに使いにくい場合もあります。その場合、ホームページのアイコン用に別途新しい画像を作りましょう。
「無料の画像編集ツール」なら費用を掛けずに作成可能です。
ここではおすすめの画像編集ツールをご紹介します。
Canva
出典：Canva
『Canva』は、さまざまなフォーマットを提供してくれるオンライン上のデザインツール。機能に制限はあるものの、無料で使えるツールです。
フォーマットを選択し各種パーツを整えていくだけで、あっという間にアイコンが完成します。
「デザインに自信がないけれど、自社のホームページにはセンスあるアイコンを用意したい」そんな要望にも十分応えてくれるサービスです。
favicon.cc
出典：favicon.cc
『favicon.cc』は、正方形のマス目をクリックしていくだけで、ホームページのアイコンが作成できるサイト。ドット絵風のアイコンが作れます。
ホームページのアイコン作成に特化しており、「icoファイル」のダウンロードが可能です。
フリー（無料）で使えるアイコン素材サイト
１からデザインを考えるのが難しい場合は、フリー（無料）で使えるアイコン素材サイトを利用してみてはいかがでしょうか。
パーツを組み合わせたり、カラーを変更したりすれば、オリジナリティを発揮できるでしょう。
ここから紹介するサイトの素材は、どれも「会員登録不要」でしかも「無料」で利用でき「商用利用」も許可されています。
ただし、商標登録はできない点に気を付けてください。
ICOON MONO
出典：ICOON MONO
ICOON MONOは、6000点以上のアイコンがダウンロードできるサイトです。日本語で運営されているので、とても使いやすいでしょう。
たくさんの素材が欲しい人向けに、12個までのアイコンをまとめてダウンロードできる機能もあります。
ダウンロードできるファイル形式は、JPG、PNG、SVG、Ai、EPSと豊富です。MONOという名前ですが、モノクロだけでなくカラー画像もダウンロードできます。
icon-rainbow
出典：icon-rainbow
icon-rainbowは幅広く使える無料アイコン素材サイト。カテゴリー分けが細かいので、目当てのアイコンを見つけやすいのがメリットです。
ICOON MONOとは少しテイストが違うので、自社のイメージと合うほうを選んでください。
こちらも日本語で運営されているので、使い方には困りません。
ダウンロードできるファイル形式は、JPG、PNG、SVG、Ai、EPSです。サイト上でカラー変更もできます。
ICON BOX
出典：ICON BOX
ICON BOXは、シンプルなデザインのアイコンがそろっている素材サイト。丸みを帯びたデザインはおしゃれで、かわいらしさを感じさせます。
FUTO（太線）とHOSO（細線）の2種類からアイコンを絞り込めるのも特徴です。
ダウンロードできるファイル形式は、PNGとSVGになります。
このサイトの素材はモノクロカラーのみの対応です。色を変えたい場合は、画像編集ソフトを利用してください。
ホームぺージのアイコンを自作するときの注意点
最後に、ホームページアイコンをデザインから自作するときの注意点を知っておきましょう。
商標権を侵害しない
商標権は、自社の商品やサービスを守るために存在する権利。商標権があれば、他社による類似の名称やロゴの使用を防げます。
反対に「カッコいいから」といった理由で、ある企業のロゴに似たようなデザインのアイコンを作成するのはやめましょう。商標権侵害になる可能性があります。
著作権を侵害しない
著作権とは、製作物の作り手に対して与えられる権利。著作権はアイコンそのものだけでなく、アイコンに使われている素材にも及ぶ場合があるのです。
この記事でも紹介したとおり、無料の素材サイトはいくつかあります。
しかし、あくまでも著作権を持っているのは、サイト運営者もしくは素材の作り手です。フリーだからといって、著作権まで譲渡されるわけではありません。
著作者が許可していない禁止事項（例えば素材の再配布など）は利用規約に書いてあります。素材サイトを利用するときは、事前に利用規約をしっかり読んでください。
そして、設定されている利用範囲を逸脱しないように注意しましょう。
まとめ
今回は、ホームページのアイコンについて、作成方法や設定方法を解説しました。
- ホームぺージのアイコンはブックマーク、タブ、スマホの検索画面などに表示される
- ホームぺージのアイコン設定は必須ではない。しかし「メリットが多い」ためおすすめ
- 基本的には企業ロゴを流用するが、難しい場合は別途アイコン用に新しく作る
- ホームぺージのアイコンをゼロから自作するなら「無料の画像編集ツール」がおすすめ
- ホームぺージのアイコンをゼロから自作するときは「商標権」や「著作権」に注意する
多くの企業ホームぺージには、アイコンが設定されています。時間に余裕が出たときに設定しましょう。
それでは素敵なホームぺージの完成を願っております。
以上、最後まで読んでいただき、ありがとうございました。
ホームページの開設を検討している方へ
エックスサーバーは高速かつ高い安定性を誇る高性能レンタルサーバーです。
国内シェアNo.1のレンタルサーバーであり、15万社の導入実績があります。
6月16日18時まで半額キャッシュバックキャンペーン開催中です！
.comや.netなど大人気ドメインも永久無料と過去最大級にお得です。
さらに、初夏のボーナスプレゼントキャンペーンも開催中です。
Amazonギフト券10,000円分が当たるビッグチャンス！
ぜひこのお得な機会にホームページ開設をご検討ください！
法人向けレンタルサーバー「Xserverビジネス」なら、
「ホームページ無料制作サービス」が付いているため、
申し込むだけで2日でホームページが完成します！
Xserverビジネスだと「.com」以外にも「.co.jp」や「jp」などのドメインも無料になります。
当メディア「初心者のための会社ホームページ作り方講座」では、初心者の方にわかりやすく会社のホームページを始められる方法を紹介しています！
これから始める方はこちらのホームページの作り方をぜひご覧ください！
【超初心者向け】会社ホームページの作り方
ホームページの始め方・立ち上げに関する、ご質問・ご相談はツイッターDM( @kawauso_xsv )までお気軽にどうぞ！
