favicon.png vs favicon.ico-ICOの代わりにPNGを使用する理由

442

PNGがより一般的な画像形式であるという事実以外に、favicon.pngとfavicon.icoを比較する技術的な理由はありますか？

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

png favicon ico

— ジョン・ギャロウェイ
ソース

233

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

ICOとPNGはどちらも完全なアルファチャネルベースの透明度を許可します
ICOにより、古いブラウザー（IE6など）との下位互換性が可能になります
PNGは、透過性のためのより幅広いツールのサポートを持っている可能性がありますが、ダイナミックドライブツールや@mercatorによって言及されているPhotoshopプラグインなど、アルファチャネルICOを作成するためのツールも見つけることができます。

詳細については、ここにある他の回答を参考にしてください。

— オレンジ
ソース

78

ICOはまた、アルファチャンネルができます

— アルバロ・ゴンサレス

58

-1 ICOは、完全なアルファチャネルを含む複数の解像度をサポートします。ちなみに、1ビットアルファは「透明度」として知られています。ICOが持っていた唯一の本当の制限は、256回以上の長さ（任意の方向）のアイコンでしたが、何度か克服されました。

— クリスチャン

26

-1 .icoでは、1つのファイルで複数の解像度も使用できます（たとえば、16x16および32x32）。したがって、デスクトップにショートカットを作成しても、アイコンは適切です。

— ガガリン

4

ほとんどのブラウザーは、リンクされたブラウザーよりもルートのfavicon.icoを優先します。あなたのソリューションでは、ほとんどのブラウザーはリンクされたpngの代わりに非透過 .ico を選択します。

— ロード

@lodeなぜ透明なicoの代わりに特に不透明なicoを選択するのですか？

— Rob Grant、

367

最新のすべてのブラウザー（Chrome 4、Firefox 3.5、IE8、Opera 10、Safari 4でテスト済み）はfavicon.ico、を介してショートカットアイコンを指定していない限り、常にを要求します<link>。あなたが明示的に指定していないのであれば、それは常に持っているのがベストですfavicon.ico404を避けるために、ファイルをヤフーに小さくしてキャッシュ可能にすることをお勧めします。

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

それらを作成できる無料のPhotoshopプラグインもあります。

— メルカトール
ソース

6

このダイナミックドライブツールのヒントを示します。すぐにブックマークしました。ありがとう！

— Marcos Buarque、2010

3

ツールに関しては、それはほとんど正しくありません。いくつかのアイコンデザインツールがあります。過去に自分で簡単なものを書きました。

— クリスチャン

4

Photoshopに650ドルのお金がない場合は、pixlr.com（無料）を使用して、完全なレイヤー化と透過性を備えた.pngファイルを作成、編集、保存できます:)

— Scott B

3

@Pacerier .icoPSで編集するのは非常に難しいです。たとえそうしたとしても、最終結果はひどく悪いです。.bmpより良いフォーマットだと思います（大量のメタデータが追加され、再編集が大変な苦痛になります）。

— クリスチャン

4

@mikevoermans：それはまだPNGとして読み取られます。最近のほとんどのブラウザーは、ファイル拡張子をあまり気にしません。ところで、これは最良の答えであり、受け入れられるべきものです。

— rvighne 2014

48

.pngファイルは便利ですが、.icoファイルもアルファチャネル透過性を提供し、さらに下位互換性を提供します。

たとえば、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は、ウェブサイトへのショートカットを作成するiPhoneユーザー向けです。

— ウーター・ヴァン・ニフテリック
ソース

16

PNGはまた、アルファチャンネルを提供することができます

— アルバロ・ゴンサレス

10

ええ、私のポイントは、icoはファビコンとしてpngが実行できるすべてのこと（アルファ透過性）を実行できることであり、さらに0

— 。– Wouter van Nifterick

ウィキペディアによると、Internet Explorerは次のような行をサポートできません：<link rel = "icon" type = "image / vnd.microsoft.icon" href = " example.com/image.ico " />

— frankster

2

Webサイトが0年目以降ブラウザをサポートしていない可能性があります。IE6で最新のWebサイトを試してロードし、何が起こるかを確認してください;）

— Dominic

26

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

ただし、この良いアイデアは、ブラウザの実装と衝突する傾向があります。

— アルバロ・ゴンサレス
ソース

これに関連して見タスクバーIE9もwin7のにピンにそれらの大きいアイコンを使用するという事実は、次のとおりです。stackoverflow.com/questions/3723715/...

