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.
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:
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.
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.
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:
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.
Zaloguj się do panelu zarządzania, a następnie wykonaj poniższą instrukcję krok po kroku:
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.
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.
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.
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.
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.
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:
Na serwerze odnajdź plik odpowiedzialny za sekcję <head> witryny. Najczęściej jest to header.php:
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.
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.
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.
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.
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.
Wypełnij poniższy formularz, a nasz specjalista odezwie się do Ciebie, by porozmawiać o Twojej stronie internetowej.