Suikolog

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

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

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

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

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

で、Twitterで聞いてみたら

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

Free Online Favicon and Apple Icons Generator – iconifier.net

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

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

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

Fireworksで64px四方の透過PNGを作成します

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

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

サイトのデザインはイマイチですが(笑)

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

様々なサイズのTouch Iconとfavicon.icoが

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

なお、icoファイルとしての書き出しサイズのバリエーションは変換前に歯車アイコンからのオプションで設定可能

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

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

バッチリ複数サイズのicoファイルになってます

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

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

画面下部には各種アイコンのheadセクションへの記述例も

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

追記(2014年9月5日 0:50)

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

モバイルバージョンを終了