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

html favicon html-head

— 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

Możliwy duplikat Czy musisz dołączyć <link rel = "icon" href = "favicon.ico" type = "image / x-icon" />?

— Dan Dascalescu

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

— xgqfrms
źródło

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

— xgqfrms

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