Ikony strony (Favicon)

Lekcja 11.2: Ikony strony (Favicon)

Strona główna > Rozdział 11: Zaawansowane funkcje HTML > Ikony strony (Favicon)

Mała ikona, duże znaczenie

Favicon (skrót od "favorites icon"), znana również jako ikona strony, ikona witryny lub ikona zakładki, to mała ikonka graficzna powiązana z konkretną stroną internetową lub witryną. Przeglądarki wyświetlają favikony w różnych miejscach, najczęściej:

Na karcie przeglądarki, obok tytułu strony.
Na pasku zakładek (bookmarks bar).
W historii przeglądania.
Jako ikona aplikacji na ekranie głównym urządzenia mobilnego (po dodaniu strony do ekranu głównego).

Choć mała, favicona odgrywa ważną rolę w budowaniu marki, rozpoznawalności witryny i poprawie doświadczenia użytkownika, ułatwiając szybką identyfikację otwartych kart czy zapisanych zakładek.

Jak dodać faviconę? Znacznik <link>

Favicony dodaje się w sekcji <head> dokumentu HTML za pomocą znacznika <link> z odpowiednimi atrybutami.

<link rel="icon" href="sciezka/do/favicon.ico">

rel="icon": Określa relację między dokumentem HTML a linkowanym zasobem - w tym przypadku, że jest to ikona.
href: Wskazuje ścieżkę (URL) do pliku ikony.

Formaty plików Favicon

Historycznie najpopularniejszym formatem był .ico (Microsoft Icon format), który może zawierać wiele ikon o różnych rozmiarach w jednym pliku. Jest on nadal najbezpieczniejszym wyborem dla zapewnienia maksymalnej kompatybilności ze starszymi przeglądarkami.

Nowoczesne przeglądarki obsługują również inne formaty, w tym:

PNG (.png): Dobrze wspierany, pozwala na przezroczystość. Zazwyczaj używa się rozmiarów takich jak 16x16, 32x32, 48x48 pikseli.
SVG (.svg): Format wektorowy, skalowalny bez utraty jakości. Idealny dla nowoczesnych przeglądarek i ekranów o wysokiej rozdzielczości. Coraz lepiej wspierany.
GIF (.gif): Obsługiwany, ale rzadziej używany niż PNG ze względu na ograniczenia kolorów.
JPEG (.jpg): Raczej niezalecany dla ikon ze względu na kompresję stratną i brak przezroczystości.

Określanie typu i rozmiaru ikony

Aby pomóc przeglądarce wybrać najlepszą ikonę i poprawnie ją zinterpretować, można dodać atrybuty type i sizes do znacznika <link>:

type: Określa typ MIME pliku ikony (np. image/x-icon dla .ico, image/png dla .png, image/svg+xml dla .svg).
sizes: Określa rozmiar ikony (lub rozmiary oddzielone spacją) w pikselach (np. 16x16, 32x32, 16x16 32x32). Dla ikon SVG można użyć wartości any.

Przykład z ikoną PNG 32x32:

<link rel="icon" type="image/png" sizes="32x32" href="/icons/favicon-32x32.png">

Przykład z ikoną SVG:

<link rel="icon" type="image/svg+xml" sizes="any" href="/icons/favicon.svg">

Dostarczanie wielu ikon

Można (i często warto) zdefiniować wiele znaczników <link rel="icon" ...> z różnymi formatami i rozmiarami. Przeglądarka wybierze najbardziej odpowiednią ikonę w zależności od kontekstu (np. małą ikonę dla karty, większą dla zakładek).

Zalecana kolejność to często podanie najpierw preferowanych formatów (np. SVG), a następnie bardziej kompatybilnych (PNG, ICO).

<!-- Preferowana ikona SVG -->
<link rel="icon" type="image/svg+xml" href="favicon.svg">
<!-- Ikona PNG jako fallback -->
<link rel="icon" type="image/png" sizes="32x32" href="favicon-32x32.png">
<link rel="icon" type="image/png" sizes="16x16" href="favicon-16x16.png">
<!-- Ikona ICO dla starszych przeglądarek -->
<link rel="icon" type="image/x-icon" href="favicon.ico">

