Jak utworzyć favicon i dodać ją do swojej strony

Wybierz drogę dla swojej strony: w WordPress dodaj kwadratowy obraz przez ustawienie ikony witryny; inne edytory zwykle mają własne pole ikony witryny. Jeśli edytujesz HTML, utwórz pliki ikon i postępuj według instrukcji HTML. ZIP i manifest można pominąć, gdy edytor tworzy ikony.

Czym jest favicon i gdzie się pojawia?

Favicon to mała ikona, która pomaga rozpoznać stronę na karcie przeglądarki lub w zakładkach. Większa wersja może reprezentować stronę zapisaną na ekranie głównym telefonu. Dlatego jeden projekt bywa potrzebny w kilku rozmiarach.

Wyobraź sobie czytelnika z dwunastoma otwartymi kartami. Pełna nazwa firmy może już nie mieścić się obok tytułu, ale wyrazisty symbol nadal pozwala rozpoznać stronę. Projekt ma być czytelny na bardzo małej powierzchni.

Favicon różni się od logo w nagłówku strony i dużego obrazu wyświetlanego przy udostępnianiu linku. Zmiana jednego elementu nie aktualizuje automatycznie pozostałych. Szerokie logo może wyglądać dobrze na stronie, lecz być nieczytelne w małym kwadracie.

Najpierw wybierz sposób instalacji. Przygotujesz wtedy tylko potrzebne pliki, zamiast uznawać cały pakiet za obowiązkowy.

Jeśli kreator ma własne ustawienie ikony, zacznij od niego. Instrukcje HTML dotyczą stron, na których możesz zmienić wspólną sekcję head. Wklejenie znaczników do widocznego bloku treści nie jest równoważną instalacją.

Wybierz projekt czytelny przy 16 pikselach

Użyj najbardziej rozpoznawalnego fragmentu marki. Wyrazista litera, prosty symbol lub sylwetka maskotki często sprawdzą się lepiej niż cała nazwa z hasłem. Usuń szczegóły widoczne tylko na dużym obrazie.

Wyobraź sobie logo piekarni z bochenkiem, kłosami i nazwą „Piekarnia nad Rzeką”. Favicon może zachować sylwetkę chleba i jedno charakterystyczne nacięcie. Wszystkie kłosy oraz pełna nazwa zmieniłyby się w zbiór drobnych kresek.

Oceniaj obraz w rzeczywistym rozmiarze. Duży podgląd projektu o szerokości 512 pikseli nie pokazuje, czy wąska przerwa przetrwa przy 16 pikselach. Spójrz bez powiększania i sprawdź, czy rozpoznajesz kształt w sekundę lub dwie.

• Zachowaj jeden główny motyw. Unikaj kilku obiektów konkurujących o miejsce.
• Używaj wyraźnych krawędzi. Cienkie kontury i drobne otwory mogą zniknąć po zmniejszeniu.
• Zadbaj o kontrast. Jasny symbol na przezroczystym tle może zginąć w jasnym interfejsie.
• Ogranicz tekst. Jedna gruba litera może działać, lecz cała nazwa firmy zwykle nie.
• Sprawdź sylwetkę. Uprość projekt, jeśli bez szczegółów przestaje być rozpoznawalny.

Możesz przygotować osobny projekt dla małych rozmiarów. Nie musi być miniaturą pełnego logo. Jeśli kształt wymaga poprawek przy 16 pikselach, narysuj oddzielną wersję. Generator zmienia rozmiar, ale nie wybiera szczegółów marki do usunięcia.

Przygotuj obraz źródłowy bez utraty szczegółów

Najlepiej wyeksportuj obraz z oryginalnego projektu. Kwadratowy PNG o wymiarach co najmniej 512 × 512 pikseli jest dobrym punktem wyjścia, ponieważ największa generowana ikona ma 512 pikseli. Nie oznacza to, że karta przeglądarki wyświetla taki rozmiar.

Jeśli logo jest wektorowe, wyeksportuj kwadratowy PNG z programu graficznego. Pixilo obsługuje JPG, PNG i WebP, ale nie SVG. Zachowaj plik wektorowy do późniejszych zmian.

Powiększenie rozmytej ikony z 32 do 512 pikseli nie odtworzy szczegółów. Użyj lepszego oryginału lub uprość i przerysuj symbol. Generator ostrzega, gdy któryś bok ma mniej niż 512 pikseli, bo większe pliki wymagają wtedy powiększenia.

