Przewodnik

Favicon (.ico) vs PNG

ICO i PNG nie są konkurentami — są partnerami. Nowoczesna konfiguracja favicon wykorzystuje .ico jako uniwersalną opcję zastępczą i PNG jako zastąpienie wysokiego DPI. Oto dokładnie moment, w którym każdy wygrywa.

Check favicons on any website

Install the FetchFavicon Chrome Extension to extract, preview, and validate favicons instantly.

Install Chrome Extension

ICO jest wyjątkowy, ponieważ pojedynczy plik zawiera wiele rozdzielczości. Przeglądarka lub system operacyjny wybiera najbliższe dopasowanie w momencie rysowania — bez skalowania w górę i bez rozmytych krawędzi.

PNG jest ostrzejszy w dowolnej indywidualnej rozdzielczości i obsługuje lepszą kompresję logo w jednolitym kolorze. Nie można osadzić wielu rozmiarów w jednym pliku.

Optymalna konfiguracja to jeden plik .ico o wielu rozmiarach oraz samodzielne pliki PNG 32×32 i 180×180 dla przeglądarek o wysokiej rozdzielczości oraz iOS.

Jak to działa

  1. 1

    Zacznij od źródła 512×512

    PNG lub SVG.

  2. 2

    Wygeneruj oba formaty

    FetchFavicon generuje wielowymiarowy plik .ico oraz samodzielne pliki 16/32/48/180/192/512 PNG.

  3. 3

    Połącz oba w <head>

    <link rel="icon" href="/favicon.ico">, po którym następuje <link rel="icon" type="image/png" size="32x32" href="/favicon-32x32.png">.

Wypróbuj teraz

Wygeneruj zarówno .ico, jak i PNG

Konwerter PNG na ICO

FAQ

Który ma mniejszy rozmiar pliku?+

Pojedynczy plik PNG jest mniejszy niż plik .ico o tej samej rozdzielczości, ale plik .ico o wielu rozmiarach zastępuje 4-6 plików PNG i zwykle wygrywa pod względem całkowitej liczby bajtów.

Czy Google wyświetla ikony ulubionych PNG w wynikach wyszukiwania?+

Tak. Google obsługuje zarówno .ico, jak i PNG. Preferuje kwadratowy współczynnik proporcji co najmniej 48 × 48.

Czy PNG obsługuje tryb ciemny?+

Nie bezpośrednio. Użyj wariantu SVG razem z PNG, aby uzyskać obsługę trybu ciemnego.

Powiązane narzędzia

Więcej przewodników

Przewodniki