Skip to content

Konwerter PNG na ICO (i ICO na PNG)

Konwersja PNG, JPG, SVG lub WebP na prawdziwy wielorozmiarowy plik .ico: 16, 32 i 48 px w jednym pliku, pełny kanał alfa. Do wyboru zapis jako PNG albo nieskompresowana bitmapa — oba rozmiary widać od razu. Otwiera też pliki .ico.

Bez śledzenia Działa w przeglądarce Bezpłatne
Konwersja odbywa się w całości w przeglądarce. Obraz nigdy nie jest wysyłany.

Przeciągnij obraz tutaj albo kliknij, aby wybrać

PNG, JPG, SVG, WebP, GIF lub BMP · do 10 MB

Rozmiary do spakowania

16, 32 i 48 px to zestaw, o który prosiły wytyczne Microsoftu dotyczące ikon z 1995 roku, i kombinacja, która najczęściej pojawia się w realnych plikach favicon. Rozmiar 512 nie jest oferowany: katalog przechowuje długość boku w jednym bajcie, więc nie ma dla niego poprawnej reprezentacji.

Oba warianty są dopuszczalne wewnątrz pliku .ico. PNG czyta Windows od czasów Visty i każda obecna przeglądarka; nieskompresowanej bitmapy używa realnie 13 z 14 prawdziwych plików ICO znalezionych wśród 20 zbadanych witryn, bo ImageMagick domyślnie na nią konwertuje.

Co siedzi w pliku .ico (przykład 16 + 32 + 48 px)
Przesunięcie Bajty Pole Wartość
0 2 idReserved 0
2 2 idType 1
4 2 idCount 3
6 1 bWidth[0] 16 → 16
7 1 bHeight[0] 16 → 16
8 1 bColorCount[0] 0
9 1 bReserved[0] 0
10 2 wPlanes[0] 1
12 2 wBitCount[0] 32
14 4 dwBytesInRes[0] 248
18 4 dwImageOffset[0] 54
22 1 bWidth[1] 32 → 32
23 1 bHeight[1] 32 → 32
24 1 bColorCount[1] 0
25 1 bReserved[1] 0
26 2 wPlanes[1] 1
28 2 wBitCount[1] 32
30 4 dwBytesInRes[1] 720
34 4 dwImageOffset[1] 302
38 1 bWidth[2] 48 → 48
39 1 bHeight[2] 48 → 48
40 1 bColorCount[2] 0
41 1 bReserved[2] 0
42 2 wPlanes[2] 1
44 2 wBitCount[2] 32
46 4 dwBytesInRes[2] 1464
50 4 dwImageOffset[2] 1022
Zrzut szesnastkowy, liczby bajtów i cytowane na tej stronie wyniki poleceń zostały zarejestrowane z plików wytworzonych przez to narzędzie, a każde twierdzenie o zachowaniu dekoderów sprawdzono krzyżowo względem trzech niezależnych implementacji: napisanego od zera enkodera, biblioteki Pillow 12.3.0 oraz własnego dekodera ICO w Chromium. Obserwacja, że większość realnych plików favicon używa nieskompresowanych bitmap, pochodzi z pobrania i przeanalizowania plików ikon dwudziestu znanych witryn we wrześniu 2026 roku. — Go Tools Engineering · Sep 22, 2026

Napisane i sprawdzone przez programistów, którzy budują narzędzia konwersji Go Tools. Budowa kontenera, liczby bajtów i opisane tu tryby awarii pochodzą z pisemnego przeglądu dziedzinowego, a nie z cudzych streszczeń tego formatu.

PNG na ICO — szybkie odpowiedzi

Jakie rozmiary powinien zawierać favicon.ico?

16, 32 i 48 px Te trzy pokrywają kartę przeglądarki, przełącznik Alt-Tab i pulpit, a zalecanym zestawem są od 1995 roku. Rozmiar 256 warto dodać tylko wtedy, gdy ikona ma się bronić także w widoku dużych ikon.

Czy jeden plik .ico może zawierać kilka rozmiarów?

Tak — po to właśnie powstał Ten format jest kontenerem: sześciobajtowy nagłówek, po jednym szesnastobajtowym wpisie katalogu na obraz, a potem same obrazy. Każdy z nich to osobny rysunek i właśnie dlatego dobra ikona pozostaje ostra przy 16 px.

