iconifier.netは、1枚の画像からファビコンやアップルタッチアイコン用の画像を、まとめて生成してくれるWEBサービスです。
アップルタッチアイコンというのは、iPhoneやiPad用のアイコン画像で、ホーム画面に追加した時に使用されます。アップルタッチアイコンを指定していないと、WEBサイトのキャプチャがアイコンとして表示されます。
ちゃんとアップルタッチアイコンを指定しておくことで、サイトのロゴなどをアイコンとして表示することができます。ただ、いざアップルタッチアイコンを設定しようと思うと、色んなサイズの画像を用意する必要があり結構面倒です。
iconifier.netを使えば、必要なサイズを一気に生成してくれるので、手間いらずで設定することができます。
iconifier.netの使い方
1. iconifier.netにアクセスします。
2. [ファイルを選択]から画像をアップロードします。
※最大サイズが152px*152pxなので、それよりも大きい画像を用意した方がいいです。
3. [Iconify]をクリックします。
![[Iconify]をクリック](https://techmemo.biz/wp-content/uploads/2014/06/iconifier2.png)
4. 画像が生成されるので、ZIPファイルをダウンロードします。
ファビコンとアップルタッチアイコンの設定
まずダウンロードしたZIPファイルを解凍し、画像をサーバーにアップロードします。
続いて、HTMLの<head>内に、以下を追加します。
<link rel="shortcut icon" href="/favicon.ico" type="image/x-icon" /> <link rel="apple-touch-icon" href="/apple-touch-icon.png" /> <link rel="apple-touch-icon" sizes="57x57" href="/apple-touch-icon-57x57.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" />
これで設定は完了です。
なお、ダウンロードしたZIPファイルを解凍すると、画像の他にiconifier-readme.txtというテキストファイルが入っています。iconifier-readme.txtでは、ファビコンとアップルタッチアイコンの設定方法が解説されています。
あとがき
ファビコンだけ作成するのであればFavicon Converterがシンプルで使いやすいと思いますが、アップルタッチアイコンまできっちり設定したいという場合はiconifier.netが楽ですね。
何も設定していない場合は、ファビコンだけでも設定しておきましょう。