Rozmiary favicony i kod HTML (2026): krótka lista | We.Inc
Pliki favicony, których strona naprawdę potrzebuje w 2026 roku: favicon.ico, SVG, ikona Apple touch 180px oraz ikony manifestu 192 i 512, z tagami head do skopiowania i kreatorem manifestu.
Pięć plików obsługuje niemal każdą przeglądarkę i urządzenie: favicon.ico 32 na 32, ikona SVG dla nowoczesnych przeglądarek, PNG apple-touch-icon 180 na 180 dla ekranów głównych iPhone'a oraz pliki PNG 192 na 192 i 512 na 512 wymienione w manifeście aplikacji webowej. Wyszukiwarka Google oczekuje kwadratowej ikony, najlepiej większej niż 48 pikseli.
Zestaw favicon, który warto wdrożyć
Plik
Rozmiar
Kto z niego korzysta
Dowolny (wektor)
Karty nowoczesnych przeglądarek, ostra w każdym rozmiarze
Ekran główny iPhone'a i iPada
Manifest aplikacji webowej, ekran główny Androida
Manifest aplikacji webowej, ekrany instalacji i powitalne
Starsze poradniki o faviconach wymieniają dwadzieścia lub więcej rozmiarów dla urządzeń, z których nikt nie korzysta. Dziś przeglądarka skaluje kilka dobrych plików źródłowych, więc zadanie polega na wybraniu właściwych pięciu, poprawnym napisaniu tagów head i upewnieniu się, że Google może je zaindeksować. Użyj poniższego kreatora, aby wygenerować tagi i manifest dla swojej strony.
Zaprojektuj jeden kwadratowy wzorzec 512 na 512 ze znakiem na środku i odrobiną marginesu.
Wyeksportuj pięć plików z tabeli albo utwórz je naszym generatorem favicony.
Uzupełnij kreator nazwą i kolorem strony, a potem skopiuj tagi head i manifest.
Prześlij pliki do katalogu głównego strony, wklej tagi do sekcji head każdej strony i wymuś pełne odświeżenie, aby sprawdzić efekt.
Przetestuj osobno wersję 16 pikseli: drobny tekst i cienkie linie znikają w rozmiarze karty, więc uprość znak.
Dodaj do SVG media query dla trybu ciemnego, aby ciemne logo pozostało widoczne na ciemnych kartach przeglądarki.
Trzymaj ważną część ikony maskable wewnątrz środkowego koła o promieniu 40% szerokości, bo Android może przyciąć resztę.
Nie blokuj plików ikon ani strony głównej w robots.txt: Google musi zaindeksować oba, aby pokazać Twoją faviconę w wynikach.
Przeglądarki agresywnie buforują favicony, więc przy wymianie zmień nazwę pliku lub dodaj parametr wersji.
Najczęściej zadawane pytania
Jaki rozmiar favicony jest najlepszy?
Nie ma jednego najlepszego rozmiaru. Dodaj ICO 32 na 32 dla zgodności i SVG dla ostrych nowoczesnych kart, a potem ikonę Apple 180 pikseli oraz ikony manifestu 192 i 512 dla ekranów głównych. Wyszukiwarka Google wymaga kwadratowego obrazu o wielkości co najmniej 8 pikseli, a najlepiej większego niż 48 na 48.
Jak dodać faviconę do strony?
Umieść pliki w katalogu głównym strony i dodaj tagi link w sekcji head każdej strony: rel icon dla ICO i SVG, rel apple-touch-icon dla PNG 180 pikseli oraz rel manifest wskazujący na plik JSON z ikonami 192 i 512. Kreator na tej stronie napisze te linie za Ciebie.
Dlaczego moja favicona nie wyświetla się w Google?
Google musi zaindeksować zarówno Twoją stronę główną, jak i plik ikony, ikona musi być kwadratowa, a link musi znajdować się w sekcji head strony głównej. Zmiany mogą pojawić się z opóźnieniem, bo Google ponownie pobiera favicony według własnego harmonogramu.
Czy nadal potrzebuję favicon.ico?
Warto go zachować. Niektóre narzędzia, czytniki kanałów i starsze przeglądarki proszą bezpośrednio o /favicon.ico bez czytania Twojego HTML, a mały plik ICO w katalogu głównym im odpowiada.
Czym jest ikona maskable?
To ikona manifestu oznaczona jako purpose maskable, narysowana z dodatkowym marginesem, aby Android mógł przyciąć ją do koła, squircle lub innego kształtu. Trzymaj logo w środkowej bezpiecznej strefie i wypełnij tło od krawędzi do krawędzi.
Dlaczego lista się skróciła
Przeglądarki wybierają dziś najbliższą ikonę i ją skalują, a format SVG pozwala jednemu plikowi obsłużyć każdy rozmiar karty. Wiele dawnych rozmiarów kafelków Windows i ikon Apple dotyczyło platform, które od tamtej pory się zmieniły.
Dokumentacja Safari od Apple nadal opisuje ikony dotykowe dla poszczególnych urządzeń, ale iOS korzysta z większej ikony, gdy brak dokładnego dopasowania, więc jeden PNG 180 pikseli dobrze obsługuje obecne iPhone'y i iPady.
Ikony manifestu
Według web.dev przeglądarki oparte na Chromium wymagają w manifeście co najmniej ikony 192 pikseli i 512 pikseli, zanim stronę będzie można zainstalować. Mając te dwie, Chrome automatycznie skaluje ikony dla innych gęstości.
Każda ikona manifestu może mieć purpose any, maskable lub monochrome. Użyj osobnego pliku dla maskable, bo margines pasujący do przyciętego kształtu wygląda za mało, gdy ikona jest pokazana jako kwadrat.
Jak umieścić faviconę w wynikach wyszukiwania
Wyszukiwarka Google pokazuje faviconę obok wyników, gdy znajdzie ją na Twojej stronie głównej. Obsługiwane wartości rel to icon, shortcut icon, apple-touch-icon i apple-touch-icon-precomposed.
Google akceptuje też kilka formatów, w tym ICO, PNG, GIF i JPEG. Plik ikony może nawet znajdować się w innej domenie, o ile Googlebot ma prawo go pobrać.