YouTubeやってます!
Categoriesまとめ

faviconやらウェブクリップアイコンを作るためのあれやこれや

Date 2012/06/21 19:57  Modified date 2016/05/10 Author Yutaka  Tags Android Apple iPhone software スマホ 情報処理

 なきゃないでこれといった問題はないものの、あったらあったで(サイトの管理者的に)ちょっと嬉しいfavicon(ファビコン)。そんなにしょっちゅういじるわけではない上に、ICOという普段あまり使わないファイル形式であるため、すぐに作り方を忘れてしまうfavicon。
 そんなfaviconにまつわるエトセトラを、次回自分がfaviconを作成するときのためにメモしておきたいと思います。ついでにウェブクリップも。

 faviconとは、ブラウザでウェブサイトを表示したときやブックマーク(お気に入り)の一覧で表示される16×16ピクセルの小さなアイコンのことです。「favorite icon」、略して「favicon」。
 もともとはIE(インターネットエクスプローラ)の独自の機能だったのですが、いつの間にか、ほとんどのブラウザがfaviconを表示するようになっていました。

 IE独自ということはWindows独自だったりする訳で、faviconのファイル形式は「ICO」というWindowsのアイコンと同じファイル形式を使用しています。
 最近ではPNGやJPGやGIFなどのfaviconに対応しているブラウザも多いようです。でも、IEはico形式でないと表示されないらしいので、faviconはICO形式で作るのが良さそう。

IEだとショートカットがfaviconに

 また、ICO形式で作っておくと、IEでブックマークのショートカットを作ったときにfaviconが表示されます。
 ICOはひとつのファイルに複数サイズの画像を格納出来る(これを「マルチアイコン」というらしい)ので、16×16ピクセルの他に、32×32ピクセル、48×48ピクセルの画像を設定しておけば、IEでショートカットを作成したときもちゃんとアイコンが表示されます(7では256×256ピクセルまであるらしい)。
 16×16ピクセルの画像しか設定していない場合は、画像を無理矢理引き延ばして表示するので、アイコンがもやっとします。

favicon
URLの左やタブに表示されている小さな画像がfavicon。IEの場合、faviconをデスクトップにドラッグ&ドロップするとfaviconがそのままアイコンになったショートカットが作成されます。ゴミ箱の下にあるアイコンがそれ。icoroでは16×16の画像しか設定していないので、ショートカットがもやっとしたアイコンになっています。

 ただ、これはあくまでIEでショートカットを作った場合の動作であり、Macだったり、同じWindowsでもFirefoxやChromeなどの他のブラウザでブックマークのショートカットを作ってもfaviconは表示されないみたいです。
 IEを使っていない人は、基本、16×16ピクセルのfaviconしか目にしないわけです。

ってことで

 まー、IEだけのために各サイズの画像を作成するってのもあれなので、とりあえず、すべてのブラウザが対応している16×16ピクセルのICOファイルだけ用意しておけば無問題じゃないかと思います。
 256×256ピクセルのICOファイルを用意しておいて、ブラウザがリサイズしてくれるのに任せる、というのもアリです。この方法ならば、faviconも表示されますし、IEでショートカットを作った場合もアイコンがもやっとする事はないと思います。

icoのfaviconが作れるソフトやサービス

 faviconなんてそんなに頻繁に作り替えるものではないので、いざfaviconを作る段階になって、「前にfavicon作ったときはどうしたっけか……?」となりがち。
 というわけで、ico形式のfaviconが作れるソフトやサービスをまとめてみました。

 自分の場合は、Fireworksで16×16ピクセルのPNG画像を作って、それをPhotoshopを使ってico形式に出力します。Photshopには後述のicoが出力出来るプラグインを入れてあります。
 最初からPhotoshopで良いような気もしますが、FireworksかわいいよFireworks(*´д`*)ハァハァ

icoのfaviconが作れるウェブサービス

icoのfaviconが作れるソフト

 つづいてウェブクリップアイコンのエトセトラ。

 1 2 »
Back to Top