Каков оптимальный синтаксис ссылок html для использования значков/фонов сайта?

Что я должен использовать:

<link rel="SHORTCUT ICON" type="image/x-icon" href="favicon.ico" /> 

Или:

<link rel="icon" type="image/ico" href="favicon.ico" />

Я видел и то, и другое работает во многих современных браузерах, но более последовательно поддерживается большинством браузеров?

Ответ 1

Хорошо, понял это для себя...

отн

<link rel="icon" будет работать в IE8, 9, FX и Chrome, но не в IE6 или 7. rel="shortcut icon" поддерживается IE6 и 7.

Стандарты W3C содержат список с разделителями пробелов и что ключ только icon. Это означает, что shortcut icon работает во всех браузерах - неправильно обрабатывается IE и как составной ключ во всем остальном.

типа

Кажется, что все браузеры принимают и обрабатывают формат значка Windows для файла.

IE ожидает, что это будет использоваться как тип MIME image/vnd.microsoft.icon, но только, похоже, последовательно работает, если тип содержимого image/x-icon.

Все остальное ожидает image/ico, но в значительной степени игнорирует его.


Таким образом, лучший формат:

<link rel="shortcut icon" href="favicon.ico" /> 

Однако, если у IE возникают проблемы с обработкой файла или ваш сервер не передает тип содержимого image/x-icon в заголовках, он может помочь указать ожидаемый тип IE:

<link rel="shortcut icon" type="image/x-icon" href="favicon.ico" /> 

Ответ 2

Я устал изменять размеры значков вручную, а затем создавать несколько тегов <meta> и <link> для каждого размера, а также использовать правильные теги шаблонов для веб-фреймворка, которые я использовал в настоящее время.

Итак, я написал бесплатный небольшой инструмент для создания всех правильных размеров, а также для создания требуемой разметки. Проверьте это на https://favicongenerator.co