Czy konieczne jest dodanie tagu linku do favicon.ico?

153

Czy są jakieś nowoczesne przeglądarki, które nie wykryją automatycznie favicon.ico? Czy jest jakiś powód, aby dodać tag linku do favicon.ico?

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

Domyślam się, że umieszczenie go w dokumencie HTML jest konieczne tylko wtedy, gdy zdecydujesz się na GIF lub PNG ...

user1087110
źródło
Nigdy nie widziałem, żeby jakakolwiek przeglądarka tego potrzebowała. Czy masz jakieś przykłady?
shark555
Mogę wymienić niektóre przeglądarki, które mają preferencje dotyczące wyszukiwania, czy nie favicon.ico. Jeśli więc chcesz mieć pewność, że pojawi się Twoja ikona, lepiej umieść link w kodzie HTML. Nawiasem mówiąc, pliki .png są zwykle mniejsze niż porównywalne pliki .ico.
Pan Lister
Wymień proszę pana Lister :) No shark555, nie mogę wymienić żadnego ...
user1087110
5
Firefox (i inne przeglądarki oparte na Gecko, takie jak SeaMonkey) ma kilka ustawień, aby dostosować swoje zachowanie. browser.chrome.faviconsustawione na true będzie szukać favicon.ico w katalogu głównym; jeśli fałsz, załaduje ikony tylko wtedy, gdy jest to określone na stronie HTML. Zobacz kb.mozillazine.org/Browser.chrome.favicons i powiązane strony.
Pan Lister

Odpowiedzi:

253

Aby wybrać inną lokalizację lub typ pliku (np. PNG lub SVG ) dla
ikony ulubionych: Jednym z powodów może być to, że chcesz, aby ikona znajdowała się w określonej lokalizacji, na przykład w folderze obrazów lub w podobny sposób. Na przykład:

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

Ta inna lokalizacja może nawet być CDN, tak jak wydaje się, że ma to miejsce w przypadku SO <link rel="shortcut icon" href="http://cdn.sstatic.net/stackoverflow/img/favicon.ico">.

Aby dowiedzieć się więcej o używaniu innych typów plików, takich jak PNG, sprawdź to pytanie .

Do celów pomijania pamięci podręcznej :
Dodaj ciąg zapytania do ścieżki w celu pomijania pamięci podręcznej:

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

Favicony są bardzo mocno buforowane i to świetny sposób na zapewnienie odświeżenia.


Przypis dotyczący domyślnej lokalizacji:
jeśli chodzi o pierwszy fragment pytania: wszystkie nowoczesne przeglądarki wykryłyby favicon w domyślnej lokalizacji, więc nie jest to powód, aby używać linkdo tego.


Przypis o rel="icon":
Jak wskazuje odpowiedź @ Semanino , używanie rel="shortcut icon"jest starą techniką, która była wymagana przez starsze wersje Internet Explorera, ale w większości przypadków można ją zastąpić bardziej poprawną rel="icon"instrukcją. Artykuł @Semanino oparty na poprawnych linkach do odpowiedniej specyfikacji, która pokazuje relwartość shortcutnie jest prawidłową opcją.

Jeroen
źródło
Czy powinno to znaleźć się w <head>tagu?
Max Williams
1
@MaxWilliams Yes. (Zobacz „Dozwolone elementy nadrzędne” w dokumentacji MDN lub „Konteksty” w specyfikacji W3 ).
Jeroen
1
To 2016 - i Chrome nadal (? Lub znowu) nie rozpoznaje domyślny favicon.ico w katalogu jeśli specifiy również inne ikony ...
Sebastian G. Marinescu
52

Należy pamiętać, że zarówno specyfikacja HTML5 W3C, jak i WhatWG są standaryzowane

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

Zwróć uwagę na wartość atrybutu „rel”!

Wartość shortcut icondla relatrybutu jest bardzo stary Internet Explorer rozszerzenie specyficzne i przestarzałe .

Dlatego prosimy o zaprzestanie korzystania z niego i aktualizację plików, aby były zgodne ze standardami i były poprawnie wyświetlane we wszystkich przeglądarkach.

Możesz także rzucić okiem na ten świetny post: rel = "shortcut icon" uważany za szkodliwy

Semanino
źródło
1
Niezupełnie „przestarzały” (tak naprawdę nigdy nie był częścią żadnej specyfikacji). Jednak specyfikacja HTML5 stwierdza: „Z przyczyn historycznych słowo kluczowe icon może być poprzedzone słowem kluczowym„ shortcut ”. Jeśli słowo kluczowe„ shortcut ”występuje, musi występować bezpośrednio przed słowem kluczowym icon, a dwa słowa kluczowe muszą być rozdzielone tylko jednym znakiem U + 0020 SPACJA ”. Należy również zauważyć, że „Nie ma domyślnego typu zasobów podanych przez słowo kluczowe 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" />

Wszystko zależy od formatu obrazu, którego chcesz używać!
jeśli masz ikonę swojej strony, będzie to dużo lepsze dla UX!

próbny

pokaż logo w zakładce przeglądarki

wprowadź opis obrazu tutaj

xgqfrms
źródło
UX nie ma z tym nic wspólnego.
paddotk
@paddotk Mam na myśli to, że użytkownik może łatwo stwierdzić, która karta należy do docelowej witryny internetowej, po otwarciu wielu kart w przeglądarce, jeśli na karcie jest wyświetlana ikona favicon.
xgqfrms
1

Możemy dodać dla wszystkich urządzeń o rozmiarze specyficznym dla platformy

<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
źródło
0

Najważniejsze jest to, że nie wszystkie przeglądarki to zrobią faktycznie szukać Twojego pliku favicon.ico . Niektóre przeglądarki pozwalają użytkownikom wybrać, czy mają one wyglądać automatycznie. Dlatego, aby mieć pewność, że zawsze będzie się pojawiać i oglądać, musisz to zdefiniować.

animuson
źródło
6
Dzięki za komentarz animuson. Czy możesz wymienić niektóre przeglądarki, które nie będą wyglądać automatycznie?
user1087110
11
@ user1087110: Nie wiem nic poza moją głową i szczerze, kogo to obchodzi. Chodzi o to, że nie możesz zakładać, że tak będzie i musisz wziąć pod uwagę te, które tego nie zrobią.
animuson
Ponieważ nie jest to już istotne, możesz usunąć swoją odpowiedź, aby wyczyścić stronę.
kurczaki