【追記あり】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を作成
Fireworksで64px四方の透過PNGを作成します

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

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

iconifier.netスクリーンショット
サイトのデザインはイマイチですが(笑)

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

iconifier.net スクリーンショット2
様々なサイズのTouch Iconとfavicon.icoが

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

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

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

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

icoファイルをプレビュー
バッチリ複数サイズのicoファイルになってます

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

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

iconifier.net スクリーンショット3
画面下部には各種アイコンのheadセクションへの記述例も

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

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

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

深沢 幸治郎

このブログ主の夫のほう。大阪を中心に活動するウェブデザイナー。水交デザインオフィス代表。JUSO Coworking運営。趣味でハウス・ディスコDJ / デレマスP。共著書『世界一わかりやすいWordPress 導入とサイト制作の教科書』発売中です。

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

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

コメントを残す

このサイトはスパムを低減するために Akismet を使っています。コメントデータの処理方法の詳細はこちらをご覧ください