Co to jest favicon?

Termin „favicon” to połączenie dwóch słów – „favourite” ( z ang. „ulubiona”) i „icon” (z ang. „ikona”). Został wprowadzony w 1999 roku przez przeglądarkę Internet Explorer w sekcji ulubionych zakładek.

Favicon to mały obrazek (zwykle o wymiarach 16×16px), który identyfikuje i odróżnia konkretną stronę internetową od innych. Wyświetlany jest przed adresem URL w pasku przeglądarki, przed tytułem witryny na karcie przeglądarki, na liście zakładek czy w historii przeglądania, a także w wynikach wyszukiwania.

Gdzie można zobaczyć favicon?

Favicony znajdują się przy wszystkim, co identyfikuje Twoją witrynę w przeglądarce – w zakładkach, na kartach, w historii czy na pasku wyszukiwania. Oto kilka przykładów:

Karty przeglądarki

Zakładki

Historia przeglądania

Mobile SERP

Podpowiedzi paska przeglądarki

Dlaczego ikona favicon jest ważna?

Favicon to niewielki dodatek do Twojej strony internetowej, który pozostawia znacznie większe wrażenie niż jego rzeczywisty rozmiar. Dlaczego nie należy go lekceważyć?

Zwiększa świadomość i rozpoznawalność marki

Favicon to zapadający w pamięć i chwytliwy element, który reprezentuje Twoją markę w sieci i pozwala użytkownikowi ją znaleźć lub zauważyć w tłumie innych witryn. Wyświetla się na kartach przeglądarki, w historii i na zakładkach. Jeśli więc Twoja strona będzie tam wyraźnie widoczna, użytkownicy mogą łatwo zidentyfikować Twoją firmę. Co za tym idzie – będą chętniej w nią klikać, np. gdy wyświetli się na liście wyników wyszukiwań.

Jeśli favicon jest starannie zaprojektowany, spójny z pozostałym designem marki i czytelny w małych rozdzielczościach, będzie także świetnie wspierać marketing. Powtarzająca się w różnych miejscach kolorystyka czy logo sprawią, że użytkownicy podświadomie zapamiętają wizerunek związany z Twoją marką.

Lepsze doświadczenia użytkownika

Favicon pozytywnie wpływa na wrażenia użytkownika, ponieważ pomaga mu w szybkiej identyfikacji strony, gdy ma otwartych wiele różnych kart w jednym oknie przeglądarki.

Większość z nas wertuje internet wzrokiem – obrazy postrzegamy szybciej niż słowa. Oznacza to, że dzięki faviconom oszczędzamy cenny czas na przeszukiwaniu potrzebnej zakładki lub linku. Mały, charakterystyczny obrazek działa w tym przypadku jak haczyk, który przykuwa nasz wzrok i umożliwia odnalezienie danej treści w ułamku sekundy.

Podkreśla wiarygodność i profesjonalizm firmy

Chociaż favicon nie ma wpływu na bezpieczeństwo witryny ani nie jest wyznacznikiem jej oryginalności, to jednak użytkownicy częściej ufają witrynom, które je mają. Są one dla nich sygnałem, który świadczy o profesjonalizmie firmy i wzmacniają jej wiarygodność.

Gdy strona nie posiada własnego favicon, przeglądarka wyświetla domyślną ikonę obok adresu URL. Jest ona wtedy niezauważalna i ginie w tłumie innych, bardziej kolorowych i dopracowanych znaków.

Jak zrobić favicon? Wskazówki dotyczące projektowania favicon

Jaki rozmiar powinna mieć ikona favicon?

Wymiary favicon różnią się w zależności od tego, gdzie będą używane. Standardowy rozmiar to 16×16 pikseli, jednak w niektórych przypadkach favicon musi być nieco większy. Oto przykładowe wymiary favicon i ich zastosowanie:

• 16 × 16 px dla przeglądarek internetowych,
• 32 × 32 px dla ikon na pasku zadań,
• 96 × 96 px dla ikon na pulpicie,
• 180 x 180 px dla ikon dotykowych Apple,
• 512 x 512 px dla WordPressa.

Najlepiej, jeśli stworzysz swój favicon w wielu rozmiarach. Tak, żeby można go było wykorzystać na różnego rodzaju platformach, z których korzystają Twoi odbiorcy.

Jaki format powinien mieć favicon?

Pierwotnie wszystkie favicony były tworzone w formacie ICO — to rodzaj pliku, opracowany przez Microsoft do przechowywania ikon programów Windows. Obecnie istnieje więcej różnych opcji formatowania. Poniżej znajdziesz 3 najczęściej stosowane:

• ICO – to klasyczny i zdecydowanie najczęściej obsługiwany rodzaj pliku. Jego zaletą jest to, że może zawierać jeden lub kilka obrazów o różnej rozdzielczości i głębi kolorów. ICO jest rozpoznawany przez wszystkie przeglądarki internetowe.
• PNG – jest dobrym wyborem z kilku powodów. Przede wszystkim do jego stworzenia nie potrzebujesz żadnych specjalnych narzędzi. Ponadto umożliwia tworzenie małych obrazów o dobrej jakości i przezroczystym tle.
• SVG – jest obsługiwany przez większość przeglądarek, a jego wielkim plusem jest skalowalność. Oznacza to, że obraz zapisany w tym formacie możesz zmniejszać lub zwiększać bez utraty jakości. Dzięki temu łatwo stworzyć favicon w różnych rozmiarach, dopasowanych na wiele urządzeń. SVG to także jedyny format favicon, jaki obsługuje przeglądarka Safari.

O czym pamiętać podczas projektowania favicon?

Postaw na minimalizm

Najprostsze favicony są najlepsze. W tym przypadku nie ma co przesadzać z liczbą kolorów, kształtami, a tym bardziej tekstem. Niewielkie rozmiary favicon niejako wymuszają minimalizm – mają przyciągać wzrok i wyróżniać się z tłumu. Jeśli zbyt dużo będzie się działo na tak małym obrazku, to ikona favicon będzie wydawał się niechlujny i mało atrakcyjny.

Spójność z marką

Favicon to część Twojego brand identity, dlatego musi być spójny z identyfikacją wizualną marki. Użyj w nim tych samych schematów kolorystycznych, które zawiera logo czy projekt Twojej strony internetowej.

Jednym z najłatwiejszych sposobów na stworzenie ikony favicon jest użycie logo. Nie wszystkie jednak będą dobrze wyglądać w tak małym rozmiarze. W całości możesz użyć loga, jeśli jest ono naprawdę bardzo proste i zawiera niewiele elementów. W innym przypadku będziesz musiał wprowadzić w nim kilka zmian – np. uprościć je lub wybrać i wykorzystać tylko jeden charakterystyczny element (symbol, akronim czy pojedynczą literę).

Zobacz, jak zrobiły to inne firmy:

Zwróć uwagę na kolory

Pamiętaj o tym, że kolor tła karty przeglądarki jest zazwyczaj szary lub biały, a w trybie nocnym lub incognito czasem czarny. Weź to pod uwagę, projektując swój favicon i sprawdź, jak wybrana kolorystyka będzie się prezentować z różnym tłem.

Jak dodać favicon do strony internetowej?

Aby dodać favicon do swojej strony internetowej, najpierw musisz go stworzyć. Możesz to zrobić w dowolnym programie graficznym (np. Photoshop, Illustrator, Gimp, Paint czy Sketch) lub skorzystać z dostępnych online specjalnych generatorów. Wystarczy, że prześlesz w nich obraz PNG, JPG lub SVG, a narzędzie przekonwertuj go na odpowiedni format favicon i udostępni Ci do pobrania. A co dalej zrobić z takim plikiem?

Dodawanie favicon w WordPressie

Aby dodać favicon do swojej witryny WordPress:

• W kokpicie WordPress wejdź w „Wygląd”, a następnie w „Dostosuj”.
• W menu po lewej stronie wybierz „Tożsamość witryny”.
• Wgraj swój plik z favicon w rozmiarze min. 512 × 512 px.
• Na koniec nie zapomnij zapisać zmian i opublikuj stronę.

Dodawanie favicon do katalogu public_HTML

Innym sposobem na dodanie favicon do strony internetowej jest umieszczenie go w głównym katalogu witryny – public_html. Stamtąd wykryje go większość przeglądarek i odpowiednio wyświetli. Co należy zrobić?

• Jeśli Twój favicon jest w formacie PNG, JPG lub innym, musisz przekonwertować go do formatu .ico.
• Po konwersji i pobraniu ikony, zmień nazwę pliku na „favicon.ico”.
• W menadżerze plików w panelu hostingowym lub za pomocą aplikacji FTP, prześlij favicon do katalogu swojej strony – /public_html/.
• Aby mieć pewność, że większość przeglądarek wykryje Twój favicon i poprawnie go wyświetli, w dowolnym miejscu między tagami < head > i < / head > swojego pliku HTML, dodaj wiersz kodu. W zależności od typu obrazu, którego używasz będzie to, np.:
  • plik ICO:

  <link rel="shortcut icon" type="image/x-icon" href="/favicon.ico">
  

  • obraz PNG:

  <link rel= "shortcut icon" type="image/png" href="/favicon.png" sizes="16x16"> 
  

  Możesz również określić różne rozmiary favicon, jeśli chcesz, aby był używany na wielu urządzeniach, które mają różne wymagania. Wtedy w kodzie musisz użyć atrybutu „sizes”:

  <link rel="shortcut icon" sizes="<16>x<16>,<32>x<32>">