favicon（ファビコン）とは
favicon（ファビコン）とは、Webサイトを訪れた時にタブブラウザのタブ部分に表示されるアイコンのことです。
また、お気に入りに登録した時もサイト名の横に表示されたり、パソコンのデスクトップにWebサイトのショートカットを作成したときに表示されたり、IEではアドレスバーの先頭にも表示されています。
favicon（ファビコン） の由来は『 favorite icon（ お気に入りアイコン ）』を短くした造語と言われています。
apple-touch-icon （アップルタッチアイコン）とは
apple-touch-icon （アップルタッチアイコン）は iPhone等のスマホのホーム画面に追加したときのアイコンとして使用されます。
最近はスマホでホームページを閲覧するユーザーが７割とも言われていますので、favicon（ファビコン） を作成するついでなので、同時に設定しておいた方がいいと思います。
favicon（ファビコン）の作成方法
favicon（ファビコン） 用の画像を作成するのですが、企業であればそのサイトのロゴマークや、ロゴタイプの一部を加工して使用することが多いです。
ブログの場合はサイトの内容をイメージできる画像が好ましいかと思います。
設定する画像を用意する
実際の作成方法ですが、私はAdobeのIllustratorで作成しています。
小さいサイズで作成してしまうと、大きい favicon（ファビコン）に変換するときにぼやけてしまうので、700px*700pxで作成しています。
作成した画像をpngで書き出します。
.icoファイルに変換する
favicon（ファビコン） 用の画像は「.ico」という拡張子で作成します。
複数のサイズを作成しないといけませんので、私は以下のジェネレーターを利用させていただいております。
→様々なファビコンを一括生成。favicon generator
作成方法は簡単！「画像ファイルを選択」して「ファビコン一括生成」をクリックするだけです。
生成が終わると画像の下に「ファビコンダウンロード」ボタンが表示されますので、ダウンロードして解凍してください。
大量のアイコンが入っていますが、私は以下の２ファイルのみ使用しています。
- favicon.ico
- apple-touch-icon-180×180.png
favicon.icoファイルは画像4個のマルチアイコンとなっており、16px・24px・32px・48px に対応しています。
apple-touch-icon-180×180.png ファイルが apple-touch-icon （アップルタッチアイコン）用のアイコンとなります。
favicon（ファビコン）の設定方法
作成したファイルをWebサイトのルートにアップロードして、HTMLファイルに以下のコードを記載します。
<link rel="icon" type="image/x-icon" href="/favicon.ico">
<link rel="apple-touch-icon" sizes="180x180" href="/apple-touch-icon-180x180.png"> 画像をルートではなく「image」フォルダなど、他の場所に設置する場合は「href=”/image/favicon.ico”」等、適宜変更してください。
設定が完了すると以下のように表示されます。