Najpierw dopracuj kompozycję, potem rozmiar pliku. Prostokątne logo można dopasować bez zniekształceń, ale zostanie dużo pustego miejsca. Centralne kadrowanie wypełnia kwadrat, odcinając fragmenty. Żadna opcja nie sprawi automatycznie, że szerokie logo tekstowe będzie dobrą ikoną.

Jeśli obiekt nie jest na środku, najpierw wybierz kadr w narzędziu do kadrowania. Generator favicon przycina centralnie i nie pozwala przesunąć kadru do symbolu przy krawędzi.

PNG nadaje się do przezroczystości i ostrych krawędzi grafiki. Przy JPG sprawdź mały podgląd pod kątem rozmycia lub drobnych zakłóceń. Zmiana formatu nie odzyska utraconych szczegółów. Więcej wyjaśnia poradnik JPG i PNG.

Rozmiary i formaty favicon: jakie pliki są potrzebne?

Nie musisz wgrywać osobnej ikony dla każdego urządzenia. Zacznij od wymagań strony. Własna strona HTML może używać kilku podłączonych ikon, a system zarządzania treścią może stworzyć warianty z jednego obrazu.

ICO może zawierać kilka obrazów. Pixilo tworzy prawdziwy ICO z wersjami 16, 32 i 48 pikseli. Zmiana nazwy PNG na .ico nie tworzy tej struktury. PNG zawiera jeden obraz i łatwo go sprawdzić osobno.

Ikona Apple o rozmiarze 180 pikseli służy do czegoś innego niż favicon przeglądarki. Apple opisuje odnośnik apple-touch-icon dla ekranu głównego w dokumentacji aplikacji internetowych. Mała ikona karty nie jest dobrym źródłem dla większego obrazu.

ZIP zawiera dziewięć plików. PNG o rozmiarach 32 i 48 pikseli są alternatywami dla ustawień wymagających tych rozmiarów. Nie musisz podłączać ich razem z ICO i PNG o rozmiarze 96 pikseli. Instrukcje są dla Ciebie, a nie do pobierania przez odwiedzających.

Dobierz przezroczystość i odstępy

Przezroczysta ikona może wyglądać lekko, ale jej tło zależy od interfejsu. Sprawdź ciemny symbol na ciemnym tle i jasny na jasnym. Jeśli trudno go rozpoznać, zastosuj kontrastowy kontur lub jednolite tło.

W Pixilo przezroczystość dotyczy ICO i PNG o rozmiarach 32, 48 oraz 96 pikseli. Ikony Apple, 192 i 512 pikseli zawsze mają wybrane jednolite tło. Kolor wpływa więc na większe ikony także wtedy, gdy ikony przeglądarki są przezroczyste.

Przezroczystość nie usuwa istniejącego tła. Białe piksele wokół logo pozostają białe. Jeśli chcesz przezroczystą przestrzeń, zacznij od obrazu, który rzeczywiście ma przezroczyste tło.

Procent odstępu dotyczy każdego boku. 10% zostawia obrazowi 80% szerokości, a 20% zostawia 60%. Przy 16 pikselach drugi wariant daje symbolowi około 10 pikseli. Trochę miejsca pomaga, lecz zbyt dużo utrudnia zobaczenie ikony.

Sprawdź też marginesy w źródle. Jeśli logo zajmuje tylko środkową połowę PNG, zerowy dodatkowy odstęp nie usunie pustych brzegów. Najpierw przytnij zbędne miejsce, zachowując potrzebną przestrzeń przy symbolu.

Zacznij od domyślnego odstępu i porównaj mniejszą oraz większą wartość. Najpierw oceń podgląd 16 pikseli. Procent dotyczy całego obrazu, nie tylko widocznego kolorowego kształtu.

Jak dodać favicon w WordPressie

Użyj wbudowanej funkcji Ikona witryny. Dokumentacja WordPressa zaleca kwadratowy PNG o wymiarach co najmniej 512 × 512 pikseli. Od WordPressa 6.5 otwórz Ustawienia → Ogólne, wybierz ikonę i zapisz. Starsze wersje mogą mieć ją w Wygląd → Dostosuj → Tożsamość witryny.

W obsługiwanym motywie blokowym ikona może być też w Wygląd → Edytor → Identity. Nazwy zależą od języka interfejsu. Sprawdź dokumentację Identity w edytorze witryny, jeśli odpowiada Twojemu widokowi.

Dla tej metody wybierz icon-512.png z Pixilo. Ma jednolite tło, więc sprawdź kolor przed wgraniem. Możesz też użyć odpowiedniego kwadratowego PNG z oryginału, jeśli chcesz zachować jego przezroczystość.

