【簡単】ホームページにアイコンを設定！ひときわ目立った存在に！

こんにちは！当コラム担当の高原です！
専業アフィリエイター歴8年で、WEBメディア運営会社を経営しています。

Twitter（@Koshiro_Taka）でも役立つ情報をつぶやきますので、よかったらぜひフォローしてくださいね^^

ネットサーフィンをしていると、ブラウザのタブの左側やブックマーク一覧、閲覧履歴などに色々なアイコンが表示される場合があります。

例えば、Windows用のChromeの場合は下の画像のような表示。

アイコンがあれば、そのホームページ独自のシンボルという感じがして凄く印象的です。

さらに、一覧の中から目的のホームページを探し出すのもアイコンがあることで非常に容易に。また、ブランディングという点でも大きなメリットがあるのは間違いありません。

しかし、あなたが作ったホームページを開いてもブラウザのタブやブックマーク一覧にはアイコンが出てこないかもしれません。

では、どうすればブラウザ上にホームページのアイコンを表示することができるのでしょうか。

実は、ホームページのアイコンと言っても、いくつかの種類があってよくわかりません。

ですから、今回はホームページ用アイコンの具体的な作り方や設定方法について見ていきましょう。

ホームページアイコンの正体！ファビコン？

まず、アイコンというのはどのようなものかを再認識してみましょう。

アイコンとは「像」「偶像」などの意味であり、そのものを簡易的に表す画像と考えればよいでしょう。

ですから、ホームページ用のアイコンということを考えてみると以下のような特徴があります。

シンプルな画像である
ユーザーの目を引く物である
ホームページの雰囲気を表している

そして、ホームページ用のアイコンは訪問者の識別には非常に役立つものであるといえます。

このホームページのアイコンのことを「ファビコン」と言い、基本的には次の3種類。

favion.ico
拡張子が「ico」で古くから利用されている形式
apple-touch-icon.png
iPhoneやiPadなどのiOSで利用されているアイコン
favicon.png
favicon.icoのpng版（Android用）

これらのアイコンは画像ファイルですが、単なる画像ファイルではありません。

ホームページ用のアイコンとして使用する場合、専用のソフトで作成するか一般的な画像ファイルをアイコン用として変換する必要があります。

ホームページ用アイコンは使用される場所によってサイズが違います。

ですから、それぞれに対応するなら次の４種類の画像を準備することをお勧めします。

16px×16px
24px×24px
32px×32px
48px×48px

「png」の画像は1種類の画像のみとなりますが、「ico」という拡張子のファイルにはいくつもの画像ファイルを含めることができるので、上記のサイズの画像を一つのファイルとして認識するようなイメージになります。

要点まとめ

ファビコンは「favion.ico」「apple-touch-icon.png」「favicon.png」の3種類。
ホームページ用アイコンは使用される場所によってサイズが違う。

では、どのようにしてホームページ用のアイコンを作るのでしょうか。

ホームぺージ用アイコンを作る無料ツール3選

実は、ホームページ用アイコンはWindowsの標準ソフトの「ペイント」でも作ることができます。しかし、実際に作ろうと思っても意外と難しくて挫折する可能性が高いでしょう。

もちろん、ペイントで頑張って作ることは可能ですが、アイコン作成に特化したツールの方が使い易いのでおすすめ。

しかし、ただアイコンを作るだけの為にツールをインストールしたり購入したりというのもできれば避けたいところ。

そこでおすすめはネット上で作れる無料ツールです。

ホームページ用アイコンを作る無料ツールはネットで検索すれば沢山出てくるのですが、その中でも使い易いツールを3つに厳選して紹介しましょう。紹介するのは次の3つ。

favicon.cc
Favicon generator
favikon

では、もう少し詳しく見ていきましょう。

ホームページアイコンを一から作るなら「favicon.cc」

favicon.ccは上の画像を見てすぐに想像できるように、ドットで画像を描いていくとってもシンプルなものです。

とても単純なツールに思えますが、favicon.ccには凄く便利な機能がありました。それは、プレビュー機能。

自分でアイコン画像を作りながら、プレビューでどんな感じに見えるのか確認できるのです。

実際にアイコン画像を作って、設置して確認することを考えるとかなりの工数削減ができるので、とてもおすすめのツールです。

まとめ

favicon.cc
ドットで画像を描いていく無料ツール。
プレビュー機能があり便利で工数削減もできる。

手元の画像をアイコンに変換するなら「Favicon generator」

Favicon generatorは既にあなたが持っている画像をホームページアイコン用に変換してくれるオンラインツールです。

使い方はとっても簡単。下の画像の赤枠部分をクリックしてあなたの使用したい画像ファイルを選択します。

