Co to jest favicon i jak dodać go do strony internetowej?

Choć favicon jest niepozorny, pełni ważną rolę. Te miniaturowe identyfikatory wizualne towarzyszą przeglądarkom internetowym od czasów Internet Explorera z lat 90., pojawiając się na kartach przeglądarki i w zakładkach. Favicon to wizualna wskazówka, która pomaga użytkownikom skojarzyć witrynę z tożsamością marki.

Czas porzucić domyślną ikonę przeglądarki. W kilka chwil możesz stworzyć favicon, który robi wrażenie i ułatwia nawigację w oknie przeglądarki pełnym otwartych kart.

Co to jest favicon?

Favicon to mała grafika wyświetlana obok tytułu strony na karcie przeglądarki, a także na pasku zakładek, pasku ulubionych, w historii przeglądania oraz na stronach wyników wyszukiwania (SERP).

Nazwa „favicon” pochodzi od angielskiego określenia favorite icon („ulubiona ikona”). Pełni funkcję wizualnego oznaczenia witryny i ułatwia jej identyfikację, gdy w przeglądarce otwartych jest wiele kart jednocześnie. Favicon może też pojawiać się jako ikona skrótu na pasku zadań, gdy witryna jest przypięta lub zminimalizowana. Gdy użytkownik doda stronę do zakładek, favicon staje się jej ikoną, co ułatwia odnalezienie jej wśród innych zapisanych adresów.

W niektórych systemach operacyjnych przeciągnięcie adresu URL z okna przeglądarki na pulpit tworzy skrót. W takim przypadku favicon często pełni rolę jego ikony.

Korzyści z używania faviconu

• Większy współczynnik klikalności (CTR) 
• Budowanie świadomości marki
• Lepsze doświadczenie użytkownika i dłuższy czas spędzony na stronie

Favicon sam w sobie nie poprawi magicznie pozycji witryny w wynikach wyszukiwania (SEO), ale jego dodanie – w połączeniu z innymi usprawnieniami doświadczenia użytkownika (UX) – może pomóc stworzyć bardziej przyjazną stronę. Oto kilka sposobów, w jakie favicon wpływa na działanie witryny:

Większy współczynnik klikalności (CTR) 

Google i inne wyszukiwarki wyświetlają favicony w wynikach wyszukiwania. Przyciągająca wzrok lub łatwo rozpoznawalna ikona może zwiększyć rozpoznawalność marki i zachęcić użytkowników do odwiedzenia witryny. Przekłada się to na wyższy współczynnik klikalności (CTR) – ważną metrykę e-commerce w kontekście SEO.

Budowanie świadomości marki

Favicon nawiązujący do logo marki działa jak bezpłatna reklama – pojawia się na pasku zakładek użytkownika, w karcie witryny oraz w wynikach wyszukiwania, stopniowo utrwalając wizerunek marki.

Lepsze doświadczenie użytkownika i dłuższy czas spędzony na stronie 

Łatwo rozpoznawalny favicon zwiększa szansę, że użytkownik doda stronę do zakładek – zachowanie, które wyszukiwarki, takie jak Google, mogą interpretować jako pozytywny sygnał. To drobne usprawnienie doświadczenia użytkownika zachęca do ponownych odwiedzin, zwiększając ruch na stronie i czas spędzony na niej (czyli czas, jaki użytkownik spędza na stronie przed powrotem do wyników wyszukiwania).

Wskazówki dotyczące tworzenia faviconu dla witryny

• Wybór odpowiedniego rozmiaru
• Wybór odpowiedniego formatu pliku
• Rozważenie animowanego faviconu

Dobry favicon spełnia określone wymagania dotyczące rozmiaru i formatu pliku:

Wybór odpowiedniego rozmiaru

Optymalny rozmiar faviconu to 16 × 16 pikseli, choć niektóre ikony projektuje się również w rozmiarach 32 × 32 lub 48 × 48 pikseli. Rozmiar 16 × 16 pikseli jest obsługiwany przez wszystkie przeglądarki – zarówno na kartach przeglądarki, jak i w zakładkach oraz na pasku adresu. To najbezpieczniejszy wybór.

Wybór odpowiedniego formatu pliku

Format oryginalnego pliku ma kluczowe znaczenie dla jakości faviconu. Najczęściej stosowane formaty to PNG i ICO. Pliki PNG wykorzystują bezstratną kompresję i obsługują przezroczystość, dzięki czemu jakość obrazu nie pogarsza się podczas skalowania. Pliki ICO, używane w systemie Microsoft Windows, mogą zawierać kilka obrazów w różnych rozmiarach i głębiach kolorów, co zapewnia dobrą skalowalność. Format SVG nie jest jeszcze tak powszechnie obsługiwany przez przeglądarki, ale ładuje się szybko i można go skalować bez utraty jakości. Warto unikać formatów takich jak JPEG, które powodują utratę części danych obrazu podczas kompresji.

Rozważenie animowanego faviconu

