web-dev-qa-db-ja.com

favicon.pngとfavicon.ico - ICOの代わりにPNGを使用するのはなぜですか？

PNGがより一般的な画像フォーマットであるという事実以外に、favicon.pngとfavicon.icoを優先する技術的な理由はありますか？

私はすべてPNGのお気に入りのアイコンをサポートする最新のブラウザをサポートしています。

pngfaviconico
415
Jon Galloway

このスレッドのさまざまな人からの多数の更新およびメモにより、回答は置き換えられました（そしてコミュニティWikiに変わりました）。

  • ICOとPNGはどちらも完全なアルファチャンネルベースの透明度を可能にします
  • ICOは古いブラウザ（例IE6）への後方互換性を考慮しています
  • PNGはおそらく透明性のためのより幅広いツーリングサポートを持っています、しかしあなたは同様にアルファチャンネルICOを作成するためのツールを見つけることができます、 ダイナミックドライブツール と @mercatorによるPhotoshopプラグイン 。

詳細については、こちらの他の回答を参照してください。

214
Amber

favicon.icoでショートカットアイコンを指定しない限り、最近のすべてのブラウザ（Chrome 4、Firefox 3.5、IE8、Opera 10、およびSafari 4でテスト済み）は常に<link>を要求します。したがって、明示的に指定しない場合は、404を避けるために常にfavicon.icoファイルを用意するのが最善です。 Yahoo！小さくしてキャッシュ可能にすることをお勧めします

また、アルファ透明度のためだけにPNGを使用する必要もありません。 ICOファイル はアルファ透明度（32ビットカラー）をサポートしていますが、作成できるツールはほとんどありません。私は、アルファ透明度を持つfavicon.icoファイルを作成するために、 Dynamic DriveのFavIcon Generator を定期的に使用しています。それができることを私が知っている唯一のオンラインツールです。

無料の Photoshopプラグイン を作成することもできます。

356
mercator

.pngファイルはいいですが、.icoファイルもアルファチャンネルの透明度を提供します、 plus それらはあなたに後方互換性を与えます。

たとえば StackOverflow がどのタイプを使用しているかを見てください（これは透明です）。

<link rel="shortcut icon" href="http://sstatic.net/so/favicon.ico"> 
<link rel="Apple-touch-icon" href="http://sstatic.net/so/Apple-touch-icon.png">

Apple-iTouchのものは、Webサイトへのショートカットを作成するiPhoneユーザーのためのものです。

44
Wouter van Nifterick

* .icoファイルの理論的な利点は、それらが複数のアイコンを保持できるよりもコンテナであるということです。たとえば、アルファチャンネル付きの画像と、従来のシステム用の16色バージョンの画像を保存したり、32×32と48×48のアイコンを追加することができます（Windowsエクスプローラへのリンクをドラッグすると表示されます）。

しかし、この良い考えはブラウザの実装と衝突する傾向があります。

24
Álvaro González

PNGには2つの利点があります。サイズが小さく、より広く使用されサポートされている（場合を除いて）。 ICOの前に述べたように、デスクトップアプリケーションには便利ですが、Webサイトにはそれほど多くないサイズのアイコンを複数持つことができます。 favicon.icoをアプリケーションのルートに置くことをお勧めします。あなたがあなたのウェブサイトのページのヘッドへのアクセスを持っているならば、pngファイルを指すためにタグを使います。そのため、古いブラウザではfavicon.icoが表示され、新しいブラウザではPNGが表示されます。

PngファイルとIconファイルを作成するには、 Gimp をお勧めします。

15
pmoleri

Google+のようなソーシャルツールの中には、簡単な方法で外部リンク用のfaviconを取得し、取得する http://your.domainname.com/favicon.ico

HTMLコンテンツをプリフェッチしないので、<link>タグは機能しません。この場合は、mod_rewriteルールを使用するか、単にデフォルトの場所にファイルを配置します。

12
jdavid.net

Icoはbea pngできます。

もっと正確に言うと、誰もがicoに強く関連づけられている通常のビットマップ+アルファの代わりに、この最小のコンテナフォーマットの中に1つ以上のpngを格納できます。

サポートは古く、 はWindows Vista （2007）に登場し、ブラウザではよくサポートされていますが、必ずしもアイコン編集ソフトウェアではサポートされていません。

任意の有効なpng（ヘッダーを含む全体）の前に 6バイトのicoヘッダー と16バイトのイメージディレクトリを追加できます。
GIMPはネイティブサポートをしています。単にicoとしてエクスポートし、 "Compressed（PNG）"をチェックしてください。

6
Adria

信頼性の高いIE6互換性が必要な場合は、PNGを避けてください。

3
aehlke