Co to jest favicon i do czego służy?
Favicon (skrót od 'favorite icon’) to niewielka grafika, najczęściej o wymiarach 16×16 pikseli. Jej obecność:
- poprawia rozpoznawalność marki,
- wpływa na profesjonalny wizerunek strony,
- ułatwia użytkownikom odnalezienie zakładek lub stron wśród wielu otwartych kart,
- bywa używana przez wyszukiwarki jako element w wynikach wyszukiwania.
Przygotowanie pliku ikony
Najczęściej wykorzystywany jest format .ico, jednak nowoczesne przeglądarki obsługują również .png lub .svg. Warto przygotować ikonę w różnych rozmiarach (najczęściej 16×16, 32×32, czasem 48×48 pikseli) lub w wersji wektorowej (SVG), aby dopasować ją do różnych urządzeń.
Umieszczenie pliku w projekcie
Umieść przygotowany plik favicon.ico w głównym katalogu projektu lub w katalogu z zasobami graficznymi, np. /images/.
Dodanie ikonki do kodu HTML
Otwórz plik HTML i w sekcji <head> wstaw tag:
<link rel="icon" href="/images/favicon.ico" type="image/x-icon">- href – ścieżka do pliku z ikoną, np.
/images/favicon.icolubfavicon.png; - type – określa typ pliku, np.
image/x-icon,image/png,image/svg+xml.
Dla wersji SVG lub PNG:
<link rel="icon" type="image/png" href="favicon.png">
<link rel="icon" type="image/svg+xml" href="favicon.svg">Przykład pełnego kodu HTML:
<!DOCTYPE html>
<html lang="pl">
<head>
<meta charset="UTF-8">
<title>Moja Strona</title>
<link rel="icon" href="/images/favicon.ico" type="image/x-icon">
</head>
<body>
<h1>Witamy na mojej stronie!</h1>
</body>
</html>Obsługa wielu rozmiarów ikony
Aby zapewnić wsparcie dla różnych urządzeń (np. smartfony, tablety), możesz użyć atrybutu sizes:
<link rel="icon" type="image/png" sizes="32x32" href="favicon-32x32.png">
<link rel="icon" type="image/png" sizes="16x16" href="favicon-16x16.png">Pliki favicon-32x32.png i favicon-16x16.png umieść w wybranym katalogu projektu.
Dla SVG (skaluje się dowolnie):
<link rel="icon" type="image/svg+xml" sizes="any" href="favicon.svg">Alternatywna metoda: favicon bez kodu
Jeśli w głównym katalogu serwera umieścisz plik o nazwie favicon.ico, przeglądarki mogą automatycznie wykryć i wyświetlić ikonę nawet bez wpisywania znacznika <link> w sekcji head. Jednak dla pełnej kontroli oraz wsparcia dla innych formatów, zaleca się jawne użycie powyższych znaczników w kodzie HTML.
Przykłady zastosowań i praktyczne wskazówki
- Polecany rozmiar to 16×16 dla starszych przeglądarek – nowoczesne przeglądarki korzystają także z większych ikon (32×32, 48×48, 64×64);
- Jeśli chcesz zapewnić najwyższą kompatybilność, przygotuj ikonę w formacie .ico – plik ten może zawierać kilka wersji ikony o różnych rozmiarach;
- Dla stron typu Progressive Web App (PWA) czy na potrzeby urządzeń Apple można dodać dodatkowe znaczniki (np.
apple-touch-icon). Przykład:
<link rel="apple-touch-icon" sizes="180x180" href="/apple-touch-icon.png">- Po dodaniu favicon, warto wyczyścić cache w przeglądarce lub otworzyć stronę w trybie incognito, by zobaczyć zmiany,
- stosowanie ikon w formacie SVG jest rekomendowane dla nowoczesnych zastosowań – umożliwia skalowanie bez utraty jakości.
Podsumowanie
Dodanie favicon to prosty, a bardzo użyteczny zabieg. Ustal formaty i rozmiary plików, umieść je w projekcie, zastosuj odpowiednie znaczniki w sekcji head i ciesz się profesjonalnym wyglądem Twojej strony. Regularne aktualizowanie favicon zwiększa atrakcyjność witryny zarówno dla użytkowników, jak i wyszukiwarek internetowych.