Czy konwersja PNG na ICO traci przezroczystość?

Nie, o ile zrobi się to poprawnie Oba sposoby zapisu obrazu wewnątrz pliku .ico niosą pełny ośmiobitowy kanał alfa. Przezroczystość ginie tylko wtedy, gdy narzędzie zostawi bajty alfa puste albo pominie jednobitową maskę, którą starsze oprogramowanie czyta w zamian.

Ile waży warstwa 256 px wewnątrz pliku .ico?

264 KB bez kompresji albo kilka KB jako PNG Nieskompresowana warstwa 256 px ma dokładnie 270 376 bajtów — 40 bajtów nagłówka, 262 144 bajty pikseli i 8 192 bajty maski — niezależnie od tego, co przedstawia obraz. Zapisana jako PNG ta sama warstwa kosztuje zwykle kilka kilobajtów.

Czym jest plik ICO?

Plik .ico nie jest tyle formatem obrazu, ile małym archiwum obrazów. Zaczyna się sześciobajtowym nagłówkiem mówiącym, ile obrazków jest w środku, po którym idzie po jednym szesnastobajtowym wpisie katalogu na obrazek — z szerokością, wysokością, liczbą bajtów i pozycją w pliku — a dopiero potem same dane obrazu. Każdy obrazek może być zapisany na jeden z dwóch sposobów: jako kompletny plik PNG osadzony w całości albo jako nieskompresowana bitmapa Windows z doczepioną pod spodem jednobitową maską przezroczystości.

Taka konstrukcja sprawia, że favicon potrafi być ostry i przy 16 px na karcie przeglądarki, i przy 48 px w menedżerze plików — to są różne rysunki, dopracowane ręcznie dla każdego rozmiaru, a nie jeden obraz poddany skalowaniu. Z niej biorą się też pewne niespodzianki formatu. Długość boku mieści się w jednym bajcie, więc 256 zapisuje się jako zero, a 512 nie da się zapisać wcale. Katalog zaś notuje dla każdego wpisu rozmiar, który notują również same dane obrazu — te dwie wartości mogą się więc różnić, a różne programy wierzą różnym.

$ file favicon.ico
favicon.ico: MS Windows icon resource - 3 icons, 16x16, 32 bits/pixel, 32x32, 32 bits/pixel

$ python3 -c "from PIL import Image; print(sorted(Image.open('favicon.ico').ico.sizes()))"
[(16, 16), (32, 32), (48, 48)]

Co robi ten konwerter ICO

Jeden plik, każdy zaznaczony rozmiar

Domyślnie 16, 32 i 48 px, maksymalnie do 256. Każdy rozmiar jest rysowany osobno z oryginału w pełnej jakości, a nie pomniejszany z warstwy powyżej, dzięki czemu małe rozmiary nie dziedziczą rozmycia po większym.

PNG albo nieskompresowana bitmapa, z podanymi obydwoma rozmiarami

Dwa dopuszczalne formaty payloadu mają bardzo różne kompromisy, a większość konwerterów nigdy nie wspomina, który z nich zapisuje. Tutaj jest to przełącznik, a wynikowy rozmiar pliku pokazany dla każdego wariantu, więc decyzja opiera się na liczbie, a nie na przeczuciu.

Przezroczystość, która przetrwa obie drogi

Kanał alfa jest zapisywany w całości, a jednobitowa maska, którą starsze oprogramowanie czyta zamiast niego, jest z niego wyprowadzana, a nie zostawiana pusta. To właśnie pusta maska zamienia przezroczystą ikonę w czarny kwadrat wszędzie tam, gdzie czytana jest wyłącznie maska.

Przeglądarka zawartości ICO, a nie tylko przycisk pobierania

Odwrotna karta wypisuje każdy obraz w pliku .ico wraz z jego prawdziwym rozmiarem, formatem zapisu, głębią bitową i źródłem przezroczystości — łącznie z bitmapami opartymi na palecie, których wciąż używa kilka znanych plików favicon. Przeglądarka internetowa pokaże zawsze tylko jeden z nich.

Informuje, gdy plik jest wewnętrznie sprzeczny

