Favicon – ikona strony internetowej – co to jest?

Favicon, zwana czasem pieszczotliwie „favikonką”, to mały kwadratowy obraz wyświetlany w karcie przeglądarki, w zakładkach, a także w wynikach wyszukiwania Google. Favicon pokazywany jest zazwyczaj obok tytułu podstrony i wizualnie „potwierdza” tożsamość witryny.

Pierwszą przeglądarką internetową, która wprowadziła favicony do swojego interfejsu, był w 1999 roku Internet Explorer. Początkowo wymiary ikony mogły wynosić zaledwie 16 x 16 pikseli. Wynikało to w dużej mierze z niskich prędkości ówczesnych połączeń internetowych – nawet tak mały obrazek zwiększał czas ładowania strony w epoce z dzisiejszej perspektywy wręcz „paleoinformatycznej”. Należy również pamiętać o małych rozmiarach ekranów – duże monitory o wysokich rozdzielczościach kosztowały wówczas majątek, a większy rozmiar ikony mógłby zaburzyć przejrzystość interfejsu przeglądarki i zaszkodzić jej UX-owi.

 Ikona favicon – zalecany rozmiar i format pliku 

Dzisiaj właściwie wszystkie przeglądarki są w stanie przeskalować favicon do odpowiednich rozmiarów, właściwych dla konkretnej rozdzielczości czy oprogramowania. W połączeniu z CMS obsługującym zarządzanie plikiem favicon zazwyczaj wystarczy umieścić na serwerze plik w większym rozmiarze (nawet 512 x 512 w WordPressie z niektórymi motywami), a soft zajmie się resztą. Większość przeglądarek i urządzeń wyświetli favicon w rozmiarze 16 x 16 lub jego wielokrotnościach – 32 x 32, 48 x 48 i więcej.

Plik faviconki może być zapisany w formacie PNG, GIF lub ICO (wyświetlą go wszystkie współczesne przeglądarki), a także JPG i SVG (zgodność z wszystkimi przeglądarkami oprócz pozbawionego już wsparcia technicznego Internet Explorera). Oznacza to, że ikona witryny może obsługiwać przezroczystość (PNG i ICO), a nawet animacje (GIF – animowany obraz będzie jednak wyświetlany wyłącznie w Firefoksie i Operze, niestety aktualnie nie ma tej opcji np. w Google Chrome).

Jak zrobić favicon?

Stworzenie obrazu favicon wymaga więc jedynie pomysłu i dowolnego programu graficznego – w najprostszej wersji pomoże nawet Paint, domyślnie wbudowany w systemy Windows. Można również skorzystać z dostępnych w sieci programów typu „favicon generator”, które od razu wygenerują obraz z odpowiednimi parametrami.

Warto mieć na uwadze, że obraz będzie zwykle wyświetlany w bardzo małych wymiarach. Oznacza to, że prawdopodobnie nie zmieści się tam całe logo marki. Kluczem do właściwie zaprojektowanej „shortcut icon” jest zachowanie maksymalnej czytelności. Być może nada się więc sam sygnet lub pierwsza litera nazwy? Favicon powinien przyciągać uwagę odbiorcy i oczywiście być zgodny z identyfikacją wizualną marki – to integralny element witryny, który jest w stanie w pewnym stopniu wpłynąć na ruch na stronie.

Warto wiedzieć, że wielu użytkowników używa innych niż domyślne motywów przeglądarek, a także korzysta z trybu ciemnego lub dzień/noc. Z tego powodu wybierz favicon, który będzie dobrze wyglądać zarówno na jasnym, jak i ciemnym tle.

Jak dodać favicon do swojej witryny?

Jak wspomniałem wcześniej, większość stron opartych o popularne CMSy umożliwia bardzo proste przesłanie favicony. WordPress wymaga jedynie kliknięcia Wygląd -> Dostosuj -> Ikona witryny, a następnie wgrania przygotowanego wcześniej pliku. By taka opcja była możliwa, wymagany jest motyw obsługujący wywołanie funkcji wp_head() – na szczęście taką możliwość oferują w zasadzie wszystkie nowoczesne template’y.

Jeżeli chcesz ustawić ikonę favicon ręcznie, umieść w kodzie html następujący fragment:

<link rel="icon" href="/lokalizacja/pliku/favicon.ico">

Oczywiście zamiast powyższej ścieżki ustaw właściwą lokalizację pliku favicon w przypadku Twojej witryny.

Pozostałe atrybuty to:

• rel=”shortcut icon” – posłuży jako obrazek skrótu;

<link rel="shortcut icon" href="/lokalizacja/pliku/favicon.ico">

• rel=”apple-touch-icon” – do wyświetlania na urządzeniach mobilnych Apple.

<link rel="apple-touch-icon" href="/lokalizacja/pliku/favicon.ico">

W bardziej zaawansowanej wersji kod html może wyglądać na przykład tak:

<link rel=”icon” href=”lokalizacja/pliku/favicon-32×32.png” sizes=”32×32″><link rel=”icon” href=”lokalizacja/pliku/favicon-192×192.png” sizes=”192×192″><link rel=”apple-touch-icon” href=”lokalizacja/pliku/favicon-180×180.png”><meta name=”msapplication-TileImage” content=”lokalizacja/pliku/favicon-270×270.png”>

W ten sposób favicon wyświetla się zarówno w mniejszych, jak i większych rozmiarach, a także prawidłowo na iPhone’ach czy iPadach.

Warto wiedzieć, że czasem ikona strony internetowej jest blokowana przez plik robots.txt – favicon wyświetla się wtedy w przeglądarce, jednak nie będzie pokazywany w wynikach wyszukiwania. Można to sprawdzić w googlowskiej usłudze Robots.txt Tester. Szczegółowe instrukcje dotyczące ustawiania ikony, by trafiła do SERPów (Search Engine Result Pages) znajdują się na oficjalnej stronie Google dla developerów.

Favicon a SEO

Ikona witryny nie ma bezpośredniego wpływu na pozycję strony w wynikach wyszukiwania. Może jednak wpłynąć na SEO strony, chociaż zrobi to nieco „naokoło”.

Favicon co do zasady potwierdza tożsamość witryny, dodaje jej wiarygodności i pomaga wzbudzić zaufanie wśród odbiorców. Jednocześnie przyciąga uwagę i zachęca do kliknięcia, zwiększając ruch organiczny, a zatem daje botowi Google sygnał, że strona jest wartościowa dla użytkowników.

Ikony witryn a strony internetowe

Zdecydowanie warto więc ustawić ikonę witryny – niezależnie, czy zrobisz to za pomocą panelu administracyjnego, czy kodu html, favicon wzbogaca stronę i pomaga w budowaniu świadomości marki. To jeden z setek małych elementów składających się na zwiększenie ruchu na stronie, zdobycie nowych klientów i poprawę współczynnika konwersji.