— GazB

ええと、理論的？Windows 7に同梱されている同じアイコンを、8ビットカラーモードのWindows 95で使用できます。それはかなり実用的だと思いますか？

— クリスチャン

この回答は2009年に書かれたものであることに注意してください。当時のブラウザシーンは、現在とは大きく異なりました。

— アルバロ・ゴンサレス

15

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

PNGファイルとアイコンファイルを作成するには、The Gimpをお勧めします。

— pmoleri
ソース

3

ウェブサイトについてはそれほどではありませんか？みんなが網膜のようなディスプレイを使い始めるまで待ちます。突然、ファビコンに32x32以上のサイズを含めることができる非常に良い理由があります...

— Roman Starkov

1

私たちはファビコンについて話しているので、サポートの問題は実際にはあなたが言うことの反対です

— デビッド・ヘファーナン

1

+1元の質問に対応し、透明性が損なわれることはありません。.ico形式をサポートするアプリについても説明します。

— kovacsbv 2016

12

Google+などの一部のソーシャルツールは、http：//your.domainname.com/favicon.icoをフェッチして、外部リンクのファビコンを取得する簡単な方法を使用します

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

— jdavid.net
ソース

1

それが真か偽かはわかりませんが、私が持っているpngに加えてルートにfavicon.icoを作成することは私にとって決定的な議論でした。

— Alexei Tenitski、

2

これはtelly.comでの仕事でわかっています。GooglePlusチームのポールリンドナーを介して。plus.google.com/117259934788907243749/about

— jdavid.net

ファビコンをルートに配置することは事実上の標準であるため、この回答で述べたような理由でそれを厳守します。

— Stijn de Witt 2017

8

icoはpngにすることができます。

より正確には、誰もがicoと強く関連している通常のビットマップ+アルファの代わりに、この最小限のコンテナー形式内に1つ以上のpngを格納できます。

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

有効なpng（ヘッダーを含む）の前には、6バイトのicoヘッダーと16バイトの画像ディレクトリを付加できます。
GIMPはネイティブサポートしています。単にicoとしてエクスポートし、「圧縮（PNG）」にチェックを入れます。

— アドリア
ソース

3

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

— エールケ
ソース

19

IE6のディレクトリツリーのicoと、<link>最新のブラウザーのページコードでを介して指定されたPNGの両方を使用できない理由はありません。

— アンバー

10

なぜ両方を使用するのですか？あなたがicoを作成する気になるなら、pngを使用することにはどのような利点がありますか？確かに、それは単なる追加の作業と追加のコードです。

— Mr_Chimp

@Mr_Chimpは、pngがオープンスタンダードであり、より前向きであるためですか？これは、1行のマークアップです。

— Wyatt8740

9

こんにちは@Orcra-私がこの答えを書いたとき〜8年前にこれを読んでいて、IE6のようなことを考慮しなければならなかったとあなたはそれがそれほど面白いとは思わないだろうと思います今日何か関連

— aehlke

3

@aehikeあなたは公平なポイントを持っています、タイムスタンプをチェックしないのは私の悪いです。

— Orcra

0

それが価値があるもののために、私はこれをします：

    <!-- Favicon - Generic -->
    <link rel="icon" href="path/favicon-32_x_32.png" sizes="32x32">
    <link rel="icon" href="path/favicon-57_x_57.png" sizes="57x57">
    <link rel="icon" href="path/favicon-76_x_76.png" sizes="76x76">
    <link rel="icon" href="path/favicon-96_x_96.png" sizes="96x96">
    <link rel="icon" href="path/favicon-128_x_128.png" sizes="128x128">
    <link rel="icon" href="path/favicon-192_x_192.png" sizes="192x192">
    <link rel="icon" href="path/favicon-228_x_228.png" sizes="228x228">
    <!-- Favicon - Android -->
    <link rel="shortcut icon" href="path/favicon-196_x_196.png" sizes="196x196">
    <!-- Favicon - iOS -->
    <link rel="apple-touch-icon" href="path/favicon-120_x_120.png" sizes="120x120">
    <link rel="apple-touch-icon" href="path/favicon-152_x_152.png" sizes="152x152">
    <link rel="apple-touch-icon" href="path/favicon-180_x_180.png" sizes="180x180">

そして、私はまだ favicon.icoをルートに置いています。

— s3c
ソース