Jeżeli katalog deklaruje rozmiar, z którym dane obrazu się nie zgadzają, jest to zgłaszane. Zgłaszany jest też osadzony PNG, który Firefox wyrzuci — jego dekoder ICO przyjmuje wyłącznie 8-bitowy RGB lub RGBA, więc warstwa z paletą albo w skali szarości po prostu tam znika, choć każda inna przeglądarka ją pokazuje. Oba przypadki to częste powody, dla których ikona działa w jednym programie, a w innym wyświetla się pusta, i żaden inny konwerter nie raportuje żadnego z nich.

Nic nie jest wysyłane

Odczyt, skalowanie i pakowanie odbywają się w całości na tej stronie. Plik nigdy nie trafia na serwer, więc nie ma potem czego usuwać ani w jakiej kolejce czekać.

Konwersja PNG na ICO w kodzie

ImageMagick

magick in.png -define icon:auto-resize=48,32,16 favicon.ico

Odpowiedź standardowa i zarazem powód, dla którego tyle plików favicon jest nieskompresowanych. Każda warstwa poza 256 px jest przed spakowaniem zamieniana na bitmapę, więc trzy rozmiary wychodzą na około 15 KB zamiast kilkuset bajtów. Rozmiary zapisywane są od największego.

Python + Pillow

img.save('favicon.ico', sizes=[(16,16),(32,32),(48,48)])

Osadza PNG, więc te same trzy rozmiary mieszczą się w mniej więcej dziesiątej części miejsca. Pillow dobrze też czyta ICO: Image.open(f).ico.sizes() wypisuje zawartość, co przydaje się przy sprawdzaniu cudzego pliku.

png-to-ico (npm)

npx png-to-ico icon.png > favicon.ico

Jednozadaniowe narzędzie wiersza poleceń, które bierze jeden lub więcej plików PNG i pakuje je jako payload PNG. Wygodne w skrypcie budowania; samo nie przeskaluje, więc każdy rozmiar trzeba podać jako osobny plik.

sharp

sharp(input).resize(32).png()

Świetne do wytworzenia pojedynczych plików PNG, ale nie zapisuje kontenerów ICO, więc zwykle łączy się je z jednym z powyższych pakowaczy. Częste źródło nieporozumień, gdy potok budowania jest już oparty na sharp.

Go

github.com/Kodeworks/golang-image-ico

Zapisuje jednoobrazowy plik ICO z wartości image.Image. Wystarczy do favicona w jednym rozmiarze; upakowanie kilku rozmiarów w jeden kontener oznacza samodzielne napisanie katalogu, czyli jakieś trzydzieści linii.

Kompilatory zasobów Windows

skrypt zasobów .rc, rc.exe

Tak normalnie powstają ikony aplikacji. Kompilator osadza plik .ico w sekcji zasobów pliku wykonywalnego; kontener w środku ma dokładnie ten sam format co favicon w internecie.

GIMP

Plik → Wyeksportuj jako → .ico

Eksportuje każdą warstwę obrazu jako jeden rozmiar ikony i pozwala wybrać głębię bitową osobno dla każdej warstwy, łącznie ze skompresowanym PNG. Jedno z nielicznych narzędzi graficznych, które ten wybór pokazuje, zamiast decydować po cichu.

macOS sips

sips -s format ico in.png --out favicon.ico

macOS jednak ma zapis do ICO: sips --formats pokazuje com.microsoft.ico jako zapisywalny, a powyższe polecenie wygenerowało tu poprawny plik. Czego nie zrobi, to spakowania kilku rozmiarów — wyjściem była pojedyncza warstwa 48×48. iconutil, zwykle podsuwany przez wyniki wyszukiwania, tworzy .icns, własny kontener Apple, którego Windows i przeglądarki nie czytają.

PNG na ICO, bajt po bajcie

Pierwsze 38 bajtów pliku .ico z trzema rozmiarami

$ xxd -l 38 favicon.ico
00000000: 0000 0100 0300 1010 0000 0100 2000 e903  ............ ...
00000010: 0000 3600 0000 2020 0000 0100 2000 6c05  ..6...  .... .l.
00000020: 0000 1f04 0000                           ......