1. Wybierz przygotowany PNG w polu Ikona witryny.
2. Zapisz i otwórz publiczną stronę główną oraz jedną podstronę.
3. Sprawdź kartę przeglądarki. Jeśli inny komponent nadal dostarcza starą ikonę, przejdź do rozwiązywania problemów.

WordPress tworzy odnośniki za Ciebie. ZIP nie jest motywem ani wtyczką. Znaczników HTML nie wkleja się do treści wpisu lub strony.

Logo witryny i ikona witryny to różne ustawienia. Zmiana szerokiego logo w nagłówku nie musi zmienić ikony karty. Wybierz i zapisz właściwe ustawienie.

Utwórz favicon z logo w Pixilo

1. Wybierz jeden obraz. Otwórz generator favicon i wybierz JPG, PNG lub WebP do 25 MB. Źródło może mieć najwyżej 8000 pikseli na bok i łącznie 32 miliony pikseli.
2. Wybierz dopasowanie. Dopasowanie zachowuje cały obraz i proporcje. Kwadratowy kadr wybiera środkowy fragment. Sprawdź, czy nie ucięto ważnych części.
3. Ustaw odstęp i tło. Porównaj podglądy przeglądarki w rzeczywistych rozmiarach oraz podgląd Apple. Zdecyduj, czy ikony przeglądarki mają być przezroczyste.
4. Pobierz potrzebne pliki. ZIP zawiera cały pakiet; pojedynczy plik przyda się do konkretnego pola przesyłania.
5. Zainstaluj i sprawdź. Użyj ustawień strony lub instrukcji HTML poniżej. Sprawdź opublikowaną stronę, a nie tylko podgląd.

Dopasuj opcje i pobierz rezultat. Oddzielny przycisk zapisu nie jest potrzebny: pobieranie używa ostatnich ustawień. Plik już zapisany na urządzeniu nie zmienia się po zmianie podglądu. Po poprawkach pobierz go ponownie.

Źródło i wygenerowane pliki pozostają na urządzeniu. Obraz nie jest przesyłany na serwer Pixilo. Wybrany obraz i ustawienia są przechowywane na otwartej stronie, dlatego pobierz wynik przed jej zamknięciem lub odświeżeniem.

Po wybraniu innego obrazu ponownie pojawia się pole wyboru pliku. Ustawienia zostają zachowane. Sprawdź więc dopasowanie, odstęp i tło dla nowego projektu.

Przykład: szerokie logo jako czytelna ikona

Załóżmy, że piekarnia ma logo 1200 × 600 z bochenkiem i długą nazwą. To przykład procesu, a nie zmierzona analiza obrazów pokazanych w artykule.

1. Oddziel symbol. Wyeksportuj bochenek z oryginału jako kwadratowy PNG 512 × 512. Nie używaj małego zrzutu ekranu logo.
2. Usuń zbędne marginesy. Zachowaj krawędzie chleba, ale pozwól mu zająć dostatecznie dużą część kwadratu.
3. Porównaj małe podglądy. Zacznij od dopasowania i domyślnego odstępu. Jeśli nacięcie znika przy 16 pikselach, uprość oryginalny rysunek zamiast powiększać rozmytą kopię.
4. Sprawdź tło. Jeśli ciemny kontur znika na ciemnej powierzchni, spróbuj kontrastowego jednolitego tła. Sprawdź też ikonę Apple.
5. Pobierz pliki do wybranej konfiguracji. Dla HTML z ikonami przeglądarki i Apple użyj ICO, PNG o rozmiarze 96 pikseli i ikony Apple. Dla WordPressa wybierz PNG 512 pikseli.

Ikona powinna być rozpoznawalna przed instalacją. Jeśli wygląda dobrze tylko w dużym podglądzie, popraw projekt. Właściwe rozszerzenie nie naprawi zbyt złożonej kompozycji.

Jak dodać favicon do strony HTML

Rozpakuj ZIP i umieść ikony w katalogu publikowanym przez stronę. Przy ścieżkach poniżej ICO powinno być dostępne pod adresem takim jak https://example.com/favicon.ico. Przechowuj pliki w źródłach lub zasobach publicznych kopiowanych podczas budowania strony. Plik dodany tylko do katalogu wynikowego może zniknąć przy następnym budowaniu.

Dodaj pierwsze dwa znaczniki do <head> strony dla ikon przeglądarki. Trzeci służy ikonie Apple. Jeśli strony mają wspólny szablon head, umieść znaczniki tam, aby wszędzie były te same odnośniki.

