Существуют ли современные браузеры, которые автоматически не обнаружат favicon.ico? Есть ли причина добавить тег ссылки для favicon.ico?
<link rel="shortcut icon" href="/favicon.ico">
Я предполагаю, что нужно только включить его в документ HTML, если вы решите пойти с GIF или PNG...
Чтобы выбрать другое местоположение или тип файла (например, PNG или SVG) для знака:
Одна из причин может заключаться в том, что вы хотите иметь значок в определенном месте, возможно, в папке с изображениями или что-то в этом роде. Например:
<link rel="icon" href="_/img/favicon.png">
Это другое место может даже быть CDN, так же, как SO, похоже, работает с <link rel="shortcut icon" href="http://cdn.sstatic.net/stackoverflow/img/favicon.ico">.
Чтобы узнать больше об использовании других типов файлов, таких как PNG, просмотрите этот вопрос.
Для целей перебора кеша:
Добавьте строку запроса в путь для целей кэширования:
<link rel="icon" href="/favicon.ico?v=1.1">
Favicons очень сильно кэшируются, и это отличный способ обеспечить обновление.
Сноска о местоположении по умолчанию:
Что касается первого вопроса: все современные браузеры обнаружат значок в местоположении по умолчанию, поэтому не следует использовать для него link.
Сноска о rel="icon":
Как указано @Semanino answer, использование rel="shortcut icon" - это старая техника, которая требовалась более старыми версиями Internet Explorer, но в большинстве случаев может быть заменена более правильной rel="icon". Статья @Semanino, основанная на этом, правильно ссылается на соответствующую спецификацию, который показывает значение rel shortcut, не является допустимым вариантом.
Обратите внимание на, что и спецификация HTML5 для W3C и WhatWG стандартизация
<link rel="icon" href="/favicon.ico">
Обратите внимание на значение атрибута "rel"!
Значение shortcut icon для атрибута rel - это очень старое расширение Internet Explorer и устаревшее.
Поэтому, пожалуйста, не используйте его больше и не обновляйте свои файлы, чтобы они соответствовали стандартам и отображались правильно во всех браузерах.
Вы также можете взглянуть на этот отличный пост: rel= "ярлык" , который считается вредным
<link rel="icon" type="image/x-icon" href="http://example.com/favicon.ico" /> <link rel="icon" type="image/png" href="http://example.com/favicon.png" /> <link rel="icon" type="image/gif" href="http://example.com/favicon.gif" />
Все зависит от того, какой формат изображения вы хотите использовать!
, если у вас есть значок вашего сайта, это будет намного лучше для UX!
В нижней строке находятся не все браузеры, которые действительно будут искать ваш файл favicon.ico. Некоторые браузеры позволяют пользователям выбирать, следует ли автоматически смотреть. Поэтому, чтобы убедиться, что он всегда появится и будет рассмотрен, вам нужно его определить.
Мы можем добавить для всех устройств с платформой определенного размера
<link rel="apple-touch-icon" sizes="57x57" href="fav_icons/apple-icon-57x57.png">
<link rel="apple-touch-icon" sizes="60x60" href="fav_icons/apple-icon-60x60.png">
<link rel="apple-touch-icon" sizes="72x72" href="fav_icons/apple-icon-72x72.png">
<link rel="apple-touch-icon" sizes="76x76" href="fav_icons/apple-icon-76x76.png">
<link rel="apple-touch-icon" sizes="114x114" href="fav_icons/apple-icon-114x114.png">
<link rel="apple-touch-icon" sizes="120x120" href="fav_icons/apple-icon-120x120.png">
<link rel="apple-touch-icon" sizes="144x144" href="fav_icons/apple-icon-144x144.png">
<link rel="apple-touch-icon" sizes="152x152" href="fav_icons/apple-icon-152x152.png">
<link rel="apple-touch-icon" sizes="180x180" href="fav_icons/apple-icon-180x180.png">
<link rel="icon" type="image/png" sizes="192x192" href="fav_icons/android-icon-192x192.pn">
<link rel="icon" type="image/png" sizes="32x32" href="fav_icons/favicon-32x32.png">
<link rel="icon" type="image/png" sizes="96x96" href="fav_icons/favicon-96x96.png">
<link rel="icon" type="image/png" sizes="16x16" href="fav_icons/favicon-16x16.png">