ファビコンとは? 初心者でもできるファビコンの作り方

近年ではWebサイトを閲覧する環境の多様化により、ファビコンの準備も煩雑になってきました。この記事では、ファビコンの簡単な作成・設置方法を解説しています。

ファビコンとは?

ファビコンとは、Webサイトを表示したときに、ブラウザのアドレスバーの横やタブの横に表示されるアイコンのことです。

2016-07-14_16h30_49

上記以外にも、サイトをブックマークに登録すると、一覧でサイト名の横にも表示されます。この時、ファビコンを設置してあるサイトとそうでないサイトでは、ファビコンがよく目立って見つけやすくなるので再度アクセスしやすくなるのではないでしょうか。

また、昔はブラウザ上・デスクトップ上で表示するだけでしたが、最近ではスマートフォンのホーム画面などのショートカットとしても表示するようになっています。

(※正確にいうとこのアイコンはウェブクリップアイコンと呼ばれます)このように様々なところでファビコンを表示することができますが、その分ユーザの目につきやすいものとなります。

ファビコンを設置していないサイトと、設置しているサイトではイメージが変わってきます。少しの手間でサイトのイメージ向上に効果的なファビコンは設置すべきだと言えます。

次章では作成方法を紹介していきます。

ファビコンの作り方と便利サイト

ファビコンのファイル形式

ファビコンはico・png・gif形式に対応していますが、主にIE用としてico形式と、その他のブラウザ用としてpng形式のファビコンを作成していきます。

ファビコンのサイズ

ファビコンは使用する環境に応じて、サイズの指定があります。ファビコンとしての一番基本的なサイズは16×16ですが、このサイズはIEでの表示サイズであり、Google chromeやfirefox、safariなどの主要ブラウザでは32×32となっています。

ファビコンをブラウザ上で表示するだけの想定では、上記の2サイズだけを準備すればよいのですが、デスクトップのショートカットアイコン等も考慮すると、48×48と64×64も準備する必要が出てきます。

また、タブレットやスマートフォンでの対応も考えると、さらにたくさんのアイコンを準備する必要が出てきます。

そんなにたくさん準備するのは億劫だと思われる方もいらっしゃると思いますが、一つのpng画像を準備するだけで、必要なファビコンの画像とタグを準備してくれる、Webサービスがあるので、そちらを利用して作成してみましょう。

favicon generatorを利用したファビコンの作成方法

2016-07-14_19h28_25

様々なファビコンを一括生成。favicon generatorというサイトを利用して、簡単に様々な環境に対応したファビコンを作成します。

まず、ファビコンにしたい画像をpng形式で260×260以上のサイズで準備します。この時、背景の透過処理もきちんとやっておくと見栄えの良いファビコンになります。

次にサイトに画像をアップロードして、ファビコン一括生成をクリックします。

2016-07-14_19h21_44

最後に、ファビコンダウンロードボタンをクリックすると必要なファイルを一括でダウンロードすることができます。

2016-07-14_19h24_51

これで、ファビコンを作成することができました。設置方法は次章で解説していきます。

ファビコンの設定方法

前章でダウンロードしたフォルダの中身を、全てサイトのルートディレクトリに格納し、htmlファイルのheadタグ内に、favicon generatorの指定のタグ(下記)を記述します。

<link rel="shortcut icon" href="/favicon.ico" type="image/vnd.microsoft.icon">
<link rel="icon" href="/favicon.ico" type="image/vnd.microsoft.icon">
<link rel="apple-touch-icon" sizes="57x57" href="/apple-touch-icon-57x57.png">
<link rel="apple-touch-icon" sizes="60x60" href="/apple-touch-icon-60x60.png">
<link rel="apple-touch-icon" sizes="72x72" href="/apple-touch-icon-72x72.png">
<link rel="apple-touch-icon" sizes="76x76" href="/apple-touch-icon-76x76.png">
<link rel="apple-touch-icon" sizes="114x114" href="/apple-touch-icon-114x114.png">
<link rel="apple-touch-icon" sizes="120x120" href="/apple-touch-icon-120x120.png">
<link rel="apple-touch-icon" sizes="144x144" href="/apple-touch-icon-144x144.png">
<link rel="apple-touch-icon" sizes="152x152" href="/apple-touch-icon-152x152.png">
<link rel="apple-touch-icon" sizes="180x180" href="/apple-touch-icon-180x180.png">
<link rel="icon" type="image/png" href="/android-chrome-192x192.png" sizes="192x192">
<link rel="icon" type="image/png" href="/favicon-48x48.png" sizes="48x48">
<link rel="icon" type="image/png" href="/favicon-96x96.png" sizes="96x96">
<link rel="icon" type="image/png" href="/favicon-16x16.png" sizes="16x16">
<link rel="icon" type="image/png" href="/favicon-32x32.png" sizes="32x32">
<link rel="manifest" href="/manifest.json">
<meta name="msapplication-TileColor" content="#2d88ef">
<meta name="msapplication-TileImage" content="/mstile-144x144.png">

後はファイルをサーバーにアップロードして、ファビコンの設置は完了です。

ファビコンが表示されない時の対処法

何度かページを更新してみても、ファビコンが反映されない場合は下記の方法を試してみてください。

キャッシュを削除する

ブラウザでファビコンがない状態のサイトのキャッシュや閲覧履歴が残っている場合、ファビコンが反映されないことがあります。一度キャッシュと閲覧履歴を削除してから、再度サイトにアクセスしてみましょう。

まとめ

今回は、Webサイトを表示したときに、ブラウザのアドレスバーの横やタブの横に表示されるアイコンであるファビコンについて紹介をしました。

環境によってそれぞれ対応する形式で作らなければなりませんが、一括してファイル形式やサイズが様々なファビコンを作成するツールもありますので、ぜひご活用ください。