Najlepsze rozmiary Favicon dla stron internetowych

favicon jest skalowany do wielu fizycznych pikseli: 16 × 16 na karcie, 32 × 32 na pasku zakładek Retina, 180 × 180 na ekranie głównym iPhone'a, 512 × 512 na ekranie powitalnym PWA. Jeden obraz nie może dobrze służyć wszystkim.

Skalowanie małego źródła powoduje rozmycie. Zmniejszanie szczegółowej rozdzielczości 1024 × 1024 bez testowania powoduje utratę drobnych linii. Poprawka to mały zestaw specjalnie zaprojektowanych eksportów lub jeden rozmiar .ico o wielu rozmiarach, który osadza typowe ramki pulpitu.

Wysyłka każdego rozmiaru wymienionego w starych postach na blogu jest marnotrawstwem. Wysyłka zbyt małej liczby pozostawia widoczną lukę na jednej platformie. Poniższa matryca odzwierciedla rzeczywiste żądania zmierzone w przeglądarkach z 2026 roku.

Use our favicon generator, PNG to ICO converter, SVG to ICO converter, and live favicon tester to build and verify your icon set, and read the companion guide for a condensed walkthrough.

Karty pulpitu zazwyczaj renderują ikonę pikseli 16 × 16 CSS, która jest mapowana na piksele urządzenia 16 × 16 lub 32 × 32 w zależności od gęstości wyświetlania.

Paski zakładek i przypięte karty często mają wymiary 32 × 32 lub 48 × 48. Chromium może automatycznie wybrać najbliższą osadzoną klatkę spośród favicon.ico.

Wszystkie trzy popularne rozmiary zakładek (16, 32, 48) mieszczą się wygodnie w jednym uniwersalnym rozmiarze .ico. Dlatego kontener .ico pozostaje najskuteczniejszym formatem dostarczania na komputery stacjonarne.

Windows Menu Start, pinezki na pasku zadań i skróty Eksploratora plików mogą wymagać rozdzielczości 24 × 24, 32 × 32, 48 × 48, 64 × 64, 128 × 128 lub 256 × 256 w zależności od kontekstu i skalowania wyświetlacza.

Microsoft dokumentuje numery 16, 24, 32, 48, 64, 128 i 256 jako praktyczny zestaw dla aplikacji Windows. Sieci favicon korzystają z łączenia co najmniej 16 do 256 w favicon.ico.

macOS preferuje .icns w przypadku aplikacji natywnych, ale chętnie wykorzystuje .ico i PNG w przypadku skrótów internetowych. iOS ignoruje .ico dla ikon na ekranie głównym i chce dedykowanego PNG 180 × 180 za pomocą ikony Apple-Touch.

Manifesty aplikacji internetowych wymagają ikon o dowolnym przeznaczeniu i opcjonalnie maskowanych. Typowe rozmiary to 192 × 192 i 512 × 512 PNG.

Android Chrome używa ikon manifestu do interfejsu instalacji i ekranów powitalnych. Źródło 512×512 skaluje w sposób czysty; manifest zawierający tylko 192 × 192 wygląda miękko na telefonach z najwyższej półki.

iOS nie odczytuje ikon manifestu w celu umieszczenia na ekranie głównym. Musisz zadeklarować <link rel="apple-touch-icon" sizes="180x180" href="/apple-touch-icon.png">.

16×16 — zakładki przeglądarki (1× gęstość). 32×32 — karty i zakładki na wyświetlaczach Retina. 48×48 — niektóre konteksty interfejsu użytkownika Windows i zastosowania starszych zakładek.

64×64 i 128×128 — skróty Windows przy wyższym skalowaniu. 256×256 — przypięte kafelki Windows i podglądy w wysokiej rozdzielczości.

180×180 — ikona dotyku Apple (iOS / iPadOS). 192×192 i 512×512 — ikony manifestu PWA dla Android i monity dotyczące instalacji.

Blog osobisty: favicon.ico tylko z datą 16/32/48. Dopuszczalne, jeśli nie zależy Ci na polerowaniu ekranu głównego iOS.

Witryna marketingowa firmy: pakiet .ico plus ikona Apple-Touch o wymiarach 180 × 180 oraz PNG 32 × 32 <link> dla wyraźnych zakładek Retina.

Instalowalne PWA: pełne .ico, ikona Apple-Touch, manifest 192 + 512, opcjonalnie SVG dla skalowalnego interfejsu użytkownika Chrome.

Aplikacja komputerowa Electron: Windows .ico z 16–256; macOS .icns oddzielnie w przypadku dystrybucji poza przeglądarką.

Wiele rozmiarów favicon.ico (16, 32, 48, 64, 128, 256) w /favicon.ico.

apple-touch-icon.png w rozdzielczości 180×180 dla ekranów głównych iOS.

