Favicon: co to i jak go użyć na swojej stronie?

Favicon wydaje się małym, niewiele znaczącym elementem, ale… nie traktuj go z góry. Diabeł zawsze  tkwi w szczegółach. A o perfekcji Twojej witryny świadczy dbałość o takie właśnie małe elementy. 

Z tego artykułu dowiesz się, czym jest Favicon, jaką ma wartość pod kątem SEO i jak stworzyć najlepszą ikonę dla Twojej strony.

Chcesz wiedzieć więcej? Przeczytaj:

Heurystyki Nielsena, czyli dobre UX

Twoja pierwsza strona – co musisz wiedzieć

Dlaczego gotowe logo na stronie to zły pomysł?

Co to jest favicon?

Favicon jest to niewielka ikona (najczęściej w wymiarach 16×16 pikseli), która służy jako znak rozpoznawczy Twojej witryny. Ułatwia użytkownikowi zlokalizowanie witryny w pasku zakładek. Choć favicon i logo mogą wyglądać identycznie, są to dwa różne pojęcia. 

Ponieważ favicony są niedużych rozmiarów, powinny być to proste obrazy lub teksty z maksymalnie trzema znakami. 

Gdzie zobaczę favicon?

Favicony są obok wszystkiego, co identyfikuje Twoją witrynę. Znajdziesz je zatem w:

• zakładkach,
• kartach,
• aplikacji pasków narzędzi,
• wynikach historii,
• paskach wyszukiwania. 

Dlaczego favicon jest ważny dla SEO?

Czy favicon jest potrzebny Twojej witrynie? Oczywiście. I to z kilku ważnych powodów. 

Po pierwsze, strony z faviconem są bardziej przyjazne dla użytkownika, więc mogą mieć pośredni wpływ na SEO. Skąd taki wniosek? Favicon widoczny w kartach przeglądarki pomaga zaoszczędzić czas użytkownikom – bez problemu zidentyfikują Twoją witrynę i chętniej na nią wejdą. Mogą też przez to spędzić więcej czasu na stronie, a to już jest jednym z czynników rankingowych Googla. 

Po drugie, brak faviconu będzie Cię negatywnie wyróżniał. Możesz też stracić szansę na dodanie do zakładek w przeglądarce Chrome.

Po trzecie, favicon buduje Twoją markę i widoczność. Użytkownicy będą Cię identyfikować m.in. właśnie po tym niewielkim znaku. Ponadto favicon łatwo zapamiętać, a coś, co znane, jest chętniej odwiedzane 🙂. 

Wykorzystaj te fakty na swoją korzyść. 

Jak zrobić favicon?

Czas na stworzenie najlepszego możliwego faviconu. 

Podstawowe wskazówki przy projektowaniu

Zastosuj się do moich wskazówek, a zachwycisz rezultatem siebie i swoich odbiorców:

1. Mądrze korzystaj z przestrzeni. Ponieważ musisz trzymać się rozdzielczości 16×16 pikseli (jest akceptowana przez wszystkie przeglądarki), nie staraj się upychać tu całego logo. Zwłaszcza jeśli jest ono długie lub skomplikowane. 
2. Postaw na prostotę. Może Cię kusić dodanie efektów specjalnych lub intrygujących elementów. Nie daj się ponieść! Im prostszy favicon, tym lepszy. Wystarczy charakterystyczny dla Twojej marki kształt i wyróżniający go kolor.
3. Spróbuj stworzyć wizualną informację dla użytkowników, znak, który będzie reprezentował Twoją markę. Przyjrzyj się najpierw najlepszym – faviconom Gmaila, YouTube’a czy Whats up’a. Prosty szybko przywodzi na myśl całą markę. 
4. Jeśli punkt 3. nie pasuje do charakteru Twojej działalności, użyj pierwszej litery swojej nazwy, jej skrótu lub akronimów. Możesz się tym pobawić!
5. Wybierz spójne kolory. Te kontrastujące ułatwiają rozpoznawanie kształtów i centralnego punktu ikony. Pamiętaj przy tym, że przeglądarki mogą mieć różne tła, na których wyświetlają favicony. Znajdź więc coś uniwersalnego, na którym Twój symbol na pewno zostanie zauważony. 

