Żeby przyciągnąć uwagę nowych użytkowników i utrzymać ją wśród obecnych, bardzo często trzeba wyróżniać się czymś na tle konkurencji. Wydaje Ci się, że zrobiłeś już wszystko, co się dało, a wciąż nie jesteś zadowolony z efektów? Pamiętaj, że użytkownicy zwracają uwagę na detale – mogą to być nawet tak małe rzeczy, jak favicon. Chcesz dowiedzieć się, czym on tak naprawdę jest i czy faktycznie jest potrzebny na Twojej stronie internetowej?
Zastanawiasz się, czy ma on wpływ na działania SEO i pozycję strony w wyszukiwarce, a jeśli tak – to jaki? Może szukasz informacji o tym, jakie będą dla niego najlepsze wymiary oraz format pliku i jak właściwie stworzyć favicon, a następnie wprowadzić go na swojej stronie w sieci? W tym wpisie blogowym rozwiejemy wszelkie wątpliwości i odpowiemy na wszystkie powyższe pytania związanie z faviconem. Zapraszamy do lektury!
Co to jest favicon? Dlaczego jest nam potrzebna ikona witryny?
Czym w ogóle jest omawiany dzisiaj favicon? Jest to mały, ale ważny element projektowania stron internetowych – ikona, która jest wyświetlana na pasku adresu przeglądarki. Zupełnie tak jak teraz (jeśli czytasz ten wpis z poziomu komputera) – po lewej stronie paska widzisz ikonę Artefaktu. To właśnie favicon – jeden z elementów wizualnej identyfikacji witryny, który pomaga użytkownikom ją rozpoznać.
Choć z pozoru wydaje się dość błahym elementem designu, jego brak może niestety wpłynąć na negatywny odbiór strony przez użytkowników. Dlatego warto dodać ikonę favicon. Niektórzy ludzie, widząc, że witryna, na której aktualnie się znajdują, nie ma favicona (nawet jeśli nie wiedzą, co to w zasadzie jest), szybko zaczynają szukać innej, „lepszej i bardziej profesjonalnej”. Dobrze zaprojektowany oraz zaimplementowany favicon często wpływa pozytywnie na postrzeganie nie tylko samego serwisu, ale i marki oraz jej rozpoznawalności. Czy ma on jednak wpływ na pozycję w wyszukiwarkach?
Favicon a SEO – czy ma wpływ na pozycję strony w wyszukiwarkach?
Favicon chociaż nie ma bezpośredniego wpływu na pozycję strony w Google czy innych wyszukiwarkach, to jednak pośrednio może wpływać na jej użyteczność. Wpłynie to na SEO. Brak faviconu może zwiększyć bounce rate, czyli wskaźnik odrzuceń strony. Oznacza to wejścia internautów na nasz serwis i błyskawiczne opuszczanie go w ciągu kilku sekund. Takie zachowania są wychwytywane przez algorytmy i przypisywane do naszej strony ze swojego rodzaju wnioskiem – inni bardzo szybko uciekają ze strony, więc nie warto polecać jej następnym użytkownikom wyszukiwarki.
Choć pozycjonowanie polega w dużej mierze na analizie serwisów przez algorytmy Google’a, możemy do pewnego momentu przewidywać, jakie zachowania zostaną uznane przez roboty za „poprawne”. Zadowolony, zaciekawiony, a przede wszystkim lojalny klient to z perspektywy surfowania po sieci ktoś taki, kto wchodząc na naszą stronę:
- przeklika się przez kilka podstron,
- zostanie na dłużej niż kilka sekund,
- dokona zakupu lub zamówienia.
Tak małe rzeczy, jak favicon, są w stanie utrzymać uwagę użytkowników na dłużej, a w tym przypadku liczy się naprawdę każda sekunda.
Favicon – zalecany rozmiar pliku. Formaty plików favicon
Przeglądarki wyświetlają nasze favicony jako kwadraty o wymiarach 32 × 32 lub 16 × 16 pikseli. Niektóre urządzenia i przeglądarki są nawet w stanie obsługiwać większe rozmiary, np. 64 × 64 piksele, jednak tak niskie rozdzielczości z reguły wiązać się będą z utratą jakości. Dlatego zaleca się użycie grafiki o wymiarach 512 × 512 pikseli – dzięki temu możliwe jest stworzenie nieco bardziej szczegółowej grafiki, a favicon i tak zostanie automatycznie skompresowany do odpowiednich wymiarów.
Jeśli chodzi natomiast o format pliku, zalecana jest tutaj końcówka ICO, czyli ikona systemowa. Format ten obsługiwany jest przez większość przeglądarek, a także najpopularniejsze systemy operacyjne, takie jak Windows czy macOS. Jeśli jednak nasza inwencja twórcza i pomysł na favicon wybija się nieco ze schematu, możemy użyć innych formatów. Nie zawsze są one jednak obsługiwane przez przeglądarki. Są to pliki PNG, JPEG, a nawet GIF.
Jak zrobić favicon za pomocą różnych programów?
Tworzenie faviconu, czyli małej ikony reprezentującej stronę internetową, jest prostym procesem, który można wykonać za pomocą różnych programów, takich jak Photoshop czy Canva. W pierwszym kroku należy przygotować odpowiedni obraz, najlepiej o wymiarach 16×16 pikseli lub 32×32 pikseli. W przypadku Photoshopa, wystarczy otworzyć program, stworzyć nowy projekt o wymienionych wymiarach i zaprojektować ikonę według własnej wizji. Następnie zapisujemy plik jako .ico, co jest standardowym formatem dla favicon.
Jak stworzyć i dodać favicon do strony internetowej?
Stworzenie faviconu jest stosunkowo proste i wymaga tylko kilku kroków, z którymi powinien poradzić sobie każdy posiadacz własnej strony internetowej.
- Przygotowanie pliku graficznego, który będzie stanowił Favicon. Polecanym rozmiarem pliku jest 512 × 512 pikseli, które następnie zostanie skompresowane do wymiarów ikony.
- Przekształcenie pliku graficznego w omawiany wyżej format ICO, czego dokonać można za pomocą narzędzi online, jak i programów graficznych takich jak Adobe Photoshop czy GIMP.
- Wgranie pliku ICO na serwer internetowy w folderze głównym witryny, a następnie dodanie go do kodu HTML.
Można to zrobić poprzez użycie następującej linii kodu w sekcji nagłówka strony:
<link rel=”shortcut icon” href=”favicon.ico” type=”image/x-icon”>
Po dodaniu kodu i przesłaniu pliku na serwer, nasz favicon powinien pojawić się w pasku adresu przeglądarki oraz w zakładce strony.
Jak dodać favicon w WordPressie?
Większość stron w Internecie oparta jest właśnie o ten CMS, dlatego nieomówienie procesu dodania faviconu do WordPressa byłoby gigantycznym błędem. Na szczęście dla wszystkich jego użytkowników proces dodawania faviconu jest tak samo intuicyjny i prosty jak cały system WordPressa. Samo tworzenie grafiki rzecz jasna nie ulega żadnym zmianom, natomiast dodawanie ikony do paska adresu witryny wykonać można w dosłownie kilku krokach.
Wystarczy zalogować się na swoje konto i przejść do sekcji „Wygląd” w menu po lewej stronie ekranu. Następnie należy wybrać opcję „Personalizuj” i przejść do sekcji „Ustawienia witryny”. Tam znajdziemy opcję „Ikona strony” – to właśnie favicon. Teraz przeciągamy naszą grafikę w odpowiednie miejsce lub wybieramy ją z poziomu komputera, akceptujemy nasz wybór i gotowe! Nasz favicon powinien teraz pojawić się w pasku adresu przeglądarki oraz w zakładce strony.
Przeczytaj: Czym jest UGC i jak można je wykorzystać
Jak przygotować favicon? Testowanie
Testowanie favicona na różnych urządzeniach jest istotnym elementem procesu tworzenia i optymalizacji strony internetowej. Polega ono na sprawdzeniu, czy ikona witryny jest poprawnie wyświetlana na różnych typach urządzeń, takich jak:
- komputery stacjonarne,
- laptopy,
- tablety,
- smartfony.
W trakcie testowania należy zwrócić uwagę na kilka kluczowych aspektów – kompatybilność z różnymi przeglądarkami, rozdzielczość ikony, czytelność oraz estetykę.
Ikona strony internetowej – podsumowanie
Favicon to niewielki, ale ważny element identyfikacji wizualnej stron internetowych. Po przeczytaniu powyższego wpisu wiesz już, że pomaga on wyróżnić witrynę wśród konkurencji, ale także wpływa na jej postrzeganie jako profesjonalnej i wiarygodnej. Poznałeś zalecane rozmiary i formaty faviconu i wiesz także, że jego stworzenie i wdrożenie to nic skomplikowanego. Zachęcamy do zainteresowania się tematem w kontekście swoich stron – to mała rzecz, która może mieć naprawdę pozytywny wpływ na działalność. Poza tym cała operacja wstawienia go na stronę zajmie kilkanaście minut.
