【追記あり】Macでファビコンつくるなら。透過にも複数サイズにも対応したアイコン作成ウェブサービス「iconifier.net」

Macで簡単に、透過が美しい複数サイズの画像を含むファビコン用のicoファイルをつくりたい！

Macでファビコン（Favicon。ブラウザで表示されるときによくタイトル横に表示されるアイコンのことですね）に利用するicoファイルを作成したいとき、あなたはどんなツールを使ってますでしょうか。

よく紹介されているのが、Macの「プレビュー」を用いて、「Windowsアイコン」として書き出す方法。
MacでFaviconを作る方法 – しかたこうきブログ

しかし、このやり方では単一サイズのicoファイルしか書きだすことができません。icoファイルの利点はひとつのicoファイルの中に複数のサイズの画像を格納できる点です。Retinaディスプレイなど、ppiが異なるディスプレイ環境でもファビコンを美しく表示したいと思えば、よくある16px四方のファビコンでなく32px、できれば将来のために64px四方くらいのサイズを収めたicoファイルを作りたいです。

で、Twitterで聞いてみたら

続きを見る

Macのみんなはfavicon用のicoファイルをどうやって作ってるんでしょうか。

— Fukazawa Kojiro (@witch_doktor) 2014, 9月 4

上記のブログを書かれたしかたこうきさん（私が運営しているコワーキングスペースの住人さんなので10m後方にいつもいるんですけど）からこんなリプライ。

続きを見る

@witch_doktor こういうのですか？ http://t.co/u4ZIdhBmIx

— Kohki SHIKATA (@kohki) 2014, 9月 4

Free Online Favicon and Apple Icons Generator – iconifier.net

試してみたら…きましたキマシタ来ましたよ、ウェブサービスでこういうのはいくつか探したんですが、透過したフチがガビるとかそもそも透過できないとか、たくさんのサイズのPNGファイルを予め用意しなくちゃいけないとか面倒なものばかりだったのですが、これは期待通りの動きでした。

試してみよう、iconifier.netでファビコン作成（Apple Touch Iconもね）

まずは透過PNGを作りましょう。私はAdobe Fireworksでやってます。
サイズは64px四方で。

これを透過PNGで書き出し適当なファイル名をつけました。「favicon.png」あたりでよろしいかと。

つづいて、iconifier.netにアクセス。

先ほど作った透過PNGファイルを選択し「iconify」ボタンを押しますと…

様々なサイズのApple Touch Iconとfavicon.ico、そしてそれらのファイルの詰め合わせzipファイルが生成されます。背景は薄いブラウンなので、きっちり透過されているのも確認できると思います。

最後はこのうちfavicon.icoをクリックするとファイルのURLに移動するので、そのままダウンロードすればOK！

これをプレビューで開いてみると…

はい。複数の画像を内包した、しかも透過もバッチリなicoファイルが出来上がりました。

同様にApple Touch Iconもダウンロードが可能です。どうサイトに反映させるかもご心配なく。ちゃんと画面下部にheadセクションへの記述例まで！

ということでiconifier.net、私の中ではico作成の決定版になりそうな感じです。
教えてくれたしかたさん、どうもありがとうございました。

追記（2014年9月5日 0:50）

谷拓樹さんから、こんなアイコン作成ウェブサービスもあるよとオススメを教えていただきました。
Favicon Generator – Generate favicon pictures and HTML
こちらはAndroidのホーム画面やWindows8のタイル表示、Windowsのタスクバー表示にも対応するアイコンが書き出せる模様です。