Czym jest Favicon? Czy pełni ważną funkcję na stronie internetowej? Jak go odpowiednio przygotować i zaimplementować? Odpowiedzi na te oraz wiele innych pytań znajdziesz w dzisiejszym artykule. Wyjaśniamy wszystkie istotne zagadnienia. Zaczynajmy!
Czym jest Favicon – definicja
Favicon to mała ikona, która wyświetla się w przeglądarce wraz z załadowaniem witryny. Pojawia się również podczas zapisania strony internetowej na pasku zakładek. Ten element pozwala stronie wyróżnić się na tle konkurencji. Favicon jest bardzo często wykorzystywany jako logo organizacji lub inny element w postaci graficznej, z którym powinna być kojarzona strona internetowa firmy.
Ważne! Favicon wyświetla się w różnych wyszukiwarkach m.in. Yandex czy DuckDuckgo. Z kolei z widoczności tej ikonki obok adresów URL zrezygnowały Google oraz Bing. Mimo tego, favicon jest ciągle dostępny na poziomie zakładek i otwartych kart w przeglądarce. Tym sposobem witryna może się wyróżnić, wspierając jednocześnie User Experience.
Do czego potrzebny jest favicon?
Wykorzystując favicon, użytkownik znacznie szybciej odnajdzie Twoją stronę www, pośród wielu otwartych kart w przeglądarce internetowej. Zastosowanie favicon na witrynie pozwala zarówno na polepszenie User Experience, jak i spójne budowanie marki online.
Jak zrobić favicon?
Nim dowiesz się, jak dodać favicon, powinieneś dowiedzieć się, jak przygotować taką grafikę. Istnieją 2 sposoby, które są równie skuteczne. Należy jednak pamiętać, że obrazy o formacie JPG i PNG w tym przypadku nie są dopuszczalne. Trzeba przygotować plik „favicon.ico”, który zostanie zaimplementowany do strony internetowej.
- Pierwszy sposób to samodzielne zaprojektowanie grafiki. W tym celu możesz wykorzystać bezpłatne narzędzie online np. favico.ico generator dostępny pod adresem favicon.cc. Dzięki temu rozwiązaniu opracujesz grafikę, która w następnej kolejności zostanie zaimplementowana na witrynie
- Drugą metodą jest konwersja obrazu do właściwych rozmiarów, zgodnych ze standardem favico. Pamiętaj, że plik powinien być dostępny w formacie ICO. Co istotne?
To działanie również możesz wykonać zupełnie bezpłatnie- aby to zrobić, wystarczy wybrać dowolny favicon converter dostępny online. Ładując dowolną grafikę, otrzymasz ją w specjalnie przygotowanej wersji, by dodać ikonkę do swojej strony internetowej
Favicon – jaki powinien mieć rozmiar?
Choć w przeglądarce favicon wyświetla się jako kwadrat o wymiarach 16 x 16 px, jednak wgranie pliku o takiej rozdzielczości może spowodować utratę jakości obrazu. Dlatego warto wykorzystać grafikę o wyższej rozdzielczości- 512 x 512 px. Co ciekawe, ikona strony internetowej może być przeźroczysta, jednak wówczas należy posiadać obraz bez tła, najlepiej w formacie „png”.
Jak dodać favicon? Podstawowy sposób
Nie wiesz, czy Twoja strona posiada favicon? Możesz to sprawdzić na karcie w przeglądarce. Ikona powinna być widoczna obok tytułu podstrony- jeśli tak jest, to znaczy, że wszystko zostało skonfigurowane poprawnie. W innym przypadku warto skorzystać z poniższych wskazówek.
Plik graficzny z rozszerzeniem favicon.ico należy umieścić w katalogu głównym. Zdecydowana większość przeglądarek nie ma problemu ze znalezieniem tej grafiki. To jeden z najprostszych sposobów zalecany dla właścicieli witryn, posiadających mniejszą wiedzę techniczną. Dla użytkowników, którzy znają podstawy HTML nie będzie stanowić problemu dodanie odpowiedniego fragmentu kodu w sekcji „head”. Pamiętaj jednak, że kod musi zawierać typ oraz ścieżkę dostępu do wcześniej przesłanego pliku graficznego.
Jak dodać favicon na WordPress?
Jak dodać favicon do strony, która jest obsługiwana przy pomocy oprogramowania WordPress? To bardzo proste! Według zaleceń WordPress obraz powinien mieć co najmniej 512 x 512 pikseli.
- Jeśli posiadasz taki plik favicon.ico, zaloguj się do swojego konta administratora w systemie CMS
- Korzystając z menu z lewej części ekranu, wybierz opcję „Wygląd” a następnie „Dostosuj”
- W kolejnym etapie przejdź do zakładki „Tożsamość witryny”
- W polu „Ikona witryny” załaduj wybrany przez Ciebie plik
- Aby zaakceptować i wdrożyć zmiany, naciśnij przycisk „Opublikuj”
- Pamiętaj, że favicon będzie dostępny do pobrania w kodzie HTML- wyszukaj nazwę pliku bądź frazę „favicon” a otworzysz plik
Należy zaznaczyć, iż dodanie ikony nie wygląda tak samo w każdym przypadku. CMS umożliwia prostą i wygodną implementację takiego elementu. Jednak, jeżeli Twoja witryna jest obsługiwana przez inne oprogramowanie, przesłanie ikony może wyglądać nieco inaczej!
Jak dodać favicon do strony www na różnych systemach CMS?
Zastanawiasz się, jak dodać favicon na innych systemach niż WordPress? Najczęściej nie jest to proces zbyt skomplikowany, aczkolwiek dla osób początkujących może okazać się nieco problematyczny.
- PrestaShop- należy otworzyć panel administracyjny, a następnie w menu bocznym przejść do opcji „Wygląd” a później „Szablony”. Z prawej strony znajduje się sekcja „Favicon”- otwierając to okno, otrzymasz dostęp do zmiany grafiki favicon
- Magento- w tym przypadku należy otworzyć zakładkę „Design” z menu po lewej stronie. Następnie trzeba przejść do opcji „HTML Head”, która umożliwi zmianę faviconu na wybrany przez Ciebie plik
Szczegółowe informacje na temat tego, jak zmienić favicon znajdują się w dokumentacjach poszczególnych systemów CMS. Co więcej? W internecie dostępne są również specjalne poradniki informujące o tym zagadnieniu. Pamiętaj, że w zależności od rodzaju i budowy oprogramowania, w niektórych przypadkach zmiana grafiki favicon.ico może wiązać się z koniecznością ingerencji w kod źródłowy.
