ウェブサイトを作ったら必ずやっておきたのが、ファビコンの作成。
そして、スマートフォンでホームに保存する際に使われるapple-touch-icon。

解像度に合わせて複数のサイズの画像をアップするのがベストだが、Photoshopで作るにしても手間がかかることは確か。
そんな時は、画像をアップすると自動的にファビコンやapple-touch-iconを生成してくれるFavicon Generatorのサービスを利用するといい。

Googleで検索すると様々なサービスが存在するが、お薦めはこのサイト。

Multi Favicon Generator
http://favicon.miugle.info/ Multi Favicon Generatorなら、1枚のアイコン画像からfaviconはもちろんiPhone&Android向けの各種apple-touch-iconも一気に生成してくれる。

使い方も簡単。
512ピクセル×512ピクセルの画像を用意したら、サイトにアクセスしてアップ。
各種画像データが含まれる圧縮ファイルのが作成されるので、自分のPCにダウンロード。
圧縮ファイルを解凍すると以下のファイルがある。

apple-touch-icon-57×57.png
touch-icon-iphone-retina.png
apple-touch-icon-72×72.png
apple-touch-icon-114×114.png
apple-touch-icon-144×144.png
favicon_sample.txt
favicon.ico
touch-icon-ipad-retina.png
touch-icon-ipad.png

favicon_sample.txt以外のファイルをサイトのルート（index.htmlやindex.phpがある階層）にアップ。
faviconやapple-touch-iconの設定は、inex.html等をエディタで開きfavicon_sample.txtの中身を追加。

具体的には、スタイルシートを呼び出している場所

<link rel="stylesheet" href="style.css" />

やtitleタグの場所

<title>○○のホームページ</title>

の前後に

<link rel="apple-touch-icon" sizes="152x152" href="/touch-icon-ipad-retina.png">
<link rel="apple-touch-icon-precomposed" sizes="152x152" href="/touch-icon-ipad-retina.png">
<link rel="apple-touch-icon" sizes="144x144" href="/apple-touch-icon-144x144.png">
<link rel="apple-touch-icon-precomposed" sizes="144x144" href="/apple-touch-icon-144x144.png">
<link rel="apple-touch-icon" sizes="120x120" href="/touch-icon-iphone-retina.png">
<link rel="apple-touch-icon-precomposed" sizes="120x120" href="/touch-icon-iphone-retina.png">
<link rel="apple-touch-icon" sizes="114x114" href="/apple-touch-icon-114x114.png">
<link rel="apple-touch-icon-precomposed" sizes="114x114" href="/apple-touch-icon-114x114.png">
<link rel="apple-touch-icon" sizes="76x76" href="/touch-icon-ipad.png">
<link rel="apple-touch-icon-precomposed" sizes="76x76" href="/touch-icon-ipad.png">
<link rel="apple-touch-icon" sizes="72x72" href="/apple-touch-icon-72x72.png">
<link rel="apple-touch-icon-precomposed" sizes="72x72" href="/apple-touch-icon-72x72.png">
<link rel="apple-touch-icon" sizes="57x57" href="/apple-touch-icon-57x57.png">
<link rel="apple-touch-icon-precomposed" sizes="57x57" href="/apple-touch-icon-57x57.png">
<link rel="shortcut icon" type="image/x-icon" href="/favicon.ico" />
<link rel="shortcut" href="/favicon.ico" type="image/x-icon">

を追加する。