<link rel="icon" href="/favicon.ico" sizes="16x16 32x32 48x48">
<link rel="icon" type="image/png" href="/favicon-96x96.png" sizes="96x96">
<link rel="apple-touch-icon" href="/apple-touch-icon.png" sizes="180x180">

href określa adres pliku, a sizes jego wymiary. Wybór przeglądarki zależy od formatu, rozmiaru i innych deklaracji; pierwszy znacznik nie zawsze ma pierwszeństwo. Zobacz dokumentację MDN dla rel="icon".

Jeśli pliki są w katalogu /icons/, zmień trzy ścieżki na /icons/favicon.ico, /icons/favicon-96x96.png i /icons/apple-touch-icon.png. Położenie pliku i odnośnik muszą się zgadzać.

Ścieżka zaczynająca się od / wskazuje katalog główny domeny. Jeśli strona działa w podkatalogu, takim jak /portfolio/, użyj właściwych publicznych ścieżek. Po publikacji otwórz każdy adres bezpośrednio.

Przed dodaniem znaczników sprawdź istniejące deklaracje favicon i manifestu we wspólnym head. Zastąp nieaktualne odnośniki. Pozostawienie starej ikony motywu utrudnia ustalenie, który plik wybiera przeglądarka.

Opcjonalnie: dodaj lub zaktualizuj manifest aplikacji

Pomiń tę część, jeśli potrzebujesz tylko ikon przeglądarki. Manifest jest osobny i nie jest wymagany do wyświetlania ikony karty.

Manifest to plik JSON opisujący aplikację i jej ikony. site.webmanifest z Pixilo zawiera tylko wpisy ikon. Jeśli manifest już istnieje, dodaj do niego nowe ikony, nie zastępując nazwy aplikacji, adresu startowego ani trybu wyświetlania. Zobacz poradnik manifestu web.dev.

{
  "icons": [
    {
      "src": "/icon-192.png",
      "sizes": "192x192",
      "type": "image/png",
      "purpose": "any"
    },
    {
      "src": "/icon-512.png",
      "sizes": "512x512",
      "type": "image/png",
      "purpose": "any"
    }
  ]
}

Jeśli używasz nowego manifestu, dodaj poniższy odnośnik we wspólnej sekcji head. Jeśli strona już wskazuje inny manifest, zaktualizuj go zamiast dodawać konkurencyjny odnośnik.

<link rel="manifest" href="/site.webmanifest">

Gdy manifest publikujesz w /icons/, odnośnik ma postać href="/icons/site.webmanifest". Zmień też ścieżki obrazów w JSON na /icons/icon-192.png i /icons/icon-512.png. Początkowy ukośnik wskazuje główny katalog domeny, nie katalog manifestu.

Wygenerowane ikony mają purpose: "any". Nie są ikonami maskable: takie projekty muszą zachowywać ważne szczegóły po przycięciu do koła lub innego kształtu. Samo jednolite tło nie wystarczy. Nie zmieniaj tej właściwości bez przygotowania i sprawdzenia grafiki. Różnicę opisuje dokumentacja MDN dotycząca przeznaczenia ikon.

Plik nadal zawiera tylko ikony. Nie jest pełną konfiguracją aplikacji i sam nie sprawia, że stronę można instalować jako aplikację.

Co favicon daje w wyszukiwarce Google

Rozpoznawalna ikona pomaga odróżnić stronę w wynikach. Traktuj ją jako element marki i użyteczności, a nie sposób gwarantujący lepsze pozycje lub więcej kliknięć.

Wytyczne Google wymagają kwadratowego obrazu co najmniej 8 × 8 pikseli i zalecają rozmiar większy niż 48 × 48. PNG 96 pikseli z pakietu jest praktycznym wyborem. Dodaj odnośnik na stronie głównej, utrzymuj stały URL i pozwól Googlebotowi odczytać stronę główną, a Googlebot-Image ikonę.

Google używa jednej ikony na nazwę hosta, na przykład example.com. Sekcja pod example.com/blog/ nie otrzyma osobnej ikony. Spełnienie wytycznych nie gwarantuje wyświetlenia. Ponowne skanowanie i przetwarzanie mogą trwać dni lub tygodnie. Prośba o indeksowanie w Search Console nie wymusza natychmiastowej zmiany.

Jeśli nowa ikona działa w przeglądarce, a w Google pozostała stara, sprawdź publiczne pliki i znaczniki strony głównej. Ciągłe zmiany projektu podczas oczekiwania utrudniają śledzenie przetworzonej wersji.