Animowane pliki GIF lub skrypty JavaScript mogą dodać faviconowi dynamiki, ale mają swoje ograniczenia – przede wszystkim pod względem zgodności z przeglądarkami. Animowany favicon warto przetestować w kilku różnych przeglądarkach, ponieważ to, co świetnie wygląda w Google Chrome, może nie działać poprawnie w innej.

Popularne generatory faviconu

Aby stworzyć favicon zgodny z identyfikacją wizualną marki, możesz skorzystać z generatorów online. Oto kilka popularnych opcji:

• Favicon.io umożliwia tworzenie faviconu z pliku graficznego, linku lub tekstu oraz konwersję do różnych formatów. Po pobraniu przekonwertowanych plików wystarczy umieścić je w katalogu głównym witryny, skopiować tagi <link> i wkleić je do sekcji <head> strony HTML.

• RealFaviconGenerator to interaktywne API, które pozwala określić sposób przetwarzania obrazu głównego podczas generowania faviconu.

• Favicon Generator umożliwia tworzenie faviconu osobno dla każdej platformy, dzięki czemu można sprawdzić, jak projekt wygląda w różnych środowiskach i przeglądarkach.

• Favicon.ico & App Icon Generator od Dan's Tools pozwala przesłać istniejący obraz i przekonwertować go do formatu ICO lub skorzystać z galerii gotowych ikon.

Jak dodać favicon do HTML?

Po stworzeniu faviconu należy przesłać go na serwer i dodać odpowiedni kod, aby przeglądarki i aplikacje internetowe mogły go wyświetlać.

Odwołanie do faviconu to jedna linia kodu umieszczona w sekcji <head> pliku HTML witryny. Przeglądarka odczytuje instrukcje zawarte w tagu <head>, aby znaleźć favicon i go wyświetlić. Jeśli plik faviconu to PNG o nazwie „brandXicon.png", wystarczy dodać poniższą linię wewnątrz tagu <head></head>:

<link rel="icon" type="image/png" rel="noopener" target="_blank" href="/brandXicon.png">

Favicon może znajdować się w dowolnym katalogu witryny. W powyższym przykładzie umieszczono go w katalogu głównym, co jest najczęstszym rozwiązaniem. Warto sprawdzić, czy ścieżka do pliku jest poprawna.

Możliwe jest też użycie kilku rozmiarów faviconu jednocześnie. Każdy rozmiar wymaga osobnej linii kodu – wszystkie należy umieścić wewnątrz tagu <head></head>. Każdemu rozmiarowi należy nadać unikalną nazwę pliku i dodać atrybut „sizes", jak w poniższym przykładzie:

<link rel="icon" type="image/png" sizes="16x16" rel="noopener" target="_blank" href="/brandXicon16x16.png">

<link rel="icon" type="image/png" sizes="32x32" rel="noopener" target="_blank" href="/brandXicon32x32.png">

Jak dodać favicon do witryny Shopify?

Jeśli korzystasz z Shopify, favicon możesz dodać bez konieczności kodowania:

1. W przeglądarce na komputerze przejdź do panelu administracyjnego swojego sklepu online.

2. Wybierz „Motywy" > „Dostosuj", aby otworzyć edytor motywu.

3. Kliknij „Ustawienia motywu" – ikona koła zębatego.

4. Wybierz „Favicon" (w niektórych motywach opcja ta nosi nazwę „Logo").

5. Wybierz obraz z biblioteki sklepu lub prześlij nowy plik.

6. Jeśli opcja jest dostępna, uzupełnij pole „Tekst alternatywny” faviconu, aby poprawić dostępność. Tekst ten pojawi się po najechaniu kursorem na favicon.

7. Zapisz zmiany i przetestuj favicon w różnych przeglądarkach.

Więcej informacji na temat dodawania faviconu z poziomu iPhone'a lub urządzenia z Androidem znajdziesz w artykule pomocy Shopify poświęconym temu zagadnieniu.

Jak dodać favicon w WordPress?

Jeśli Twój sklep internetowy działa w WordPress, poniżej znajdziesz instrukcję dodawania faviconu krok po kroku:

1. Przejdź do panelu WordPress i kliknij „Wygląd".

2. Kliknij „Dostosuj", aby wyświetlić listę opcji.

3. Kliknij „Tożsamość witryny" – tutaj możesz zarządzać tytułem witryny, sloganem i logo.

4. W sekcji „Ikona witryny" kliknij „Wybierz ikonę witryny", aby przesłać nowy plik faviconu.

5. Kliknij „Opublikuj", aby zapisać zmiany.

6. Sprawdź wygląd faviconu w różnych przeglądarkach.

Jak dodać favicon w Wix?

Witryny Wix mają domyślny favicon, ale użytkownicy planu Premium mogą go dostosować. Aby zmienić favicon w swojej witrynie Wix:

1. Przejdź do „Ustawień" w panelu witryny.

2. Obok opcji „Favicon" kliknij „Zarządzaj".

3. Kliknij „Prześlij obraz" lub „Prześlij plik multimedialny", aby dodać grafikę z komputera.

4. Kliknij „Dodaj do strony" i sprawdź podgląd faviconu w karcie przeglądarki.

5. Kliknij „Zapisz", a następnie „Opublikuj".