Niezawodna favicon w HTML nie opiera się na jednym magicznym znaczniku. Wymaga niewielkiego zestawu dostępnych plików i odnośników w sekcji head. Ta procedura obsługuje nowoczesne karty, starsze programy i skróty mobilne bez mnożenia historycznych wariantów.
Przygotuj pliki
Zacznij od kwadratowego symbolu, czytelnego w bardzo małym rozmiarze. Umieść favicon.ico, favicon.svg, apple-touch-icon.png, site.webmanifest i pliki PNG wskazane w manifeście w publicznym folderze udostępnianym w katalogu głównym domeny.
Ścieżka taka jak /favicon.svg jest bezwzględna względem domeny. Pozostaje więc poprawna na /products i /blog/article, w przeciwieństwie do favicon.svg, która może być rozwiązywana względem bieżącej strony.
Dodaj elementy do head
Najpierw zadeklaruj SVG z rel icon i type image/svg+xml, następnie ICO z rel icon i sizes any. Dodaj rel apple-touch-icon dla iOS i rel manifest dla instalacji aplikacji internetowej.
Typ musi odpowiadać faktycznie udostępnianemu plikowi. Nie zmieniaj rozszerzenia PNG na .ico: zawartość i nagłówek muszą korzystać z formatu ICO.
| Przeznaczenie | Relacja | Plik |
|---|---|---|
| Nowoczesna przeglądarka | icon | /favicon.svg |
| Zgodność | icon | /favicon.ico |
| Ekran główny iOS | apple-touch-icon | /apple-touch-icon.png |
| Aplikacja internetowa | manifest | /site.webmanifest |
Wdróż bez uszkadzania ścieżek
Po wdrożeniu otwórz bezpośrednio URL każdego pliku. Odpowiedź musi zawierać obraz lub manifest ze statusem powodzenia, a nie stronę logowania lub HTML błędu 404 zwrócony z mylącym statusem.
Jeśli witryna działa w podkatalogu, dostosuj ścieżki lub publiczną ścieżkę bazową. Sprawdź końcową stronę w narzędziach deweloperskich: przeglądarka powinna pobierać oczekiwane adresy bez przekierowania na inny host.
Sprawdź wynik
Odśwież stronę z wyłączoną pamięcią podręczną i sprawdź elementy link w utworzonym DOM. Następnie przetestuj kartę, zakładkę i, jeśli to istotne, dodanie witryny do ekranu głównego prawdziwego urządzenia.
Favicon w wynikach wyszukiwania podlega również zasadom i harmonogramowi indeksowania wyszukiwarki. Widoczna ikona w przeglądarce nie gwarantuje więc natychmiastowej aktualizacji wyników wyszukiwania.
Źródła pierwotne
Najczęstsze pytania
Czy element favicon umieszcza się w body?
Nie. Elementy link opisujące ikony i manifest należą do sekcji head dokumentu.
Czy wystarczy favicon.ico w katalogu głównym?
To przydatny wariant zapasowy, ale nie opisuje ikony Apple Touch ani instalowanych ikon manifestu. Zadeklaruj formaty dla tych zastosowań.
Dlaczego używać ścieżki zaczynającej się od /?
Zaczyna się ona w katalogu głównym domeny i zapobiega szukaniu pliku w folderze zagnieżdżonej strony.