Poniższy artykuł przedstawia, czym są Favicony, dlaczego warto je używać, jak ważne są do prowadzenia strony WWW oraz jak je dodać do swojej witryny czy sklepu internetowego. Zobacz, co to jest favicon.

• Co to jest favicon?
• Gdzie zlokalizowane są favicony?
• Dlaczego warto stosować favicony?
• Jak ważne są favicony dla SEO?
• Jak powinny wyglądać favicony?
• Jakie rozmiary powinny mieć favicony dla poszczególnych przeglądarek?
• Jakie są zalecane formaty do używania favicon?
• Jak dodać favicon do WordPress?

Co to jest favicon?

Favicon jest to mała ikona o wymiarze 16×16 pikseli służąca do pomagania w budowaniu świadomość marki twojej strony internetowej. Głównym jego zadaniem jest ułatwienie potencjalnym klientom, znalezienia twojej strony, kiedy posiadają wiele otwartych kart w przeglądarce internetowej. Favicony często mylone są z logo. Głównie wynika to z faktu, że w wielu przypadkach są bardzo podobne do logo. Niewielki rozmiar favicony pozwala na umieszczenie obrazu lub od jednego do trzech znaków. Dlatego też częściej stosuje się znak graficzny jako wygląd favicony.

Gdzie zlokalizowane są favicony?

Favicony możemy znaleźć wszędzie tam, gdzie znajdujemy odniesienia do naszej strony internetowej. Mogą to być:

• poszczególne karty w przeglądarce internetowej
• zakładki w przeglądarce internetowej
• aplikacje na pasku narzędzi
• wyniki historii przeglądania w przeglądarce
• paski wyszukiwania

Ponadto favicona pojawia się także przy adresie strony internetowej w wynikach wyszukiwania w wyszukiwarkach internetowych jak np. Google.

Dlaczego warto stosować favicony?

Favicony dodają wiarygodność twojej stronie internetowej i zwiększają zaufanie klientów. Za ich pomocą klienci są w stanie w łatwy sposób zidentyfikować, która strona należy do ciebie. Cenne jest to, szczególnie gdy użytkownik posiada dużą ilość otwartych kart. Wtedy tylko poprzez favicony są stanie zidentyfikować, która strona jest tą którą pragną otworzyć. Przy dużej ilość zakładek nie widać w ogóle napisów informujących nas o nazwie danej zakładki. Favicony ujednolicają to i porządkują, aby poprawić doświadczenia związane z przeglądaniem wielu witryn w przeglądarce internetowej.

Jak ważne są favicony dla SEO?

Favicony są bardzo ważnym narzędziem, które pośrednio odpowiedzialne jest za poprawę rankingu strony internetowej w sieci. Poniżej zostały przedstawione przykłady, jak favicony mogą pomóc w optymalizacji witryny internetowej dla wyszukiwarek:

• Wzrost widoczności – dzięki faviconom witryna staje się bardziej widoczna i zwiększa potencjał na poprawę pozycji w wynikach wyszukiwania. Favicony są jak wizytówka, one reprezentują Twoją markę. W gąszczu różnych zakładek favicony pozwolą na łatwą identyfikację Twojej strony, co zwiększy szanse na to, że większa liczba użytkowników na nią kliknie. Może zatem pozytywnie wpłynąć na ilość odwiedzin.
• Możliwość dodania do zakładek – bez favicony nie ma możliwości dodania danej strony internetowej jako zakładka do przeglądarki Chrome. Przeglądarka ta dolicza jako dodatkowe kliknięcia dodawanie stron do zakładek i w przypadku jego braków możesz stracić szansę na poprawę wyniku swojej strony w rankingu wyszukiwania.
• UX/UE – posiadanie favicony pozytywnie wpływa na doświadczenia użytkowników (ang. „user experience). Może to pośrednio poprawić twoje SEO poprzez to, że strona stanie się łatwiejsza w użytku dzięki zastosowaniu favicony. Użytkownikowi łatwiej będzie odnaleźć daną stronę w historii wyszukiwania lub w gąszczu zakładek. Dzięki temu stanie się dla niego przyjaźniejsza i z większą chęcią odwiedzi ja ponownie.

Jak powinny wyglądać favicony?

