Jak dodać Faviconę do HTML
Dodanie favikony do zwykłej strony HTML to zmiana w jednej linii — ale nowoczesna, kompletna konfiguracja składa się z sześciu linii i obejmuje iOS, Android, tryb ciemny i instalację PWA.
For a longer walkthrough with FAQ and troubleshooting, see our step-by-step tutorial.
Pojedynczy tag, który respektuje każda przeglądarka, to <link rel="icon" href="/favicon.ico">. Upuść favicon.ico w katalogu głównym swojej witryny i gotowe w 80%.
Pozostałe 20% — warianty apple-touch-icon, PNG, SVG z obsługą trybu ciemnego i manifest internetowy — to właśnie to odróżnia domyślną ikonę od dopracowanego doświadczenia marki.
Jak to działa
- 1
Wygeneruj swój pakiet favicon
Użyj generatora pakietów FetchFavicon — tworzy każdy potrzebny plik wraz ze znacznikami gotowymi do wklejenia.
- 2
Upuść pliki w katalogu głównym witryny
favicon.ico, apple-touch-icon.png, android-chrome-192/512.png, site.webmanifest.
- 3
Wklej fragment kodu do <head>
Sześć tagów <link> + jeden <meta name="theme-color">.
Wypróbuj teraz
Pobierz fragment HTML
Generator FaviconFAQ
Gdzie trafiają tagi <link>?+
Wewnątrz <head>, gdziekolwiek — kolejność nie ma znaczenia, o ile są one wcześniejsze niż </head>.
Czy potrzebuję zarówno .ico, jak i PNG?+
Tak. .ico jest uniwersalnym rozwiązaniem; PNG renderuje najostrzej na ekranach o wysokiej rozdzielczości.
A co z trybem ciemnym?+
Wyślij wariant SVG, który osadza zapytanie o media dotyczące preferowanego schematu kolorów w swoim bloku <style>.