> ## Content Index > Fetch the complete content index at: https://www.tool-cloud.com/blog/pl/llms.txt > Use this file to discover other available public pages before exploring further. # Jak stworzyć favicon z logo (wyjaśniono wszystkie rozmiary) - URL: https://www.tool-cloud.com/blog/pl/jak-stworzyc-favicon-z-logo-wyjasniono-wszystkie-rozmiary/ - Published: 2026-10-04T23:09:46.000Z - Updated: 2026-10-04T23:25:06.000Z - Description: Zamień swoje logo na wyraźny favicon. Sprawdź, które rozmiary nadal mają znaczenie, jak przygotować logo w formacie PNG, JPG lub SVG oraz dokładnie, gdzie każdy plik należy umieścić w kodzie HTML. - Author: Tool Cloud Team - Tags: Poradniki, Obrazy, Formaty plików Aby stworzyć favicon z logo, zacznij od kwadratowego logo (SVG lub PNG o rozmiarze 512x512 lub większym). Wyeksportuj plik favicon.ico, najlepiej z zawartymi wersjami 16, 32 i 48 pikseli, następnie dodaj ikonę Apple o rozmiarze 180x180 oraz pliki PNG 192/512 dla manifestu i połącz je w kodzie HTML. To pięć plików (ICO, SVG, ikona Apple i dwa pliki PNG dla manifestu), a nie dziesiątki. Oto jak utworzyć każdy z nich i gdzie go umieścić. ## Krótka odpowiedź: potrzebne pliki favicon Współczesny minimalny zestaw to jeden plik ICO, jeden SVG, jedna ikona dotyku Apple i dwa pliki PNG dla manifestu. Osobne pliki PNG o rozmiarach 16/32/48 oraz obrazy kafelków Microsoftu są [niepotrzebne](https://seotest.app/blog/how-to-make-a-favicon-png-ico-svg-apple-touch), jeśli masz wielorozmiarowy plik ICO. | Plik | Rozmiar | Przeznaczenie | Używany przez | | -------------------- | -------------------- | ---------------------------------------------------------- | -------------------------------------------------------------- | | favicon.ico | 16, 32, 48 spakowane | Klasyczny favicon, zapasowe rozwiązanie w katalogu głównym | Karty przeglądarki, czytniki kanałów RSS, boty podglądu linków | | favicon.svg | Skalowalny | Ostra ikona w dowolnym rozmiarze | Współczesne przeglądarki desktopowe | | apple-touch-icon.png | 180x180 | Ikona ekranu głównego | iPhone i iPad | | icon-192.png | 192x192 | Ikona uruchamiająca | Android Chrome, manifest PWA | | icon-512.png | 512x512 | Ikona instalacji i ekranu powitalnego | Android Chrome, manifest PWA | ![Lśniący, zaokrąglony niebieski emblemat w kształcie kwadratu z gwiazdowatym wgłębnieniem znajduje się nad wachlarzem płaskich, zaokrąglonych kształtów kart plików w…](https://www.tool-cloud.com/blog/pl/content/images/2026/10/how-to-create-a-favicon-from-a-logo-img-1.webp) Jedno główne logo, pomniejszone do zgrabnego zestawu plików favicon. Wiele generatorów dostarcza Ci archiwum ZIP z kilkunastoma plikami, których większość przeglądarek nie wymaga. Plik bazowy o rozmiarze 512x512 wystarczy, więc nigdy nie musisz tworzyć niczego większego. ## Wyjaśnienie rozmiarów favicon: do czego służy każdy z nich ### favicon.ico (16, 32, 48) ICO to kontener, który przechowuje kilka bitmap w jednym pliku. Standardowy pakiet jakościowy to 16, 32 i 48 pikseli; dodaj 256 tylko wtedy, gdy zależy Ci na dużych ikonach Windows. Warto go mieć. Roboty indeksujące, czytniki kanałów RSS i boty podglądu linków często pobierają /favicon.ico z katalogu głównego domyślnie. Chromium zachowuje się inaczej: w opublikowanym teście żądań pobierało /favicon.ico tylko wtedy, gdy strona nie deklarowała żadnej ikony. Przy zadeklarowanym SVG żądało tylko SVG i preferowało plik ICO nad samodzielne łącza PNG. **Pomiń samodzielny plik PNG 32x32.** Niektóre poradniki go wymieniają, ale ten test pokazał, że jest on nieużywany, gdy obecny jest plik ICO. Test obejmował tylko Chromium, więc zachowanie Firefoksa i Safari nie zostało przetestowane. ### favicon.svg Favicon w formacie SVG działa w Chrome 80+, Firefox 41+ i Edge. Obsługa w Safari jest nowsza i niepełna, a favicony SVG nie działają w Safari na iOS. Traktuj SVG jako uzupełnienie, nigdy jako zamiennik pliku ICO. ### apple-touch-icon (180x180) 180x180 to rozmiar dla Retina iPhone’a (60pt przy skali 3x). Jeden plik 180 pikseli wystarczy: iOS skaluje go dla innych urządzeń, w tym iPadów. ### Ikony manifestu (192 i 512) Android Chrome i zainstalowane aplikacje webowe odczytują ikony z manifestu aplikacji webowej. Plik 192 pikseli to ikona uruchamiająca, a plik 512 pikseli to ikona instalacji/ekranu powitalnego. ### Czego potrzebuje Google Search Google odczytuje ikonę ze Twojej strony głównej. Działa dowolny poprawny format favicon, w tym ICO, PNG i SVG. Musi być kwadratowa i mieć co najmniej 8x8 pikseli. Google zaleca rozmiar większy niż 48x48, będący wielokrotnością 48, i możesz mieć jedną ikonę na nazwę hosta. Jeśli ikona jest nieodpowiednia, Google podmienia ją na zwykły globus. ## Przygotuj swoje logo przed eksportem ### Kwadratowe, duże i przezroczyste Najlepszym źródłem jest SVG. W przeciwnym razie użyj kwadratowego PNG o rozmiarze 512x512 lub większym. Tylko zmniejszaj rozmiar: przejście z 1024 pikseli na 16 pikseli zachowuje detale krawędzi, przejście z 32 pikseli na 16 pikseli nie, a powiększanie powoduje tylko rozmycie. Jeśli Twoje logo nie jest kwadratowe, najpierw je przycnij lub dopełnij marginesem za pomocą narzędzi do przycinania i zmiany rozmiaru obrazu Tool Cloud. Zachowaj przezroczystość PNG i tryb kolorów sRGB. Nie spłaszczaj go ani nie dodawaj tła „na wszelki wypadek”. Czy favicon może być plikiem JPG? Tak, ale PNG lub SVG jest czystszy. JPG nie ma przezroczystości, więc konwersja JPG do ICO da Ci wypełniony kwadrat, a artefakty kompresji będą widoczne w malutkich rozmiarach. ### Uprość grafikę dla rozmiaru 16 pikseli Pełne logo z hasłem zamieni się w bełkot na karcie przeglądarki. Co działa: - Jedna pogrubiona marka o wysokim kontraście - Dwa lub trzy płaskie kolory - Co najwyżej jedna lub dwie pogrubione litery, bez logotypu tekstowego Przetestuj w rzeczywistym rozmiarze. Jeśli nie rozpoznasz jej w pół sekundy, uprość jeszcze bardziej. ### Porada: użyj dwóch obrazów dla najlepszego ICO Dla maksymalnej jakości użyj uproszczonej grafiki dla rozmiarów 16 i 32 oraz bardziej szczegółowej grafiki dla 48 i 256\. Stwórz dwa pliki ICO, a następnie użyj uproszczonego jako favicon.ico, a szczegółowego do skrótów Windows. Jest to opcjonalne, a jedno dobrze uproszczone logo wystarczy dla większości stron. ## Przekształć swoje logo na ICO i resztę pakietu ### Opcja 1: wygeneruj pakiet favicon Otwórz [Generator Favicon Tool Cloud](https://www.tool-cloud.com/pl/image/generate%5Ffavicon/), prześlij swoje kwadratowe logo i pobierz archiwum ZIP ze standardowymi rozmiarami favicon. Użyj plików zgodnych z powyższą tabelą i utwórz ewentualnie brakujące (takie jak SVG lub pliki PNG 192/512) oddzielnie. Ignoruj pliki, do których Twój HTML nie będzie odwoływał. ### Opcja 2: przekonwertuj logo na pojedynczy plik ICO Jeśli chcesz tylko pliku favicon.ico, użyj [Konwertera Obrazu na ICO](https://www.tool-cloud.com/pl/image/convert%5Fto%5Fico/). Prześlij swoje logo i przekonwertuj, a następnie zmień nazwę wyniku na `favicon.ico`. Sprawdź, jakie rozmiary zawiera plik ICO; jeśli brakuje wersji 16 lub 32 pikseli, użyj wcześniej wspomnianego generatora. ### Tworzenie plików PNG 180, 192 i 512 Zmień rozmiar swojego kwadratowego mastera do 180x180, 192x192 i 512x512 i nazwij je `apple-touch-icon.png`, `icon-192.png` i `icon-512.png`. Dla ikony Apple użyj nieprzezroczystego tła z wyśrodkowanym i otoczonym marginesem logo. iOS nie respektuje przezroczystości i sam zaokrągla rogi, więc nie zaokrąglaj ich wcześniej. Zawsze dostarczaj własne jednolite tło, zamiast polegać na tym, co iOS wypełni. ## Gdzie każdy plik umieszcza się w kodzie HTML ### Fragment HTML Prześlij wszystkie pliki do katalogu głównego swojej strony, a następnie dodaj to do sekcji ``. Atrybuty `sizes` opisano w [wpisie wyjaśniającym, jak Chrome wybiera ikony](https://dev.to/vannsl/the-surprisingly-weird-world-of-favicons-and-how-to-survive-it-5a2l): ```html ``` Kilka uwag: - Użyj `rel="icon"`. `rel="shortcut icon"` to przestarzałe rozwiązanie; „shortcut” jest niezarejestrowane i zbędne. - Przeglądarki wybierają plik na podstawie typu, a nie kolejności, więc kolejność nie jest krytyczna. Atrybut `type="image/svg+xml"` pozwala przeglądarkom, które nie obsługują SVG, pominąć ten format i użyć ICO. - Nadaj plikowi ICO konkretny rozmiar, a SVG – atrybut `sizes="any"`. Dodanie `any` do pliku ICO może sprawić, że Chrome będzie preferował go zamiast SVG. ### Manifest aplikacji internetowej ```json { "name": "Your Site", "short_name": "Site", "icons": [ { "src": "/icon-192.png", "sizes": "192x192", "type": "image/png" }, { "src": "/icon-512.png", "sizes": "512x512", "type": "image/png" } ] } ``` Kryteria instalacji w Chrome wymagają obecności ikon 192px i 512px. Unikaj użycia `"purpose": "any maskable"` w pojedynczym pliku. Dla ikony maskowalnej przygotuj osobny plik z grafiką umieszczoną w bezpiecznej strefie centralnej (około 409x409 pikseli na płótnie 512x512). ## Jak dodać favicon w WordPressie, Squarespace, Shopify i Wix Platformy zmieniają nazwy menu, dlatego sprawdź, co widoczne jest w Twoim panelu administracyjnym. - **WordPress:** Wygląd, Dostosuj, Tożsamość witryny, Ikona witryny. Prześlij obraz PNG o wymiarach 512x512 px. - **Squarespace:** Design, Browser Icon. Obraz PNG o wymiarach 300x300 px (kwadrat) działa dobrze (akceptowane są również pliki ICO). - **Shopify:** Ustawienia motywu, Favicon. Prześlij kwadratowy obraz PNG o wymiarach 512x512 px. - **Wix:** Ustawienia, Website settings, Favicon (może to wymagać planu premium). ## Dlaczego Twój favicon wygląda na rozmazany lub nie aktualizuje się ### Rozmazane ikony lub ikony wypełnione kwadratem Rozmycie wynika zwykle ze skalowania małego rastera lub z nadmiernie szczegółowego logo przy rozmiarze 16 px. Rozwiąż problem, używając SVG oraz pliku ICO o wymiarach 32 px lub większych, a nigdy nie skaluj obrazu 16x16 w górę. Twardy kwadrat za logiem oznacza, że źródło nie miało przezroczystości, często był to plik JPG. ### Nadal wyświetlana stara ikona Przeglądarki buforują favicony przez dni lub tygodnie. Spróbuj tych kroków w podanej kolejności: 1. Wykonaj twarde odświeżenie strony. 2. Otwórz ścieżkę /favicon.ico bezpośrednio i odśwież ją tam. 3. Dodaj parametr query string, np. `/favicon.ico?v=2`. 4. Sprawdź efekt w trybie incognito. 5. Upewnij się, że plik zwraca status HTTP 200, i wyczyść cache swojej CDN. Ikony na ekranie głównym iOS są buforowane dla każdego skrótu, więc istniejące skróty się nie zmienią, a użytkownicy muszą ponownie dodać stronę. Przy rebrandingu użyj nowej nazwy pliku. ### Google Search nie pokazuje ikony Aktualizacje zajmują od kilku dni do tygodni, a zmiana adresu URL ikony może je opóźnić. Upewnij się, że strona główna odwołuje się do ikony za pomocą znacznika `rel="icon"` oraz że spełnia ona powyższe zasady dotyczące wymiarów. Nie ma udokumentowanego sztywnego limitu w KB; reguły Google dotyczą wymiarów. ## Praktyczne wskazówki Zacznij od kwadratowego oryginału o wymiarach 512 px lub większych i uproszcz go, aby dopasować do rozmiaru karty. Prześlij pliki, wklej fragment HTML i manifest do swojej witryny, a następnie dokładnie sprawdź, czy link do manifestu został dodany. Na końcu spójrz na wynik w rozmiarze 16 px: jeśli znak nie jest wyraźny, uprość go jeszcze raz. ## Najczęściej zadawane pytania ### Czy w 2026 roku nadal potrzebuję pliku favicon.ico? Tak. Przeglądarki, czytniki kanałów RSS i boty podglądu linków żądają pliku /favicon.ico z katalogu głównego strony niezależnie od tagów HTML, więc jest to tani sposób na ubezpieczenie. Spakuj wersje 16, 32 i 48 pikseli do jednego pliku. ### Czy favicon może być plikiem JPG? Technicznie tak, ale format PNG lub SVG daje znacznie czystszy rezultat. JPG nie obsługuje przezroczystości i generuje artefakty kompresji, a zdjęcia zawierają zbyt wiele szczegółów dla rozmiaru 16x16 pikseli. ### Jaki powinien być rozmiar favicon dla wyszukiwarki Google? Google wymaga obrazu kwadratowego o minimalnym rozmiarze 8x8 pikseli i zaleca większy niż 48x48 pikseli. Format SVG nie jest tam obsługiwany, więc zachowaj plik ICO lub PNG zadeklarowany z atrybutem rel=icon na Twojej stronie głównej. ### Czy potrzebuję osobnych plików PNG o rozmiarach 16x16, 32x32 i 48x48? Zazwyczaj nie. Wielorozmiarowy plik ICO obejmuje te wielkości, a test żądań w Chromium wykazał, że samodzielne pliki PNG są nieużywane, gdy obecny jest plik ICO. Firefox i Safari nie zostały przetestowane. ### Dlaczego moja nowa ikona nie wyświetla się? Przeglądarki agresywnie buforują favicons przez dni lub tygodnie. Spróbuj wymusić odświeżenie (hard refresh), otwórz plik /favicon.ico bezpośrednio, dodaj parametr ?v=2 do adresu URL lub sprawdź widok incognito.