0000 to pole zarezerwowane, 0100 to typ 1 (ikona, nie kursor), 0300 mówi, że obrazów jest trzy. Dalej idzie pierwszy szesnastobajtowy wpis katalogu: 10 10 to 16×16, 00 liczba kolorów, 00 pole zarezerwowane, 0100 jedna płaszczyzna, 2000 32 bity na piksel, e903 0000 to 1 001 bajtów payloadu pod przesunięciem 3600 0000 = 54 — czyli dokładnie 6 + 3 × 16, koniec katalogu. Wszystkie liczby wielobajtowe są little-endian poza rozmiarami, które są pojedynczymi bajtami.

Wpis 256 px przechowuje zero, a nie 256

bWidth = 0x00    bHeight = 0x00
256 × 256

Katalog ma po jednym bajcie na każdy bok, więc 255 to największa liczba, jaka się w nim mieści, a 0 z definicji oznacza 256. Dlatego nigdzie na tej stronie nie ma 512 px: nie istnieje bajt, który znaczyłby 512. Kilka konwerterów online i tak to oferuje, zapisując obraz 512 px za wpisem katalogu, który nie jest w stanie go opisać.

Te same trzy rozmiary, dwa sposoby zapisu

16 + 32 + 48 px, PNG payloads
16 + 32 + 48 px, uncompressed BMP payloads
389 bytes
15,086 bytes

Nieskompresowany payload kosztuje 40 + szerokość × wysokość × 4 bajty plus maska jednobitowa, więc jego rozmiar zależy wyłącznie od wymiarów, a w ogóle nie od tego, co przedstawia obraz. Właśnie dlatego trzy różne serwisy mogą wysyłać trzy zupełnie odmienne ikony w plikach o identycznej długości.

Ten sam plik zbudowany z wiersza poleceń

$ magick logo.png -define icon:auto-resize=48,32,16 favicon.ico
$ file favicon.ico
favicon.ico: MS Windows icon resource - 3 icons, 48x48, 32 bits/pixel, 32x32, 32 bits/pixel

ImageMagick przed spakowaniem zamienia każdą warstwę poza 256 px na nieskompresowaną bitmapę i dlatego jego wynik ma około 15 KB zamiast kilkuset bajtów. Pillow robi odwrotnie i osadza PNG: Image.open('logo.png').save('favicon.ico', sizes=[(16,16),(32,32),(48,48)]).

Rozpakowanie pliku .ico z powrotem

$ magick favicon.ico favicon-%d.png
favicon-0.png   48×48
favicon-1.png   32×32
favicon-2.png   16×16

Przeglądarka tego nie zrobi. Podanie wielorozmiarowego pliku .ico do znacznika <img> daje dokładnie jeden obraz — największy — niezależnie od kolejności rozmiarów. Wypisanie tego, co naprawdę siedzi w pliku, wymaga samodzielnego odczytania kontenera, i dokładnie to robi karta ICO → PNG.

Jak przekonwertować PNG na ICO

  1. 1

    Przeciągnij obraz

    Akceptowane są PNG, JPG, SVG, WebP, GIF i BMP, do 10 MB. Nic nie opuszcza przeglądarki: plik jest odczytywany przez File API, a każdy piksel rysowany na lokalnym elemencie canvas.

  2. 2

    Wybierz rozmiary

    Na start zaznaczone są 16, 32 i 48 px. Warto dodać 64, 128 albo 256, jeżeli ikona ma przetrwać widok dużych ikon lub pulpit o wysokiej gęstości pikseli. Jeżeli plik źródłowy jest mniejszy od największego zaznaczonego rozmiaru, strona o tym powie, zamiast po cichu go powiększyć.

  3. 3

    Wybierz format zapisu

    PNG jest domyślne, bo jest o rząd wielkości mniejsze i czyta je każda obecna przeglądarka oraz każdy Windows od czasów Visty. Nieskompresowana bitmapa przydaje się wtedy, gdy potrzebna jest postać, w której realnie występuje większość plików favicon. Oba rozmiary pliku są pokazane obok siebie.

  4. 4

    Pobierz i podłącz

    Wystarczy zapisać plik .ico i użyć przycisku „Kopiuj znaczniki link”, aby dostać gotowe znaczniki. Ścieżka /favicon.ico w katalogu głównym nadal działa jako rozwiązanie zapasowe, ale to jawny element link jest ścieżką, którą przeglądarki mają sprawdzać najpierw.

