web-dev-qa-db-ja.com

Favicon：.icoまたは.png /正しいタグ

HTML 5文書では、どのファビコン形式をお勧めしますか、またそれはなぜですか？私はそれがIE7とすべての最近のブラウザによってサポートされることを望みます。

また、.pngを使用するときは、タイプを指定する必要がありますか（type = "image/png"）？

htmlhtml5pngfaviconico
214
Richard

すべてのブラウザとの互換性のために.icoを使います。

それは複数のプログラムを使用して作成する方が簡単であるとしても.pngはますます多くのサポートを得ています。

のために。

<link rel="shortcut icon" href="http://example.com/myicon.ico" />

.pngの場合は、タイプを指定する必要があります

<link rel="icon" type="image/png" href="http://example.com/image.png" />
379
Ibu

こちらをご覧ください： クロスブラウザのfavicon

進むべき道だ：

<link rel="icon" type="image/png" href="http://www.example.com/image.png"><!-- Major Browsers -->
<!--[if IE]><link rel="SHORTCUT ICON" href="http://www.example.com/alternateimage.ico"/><![endif]--><!-- Internet Explorer-->
34
rudimenter

これは古い質問です。

別の選択肢があります - 異なるプラットフォーム要件に注意を払う - 出典

<link rel='shortcut icon' type='image/vnd.Microsoft.icon' href='/favicon.ico'> <!-- IE -->
<link rel='Apple-touch-icon' type='image/png' href='/icon.57.png'> <!-- iPhone -->
<link rel='Apple-touch-icon' type='image/png' sizes='72x72' href='/icon.72.png'> <!-- iPad -->
<link rel='Apple-touch-icon' type='image/png' sizes='114x114' href='/icon.114.png'> <!-- iPhone4 -->
<link rel='icon' type='image/png' href='/icon.114.png'> <!-- Opera Speed Dial, at least 144×114 px -->

これが私がこれまでに見つけた最も広いアプローチです。

最終的には、その決定はあなた自身のニーズに依存します。あなたのターゲットオーディエンスは誰ですか？

アップデート2018年5月27日：予想通り、時が経ち、物事が変わります。しかし、良い知らせもあります。私は Real Favicon Generator と呼ばれるツールを見つけました。ただし、後方互換性は扱いません。

24
537mfb