Необходимо добавить тег ссылки для favicon.ico?

153

Существуют ли какие-либо современные браузеры, которые не обнаружат favicon.ico автоматически? Есть ли причина добавлять тег ссылки для favicon.ico?

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

Я предполагаю, что включить его в HTML-документ необходимо только в том случае, если вы решили использовать GIF или PNG ...

html favicon html-head

— user1087110
источник

Я никогда не видел, чтобы это было нужно любому браузеру. У вас есть примеры?

— shark555

Я могу назвать некоторые браузеры, которые имеют настройки предпочтений, искать или не искать favicon.icoавтоматически. Поэтому, если вы хотите быть уверены, что ваш значок появляется, лучше включите ссылку в ваш HTML. Кстати, файлы .png обычно меньше, чем сопоставимые файлы .ico.

— Мистер Листер

Назовите, пожалуйста, мистера Листера :) Нет shark555, я не могу назвать ни одного ...

— user1087110

5

Firefox (и другие основанные на Gecko браузеры, такие как SeaMonkey) имеют несколько настроек для точной настройки его поведения. browser.chrome.faviconsзначение true будет искать favicon.ico в корне; при значении false загружаются только значки, если они указаны на странице HTML. См. Kb.mozillazine.org/Browser.chrome.favicons и связанные страницы.

— Мистер Листер

Возможные дубликаты Нужно ли включать <link rel = "icon" href = "favicon.ico" type = "image / x-icon" />?

— Дан Даскалеску

253

Чтобы выбрать другое местоположение или тип файла (например, 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">

Фавиконы очень сильно кешируются, и это отличный способ обеспечить обновление.

Сноска о расположении по умолчанию.
Что касается первого бита вопроса: все современные браузеры будут обнаруживать значок в расположении по умолчанию, так что это не причина использовать linkего.

Сноска о rel="icon":
Как указано в ответе @ Semanino , использование rel="shortcut icon"- это старая техника, которая требовалась более старыми версиями Internet Explorer, но в большинстве случаев может быть заменена более правильной rel="icon"инструкцией. Статья @Semanino основана на правильных ссылках на соответствующую спецификацию, в которой указаноrel значение shortcutнедопустимого параметра.

— Йерун
источник

Это должно идти в <head>теге?

— Макс Уильямс

1

@MaxWilliams Да. (См. «Разрешенные родительские элементы» в документах MDN или «Контексты» в спецификации W3 ).

— Йероен

1

Это 2016 год - и Chrome все еще (или снова?) Не распознает favicon.ico по умолчанию в корне, если вы укажете и другие значки ...

— Себастьян Г. Маринеску,

52

Обратите внимание, что спецификация HTML5 W3C и WhatWG стандартизированы.

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

Обратите внимание на значение атрибута rel!

Значение shortcut iconдля relатрибута является очень старым расширением конкретных Internet Explorer и осуждаются .

Поэтому, пожалуйста, подумайте о том, чтобы больше не использовать его и не обновлять файлы, чтобы они соответствовали стандартам и правильно отображались во всех браузерах.

Вы также можете взглянуть на этот замечательный пост: rel = "ярлык" считается вредным

— Semanino
источник

1

Не совсем «устарел» (на самом деле он никогда не был частью какой-либо спецификации). Однако в спецификации HTML5 говорится: «По историческим причинам ключевому слову icon может предшествовать ключевое слово« shortcut ». Если присутствует ключевое слово« shortcut », оно должно быть указано непосредственно перед ключевым словом icon, а два ключевых слова должны быть разделены. только одним символом пробела U + 0020. " Также обратите внимание, что «для ресурсов, заданных ключевым словом icon, нет типа по умолчанию».

— DocRoot

12

<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" />
<link rel="icon" type="image/jpeg" href="http://example.com/favicon.jpeg" />
<link rel="icon" type="image/webp" href="http://example.com/favicon.webp" />

Все зависит от того, какой формат изображения вам нравится использовать!
если у вас есть иконка вашего сайта, это будет намного лучше для UX!

демонстрация

показать логотип на вкладке браузера

— xgqfrms
источник

iconhandbook.co.uk/reference/examples/favicons links: mathiasbynens.be/notes/rel-shortcut-icon#comments links: html.spec.whatwg.org/multipage/semantics.html#rel-icon ссылки:

— xgqfrms

UX не имеет к этому никакого отношения.

— паддотк

@paddotk Я имею в виду, что пользователь может легко определить, какая вкладка принадлежит целевому веб-сайту, когда в браузере открываются мульти-вкладки, если на вкладке отображается значок значка.

— xgqfrms

1

Мы можем добавить для всех устройств с платформой определенного размера

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

— Abhilash
источник

0

Суть в том, что не все браузеры будут искать ваш файл favicon.ico . Некоторые браузеры позволяют пользователям выбирать, должен ли он автоматически выглядеть. Поэтому, чтобы он всегда появлялся и просматривался, вам нужно его определить.

— Анимусон
источник

6

Спасибо за ваш комментарий animuson. Можете ли вы назвать некоторые браузеры, которые не будут выглядеть автоматически?

— user1087110

11

@ user1087110: Я не знаю ни о чем, и, честно говоря, кого это волнует. Дело в том, что вы не можете предполагать, что это произойдет, и вам необходимо учитывать те, которые этого не сделают.

— animuson

Поскольку это больше не актуально, вы можете удалить свой ответ, чтобы очистить страницу.

— цыплята