Dlaczego pliki ICO bywają zepsute

Warstwa 256 px zapisana jako 255

Bajt katalogu dla obrazu 256 px musi wynosić 0. Wpisanie 255 wygląda na niegroźną pomyłkę o jeden i daje plik, którego część przeglądarek po cichu odmawia narysować.

✗ Niepoprawne
bWidth = 0xFF   bHeight = 0xFF   ; „255”, w zamyśle 256
✓ Poprawne
bWidth = 0x00   bHeight = 0x00   ; 0 z definicji oznacza 256

Katalog i obraz nie zgadzają się co do rozmiaru

Gdy wpis katalogu mówi 16×16 nad payloadem, który naprawdę ma 32×32, dekodery się dzielą: jedne ufają katalogowi i nie rysują nic, inne ufają payloadowi i renderują go poprawnie. Plik działa wtedy na jednej maszynie, a na drugiej jest niewidoczny.

✗ Niepoprawne
entry: 16×16     payload IHDR: 32×32
✓ Poprawne
entry: 32×32     payload IHDR: 32×32

Pole wysokości bitmapy nie zostało podwojone

Wewnątrz nieskompresowanej warstwy wysokość obejmuje razem dane koloru i maskę. Zapisanie zwykłej wysokości daje plik, który w jednych dekoderach wychodzi pusty, a w innych jako dolna połowa obrazu — i ani tu, ani tam nie pojawia się błąd.

✗ Niepoprawne
biHeight = 32        ; dla obrazu 32 px
✓ Poprawne
biHeight = 64        ; 2 × 32, dane koloru plus maska

Nieskompresowana warstwa z pustym kanałem alfa

Niektóre narzędzia wypełniają maskę i zostawiają każdy bajt alfa na zerze. Jeden dekoder czyta to jako obraz całkowicie przezroczysty i ikona znika; drugi wraca do maski i pokazuje ją poprawnie. Konsekwentne zapisanie obu rzeczy zamyka cały spór.

✗ Niepoprawne
alpha bytes: all 0x00   mask: all 0x00
✓ Poprawne
alpha bytes: real values   mask: set where alpha < 128

Plik SVG, który pobiera zasób z internetu

Zewnętrzne odwołania wewnątrz pliku SVG są blokowane w chwili rasteryzacji i nic tego nie zgłasza — żaden błąd nie leci, a element canvas pozostaje czytelny. Zastępczy symbol uszkodzonego obrazka zostaje po prostu wypalony w ikonie. Grafikę trzeba wkleić bezpośrednio przed konwersją.

✗ Niepoprawne
<image href="https://cdn.example.com/logo.png"/>
✓ Poprawne
<image href="data:image/png;base64,iVBORw0KGgo…"/>

Kiedy potrzebny jest konwerter PNG na ICO

Wdrożenie favicona dla nowej witryny
Wystarczy przeciągnąć logo, zostawić trzy domyślne rozmiary, pobrać favicon.ico i wrzucić go do katalogu głównego serwisu. Skopiowane znaczniki link dają nowoczesną postać tej samej ikony obok pliku SVG i ikony Apple touch.
Naprawa ikony, która w dużym rozmiarze wygląda dobrze, a w małym mętnie
Zwykle plik zawiera tylko jedną dużą warstwę, a wszystko poniżej to przeglądarka ją pomniejszająca. Rozwiązaniem jest spakowanie prawdziwej warstwy 16 px, narysowanej ze źródła, a nie z wersji 256 px.
Nadanie ikony aplikacji desktopowej
Programy Windows, instalatory i skróty przyjmują .ico, a różne części powłoki sięgają po różne rozmiary z tego samego pliku. Spakowanie 16, 32, 48 i 256 pokrywa małe ikony na listach, przełącznik Alt-Tab oraz widoki dużych ikon.
Ustalenie, dlaczego ikona renderuje się w jednym miejscu, a w innym nie
Wystarczy otworzyć plik na karcie ICO → PNG. Rozmiar błędnie opisany w katalogu, warstwa bez żadnego kanału alfa czy ucięty wpis — wszystko to pojawia się na liście, a każda poprawna warstwa nadal się eksportuje, nawet gdy sąsiednia jest uszkodzona.
Odzyskanie plików PNG ze starego .ico
Ikony odziedziczone po starym projekcie bywają jedyną zachowaną kopią logo. Odwrotna karta eksportuje każdą warstwę jako osobny plik PNG, w tym warstwy zapisane jako bitmapy z paletą, których większość konwerterów nie przyjmuje.

