Favicon

Czym jest favicon i czy taki element pełni istotną funkcję na stronie internetowej? W jaki sposób go przygotować i zaimplementować? Wyjaśniamy to zagadnienie oraz przedstawiamy najważniejsze kwestie dotyczące pliku favicon.

Co to jest favicon – definicja

Favicon to niewielka ikona, która wyświetla się w przeglądarce wraz z załadowaniem strony internetowej. Obrazek ten pojawia się również podczas zapisania witryny na pasku zakładek. W dużym uproszeniu, taki element pozwala witrynie wyróżnić się na tle konkurencji. Bardzo często favicon przedstawia logo organizacji, ewentualnie inny element w postaci graficznej, z którym powinna być kojarzona strona internetowa.

Favicon wyświetla się w wielu wyszukiwarkach, na przykład Yandex, czy DuckDuckGo. Z ukazywania tej grafiki obok adresów URL zrezygnowały Google oraz Bing. Ciągle jednak favicon jest dostępny na poziomie zakładek oraz otwartych kart w przeglądarce. Strona internetowa może w ten sposób się wyróżnić, wspierając User Experience.

Jak zrobić favicon?

Zanim dowiesz się, jak dodać favicon, warto poznać informacje dotyczące tego, jak przygotować taką grafikę. Istnieją dwie metody i obie są równie skuteczne. Pamiętaj, że obrazy o formacie JPG lub PNG w tym przypadku nie są dopuszczalne. Należy przygotować plik favicon.ico, który następnie zostanie zaimplementowany do witryny internetowej.

Pierwszym sposobem jest zaprojektowanie takiej grafiki samodzielnie. Możesz wykorzystać do tego darmowe narzędzie online, takie jak na przykład favicon.ico generator dostępny pod adresem: favicon.cc. Wówczas opracujesz grafikę, która następnie zostanie zaimplementowana na stronie.

Drugim sposobem jest konwersja obrazu do odpowiednich rozmiarów, zgodnych ze standardem favico. Jednocześnie plik powinien być dostępny w formacie ICO. Taki zabieg również możesz wykonać całkowicie za darmo – wystarczy skorzystać z dowolnego favicon convertera dostępnego online. Załaduj dowolną grafikę, a następnie otrzymasz ją w specjalnie przygotowanej wersji, aby dodać ikonę do swojej witryny.

Jak dodać favicon na WordPress?

Najpopularniejszym systemem CMS w Polsce jest WordPress. Jak dodać favicon do strony, która jest obsługiwana przy pomocy tego oprogramowania? To bardzo prosty zabieg. Według zaleceń WordPressa obraz powinien mieć co najmniej 512 × 512 pikseli. Jeżeli dysponujesz takim plikiem favicon.ico, zaloguj się do swojego konta administratora w systemie CMS. Następnie wykorzystując menu z lewej części ekranu, wybierz opcję: Wygląd, a następnie Dostosuj. Przejdź do zakładki Tożsamość witryny. Jak dodać favicon? W polu Ikona witryny załaduj wybrany przez Ciebie plik. Aby zaakceptować i wdrożyć zmiany naciśnij przycisk Opublikuj. Favicon będzie dostępny do pobrania w kodzie HTML. Wyszukaj nazwę pliku lub frazę „favicon”, a otworzysz plik. Oczywiście należy pamiętać, że dodanie takiego obrazu nie wygląda dokładnie tak samo w każdym przypadku. System CMS pozwala na prostą i wygodną implementację takiego elementu. Jeżeli jednak Twoja strona internetowa obsługiwana jest przez inny rodzaj oprogramowania, przesłanie ikony nie będzie wyglądać dokładnie tak samo.

Jak dodać favicon do strony internetowej na różnych systemach CMS?

Chcesz wiedzieć, jak dodać favicon na innych systemach CMS niż WordPress? Z reguły proces ten nie jest szczególnie skomplikowany – jednak dla osoby początkującej może okazać się odrobinę problematyczny.

W PrestaShop otwórz panel administracyjny. Następnie w menu bocznym przejdź do opcji Wygląd, a później Szablony. Po prawej stronie mieści się sekcja Favicon. Po otworzeniu okna otrzymasz dostęp do zmiany grafiki favicon.

W przypadku Magento należy otworzyć zakładkę Design z menu po lewej stronie interfejsu. Następnie przejdź do opcji HTML Head. Wówczas zmienisz favicon na wybrany przez siebie plik.

Informacje na temat tego, jak zmienić favicon znajdziesz w oficjalnych dokumentacjach poszczególnych systemów CMS. W sieci dostępne są również poradniki traktujące o tym zagadnieniu. Zależnie od budowy takiego oprogramowania, w niektórych przypadkach zamiana grafiki favicon.ico może wymagać ingerencji w kod źródłowy.