Szybkie wsparcie: 511 280 732 lub czesc@woocado.pl
Dominik Krawiec ✅ Ekspert SEO & WordPress

Jak ustawić ikonę witryny (favicon) w WordPress?

Ikona witryny (z ang. favicon) to mały obrazek wyświetlany na zakładce w przeglądarce, zaraz obok tytułu obecnej strony. Mimo niewielkich rozmiarów ma znaczenie pod kątem tożsamości Twojej witryny. W tym poradniku pokażę Ci, w jaki sposób utworzyć i dodać faviconę w WordPress.

Gdzie wyświetla się ikonka strony internetowej?

Ten mały obrazek wykorzystywany jest w wielu nieoczywistych miejscach. Dzięki odpowiedniej, wyróżniającej się ikonie użytkownicy bez problemu zidentyfikują Twoją stronę internetową.

Oto miejsca, w których może pojawić się favicon:

  1. Pasek przeglądarki – najbardziej oczywisty punkt. Kolorowa ikonka w przeglądarce wskazuje w gąszczu zakładek, gdzie znajduje się dana witryna. Dzięki temu użytkownik może łatwo przejść do zakładki ze stroną, której szuka.
  2. Widok startowy przeglądarki – kiedy user otwiera Chrome, czy Firefoxa, na pierwszym ekranie widzi najczęściej odwiedzane strony, by mógł szybko do nich przejść. Także tutaj wyświetlana jest właśnie favicona danej witryny.
  3. Wyszukiwarka Google – wygląd wyników wyszukiwania regularnie się zmienia. Pojawiają się nowe elementy wizualne, które mają polepszyć doświadczenia użytkowników (UX). Jedną z takich zmian było właśnie wyświetlenie ikony obok adresu witryny, gdy strona pojawia się w Google:
favicon wordpress

Jak widzisz, ta mała grafika może odgrywać duże znaczenie także w zdobywaniu ruchu z Google dzięki pozycjonowaniu strony na WordPress. Wpływa na CTR, czyli Click Time Rating podczas wyświetlenia w wyszukiwarce.

Jak zaprojektować favicon dla strony internetowej?

Ikona witryny jest najczęściej pomniejszonym logo marki. Jeśli posiadasz przygotowany ten element, wystarczy, że w programie graficznym zrobisz małą wersję swojego logo. 

Warto zastanowić się nad formatem – favicon może być zapisany jako ICO, JPEG, PNG, a nawet GIF. Jeśli jednak chcesz, by Twoja ikona posiadała przezroczyste tło, zdecyduj się na format PNG.

Możesz wykorzystać program graficzny, taki jak Canva, czy Figma. Dostępne są też darmowe narzędzia podobne do Adobe Photoshop, np. Photopea.com – gdzie także przygotujesz wybrane pliki w odpowiednich formatach. Innym sposobem jest skorzystanie z generatora ikon witryny, np. Favicon.io lub RealFaviconGenerator.

Kiedy masz już gotowy plik – upewnij się, że posiada odpowiedni rozmiar. Preferowany jest kwadrat o wymiarach 512 px na 512 px. W wielu miejscach może wyświetlać się mniejsza lub większa ikona, stąd warto zadbać, by zawsze wyglądała odpowiednio, niezależnie od szerokości i wysokości elementu.

4 sposoby na dodanie favicon do strony na WordPress

Istnieje kilka metod, dzięki którym możesz ustawić ikonkę dla swojej strony www. Sam WordPress w swoim panelu daje możliwość jej wgrania, jednak nie wszystkie szablony mogą być dostosowane do tej funkcji. Pozostają wówczas dwie kolejne opcje – dodanie favicony ręcznie z poziomu kodu źródłowego szablonu lub za pomocą odpowiedniej wtyczki. 

Przejdź do interesującego Cię rozwiązania:

  1. Jak dodać faviconę w panelu WordPress?
  2. Jak dodać faviconę w Edytorze Strony?
  3. Jak dodać faviconę w kodzie motywu?
  4. Jak dodać faviconę za pomocą wtyczki?

Najlepszym i jednocześnie najprostszym sposobem jest oczywiście punkt pierwszy, czyli skorzystanie ze wbudowanych ustawień WordPressa. Pozostałe rozwiązania wykorzystaj tylko, jeśli pierwsza metoda nie zadziałała na Twojej witrynie.

Jak dodać faviconę w panelu WordPress?

Zaloguj się do panelu zarządzania, a następnie wykonaj poniższą instrukcję krok po kroku:

Krok 1: Przejdź do zakładki Wygląd > Dostosuj

dostosuj wygląd

Krok 2: Wybierz opcję Tożsamość witryny

tożsamość witryny

Krok 3: Wybierz ikonkę witryny i wgraj własną grafikę w rozmiarze minimum 512 pikseli.

ustawienie ikony wordpress

Gotowe! Przejdź do swojej witryny i odśwież stronę w przeglądarce. Ikona powinna pojawić się na pasku. Jeśli jej nie widzisz, możliwe, że konieczne będzie wyczyszczenie pamięci podręcznej. W zależności od używanej wtyczki – usuń cache i otwórz stronę w trybie prywatnym przeglądarki.