Dlaczego favicon nie ma lub widać poprzedni obraz?

Odróżnij błąd instalacji od starej kopii w pamięci podręcznej. Jeśli adres ikony nie działa, odświeżanie strony nie pomoże. Jeśli pokazuje właściwy obraz, sprawdź deklaracje i pamięć podręczną.

Otwórz dokładny URL ikony w nowej karcie. Powinien pokazać obraz, nie stronę główną, logowanie czy błąd. Dla dokładniejszego sprawdzenia otwórz narzędzia deweloperskie, panel sieci i przeładuj stronę. Status 200 nie wystarcza, jeśli odpowiedź jest HTML zamiast obrazem.

Sprawdź rzeczywiście opublikowany head strony głównej i podstrony. Zmiana szablonu mogła nie trafić do wyniku albo inny komponent dodaje starą ikonę. Wyszukaj nazwy i ścieżki zainstalowanych plików.

Przeglądarka może przechowywać ikonę niezależnie od strony. Zamknij i otwórz kartę, sprawdź nowy profil lub inną przeglądarkę. Zwykłe odświeżenie nie zawsze od razu wymienia ikonę. Testy pomagają wykryć lokalny problem, ale nie gwarantują jednoczesnej aktualizacji wszędzie.

Jeśli strona używa CDN lub service workera, sprawdź, czy nadal zwraca starą wersję. Zaktualizuj odpowiednią pamięć podręczną przez hosting lub aplikację. Poprawiaj jedną rzecz naraz i sprawdzaj odpowiedź przed kolejną zmianą.

Lista kontrolna na zakończenie

• Projekt jest rozpoznawalny przy 16 i 32 pikselach bez powiększania.
• Krawędzie i kolory są czytelne na jasnym i ciemnym tle.
• Pobrane pliki odpowiadają ostatecznemu dopasowaniu, odstępom i kolorowi tła.
• Każdy adres ikony otwiera właściwy publiczny plik po publikacji.
• Wspólny head ma prawidłowe odnośniki bez starych duplikatów.
• Ikona Apple i manifest wskazują opublikowane pliki.
• Istniejący manifest zachował pozostałe ustawienia.
• Strona główna i ikona są dostępne dla robotów, jeśli chcesz kwalifikować się do wyświetlania w Google.

Zachowaj oryginał i gotowy pakiet razem. Zapisz, gdzie skonfigurowano ikonę: szablon HTML, WordPress lub kreator. Ułatwi to kolejną zmianę marki.

Najczęstsze pytania

Jaki rozmiar favicon jest najlepszy?

Użyj wyraźnego kwadratowego obrazu dostatecznie dużego dla potrzebnych plików. Źródło 512 × 512 obejmuje największy plik pakietu, ale nie jest konieczne wyłącznie dla małej karty. Zobacz tabelę rozmiarów.

Czy potrzebuję ICO i PNG jednocześnie?

Nie zawsze. Przykład HTML Pixilo używa ICO z kilkoma małymi obrazami i większego PNG. CMS może wygenerować warianty z jednego źródła. Kieruj się wymaganiami ustawienia, a nie samą dostępnością plików.

Czy favicon może mieć przezroczyste tło?

Tak, ikony przeglądarki mogą zachować przezroczystość. Sprawdź symbol na różnych tłach. Ikony ekranu głównego używają wybranego jednolitego koloru, a opcja przezroczystości nie usuwa istniejącego tła źródła.

Dlaczego logo jest rozmyte jako favicon?

Źródło może być niewyraźne lub mieć zbyt dużo szczegółów. Powiększenie nie rozwiązuje tych problemów. Użyj dobrego oryginału, uprość detale i obejrzyj rzeczywiste rozmiary przed zmianą odstępów.

Czy wgrywać ZIP bezpośrednio do WordPressa?

Nie. Rozpakuj go i wybierz odpowiedni kwadratowy PNG, na przykład icon-512.png, w ustawieniu ikony witryny. ZIP to zestaw plików i instrukcji, nie motyw ani wtyczka.

Czy favicon poprawia SEO?

Pomaga zachować spójną, rozpoznawalną tożsamość strony, ale nie zakładaj wzrostu pozycji. Spełnij wymagania Google i daj czas na przetworzenie. Kwalifikowanie się nie gwarantuje wyświetlenia ikony.

Podsumuj za pomocąChatGPT (otwiera się w nowej karcie)Grok (otwiera się w nowej karcie)Google (otwiera się w nowej karcie)Perplexity (otwiera się w nowej karcie)Claude (otwiera się w nowej karcie)