Co naprawdę siedzi w pliku .ico

Sześć bajtów, potem po szesnaście na obraz
Nagłówek to 00 00 pole zarezerwowane, 01 00 dla ikony (02 00 oznacza plik kursora), a następnie dwubajtowy licznik. Każdy wpis katalogu to szerokość, wysokość, rozmiar palety i bajt zarezerwowany — po jednym bajcie — po których idą dwubajtowe pola płaszczyzn i głębi bitowej oraz dwa czterobajtowe pola z długością i przesunięciem payloadu. Wszystko, co wielobajtowe, jest little-endian.
Zero oznacza 256, a 512 nie da się wyrazić
Ponieważ szerokość i wysokość to pojedyncze bajty, 256 trzeba zakodować jako 0, a cokolwiek większego nie ma kodowania w ogóle. Wpisanie 255 zamiast 0 dla warstwy 256 px nie jest bliskim przybliżeniem — daje plik, którego przeglądarki odmawiają narysować. Konwertery oferujące opcję 512 px zapisują wpisy, które nie są w stanie opisać własnej zawartości.
Nieskompresowana warstwa kosztuje dokładnie 40 + sz × w × 4 bajty, plus maska
Maska dokłada ceil(szerokość ÷ 32) × 4 bajty na wiersz. Warstwa 16 px ma zatem 1 128 bajtów, 48 px — 9 640, a 256 px — 270 376, niezależnie od tego, co obraz przedstawia. Ten stały koszt tłumaczy, dlaczego trzy niepowiązane serwisy mogą wysyłać pliki favicon o identycznej długości i dlaczego warstwa 256 px jest tutaj oferowana tylko wtedy, gdy payload to PNG.
Nagłówek bitmapy przechowuje podwojoną wysokość
Wewnątrz nieskompresowanej warstwy pole wysokości opisuje bitmapę koloru i maskę przezroczystości ułożone jedna na drugiej, więc zapisuje się je jako dwukrotność prawdziwej wysokości, nawet gdy maska nie niesie żadnej informacji. Pomyłka w tym miejscu należy do najcichszych awarii formatu: jedne dekodery dają pusty obraz, inne dolną połowę obrazka, i żaden nie zgłasza błędu.
Pola płaszczyzn, głębi bitowej i liczby kolorów to w najlepszym razie podpowiedź
Specyfikacja jest pod tym względem precyzyjna, a realne pliki ją ignorują. Własny serwis dokumentacji Microsoftu wysyła favicon, którego katalog deklaruje zero płaszczyzn i zero bitów na piksel nad payloadem o czterech bitach na piksel — i wyświetla się on wszędzie. Dekodery ustalają prawdziwy format z payloadu — z sygnatury PNG albo z nagłówka bitmapy — zamiast ufać katalogowi.
ICO nigdy nie doczekał się dokumentu RFC
Typ nośnika image/vnd.microsoft.icon został zarejestrowany w IANA we wrześniu 2003 roku, a przywoływanym w nim źródłem jest artykuł Microsoftu z 1995 roku zatytułowany „Icons in Win32”. RFC 2361, powszechnie cytowany jako specyfikacja ICO, nosi w rzeczywistości tytuł „WAVE and AVI Codec Registries” i nie mówi o obrazach zupełnie nic.

Jak dobrze zrobić favicon.ico

