Нужно ли включать <link rel = "icon" href = "favicon.ico" type = "image / x-icon" />? - PullRequest
Новая
       33

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

177 голосов
/ 11 июля 2011

Я не включил следующую строку кода в тег head, однако мой значок все еще отображается в моем браузере: 

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

Какова цель его включения?

Ответы [ 6 ]

151 голосов
/ 11 июля 2011

Если вы не вызываете favicon, favicon.ico, вы можете использовать этот тег для указания фактического пути (если он у вас в каталоге images/).Браузер / веб-страница по умолчанию ищет favicon.ico в корневом каталоге.

110 голосов
/ 18 марта 2013

Фактически вы должны сделать и то, и другое, чтобы все браузеры нашли значок.

Называть файл «favicon.ico» и помещать его в корень вашего сайта - это метод, который «отговаривает» W3C:

Метод 2 (не рекомендуется): помещение значка в предварительно определенный URI
Второй метод указания значка основан на использовании предварительно определенного URI для идентификации изображения: "/ favicon", которыйотносительно корня сервера.Этот метод работает, потому что некоторые браузеры были запрограммированы на поиск значков с использованием этого URI.
W3C - Как добавить значок на ваш сайт

Итак, чтобы охватить всеВ таких ситуациях я всегда делаю это в дополнение к рекомендованному способу добавления атрибута rel и указания его на тот же файл .ico.

44 голосов
/ 10 февраля 2015

Я использую его по двум причинам:

  1. Я могу принудительно обновить значок, добавив параметр запроса, например ?v=2. как это: <link rel="icon" href="/favicon.ico?v=2" type="image/x-icon" />

  2. В случае, если мне нужно указать путь.

13 голосов
/ 22 ноября 2013

Простое добавление его в корневую папку работает по моде, но я обнаружил, что если мне нужно изменить значок, обновление может занять несколько дней ... даже обновление кэша не помогает.1001 *

6 голосов
/ 12 октября 2015

Многие люди устанавливают путь к файлам cookie в /.Это приведет к тому, что каждый запрос favicon будет отправлять копии файлов cookie сайтов, по крайней мере, в Chrome.Адресация избранного в вашем домене без файлов cookie должна исправить это. 

<link rel="icon" href="https://cookieless.MySite.com/favicon.ico" type="image/x-icon" />

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

Информация о настройке домена без файлов cookie:

http://www.ravelrumba.com/blog/static-cookieless-domain/

0 голосов
/ 05 июля 2019

У меня было три причины включить ссылку.

  1. У меня есть сайт WordPress в корне. И я хотел развернуть сборку react в подкаталоге. Поэтому я не мог поместить favicon.ico в корень и должен был добавить ссылку, чтобы он работал.
  2. Я не хотел использовать .ico и работал с .png.
  3. Я бы предпочел добавить несколько размеров, чтобы предоставить выбор устройству визуализации.

Итак, я закончил с чем-то вроде этого, 

<link rel="icon" type="image/png" sizes="48x48"   href="favicon-48.png">
<link rel="icon" type="image/png" sizes="96x96"   href="favicon-96.png">
<link rel="icon" type="image/png" sizes="144x144" href="favicon-144.png">
<link rel="icon" type="image/png" sizes="192x192" href="favicon-192.png">
<link rel="icon" type="image/png" sizes="256x256" href="favicon-256.png">
<link rel="icon" type="image/png" sizes="384x384" href="favicon-384.png">
<link rel="icon" type="image/png" sizes="512x512" href="favicon-512.png">
...