先日Webサイトを作っていたときに「画像で無くて写真からfaviconを作りたいなー」と思いました。以前はフリーソフトで作っていたのですが、大きなサイズは対応していないためさて、どうしようかとWebサービスを探しました。見つけたサービスはとても簡単で分かりやすかったので、それについて書きます。

画像から各種Faviconを作ってくれる　Favicon Maker

見つけたサイトはこちらです。

Favicon Maker

UPLOAD IMAGE　と書いてある所にfaviconにしたい画像をドロップします。

あっという間に終わってしまうので動画で撮ってみました↓

ドロップしてすぐにzipファイルがダウンロードできます。zipファイルを開くと

各種faviconとそれの表示確認をするためのHTMLとjadeファイルが入っています。

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"/>

こんな感じにコードが書いてあって、どのファイルがなにで使われるのか分かるようになっています。これを参考にHTML部分をコーディングすればiPhoneやiPad、Androidで使われるWebクリップ用のアイコンも指定できるようです！

簡単な上に、親切丁寧ですね！

faviconを作るときはこのWebサービスを使っていきたいと思います♪

おまけ:faviconの元画像について

あっという間に説明が終わってしまいましたので(^_^;、faviconの元画像についてちょっと書きます。

今回使ったウサギの画像はパソコン画面に立てかけて撮ったもので、そのままfaviconを作ったときは

こんな感じで、ブラウザで見ると

こんな感じでした。背景が模様になっているとfaviconになったときにあまりはっきりしない感じです。なのでfaviconにする元画像は背景を１色にして、画像とコントラストが付く色にしておくと良い感じだと思います。

*参考までにこのウサギはiPhoneケースです(^_^;

ウサギが白い場合は、背景をピンクにして、

こんな感じにするとか

人の写真だと

こんな感じになります。人はなかなか難しいですが見たことのある写真なら、あの人のサイトというのがおぼえやすくなるかも？しれません(^_^;

おまけ:jadeってなに？

HTMLと一緒に入っている　favicon.jade　というファイルがありました。

ちょっと興味があったのでググってみました。

Jade について。

ざっと見たところですが　HTMLを開始、終了タグを使わずに省力化して書ける　記法、プラスα　なものみたいです。

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')

こういう感じになっていて、これは先ほどの　favicon.html　と同じ内容を示しているということです。

見比べてみると確かにこの書き方の方が、Shiftキーを押す手間も減って、こっちのが書きやすそうです。要素をカンマでつないで追加して行く方法も分かりやすい。

今後このjade記法が色々なところで使えるようになるかもしれないので、知識としてこういうものなのかーと分かっておくと何かとよいかもしれません。

というホントにおまけ情報でした(^^)/