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

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

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

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

126
favicon html html-head

5 ответов

выбрать другое местоположение или тип файла (например, PNG или SVG) для favicon:
Одной из причин может быть то, что вы хотите иметь значок в определенном месте, возможно в папке "Изображения" или что-то подобное. Например:

<link rel="icon" href="_/img/favicon.png">

это различное местоположение может даже быть CDN, так же, как это, кажется, связано с <link rel="shortcut icon" href="http://cdn.sstatic.net/stackoverflow/img/favicon.ico">.

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

на кэш перебора цели:
Добавьте строку запроса в путь для целей перебора кэша:

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

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

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

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

220

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

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

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

значение shortcut icon на rel атрибут-это очень старое расширение Internet Explorer и устаревший.

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

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

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

9

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

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

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

0