Favicon to inaczej niewielka ikonka z logo strony, która widoczna jest w pasku adresowym przeglądarki. W ten sposób użytkownikowi łatwiej jest rozpoznać stronę - w pasku adresowym i w otwartej karcie. Z tego poradnika dowiesz się, jak ustawić ikonę favicon dla swojej strony internetowej lub bloga działającego na platformie Wordpress.

Favicon to nie tylko kolejny sposób na upiększenie swojej strony, to również ciekawe rozwiązanie, które pozwoli Ci na lepszą identyfikację witryny i wyróżnienie się wśród innych stron internetowych. Dzięki ikonce favicon ułatwimy też użytkownikowi identyfikację strony. Zalet jest sporo, a jeżeli mamy dobre logo naszej witryny czy sklepu, stworzenie favicon na jego bazie będzie dodatkowym atutem.

W tym poradniku pokażemy dwie metody. Pierwsza będzie polegała na stworzeniu faviconu, który będziemy potem wykorzystywać. Potem pokażemy, jak dodać favicon do swojej strony, która działa w oparciu o system CMS - Wordpress.

Jak stworzyć favicon

Na początek będziemy musieli stworzyć własny favicon. Domyślnie ikona faviconu ma rozmiary 16 x 16 pikseli lub 32 x 32 piksele. Ze względu jednak na fakt, że favicony często wykorzystywane są jako skróty do stron w smartfonach i tabletach, nasz favicon powinien mieć co najmniej 512 x 512 pikseli. Dzięki temu favicon będzie mógł być wykorzystywany nie tylko na potrzeby przeglądarki internetowej, ale również np. w urządzeniach mobilnych.

Favicon możemy stworzyć za pomocą programu graficznego jak chociażby darmowy GIMP. Ważne jest, aby wklejając czy tworząc logo do faviconu nie zapomnieć o ustawieniu przeźroczystego tła. W internecie można też znaleźć liczne strony internetowe, które posiadają generatory faviconów - z prostymi edytorami graficznymi lub możliwością załadowania stockowego logo. Mogą to być chociażby favicon-generator.org, favicon.cc czy favicomatic.com. Przykładów jest sporo, wystarczy skorzystać z wyszukiwarki.

Format faviconu nie jest istotny. Może to być JPG, GIF czy PNG. Po zakończeniu pracy gotowe logo zapisujemy w naszym komputerze.

Jak dodać favicon do strony

Kiedy favicon został już przygotowany, pozostaje nam już tylko dodanie go do naszej strony działającej w oparciu o Wordpressa. W tym celu logujemy się na naszej stronie, wchodzimy w panel zarządzania Wordpress, a następnie przechodzimy w lewym pasku menu do zakładki Wygląd > Personalizacja. Następnie, w zakładce Personalizacja odnajdujemy w lewym pasku ustawień naszego motywu zakładkę, która nazywa się "Tożsamość witryny".

Po otwarciu tej zakładki odszukujemy sekcję "Ikona witryny" i tutaj ładujemy nasz favicon. Następnie, kiedy ikona zostanie dodana, zapisujemy zmiany. To wszystko, zmiany są dostępne natychmiastowo. Jeżeli jednak nie zobaczymy efektów, możliwe że jest to spowodowane cache'em strony. Wówczas po prostu należy wyczyścić cache w przeglądarce i załadować naszą witrynę jeszcze raz.

Jeżeli jednak nasza wersja Wordpressa jest niższa niż 4.3 albo też motyw, z którego korzystamy nie ma takiej opcji - możliwe, że w Personalizacji nie znajdziemy opcji dodawania faviconu. Co zrobić w takiej sytuacji? Możemy dodać favicon ręcznie lub też z poziomu specjalnego widgetu.

Jak dodać ręcznie favicon do strony

Jeżeli chcemy dodać samodzielnie favicon do naszej strony internetowej, będzie trzeba skorzystać z dwóch czynności. Przede wszystkim plik graficzny z naszym faviconem musimy wgrać na serwer FTP. Nie dodajemy go z poziomu Biblioteki mediów w Wordpressie, ale wrzucamy za pomocą menedżera plików dostępnego z poziomu naszego panelu zarządzania hostingiem (np. MyPHPAdmin) albo klienta FTP (np. FileZilla).

Po wrzuceniu faviconu na stronę musimy jeszcze mieć jego adres. Zalecamy umieścić plik graficzny w ogólnym folderze serwera (public_html), gdzie znajduje się nasza strona. Wówczas link do pliku będzie następujący: https://www.download.net.pl/favicon.jpg.

Kiedy wykonamy tę czynność, logujemy się do Wordpressa, a następnie przechodzimy do zakładki Wygląd > Edytor w lewym pasku menu. Po otwarciu Edytora odnajdujemy w prawej jego części pliki header.php. Otwieramy go, a następnie w wolnym miejscu wklejamy następujący kod:

I zapisujemy plik. Podobnie jak w poprzednim przykładzie, odświeżamy stronę i sprawdzamy czy favicon został poprawnie załadowany.

Dodawanie faviconu za pomocą wtyczki

To samo możemy osiągnąć za pomocą odpowiedniej wtyczki na potrzeby Wordpressa. W tym celu pobieramy i instalujemy darmową wtyczkę Insert Headers and Footers. Jest to rozszerzenie, które pozwala nam w łatwy sposób edytować zawartość nagłówków (headers) oraz stopek (footers) na naszej stronie internetowej.

Wtyczkę znajdziemy w zakładce Ustawienia > Insert Headers and Footers. Tutaj w polu nagłówka wklejamy kod, który podaliśmy w poprzednim podpunkcie. Rzecz jasna, wcześniej musimy wrzucić plik graficzny z naszą ikoną na serwer strony.

Jeżeli jednak i tego nie chcemy robić, możemy skorzystać z wtyczki All In One Favicon. Jest ona dostępna za darmo, również w języku polskim. Obsługa wtyczki nie powinna więc nastręczać żadnej trudności. W odpowiednim miejscu wysyłamy plik z naszym faviconem. W oknie podglądu możemy zobaczyć, jak prezentuje się nasz favicon, a następnie zastosować zmiany dla całej strony.

Na koniec - dajcie znać, jeżeli będziecie mieli problemy z obsługąfaviconów na swojej stronie.