Co to jest favicon i dlaczego powinieneś go dodać na stronę www?
Favicon, określany też czasem mianem „faviconka”, to ikona strony internetowej. To niepozorny szczegół, którego brak robi wielką różnicę. Jest dla swojej witryny jak zdjęcie w dowodzie osobistym dla obywatela. Z tą różnicą, że nie jest niezbędny, ale wskazany. I tym dzisiaj się zajmiemy. Opowiem Ci, co to jest favicon, jaką ma funkcję, jak dodać ten element do strony internetowej oraz co, jeśli się na niego nie decydujesz.
Favicon, czyli Twoja ikona strony internetowej
Favicon to graficzny symbol witryny, którego nazwa wzięła się od angielskich słów favourite icon. Pierwszy raz została wykorzystana w 1999 roku przez przeglądarkę Internet Explorer. Favicon to drobny szczegół, który jednak ma znaczenie dla odbiorcy, a komfort i pozytywne doświadczenie użytkownika powinno mieć znaczenie dla właściciela każdej strony.
Favicon wyświetla się:
- na pasku zakładek obok nazwy otwartej strony,
- na pasku ulubionych zakładek,
- w wynikach wyszukiwania obok tytułu strony,
- w historii wyszukiwania,
- zdarza się również na pasku adresu przeglądarki.
Warto zaznaczyć, że favicon to nie to samo co logo marki. Ikona zakładki musi być minimalistyczna, bo jej wymiary są niewielkie. Może to być skrócone logo wykorzystujące identyfikację wizualną firmy, dzięki czemu nadal jest rozpoznawalne i kojarzone z danym biznesem.
Przedstawię to na przykładzie Redseo.
Pełne logo firmy wygląda tak:
Z kolei logo skrócone, używane także w roli faviconu, to grafika poniżej:
Dla jeszcze lepszego zobrazowania załączam zrzut ekranu faviconu na pasku zakładek w karcie przeglądarki:
Grafika potwierdzająca tożsamość witryny – dlaczego warto ją mieć?
Wspominałam o tym, że favicon to niepozorny, ale tak naprawdę szalenie istotny element strony. Wyobraź sobie, że szukasz jakiejś informacji w internecie, docierasz na stronę, która ma udzielić Ci odpowiedzi na wszystkie pytania, ale obok tytułu witryny na pasku nie wyświetla się favicon.
Myślisz sobie: coś się nie załadowało? Co jest grane? A może to niesprawdzona, niepewna strona?
Wielu użytkowników opuszcza stronę internetową bez faviconu, bo adres wydaje się mniej profesjonalny. Czegoś mu brakuje. Jest niedopracowany.
I to już jeden z powodów, dla których powinno się umieścić ikonę witryny – niwelujesz negatywne doświadczenie użytkownika.
Zbierzmy najważniejsze funkcje faviconu w jednym miejscu. Oto one:
- Ikona zakładki pomaga w identyfikacji strony. Gdy masz kilka (lub kilkanaście :)) otwartych kart w jednym momencie, łatwiej rozpoznać potrzebną w danym momencie zakładkę od innych.
- Wskazuje na profesjonalny charakter witryny, o czym już napomknęłam. Widać, że nie zapomniano o najmniejszym detalu.
- Favicon jest też elementem dekoracyjnym ze względu na zastosowanie charakterystycznego logo lub innej łatwej do rozpoznania ikonki.
- Last but not least, favicon ma też wpływ na SEO! Ale o tym opowiem więcej w dalszej części tekstu.
Jak zrobić favicon?
Wiesz już, jakie podstawowe funkcje ma ta niepozorna ikona witryny, więc jeśli jeszcze jej nie masz, wskaże Ci sposoby na przygotowanie własnej.
Jeśli chcesz dodać favicon do strony internetowej, możesz użyć tak naprawdę dowolnego programu graficznego, takiego jak Canva, Illustrator czy Photoshop. Drugim sposobem jest favicon generator, czyli profesjonalny program do generowania ikon na strony internetowe.
Do programu wgrasz pliki .jpg, .png czy .bmp, jednak ostatecznie będzie trzeba przekonwertować obraz, by dostosować go do wymagań.
Do wyboru masz m.in.:
Z ich pomocą stworzysz favicon na medal. Pamiętaj, że ostateczny plik musi mieć rozszerzenie .ico (lub .png) i być oczywiście odpowiednich rozmiarów.
Wymagane przez przeglądarki wymiary grafiki to 16×16 pikseli. Zadbaj o to, by uzyskać najwyższą jakość obrazu. Dzięki temu będzie wyświetlać się estetycznie, nie będzie się rozlewać ani niekorzystnie rozciągać.
Dodatkowe wskazówki:
- Favicon to maleństwo, dlatego nie wykorzystuj do jego stworzenia zdjęć ani napisów, bo i tak nie będą dobrze widoczne;
- Wybierz skrócone logo lub stwórz grafikę nawiązującą do symbolu Twojej marki;
- Pamiętaj, by używać obrazów w wyższych rozdzielczościach i ewentualnie później je zmniejszyć.
Jak dodać favicon?
Dodanie faviconu na stronę wymaga kilku wyjaśnień, by zrobić to poprawnie.
Favicon możesz wgrać do swojej strony internetowej, przesyłając plik z ikoną (z pomocą np. aplikacji FTP lub managera plików) do katalogu /public_html/ i umieszczając odpowiedni kod: „link rel= shortcut icon” pomiędzy tagami <head> i </head> w pliku nagłówka.
Innym sposobem na dodanie faviconu (w systemie WordPress) jest zrobienie tego z pozycji administratora strony. Przejdź ścieżkę: Wygląd -> Dostosowanie -> Tożsamość witryny -> Wybierz ikonę witryny.
W tym momencie oczywiście pozostaje tylko wybranie wgranego pliku (WordPress, jak pokazuję na poniższym zrzucie ekranu, podpowiada jeszcze, jakie preferuje wymiary) i gotowe.
Co może pójść nie tak, czyli problemy z faviconem
Zdarza się, że po dodaniu faviconu według zaleceń, i tak nie jest on widoczny lub wyświetla się niepoprawnie.
Co może być przyczyną?
- Jednak nie został wgrany poprawnie 🙂
- Mogłeś nie dopilnować rozmiaru lub formatu pliku, przez co nie ma on szansy poprawnie się załadować
- W pamięci podręcznej przeglądarki nadal obowiązuje starsza wersja witryny. Należy wówczas wyczyścić pamięć podręczną lub odświeżyć stronę internetową kilkukrotnie.
Warto wiedzieć, że favicon nie pojawi się od razu wszędzie. Na przykład we wspomnianych wynikach wyszukiwania pojawi się dopiero gdy Google zaktualizuje informacje o Twojej stronie. Może to chwilę zająć (kilka dni lub nawet kilka tygodni).
Co więcej, są sytuacje, gdy i to idzie opornie, ponieważ Google jako niezbadany do końca twór 🙂 czasem uznaje, że lepszym wyborem dla Twojej strony jest wcześniejszy (np. nieaktualny symbol).
Favicon a SEO
Mówiłam, że wrócę do powiązań między ikoną witryny a SEO. Oto nadszedł na to czas!
Favicon nie jest elementem, który bezpośrednio wpływa na pozycjonowanie strony w wynikach wyszukiwania, ale nie jest obojętny wobec SEO. Dodana ikona witryny ma funkcję identyfikującą, zwiększającą wiarygodność strony, a zatem może mieć wpływ na CTR.
CTR to click-through rate, czyli współczynnik klikalności strony. Większa klikalność strony wpływa z kolei na to, jak Google postrzega dany adres. Często klikany i wybierany przez użytkowników adres wygląda na stronę doskonałej jakości, którą warto promować.
Podsumowując, faviconka nie jest żadnym czynnikiem rankingowym, nie wpływa bezpośrednio na pozycjonowanie, ale daje pozytywne odczucia użytkowników, co zwiększa wiarygodność strony w oczach Google.
Podsumowanie informacji
Podsumujmy zebrane informacje na temat ikony zakładki, jak często określa się favicon:
- To ikona witryny wyświetlająca się na pasku zakładek, w wynikach wyszukiwania czy historii przeglądania obok nazwy strony.
- Nie ma bezpośredniego wpływu na pozycjonowanie stron internetowych, ale zwiększa CTR.
- Dodać favicon możesz poprzez umieszczenie odpowiednich informacji w kodzie html lub poprzez edytor administratora w Wordpressie.
- Pamiętaj, że favicon musi mieć zalecany rozmiar i być zapisany w odpowiednim formacie.
- Stworzyć swój favicon możesz w zwykłym lub dedykowanym programie graficznym.
Jeśli nawiążesz z nami współpracę (pozycjonowanie sklepów internetowych), wesprzemy Cię w działaniach SEO, a jeśli jeszcze nie masz faviconu, podpowiemy Ci, co i jak.
