Aby dodać favicon do strony internetowej w HTML, należy przygotować ikonę, umieścić ją na serwerze i odpowiednio zadeklarować w kodzie HTML. Poniżej przedstawiam szczegółowy poradnik wraz z przykładami i praktycznymi wskazówkami.
Czym jest favicon?
Favicon (skrót od „favorite icon”) to mała ikona, która reprezentuje Twoją stronę internetową. Wyświetla się m.in. w zakładkach przeglądarki, na pasku adresu, listach ulubionych, a także podczas dodawania skrótu strony na urządzeniach mobilnych. Dzięki favicon Twoja strona jest łatwiej rozpoznawalna.
Przygotowanie favicon
- Format pliku – najbardziej uniwersalny jest format .ico, ale możesz również użyć .png lub .svg; format .ico jest wspierany przez wszystkie przeglądarki, natomiast nowoczesne przeglądarki obsługują też .png i .svg (np. z przezroczystościami);
- Wymiary – standardowy rozmiar to 16×16 px, ale warto przygotować również wersje 32×32 px lub większe na potrzeby Retina/HiDPI i urządzeń mobilnych;
- Nazwa – najczęściej stosowana to favicon.ico, ale możesz użyć innej (np. logo.png).
Umieszczenie pliku na serwerze
Prześlij plik favicon do katalogu swojej strony, najczęściej do folderu głównego (tam, gdzie znajduje się plik index.html), lub do folderu z zasobami graficznymi (np. assets).
Deklaracja ikony w kodzie HTML
Otwórz plik HTML i w sekcji <head> dodaj jeden z poniższych tagów (przykłady):
Najprostszy i najpopularniejszy przykład (dla favicon.ico)
<head>
<link rel="icon" type="image/x-icon" href="favicon.ico">
</head>
- href=”favicon.ico” – jeśli plik jest w katalogu głównym strony;
- Jeśli plik jest w podkatalogu (np. assets), użyj:
<link rel="icon" type="image/x-icon" href="assets/favicon.ico">.
Obsługa innych formatów i większej liczby wersji
Dla szerszej kompatybilności (np. z urządzeniami Apple i nowoczesnymi przeglądarkami):
<head>
<link rel="icon" type="image/png" sizes="32x32" href="favicon-32x32.png">
<link rel="icon" type="image/png" sizes="16x16" href="favicon-16x16.png">
<link rel="icon" type="image/svg+xml" href="favicon.svg">
<link rel="shortcut icon" href="favicon.ico">
</head>
- sizes – pozwala określić różne rozmiary dla obsługi różnych urządzeń i DPI;
- type – definiuje format pliku.
Przykłady zastosowań
Przykład 1 – prosta strona z favicon.ico w katalogu głównym
<!DOCTYPE html>
<html lang="pl">
<head>
<meta charset="UTF-8">
<title>Moja strona WWW</title>
<link rel="icon" type="image/x-icon" href="favicon.ico">
</head>
<body>
<h1>Witamy na stronie!</h1>
</body>
</html>
Przykład 2 – użycie favicon z podkatalogu
<head>
<link rel="icon" type="image/x-icon" href="assets/favicon.ico">
</head>
Przykład 3 – nowoczesna strona z favicon w formacie PNG i SVG
<head>
<link rel="icon" type="image/png" href="favicon.png">
<link rel="icon" type="image/svg+xml" href="favicon.svg">
</head>
Ważne wskazówki
- Pamiętaj o odświeżeniu przeglądarki (czasem również wyczyszczeniu cache), by zobaczyć efekty zmian.
- Favicon może być automatycznie rozpoznany przez większość przeglądarek, jeśli plik favicon.ico zostanie umieszczony w katalogu głównym nawet bez deklaracji w
<head>, jednak deklaracja jest zalecana – szczególnie, gdy używasz innego formatu lub umieszczasz favicon w innym miejscu. - Wielkość pliku favicon powinna być jak najmniejsza – zbyt duży plik może spowolnić ładowanie strony.
- Jeśli strona korzysta z frameworka lub CMS, sprawdź zalecaną lokalizację favicon i opcje konfiguracyjne.
Częste błędy
- Błędna ścieżka do pliku w atrybucie href.
- Brak tagu
<link>lub umieszczenie go poza sekcją<head>. - Zły format lub uszkodzony plik favicon.
Dodatkowe zastosowania favicon
- Wyświetlanie ikon aplikacji na urządzeniach mobilnych – warto wygenerować dodatkowe grafiki dedykowane dla systemów iOS i Android i użyć odpowiednich tagów
<link rel="apple-touch-icon" ...>; - Personalizacja interfejsu – np. zmiana favicon w zależności od stanu aplikacji (np. powiadomienia);
- Branding – favicon wzmacnia rozpoznawalność marki, dlatego warto zadbać, by był spójny z identyfikacją wizualną.
Dodanie favicon do strony jest proste, a wpływa na profesjonalny odbiór witryny i jej widoczność w sieci. Wystarczy ikona, poprawna deklaracja w HTML i przemyślana lokalizacja pliku.