Jeden 512×512 PNG w site.webmanifest dla powierzchni instalacyjnych Android.

To trio pokrywa około 95% żądań ikon w świecie rzeczywistym. Dodaj SVG, jeśli chcesz nieskończonego skalowania i stylizacji w trybie ciemnym w nowoczesnych zakładkach.

Czy potrzebuję 16×16 PNG, jeśli znajduje się on w .ico? Nie, chyba że chcesz jawnego <link rel="icon" sizes="16x16"> do debugowania.

Czy rozmiar 120×120 jest nadal wymagany? To był stary rozmiar iOS. Nowoczesne Safari oczekuje 180 × 180.

A co z 64×64 favicon? Przydatne wewnątrz .ico dla Windows; rzadko potrzebny jako samodzielny PNG.

Czy mogę pominąć 256×256? Tylko jeśli nie interesują Cię podglądy skrótów Windows o wysokiej rozdzielczości. Większość zespołów to uwzględnia.

Ikona iOS ma zaokrąglone rogi i wygląda na przyciętą: to jest maskowanie iOS — projekt z bezpiecznym wypełnieniem, a nie błąd w pliku.

Instalacja PWA wyświetla ogólną ikonę: brakuje ikon manifestu lub są one mniejsze niż minimum 192×192. Sprawdź poprawność JSON za pomocą Chrome DevTools → Aplikacja.

Ikona karty miękka na komputerze Mac Retina: upewnij się, że favicon.ico zawiera ramkę 32 × 32, a nie tylko 16 × 16.

Ogromne pobieranie .ico: osadziłeś nieskompresowany plik 256×256 BMP. Odbuduj z kompresją PNG wewnątrz pojemnika.

Piksele CSS nie są pikselami fizycznymi. Miejsce na karty 16 × 16 na wyświetlaczu 2 × często ładuje bitmapę 32 × 32 w celu zapewnienia ostrości.

Dlatego favicon.ico zawierający zarówno 16, jak i 32 klatki przewyższa pojedynczy 16 × 16 PNG na MacBookach Retina i laptopach Windows o wysokim DPI.

Android PWA wyświetlają ikony manifestu na ekranach powitalnych w pełnej rozdzielczości urządzenia — źródło 192 × 192 rozciągnięte do telefonu 1440p wygląda miękko; 512×512 skaluje się w sposób czysty.

iOS stosuje własną maskę i promień narożnika do zasobów z ikoną Apple Touch. Konstrukcja z bezpieczną wyściółką, dzięki czemu ważne krawędzie nie są przycinane przez squircle.

Podczas testowania wykonaj zrzut ekranu karty przy 100% powiększeniu przeglądarki i 200% skalowaniu systemu operacyjnego. Jeśli oba wyglądają wyraźnie, matryca rozmiarów jest prawdopodobnie prawidłowa.

Pobierz favicon.ico i otwórz go w narzędziu wyświetlającym listę osadzonych ramek. Potwierdź, że istnieje 16, 32, 48 i co najmniej jedna ramka o dużym rozmiarze.

Pobierz apple-touch-icon.png i sprawdź wymiary w dowolnym inspektorze obrazów — spodziewaj się 180×180, a nie 120×120 z przestarzałych szablonów.

Otwórz site.webmanifest i sprawdź, czy ikony [] zawierają 192 × 192 i 512 × 512 z poprawnymi ścieżkami i typami obrazów/png.

Załaduj swoją witrynę w Chrome DevTools → Aplikacja → Manifest. Brakujące lub nieprawidłowe wpisy wyświetlają ostrzeżenia, zanim użytkownicy zobaczą okno dialogowe uszkodzonej instalacji.

Zachowaj arkusz kalkulacyjny mapujący każdy plik na jego konsumenta (zakładka, iOS, PWA, Windows). W przyszłości nie będziesz musiał odtwarzać folderu zasobów podczas rebrandingu.

Nowe klasy urządzeń pojawiają się powoli w krainie favicon. Ikony manifestu o wymiarach 512 × 512 obejmują obecnie składane i instalowane na tabletach interfejsy użytkownika lepsze niż samo 192.

Unikaj egzotycznych rozmiarów (96 × 96, 120 × 120), chyba że dokumentacja konkretnej platformy nadal ich wymaga – zwiększają one obciążenie autorskie bez ogólnych korzyści.

Przechowuj wektor główny lub raster 1024 × 1024 w repozytorium projektu, nawet jeśli nigdy go nie wyślesz. Przyszłe platformy mogą wymagać większych ikon manifestu.

Zautomatyzuj regenerację z wzorca, więc gdy pojawi się nowy zalecany rozmiar, możesz ponownie uruchomić skrypt zamiast ręcznie eksportować w Photoshopie.