Фавикон: .ico или.png / правильные теги?

Question

В документе HTML5, какой формат favicon вы рекомендуете и почему? Я хочу, чтобы он поддерживался IE7 и всеми современными браузерами.

Также при использовании.png мне нужно указывать тип (type="image/png")?

Answer 1

Для совместимости со всеми браузерами придерживайтесь .ico,

.png получает все больше и больше поддержки, хотя его легче создавать с помощью нескольких программ.

для.ico

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

для.png необходимо указать тип

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

Answer 2

Смотрите здесь: Cross Browser 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-->

Answer 3

Я знаю, что это старый вопрос.

Вот еще один вариант - удовлетворение различных требований платформы - Источник

<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 -->

Это самый широкий подход, который я нашел до сих пор.

В конечном итоге решение зависит от ваших собственных потребностей. Спросите себя, кто ваша целевая аудитория?

ОБНОВЛЕНИЕ 27 мая 2018: Как и ожидалось, время идет, и все меняется. Но есть и хорошие новости. Я нашел инструмент под названием https://realfavicongenerator.net/, который генерирует все необходимые строки, чтобы значок работал на всех современных браузерах и платформах. Это не обрабатывает обратную совместимость, хотя.