Do sieci spakuj 16, 32 i 48 i na tym poprzestań
Ta trójka jest zalecanym zestawem od 1995 roku i nadal jest kombinacją, która najczęściej pojawia się w realnych plikach favicon. Dodatkowe rozmiary nie są darmowe — każdy z nich to kolejna warstwa, którą przeglądarka może pobrać, zanim zorientuje się, której właściwie potrzebuje.
Narysuj warstwę 16 px, nie tylko pomniejszaj dużą
Logo działające przy 256 px zwykle traci cienkie kreski, zanim dojdzie do 16. Jeżeli mały rozmiar ma znaczenie, trzeba uprościć dla niego grafikę — mniej kształtów, grubsze linie — i spakować tę uproszczoną wersję jako osobną warstwę.
Używaj elementu link i zostaw /favicon.ico jako rozwiązanie zapasowe
Specyfikacja HTML mówi przeglądarkom jedynie, że mogą pobrać /favicon.ico, i to wyłącznie wtedy, gdy nie ma żadnego elementu link z ikoną. Jawny element link to ścieżka pewna; plik w katalogu głównym wciąż zarabia na siebie u czytników kanałów, robotów indeksujących i wszystkiego innego, co nie analizuje znaczników strony.
Dodaj rozmiar powyżej 48 px, jeżeli liczą się wyniki wyszukiwania
Wytyczne Google dotyczące favicona wymagają kwadratowego obrazu o boku co najmniej 8 px i zalecają wyjście powyżej 48 px, żeby ikona broniła się na różnych powierzchniach. PNG jest przy tym akceptowane równie chętnie co ICO, więc duży rozmiar wcale nie musi mieszkać w pliku .ico.
Sprawdź plik, a nie tylko na niego popatrz
Ikona, która renderuje się w przeglądarce, wciąż może być błędna: niezgodny wpis katalogu, brakujący kanał alfa czy nieczytelna warstwa nie powstrzymają wyświetlenia tego jednego obrazu, który przeglądarka wybrała. Otwarcie pliku na odwrotnej karcie pokazuje je wszystkie.

PNG na ICO — najczęstsze pytania

