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

サイバーマンデー
Amazonプライム会員限定の大セール「サイバーマンデー」開催中!プライム会員限定の大セール

猫のアイコン

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

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

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

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

スポンサーリンク
レクタングル(大)広告

Favicon Makerの使い方

Favicon Maker

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

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

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

これだけです。

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

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

試しにやってみる

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

正方形の画像を用意する

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

猫の画像

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

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

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

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

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

ダウンロードファイルの作成

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

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

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

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

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

4種類の画像が入ったマルチアイコン

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

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

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

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

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

HTMLファイル

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

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

Jadeファイル

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

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

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

HTMLタグでサイトを作っている場合は、特に必要ないと思います。

まとめ

Favicon Makerは、たった1回の画像ドロップで、これだけのものが作成できます。

さすがに画像は用意する必要がありますが、画像さえ用意できてしまえば、あとはFavicon Makerに任せれば、いろいろの作成時間を短縮できて良いのではないでしょうか。