Uwaga: Niektóre źródła sugerują, że plik favicon.ico umieszczony w głównym katalogu witryny jest automatycznie pobierany przez niektóre przeglądarki, nawet bez jawnego linkowania. Mimo to, zawsze zaleca się jawne deklarowanie ikon za pomocą <link>.

Ikony dla urządzeń mobilnych: `apple-touch-icon`

Urządzenia Apple (iOS) używają specjalnego typu ikony, gdy użytkownik dodaje stronę do ekranu głównego ("Dodaj do ekranu początkowego"). Definiuje się ją za pomocą rel="apple-touch-icon".

<!-- Domyślna ikona dla urządzeń Apple (zazwyczaj 180x180) -->
<link rel="apple-touch-icon" href="apple-touch-icon.png">

<!-- Można też podać ikony w różnych rozmiarach -->
<link rel="apple-touch-icon" sizes="152x152" href="apple-touch-icon-152x152.png">
<link rel="apple-touch-icon" sizes="167x167" href="apple-touch-icon-167x167.png">

Inne systemy mobilne (np. Android) również mogą wykorzystywać te ikony lub inne mechanizmy (np. plik manifestu aplikacji webowej - manifest.json).

Generatory Favicon

Tworzenie wszystkich potrzebnych formatów i rozmiarów ikon oraz odpowiednich znaczników <link> może być czasochłonne. Istnieją narzędzia online (generatory favicon), które na podstawie jednego obrazka (np. w wysokiej rozdzielczości PNG lub SVG) generują zestaw ikon w różnych formatach i rozmiarach oraz gotowy kod HTML do wklejenia w sekcji <head>. Przykłady takich generatorów to RealFaviconGenerator, Favicon.io.

Zadanie praktyczne (z rozwiązaniem)

Zadanie: Zakładając, że masz plik ikony favicon.png w rozmiarze 32x32 pikseli, dodaj go jako faviconę do dokumentu HTML. Umieść znacznik <link> w sekcji <head>.

Rozwiązanie:

<!DOCTYPE html>
<html lang="pl">
<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>Strona z Faviconą</title>
  
  <!-- Dodanie favicony -->
  <link rel="icon" type="image/png" sizes="32x32" href="favicon.png">
  
</head>
<body>
  <h1>Witaj na stronie z faviconą!</h1>
  <p>Sprawdź kartę przeglądarki - powinna tam być widoczna ikona (favicon.png).</p>
</body>
</html>

Upewnij się, że plik favicon.png znajduje się w tej samej lokalizacji co plik HTML lub podaj poprawną ścieżkę w atrybucie href.

Dodatkowe zadania do samodzielnego wykonania:

Utwórz prosty plik favicon.ico (możesz użyć edytora online lub programu graficznego) i dodaj go za pomocą <link rel="icon" type="image/x-icon" href="favicon.ico">.
Znajdź lub stwórz ikonę w formacie SVG i dodaj ją jako preferowaną faviconę (type="image/svg+xml").
Dodaj link do ikony apple-touch-icon.png (możesz użyć tej samej ikony co dla favicony, ale w większym rozmiarze, np. 180x180).
Skorzystaj z jednego z generatorów favicon online, aby stworzyć kompletny zestaw ikon i kod HTML dla swojej strony.

Najczęściej zadawane pytania

Co to jest favicon?

Favicon to mała ikona graficzna reprezentująca stronę internetową, wyświetlana m.in. na kartach przeglądarki, w zakładkach i historii.

Jak dodać faviconę do strony HTML?

Użyj znacznika <link> w sekcji <head> z atrybutem `rel="icon"` i `href` wskazującym na plik ikony (np. <link rel="icon" href="favicon.ico">).

Jaki format pliku jest najlepszy dla favicony?

Dla maksymalnej kompatybilności warto mieć plik .ico. Dla nowoczesnych przeglądarek preferowane są formaty PNG (dla różnych rozmiarów) i SVG (skalowalny).

Do czego służą atrybuty `type` i `sizes` w linku do favicony?

`type` określa typ MIME pliku (np. `image/png`), a `sizes` podaje rozmiar ikony w pikselach (np. `32x32`). Pomagają one przeglądarce wybrać odpowiednią ikonę.

Co to jest `apple-touch-icon`?

Jest to specjalna ikona używana przez urządzenia iOS, gdy użytkownik dodaje stronę do ekranu głównego. Definiuje się ją za pomocą <link rel="apple-touch-icon" href="...">.