「Favicon Maker」を使うと画像からファビコンを作って設置までが簡単すぎる

WEBサイトを作ったときにファビコンが有るのと無いのとでは、ブラウザのタブやブックマークでの存在感が全然違います。

これは人が、文字よりもイメージの方が覚えやすいということからだと思います。「顔は思い出せるんだけど、名前が…」みたいなものですね。

ですので、ファビコンは、ブラウザ上で言えば顔みたいなものです。

そんな、結構重要なファビコンを、画像からこれ以上無いぐらい手軽に作れるFavicon Makerというのを使ってみたらとても便利だったので紹介します。

Favicon Makerの使い方

使い方を書く必要もないくらい簡単なんですが書きます。

行うのは主に以下の2手順。

正方形の画像を用意する
Favicon Makerに画像をドロップする

これだけです。

画像を用意して以降はワンアクションで、以下のものが作成されます。

16、32、48、64pxのサイズが含まれるファビコン（マルチアイコンファイル）
16、32、48、57、64、72、114、120、144、152、256pxサイズのiPhone/iPad用のアイコン
WEBサイトで使用するためのタグが書き込まれたHTMLファイル
テンプレートエンジンJadeでの記載方法が書かれた.jadeファイル（参考：Jade – Template Engine）

試しにやってみる

試しにファビコンとアップルタッチアイコンを作成してみました。

正方形の画像を用意する

画像は、フリー素材屋Hoshinoのこの猫の画像を借りて適当に正方形に切り取りました。

適当に切り取ったので、472×439pxと正確な正方形にはなりませんでしたが気にしない。

画像をFavicon Makerにドロップする

この作った画像をFavicon Makerにドロップします。つまんで、画面上のどこにでもいいので落とすだけ。

すると、いろいろな画像が詰め合わせされたzipファイルが作成され、ダウンロードが開始します。Chromeとかだと勝手にダウンロードされます。

あとは、ファイルを解凍して画像を使用すればOKです。簡単すぎる。

作成された圧縮ファイルの中身

ダウンロードされたzipファイルの中身は、こんな感じです。

ファビコン用のマルチアイコン

16、32、48、64pxのサイズに対応したファビコンが作成されます。

用意した画像は、正確な正方形ではなかったですけど、しっかりと正方形にしてくれます。

11種類のアップルタッチアイコン

16、32、48、57、64、72、114、120、144、152、256pxサイズのiPhone/iPad用のアップルタッチアイコンが作成されます。

自分で、いろいろなサイズの画像を作成しなくていいので、とても楽です。

HTMLファイル

作成されたHTML（favicon.html）の中身はこんな感じ。

<link rel="icon" sizes="16x16 32x32 48x48 64x64" href="favicon.ico"/>
<!--[if IE]>
<link rel="shortcut icon" href="favicon.ico"/>
<![endif]-->
<!-- Optional: Android & iPhone-->
<link rel="apple-touch-icon-precomposed" href="favicon-152.png"/>
<!-- Optional: IE10 Tile.-->
<meta name="msapplication-TileColor" content="#FFFFFF"/>
<meta name="msapplication-TileImage" content="favicon-144.png"/>
<!-- Optional: ipads, androids, iphones, ...-->
<link rel="apple-touch-icon-precomposed" sizes="152x152" href="favicon-152.png"/>
<link rel="apple-touch-icon-precomposed" sizes="144x144" href="favicon-144.png"/>
<link rel="apple-touch-icon-precomposed" sizes="120x120" href="favicon-120.png"/>
<link rel="apple-touch-icon-precomposed" sizes="114x114" href="favicon-114.png"/>
<link rel="apple-touch-icon-precomposed" sizes="72x72" href="favicon-72.png"/>
<link rel="apple-touch-icon-precomposed" href="favicon-57.png"/>

サイトに使用時は、このタグをそのまま使えます。

Jadeファイル

Jadeファイル（favicon.jade）の中身はこんな感じ。

link(rel='icon', sizes='16x16 32x32 48x48 64x64', href='favicon.ico')
//if IE
  link(rel='shortcut icon', href='favicon.ico')
// Optional: Android & iPhone
link(rel='apple-touch-icon-precomposed', href='favicon-152.png')
// Optional: IE10 Tile.
meta(name='msapplication-TileColor', content='#FFFFFF')
meta(name='msapplication-TileImage', content='favicon-144.png')
// Optional: ipads, androids, iphones, ...
link(rel='apple-touch-icon-precomposed', sizes='152x152', href='favicon-152.png')
link(rel='apple-touch-icon-precomposed', sizes='144x144', href='favicon-144.png')
link(rel='apple-touch-icon-precomposed', sizes='120x120', href='favicon-120.png')
link(rel='apple-touch-icon-precomposed', sizes='114x114', href='favicon-114.png')
link(rel='apple-touch-icon-precomposed', sizes='72x72', href='favicon-72.png')
link(rel='apple-touch-icon-precomposed', href='favicon-57.png')

Jadeは、HTMLを書くための軽量マークアップ言語です。JavaScriptで書くHamlみたいなものかなと思います。

詳しくは以下を参照してください。