Необхідно додати тег посилання для favicon.ico?

Чи є сучасні браузери, які не розпізнають файл 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"> 

Фавікони дуже кешовані, і це чудовий спосіб забезпечити оновлення.

Виноска про розташування за замовчуванням:
Що стосується першого біту питання: усі сучасні браузери виявлять фавікон у місці за замовчуванням, тож це не привід використовувати linkдля нього.

Виноска про те rel="icon":
Як зазначено у відповіді @ Semanino , використання 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" />
<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!

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

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

Ми можемо додати для всіх пристроїв певний розмір платформи

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

Суть в тому , що не всі браузери будуть фактично шукати ваш favicon.ico файл. Деякі браузери дозволяють користувачам обирати, чи він повинен виглядати автоматично. Тому, щоб переконатися, що вона завжди буде відображатися та переглядатись, вам її потрібно визначити.