ゴーリストブログ

ゴーリスト人事部のブログです。会社の雰囲気・社風や制度など、ゴーリストの情報を発信していきます。

各サイズに対応したfavicon.ico(ファビコン)の作り方

f:id:goalist:20140609190111p:plain

こんにちは!

ゴーリストメディアチームです。

 

今回は、簡単そうで意外と最新情報が少ないfaviconの作り方について、注意点などまとめてみました。

どのサイズで作るかや、制作に使用するツールなど、これまで培った我ながらの制作の方法になりますが、ぜひ参考にしてみてください!

 

そもそも、faviconとは?

favicon=Favarite iconの略で、ブラウザのアドレスバーやタブに表示される小さいアイコンのことです。

 

フォーマットについて

IEICO形式しか認識しないらしい

・16pxを含め、もっと大きいサイズの画像も欲しい

と言う理由から、ICO形式にしています。

 

サイズについて

ICOに含める画像サイズについては、以下のサイトを参考にしました。

 

(参考)Create a favicon for your site in 8 steps

http://www.creativebloq.com/illustrator/create-perfect-favicon-12112760

(参考)[ iOS7~]apple-touch-icon(Webクリップアイコン)のサイズ

http://aoicotori.hatenablog.com/entry/apple-touch-icon

 

ただ、一部のサイズについて実際に使用されているサイズと違うようだったので、分かる範囲で調べてみました。

以下、各サイズ(16px、24px、32px、57px、72px、96px、114px、128px、195px、256px)

の画像を含んだICO形式ファイルをfaviconに指定して、表示された結果です。

 

16px:IEではこちらで表示されました。(IEwindows

32px:現在では多くのブラウザで32pxが使わているようです。

chromefirefoxsafari/mac(osX 10.9.3) chrome/iphone5(ios7) chromefirefox/windows8

96px:トップページのブックマーク(safari/ipad第二世代)

128px:トップページのブックマーク(safari/iphone5 ios7)

256px:ホーム画面アイコン(iphone5(ios7)、ipad第二世代(ios7)

 

どうやら、タブに表示される、所謂faviconについては、32pxが主流になっている模様。

Retina対応で16pxの倍になったということでしょうか。

apple製品もRetinaに対応してか、ホーム画面のアイコンは256pxが使われているようです。

※弊社の環境でテストした結果ですので、全ての環境で同じ結果になるかは保証しません。

あくまで、参考としてご確認ください。2014年6月6日現在

 

制作方法

png画像等をICO形式に変換するwebツールも多数あるかと思いますが、

含める画像サイズが限定されているものしか見つからなかったため、弊社ではillustratorGIMPを使用しています。

関係無いですが、GIMP結構好きです。

「色を透明度に」とか、このICO形式への出力とか、photoshopにはないところをカバーするのが心憎いです。

 

1.illustrator

アートボードサイズ32px(chrome等の主要ブラウザで使われているため)で、表示をピクセルプレビューで作成。

web用に保存>PNG-24、で対応が必要な各サイズに保存。

 

2.GIMP

 一番大きいサイズの画像を開いて、それ以外のサイズも「レイヤーとして開く」で追加していく。(レイヤーパネルにドラッグ&ドロップでOK)

 ファイル>Export asで、名前の欄に「ファイル名.ico」とファイル形式をicoにしてしまう。

 ※ファイル形式の選択にはicoが出てこないので、名前を無理やり変更する感じで。

 「画像をエクスポート:Windowsアイコン」ダイアログが出るので、各サイズの詳細(bpp、bit、色、圧縮)を決める。

 エクスポート。

 

以上でfaviconファイルの完成です。

 

3.指定方法

Favicon

指定方法には以下2通りあるらしいです。両方指定するのが望ましいそうです。

<link rel="shortcut icon" href="/favicon.ico" />

<link rel="icon" type="image/vnd.microsoft.icon" href="favicon.ico”>

 

apple-touch-icon

<link rel="apple-touch-icon" href="favicon.ico”>

 

以上で、faviconの設定まで完了です。

実際に作成・設定する人以外には、かなり、どうでもいい記事ですね。。

ただ、弊社で作成する際に情報が少なくてハマったので、誰かのお役に立てれば幸いです。

以上、Goalistメディアチームよりお届けしました!

 

(参考)もう何も恐くない…綺麗なfavicon作成の基本的なコツ・アイデアまとめ

http://liginc.co.jp/web/design/material/16853

(参考)Favicon - Wikipedia

http://ja.wikipedia.org/wiki/Favicon