Projektując swoją ikonkę favicon dla strony strony internetowej, należy wziąć pod uwagę kilka aspektów:

• Rozmiar –  favicona powinna mieć rozmiar 16×16 pikseli. Większy często nie jest akceptowany przez przeglądarki. Nie zawsze możesz dodać swoje logo jak favicona, ponieważ jego rozmiar może nie być akceptowany z uwagi na większy rozmiar.
• Prostota – favicony powinny być proste, bez zbędnych detali. Favicona jest na tyle mała, że drobne detale i tak nie będą widoczne dla użytkownika.
• Odzwierciedlenie marki  – wygląd favicony powinien nawiązywać do Twojej marki. Jeśli ciężko jest tak ją zaprojektować, to dobrą praktyką jest zastosowanie miniatury logotypu jako favicony lub np. wycinek z logo, który sam w sobie będzie rozpoznawalnym znakiem graficznym. Powinna być tak stworzona, aby osoba niemająca zielonego pojęcia czym zajmuje się dana marka, po spojrzeniu się na faviconem od razu wiedziała, z czym ma do czynienia.
• Kolorystyka – ważną rolę odgrywają również kolory. Kolory kontrastowe lepiej przyciągną wzrok potencjalnych klientów i są bardziej widoczne.

  Znalezienie obrazka, który będzie idealnie odzwierciedlał stronę WWW, może być trudne. Lepiej czasami zastosować akronimy, pierwszą literę nazwy firmy lub skrót nazwy firmy. Wszystko zależy od Twojej inwencji twórczej.

Jakie rozmiary powinny mieć favicony dla poszczególnych przeglądarek?

Jeśli planujesz wykonanie favicony dla konkretnego celu to zobacz jaki wymiar powinna mieć tworzona favicona:

• 16px – do ogólnego użytku we wszystkich przeglądarkach. Może być wyświetlana w pasku adresu, zakładkach lub widokach zakładek.
• 24px – dla przeglądarki Internet Explorer 9
• 32px – dla nowej karty w przeglądarce Internet Explorer, przycisk paska zadań w systemie Windows 7 i paska bocznego
• 57px – standardowy ekran główny iOS (iPod Touch, iPhone pierwszej generacji do 3G)
• 72px – ikona ekranu głównego iPada
• 96px – rozmiar favicon używany przez platformę Google TV
• 114px – ikona ekranu głównego iPhone’a 4+ (dwukrotnie większa od standardowego rozmiaru wyświetlacza Retina)
• 128px – sklep internetowy Chrome
• 195px – ikona szybkiego wybierania w przeglądarce Opera

Jakie są zalecane formaty do używania favicon?

Favicona może posiadać różne formaty. Przyjrzymy się najpopularniejszym z nich:

• Format ICO – jest najczęściej obsługiwanym formatem pliku dla favicony. Jego zaletą jest fakt, że można stosować wiele rozdzielczość i głębi bitowych. Oferuje 32-pikselową ikonę, która świetnie się sprawdza niemal w każdej przeglądarce.
• Format PNG – format ten nie potrzebuje żadnych specjalistycznych narzędzi do utworzenia pliku. Daje najmniejsze możliwość rozmiarów pliku i obsługuje przezroczystość alfa. Jego wadą jest to, że Internet Explorer nie obsługuje plików PNG.
• Format SVG – format ten jest chętnie używany przez przeglądarkę Opera.
• Format GIF – format ten jest jedynie używany przez starsze przeglądarki. Nie zalecamy używania tego formatu plików, gdyż nie oferuje żadnych korzyści.
• Format JPG – traci na swoim zastosowaniu przez mały rozmiar favicony. Dodatkowo nie zapewnia tak dobrej rozdzielczość, jak PNG.

Jak dodać favicon do WordPress?

Strony internetowej zbudowane na systemie WordPress to jedne z najpopularniejszych typów witryn w Internecie. Samo dodanie favicony w tego typu stronach internetowych jest wyjątkowo łatwe i nie wymaga specjalnych umiejętności. Zobacz, jak to można wykonać:

• Jak dodać favicon w WordPress?
• Wstawianie favicon do WordPress przy użyciu wtyczki
• Jak dodać do WordPress przez FTP?