画像ファイルが選択できたら、あとはファイル形式を選択して右側にある【Create Favicon】ボタンを押せば変換完了。

ファイル変換後にはダウンロードボタンが表示されるので、あなたのパソコン内に保存してください。

ファイル形式に関しては2種類が選べますが、「 for Web, Android, Microsoft, and iOS (iPhone and iPad) Apps」を選択すると27種類のサイズ違いファイルを作ってくれます。

逆に、16×16の「favicon.ico」が一つあれば良い場合には、「Generate only 16×16 favicon.ico」を選択してください。

まとめ

Favicon generator
手持ちの画像をホームページアイコン用に変換する無料ツール。
最大27種類のサイズ違いファイルが作成可能なので色々なサイズの画像が欲しい場合にはこちら。

簡単操作でホームページアイコンを作成するならfavikon

favikonも「favicon.cc」と同様に、既にある画像をホームページアイコン用に変換するツールです。「favicon.cc」と違う点は次の3点。

日本語表記で非常にわかりやすくシンプル
画像を切り取ることが可能
「favicon.ico」か「favicon.png」を生成する

「favicon.cc」のように多くのサイズの画像を一度に排出することはできません。

ですから、色々なサイズの画像が欲しい場合には「favicon.cc」を利用してください。

アイコン画像を作る手順は次の通り。

「Upload image」をクリックして画像ファイルを選択
画像の範囲を選択
「Download ICO」または「Download PNG」をクリック

あっという間に完成です。

まとめ

favikon
日本語表記でわかりやすい。
画像を切り取ることが可能。「favicon.ico」か「favicon.png」が生成できる。

ところで、ホームページのアイコンに丁度良い画像がない場合にはどうすればよいでしょうか。

ホームページアイコン用のフリー画像はここで探そう！

ホームページ用のアイコンを自分で作るとなると、色々と制限があるので意外と難しいものです。しかし、丁度良い画像を探そうと思ってもなかなか見付からないかもしれません。

そんな時におすすめなのが、無料で利用できる素材サイトです。アイコンに使えそうな画像を無料配布しているサイトは非常に多いのですが、その中から厳選して5つのサイトを紹介します。

是非、あなたのホームページのイメージにピッタリの画像を見付けてください。

しかし、ホームページ用のアイコンが準備できたところで、実際にアイコン画像を設置してみましょう。

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

少し前までならホームページにアイコンを設置する方法として、サイトの最上階のディレクトリに「favicon.ico」を置いておくだけで良かったのですが、現在は少し変わってきているようです。

シンプルな方法としては、「favicon.ico」と「apple-touch-icon-180×180.png」の2つのファイルをサイト内に置き、更にhtmlファイルに以下のコードを書き込む方法です。

<link rel="icon" type="image/x-icon" href="./favicon.ico">
<link rel="apple-touch-icon" sizes="180x180" href="./apple-touch-icon-180x180.png">

htmlファイルを変更しなくてはならないので少し手間が掛かりますが、確実に設定するには上記の方法で行ってください。

しかし、WordPressの場合はもう少し簡単にホームページアイコンを設定することができます。

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

WordPressにホームページアイコンを設定する場合、WordPressのテーマによっても違いますが、基本的にはダッシュボード内の設定で行うことができます。

手順は下記の通りです。

外観→カスタマイズ
サイト基本情報
サイトアイコンを設定
保存

上記の画面で「画像を選択」することによってホームページのアイコンが設定されます。

簡単なので是非設定してください。

まとめ

今回はホームページのアイコンを設定する方法について紹介しました。

ホームページを作成するときにWebブラウザのタブやお気に入りに表示されるアイコンは必須項目ではありません。

しかし、あなたのホームページを訪問する人に再訪問を望む場合にはアイコンを設定しておいた方が良いでしょう。

その場合のポイントとしては次の3点です。

シンプルな画像である
ユーザーの目を引く物である
ホームページの雰囲気を表している

できればあなたのホームページだとすぐにわかるようなアイコンを設定するのがおすすめ。

また、ホームページ用のアイコンを作るにはWindows標準ソフトのペイントなどでも可能ですが、オンラインで利用できるアイコン作成ツールを使うのがおすすめです。

おすすめのツールは以下の3種類。

また、アイコンとして使用できるフリーの画像を無料で配布しているサイトも多数あります。

おすすめは次の5つのサイト。

そして、作ったホームページアイコン用の画像をホームページに設定する場合は作成したアイコンのファイルをホームページの最上層に置き、htmlファイルに必要なコードを書き込んでください。

アイコンをホームページに設定する方法は文章で書くとかなり大変そうな印象を受けますが、実際はそれ程難しい作業ではありません。

是非、あなたのホームページに独自のアイコンを設定してみてください。