Instrukcja krok po kroku

Znasz już podstawowe zasady tworzeniaj ikony. Czas przejść do działania. 

1. Stwórz swój obraz

Zacznij od prostego projektu. Możesz to tego wykorzystać edytory Fireworks, Photoshop, Corel Paint lub Gimp. Edycję zacznij od formatu 64×64 (łatwo go przeskalować do 16×16). Następnie zapisz plik w formacie .jpg, .png, .gif, .bmp lub .tif.

1. Konwertuj

Jeśli osiągniesz już zamierzony efekt, zapisz ikonę jako favicon.ico (format ten jest obsługiwany przez większość przeglądarek). Użyj w tym celu narzędzia online, takiego jak iconifier.net, prodraw.net lub faviconer.com. Prześlij tu swój obraz, wybierz rozmiar i pobierz nowy plik .ico.

1. Prześlij ikonę na stronę internetową

Teraz prześlij plik .ico do katalogu głównego Twojej witryny.

1. Dodaj podstawowy kod HTML

Starsze przeglądarki wymagają nieco pomocy, by mogły znaleźć obraz ikony favicon. Żeby im to ułatwić, możesz edytować stronę HTML witryny.  Dodaj do nagłówka i w tagach swojej strony fragment:

<link rel=”icon” type=”image/x-icon” href=”http://example.com/favicon.ico” />

Jaki format powinien mieć Favicon?

Najlepszym rozmiarem faviconu jest 16×16 pikseli. To właśnie w tym formacie wyświetla się na karcie przeglądarki, paskach adresu i w liście zakładek. Ale Twoja ikona powinna dobrze wyglądać także w innych miejscach. Zrobisz mądrze, jeśli stworzysz favicon w wielu rozmiarach.

Oto mała ściągawka:

• dla ikon przeglądarki: 16×16
• do skrótów na pasku zadań: 32×32
• do skrótów na pulpicie: 96×96
• dla dotykowych ikon Apple: 180×180
• rozmiar wymagany przez Squarespace: 300×300
• rozmiar wymagany przez WordPress: 512×512. 

Jak zmienić favicon w WordPress?

Chcąc dodać favicon do witryny postawionej w WordPress, zastosuj się do poniższych kroków.

1. Przejdź do sekcji Wygląd, a następnie kliknij Dostosuj. 

1. Przejdź do menu (na lewym pasku bocznym) i kliknij w Tożsamość witryny

1. W sekcji Ikona możesz wybrać obraz i dodać ikonę, która ma być wyświetlana.

Jeśli jednak Twój motyw nie pozwala na przesłanie faviconu w ustawieniach, użyj któregoś z generatorów faviconów (np. Website Planet lub Favicon.io) i prześlij go do odpowiedniej wtyczki. 

W tym celu kliknij Wybierz swoje zdjęcie Favicon

A następnie prześlij ikonę na WordPress Media (wygeneruje się adres URL faviconu). Wybierz opcję numer dwa i wklej swój adres URL w odpowiednie pole.

 Teraz skopiuj cały kod html:

Przejdź do wtyczki i w sekcji Wstaw nagłówki i stopki kliknij Ustawienia. Tutaj wklej kod HTML (w sekcji <head>) i kliknij Zapisz

Jak dodać favicon w html?

Proces dodawania faviconu w html jest równie prosty. Najpierw utwórz folder w katalogu projektu o nazwie  images i zapisz tutaj swoją ikonę (oczywiście przy użyciu języka HTML – jeśli nie wiesz, jak to zrobić, przeczytaj ten poradnik).  

Teraz dodaj <link>element do index.html pliku tuż pod elementem <title>. Powinno to wyglądać tak:

…

<title> Sammy’s First Website </title>

<link rel=”shortcut icon„ type=”image/jpg„ href=”Favicon_Image_Location„/>

…

Zastąp Favicon_Image_Location względną ściężką pliku obrazu favicon. Zapisz index.html i załaduj go ponownie w przeglądarce. Wszystko powinno już działać jak należy.