Jak przekonwertować plik PNG na ICO?
Wystarczy przeciągnąć PNG na tę stronę, zostawić zaznaczone 16, 32 i 48 px i pobrać wynik. Wszystko dzieje się w przeglądarce, więc obraz nigdy nie jest wysyłany. W wierszu poleceń zwykłym odpowiednikiem jest magick logo.png -define icon:auto-resize=48,32,16 favicon.ico.
Dlaczego moja ikona wygląda na rozmytą w małych rozmiarach?
Niemal zawsze dlatego, że plik zawiera jeden duży obraz, a wszystko małe to przeglądarka pomniejszająca go w locie. Gdy siatka pikseli się kurczy, żadna konwersja nie jest bezstratna — cienkie kreski i drobne detale znikają poniżej mniej więcej 24 px niezależnie od jakości ponownego próbkowania, więc o jakości decyduje to, które rozmiary zostały spakowane, a nie konwerter. Trzeba spakować prawdziwą warstwę 16 px, a przy rozbudowanym logo uprościć dla niej grafikę, zamiast ją skalować.
Obrazy w środku powinny być w PNG czy w nieskompresowanej bitmapie?
PNG, o ile nie ma powodu, żeby było inaczej: jest o rząd wielkości mniejsze i czyta je każda obecna przeglądarka oraz każde wydanie Windows od Visty. Nieskompresowane bitmapy pozostają w praktyce częstszym wyborem, głównie dlatego, że ImageMagick domyślnie na nie konwertuje, i są bezpieczniejsze przy bardzo starym oprogramowaniu. Strona pokazuje oba rozmiary pliku, więc decyzję można oprzeć na liczbie.
Dlaczego nie ma opcji 512 px?
Katalog przechowuje długość każdego boku w jednym bajcie, więc największa wartość, jaką da się wyrazić, to 255, a 0 jest zarezerwowane dla 256. Zapisanie 512 nie jest możliwe. Konwertery, które to oferują, wytwarzają wpis katalogu nieopisujący obrazu, który za nim stoi — a to dobry sposób na ikonę, której część oprogramowania odmówi wyświetlenia.
Czy PNG z przezroczystym tłem pozostaje przezroczysty po zapisaniu jako ICO?
Tak. Kanał alfa jest zapisywany w całości, a jednobitowa maska, którą starsze oprogramowanie czyta w zamian, jest z niego wyprowadzana, a nie zostawiana pusta — i to właśnie pusta maska zamienia przezroczyste tło w czarny kwadrat w narzędziach, które jej nie wypełniają. Piksel częściowo przezroczysty liczy się w masce jako przezroczysty, gdy jego alfa spadnie poniżej połowy — to jedyny dostępny wybór, skoro maska ma jeden bit na piksel.
Czy mogę przekonwertować SVG na ICO?
Tak, a źródło wektorowe jest najlepszym możliwym wejściem, bo każdy rozmiar jest rysowany z geometrii, a nie próbkowany ponownie z bitmapy. Jedno zastrzeżenie: wszystko, co plik SVG pobiera przez sieć — podlinkowany obraz, zdalny krój pisma, zaimportowany arkusz stylów — jest w trakcie konwersji blokowane bez zgłoszenia błędu. Strona sprawdza takie odwołania i ostrzega.
Czy nadal potrzebuję pliku favicon.ico w katalogu głównym witryny?
Warto go mieć, ale nie jest już główną ścieżką. Specyfikacja HTML mówi, że przeglądarki mogą poprosić o /favicon.ico, i tylko wtedy, gdy strona nie ma elementu link z ikoną. To element link mają wykorzystać najpierw; plik w katalogu głównym pokrywa czytniki kanałów, roboty indeksujące i wszystko inne, co nigdy nie analizuje kodu HTML.
Czy Google potrzebuje pliku ICO do wyników wyszukiwania?
Nie. Dokumentacja Google dotycząca favicona przyjmuje BMP, GIF, ICO, PNG, JPEG, PPM i TIFF, wymaga kwadratowego obrazu o boku co najmniej 8 px i zaleca wyjście powyżej 48 px, żeby dobrze wyglądał na różnych powierzchniach. Wystarczy pojedynczy duży plik PNG; plik .ico jest dla całej reszty.
Dlaczego przeglądarka pokazuje tylko jeden rozmiar, gdy otwieram plik .ico?
Bo tyle właśnie potrafi dać element obrazu. Podany przeglądarce wielorozmiarowy plik .ico sprawia, że wybiera ona jeden obraz — w praktyce największy — a reszta pozostaje nieosiągalna. Wypisanie każdej warstwy wymaga bezpośredniego odczytania kontenera, i to właśnie robi karta ICO → PNG na tej stronie.
Co oznacza sytuacja, w której katalog i obraz nie zgadzają się co do rozmiaru?
Oznacza, że plik jest wewnętrznie sprzeczny, a dekodery radzą sobie z tym w przeciwny sposób: jedne ufają katalogowi i kończą, nie rysując niczego, inne ufają danym obrazu i renderują je poprawnie. To klasyczna przyczyna ikony, która działa na jednej maszynie, a na drugiej jest niewidoczna, dlatego ta strona zgłasza taki przypadek przy otwarciu pliku.
Czy to narzędzie otworzy pliki ICO odrzucane przez inne konwertery?
Często tak. Warstwy zapisane jako bitmapy z paletą — cztery albo osiem bitów na piksel — wciąż występują w kilku znanych plikach favicon, a wiele konwerterów odrzuca je wprost. Uszkodzone warstwy są ponadto obsługiwane pojedynczo, więc jeden nieczytelny rozmiar nie blokuje eksportu pozostałych. Lista oznacza też każdą osadzoną warstwę PNG, którą Firefox odrzuci: jego dekoder ICO przyjmuje wyłącznie 8-bitowy RGB lub RGBA, więc PNG z paletą albo w skali szarości tam znika. Własna witryna Mozilli wysyłała ikonę dokładnie z tym problemem — jej warstwa 64 px to PNG z paletą, który sam Firefox porzuca, i tylko pozostałe warstwy utrzymują ikonę widoczną.
Czy mój obraz jest gdziekolwiek wysyłany?
Nie. Plik jest odczytywany przez przeglądarkowe File API, rysowany na elemencie canvas na tej stronie i pakowany do kontenera przez JavaScript działający lokalnie. Żadne żądanie nie przenosi obrazu nigdzie dalej, co można potwierdzić w panelu sieci w narzędziach deweloperskich — albo wczytując stronę, odłączając się od sieci i mimo to wykonując konwersję bez połączenia.

Powiązane narzędzia

Zobacz wszystkie narzędzia →