Zestaw Favicon, Który Działa Wszędzie w 2026
Sześć rozmiarów, jeden .ico, jeden manifest — wszystko, czego naprawdę potrzebujesz, aby wysłać favicon, który wygląda poprawnie w każdej przeglądarce, na ekranie głównym iOS i pasku zadań Windows w 2026.
Favicon'y wydają się trywialne. Wyślij jeden, a pojawia się sto przypadków brzegowych: ikona ekranu głównego iOS jest rozmyta, zakładka Android Chrome ma złą barwę, przypięte okna Windows pokazują rozmytą ikonę 16×16. Ten przewodnik przebija przez szum i obejmuje dokładnie to, czego potrzebujesz w 2026 — ni mniej, ni więcej.
Minimalny Zestaw Funkcjonalny
Sześć zasobów pokrywa każdą powierzchnię, która będzie wyświetlać ikonę Twojej witryny:
favicon.ico— wielorozmiarowy kontener zawierający 16×16, 32×32, 48×48 (starsze przeglądarki, Eksplorator Windows, przypięte karty).favicon-16x16.png,favicon-32x32.png— karty nowoczesnych przeglądarek.apple-touch-icon.png(180×180) — ekran główny iOS, lista czytania Safari.android-chrome-192x192.png,android-chrome-512x512.png— ekran główny Android, podpowiedzi instalacji PWA.site.webmanifest— konfiguracja PWA wskazująca ikony Android i definiująca kolor motywu.
To wszystko. Wszystko inne (SVG przypiętej karty Safari, stare warianty Apple touch, obrazy kafelków Windows) to dziedzictwo. Nowoczesne przeglądarki przechodzą bezproblemowo do PNG 192 lub 512.
Dlaczego .ico Wciąż Się Wysyła w 2026
Plik .ico to binarny kontener, który może zawierać wiele obrazów PNG w różnych rozmiarach. Gdy przeglądarka żąda /favicon.ico (co niektóre robią domyślnie), otrzymuje wszystkie trzy rozmiary w jednym żądaniu. Moduł renderujący wybiera ten, który najlepiej pasuje do bieżącej powierzchni — 48×48 dla Eksploratora Windows, 16×16 dla karty przeglądarki.
PNG przemianowany na .ico zawiera tylko jeden rozmiar. Przeważnie działa, ponieważ przeglądarki są wyrozumiałe, ale Eksplorator Windows i niektórzy klienci poczty będą go albo renderować rozmycie, albo odmówią wyświetlenia. Wyślij rzeczywisty .ico, jeśli chcesz spójności.
Co Robi site.webmanifest
Gdy użytkownik doda Twoją witrynę do ekranu głównego Android lub zainstaluje ją jako PWA, przeglądarka czyta site.webmanifest, aby wiedzieć, jak zainstalowana aplikacja powinna wyglądać. Definiuje:
name/short_name— etykietę pod ikoną.icons— które PNG'i używać w jakim rozmiarze.theme_color— kolor paska stanu, gdy aplikacja jest otwarta.background_color— tło ekranu powitalnego podczas uruchamiania.display— zwyklestandalone, aby aplikacja otwierała się bez elementów przeglądarki.
Bez manifestu Android przechodzi do apple-touch-icon i wyświetla Twoją witrynę w oknie przeglądarki. Z nim wygląda jak natywna aplikacja.
Fragment HTML
Każdy plik znajduje się w katalogu głównym sieci Web. Każda witryna potrzebuje tego bloku w <head>:
<link rel="icon" type="image/x-icon" href="/favicon.ico">
<link rel="icon" type="image/png" sizes="32x32" href="/favicon-32x32.png">
<link rel="icon" type="image/png" sizes="16x16" href="/favicon-16x16.png">
<link rel="apple-touch-icon" sizes="180x180" href="/apple-touch-icon.png">
<link rel="manifest" href="/site.webmanifest">
<meta name="theme-color" content="#YOUR_HEX">Projektowanie dla 16×16
Twoje piękne, szczegółowe logo ginie na 16 pikselach. Zasady tworzenia favicon'a, który jest wyraźnie czytelny w takim rozmiarze:
- Jeden kształt. Koło, kwadrat lub silny monogram. Unikajform złożonych.
- Wysoki kontrast. Pierwszoplanowy i tłoczyć muszą być oddzielone co najmniej WCAG AA. Subtelne gradienty znikają.
- Bezpieczny margines. Zostaw 10–20% padding. Przeglądarki często dodają własną krawędź 1px.
- Tekst? Jedno pogrubione litera sprawdza się lepiej niż pełne słowo na 16px.
Generator Favicon'a aukimi tworzy wszystkie sześć plików i fragment HTML z jednego obrazu lub litery w mniej niż 30 sekund. Generuje rzeczywisty multi-rozmiarowy .ico (zgodnie ze specyfikacją Microsoft ICONDIR), a nie przemianowany PNG. Prześlij, wybierz rozmiary, pobierz pakiet bez zip'u, wklej fragment — gotowe.
Częste Błędy
- Serwowanie
.icoz CDN bez nagłówków cache. Przeglądarki buforują favicon'y agresywnie. Użyj adresu URL z wersją (?v=2), aby wymusić odświeżenie po przeprojektowaniu. - Różne ikony na poddomeny. Pojedynczy
favicon.icow apex to zwykle to, czego oczekują użytkownicy — nie fragmentuj swojej tożsamości. - Zapomnienie metatabu
theme-color. Mobilna Chrome barwi element interfejsu przeglądarki, aby pasował do tej wartości. Pominięcie go pozostawia Cię z domyślną szarością.
Dobry favicon jest nudny w najlepszy możliwy sposób — użytkownicy zauważają, gdy go brakuje lub jest zły, nigdy gdy jest dobry. Wyślij sześć plików i przejdź dalej.
Podobał Ci się ten artykuł?
Powiązane Artykuły
Stos kreatywny właśnie się zawalił: Jeden tydzień narzędzi AI, koniec kwietnia 2026
Między 27 kwietnia a 4 maja 2026 roku Adobe, Luma, Novi, fal, Figma, Canva, HeyGen i Anthropic przekroczyły ten sam próg w ciągu ośmiu dni. Oto co się pojawiło, co to oznacza i gdzie to zostawia przeglądarkarskie apartamenty kreatywne, które starają się to wszystko skonsolidować.
AI Music i SFX w 2026: Co naprawdę działa w audio gier indie
Trzy lata temu audio w grach indie pochodziło albo z bibliotek royalty-free (tanio, generyczne, każda gra brzmi tak samo) albo od zatrudnionego kompozytora (świetnie, drogo). W 2026 AI generuje ścieżkę dźwiękową, która trafia do gry. Oto które narzędzia się sprawdzają — i gdzie ludzki kompozytor wciąż wygrywa.
Generowanie siatki AI w 2026 roku: Co naprawdę trafia do pipeline'ów gier
Image-to-3D przeszło od "niesamowitego demo" do "wysyłania w projektach indie" w osiemnaście miesięcy. Oto co Tripo, Meshy, Rodin i Hyper3D naprawdę robią w produkcji — i gdzie artysta 3D wciąż bije model za każdym razem.