Jak dodać faviconę w Edytorze Strony?

Wraz z pojawieniem się tzw. motywów blokowych, czyli nowoczesnych szablonów, których wszelkie ustawienia zamykają się w edytorze Gutenberg, możesz też ustawić ikonę witryny z poziomu edytora strony.

Krok 1: Przejdź do Edytora Strony

Znajdziesz go w zakładce Wygląd > Edytor (tylko nowe szablony posiadają tę opcję):

Następnie wybierz Wzorce (z ang. Patterns):

W sekcji Fragmenty Szablonu znajdź Nagłówek, a następnie kliknij w HEADER po prawej stronie.

Krok 2: Ustaw Logo Witryny

Przejdźmy teraz do edycji wybranego nagłówka:

Kliknij ikonę edycji, a następnie mały przycisk z plusem na górze edytora:

W wyszukiwarce elementów blokowych wpisz Logo Witryny:

Wybierz wskazany blok, a potem Dodaj logo witryny:

Po ustawieniu logo, zaznacz opcję Użyj ikony witryny obecnej w panelu bocznym z ustawieniami bloku:

Na sam koniec zaktualizuj ustawienia i przejdź na stronę główną, by zobaczyć efekt.

Jak dodać faviconę w kodzie źródłowym motywu?

Drugi sposób jest dedykowany użytkownikom, którzy posiadają dostęp do serwera FTP. Możesz wykonać go także za pomocą zakładki Wygląd > Edytor plików motywu, ale jest to opcja mniej bezpieczna niż edycja bezpośrednich plików źródłowych na serwerze.

Pamiętaj, by przed zmianami w kodzie szablonu, upewnić się, że posiadasz aktualny backup strony na WordPress.

Krok 1: Wgraj plik graficzny z ikoną w Bibliotece Mediów

Przejdź do Media -> Dodaj i przeciągnij grafikę w odpowiednie pole:

Po zakończeniu uploadu, skopiuj adres nowej grafiki. Znajdziesz go w sekcji Adres URL pliku, po prawej stronie:

Krok 2: Znajdź plik header.php

Na serwerze odnajdź plik odpowiedzialny za sekcję <head> witryny. Najczęściej jest to header.php:

Krok 3: Dodaj odpowiedni kod

Na koniec musisz dodać między znacznikami <head></head> kod HTML odpowiedzialny za wyświetlanie favicony: 

Pamiętaj, by wkleić go przed funkcją wp_head(). Kod, który możesz przekopiować:

    <link rel="icon" type="image/x-icon" href="%TUTAJ WKLEJ ADRES OBRAZKA">

W atrybucie HREF wklej adres URL pliku graficznego, który przygotowaliśmy w kroku 1.

Krok 4: Zaktualizuj plik na serwerze i odśwież stronę.

Gotowe! Otwórz stronę w trybie prywatnym przeglądarki, by upewnić się, że ikona została dodana prawidłowo. Ewentualnie, wyczyść pamięć cache, jeśli korzystasz ze wtyczek do optymalizacji prędkości strony.

Jak dodać faviconę za pomocą wtyczki?

Ostatnim sposobem jest wykorzystanie darmowego pluginu do WordPress, który umożliwia konfigurację ikony witryny. W zakładce Wtyczki -> Dodaj wtyczkę wyszukaj plugin o nazwie Favicon by RealFaviconGenerator.

favicon plugin

Po zakończeniu instalacji, ustawienia znajdziesz w zakładce Wygląd > Favicon

W kolejnym kroku wgraj plik graficzny na serwer i wybierz go z Biblioteki Mediów w ustawieniach wtyczki:

Wtyczka umożliwia dostosowanie ikony do różnych typów oprogramowania, np. Android oraz iOS. Po dodaniu grafiki, wyświetli podgląd na różnych urządzeniach oraz w wyszukiwarce Google. Pozwoli też na ustawienie koloru tła dla favicony.

Ikona witryny nie wyświetla się – co wtedy zrobić?

Może zdarzyć się, że po wykonaniu wszystkich kroków zgodnie z instrukcjami, favicona nie pojawia się na pasku przeglądarki, obok tytułu strony. W innej sytuacji zamiast swojej grafiki widzisz domyślną grafikę WordPress lub logo swojego hostingu.

Oto proste kroki, które możesz podjąć, aby rozwiązać ten problem:

Pamiętaj, że każdy krok może wymagać trochę czasu, więc bądź cierpliwy i próbuj kolejnych rozwiązań, jeśli poprzednie nie działają. Jeśli potrzebujesz pomocy w obsłudze swojej strony firmowej, chętnie pomożemy. Zamów pakiet opieki WordPress, by uzyskać wsparcie naszego specjalisty.

Zadbamy o Twoją stronę internetową

Wypełnij poniższy formularz, a nasz specjalista odezwie się do Ciebie, by porozmawiać o Twojej stronie internetowej.



    Wysyłając wiadomość, akceptujesz politykę prywatności i wyrażasz zgodę na przetwarzanie podanych danych osobowych w celu przygotowania oferty.
    🔒 Twoje dane są bezpieczne.

    Copyright 2024 WooCado - Opieka nad stroną Polityka prywatności