Przejdź do głównej zawartości

Favicon w HTML

Wprowadzenie

Favicon to mała ikonka widoczna na karcie przeglądarki obok tytułu strony. Pomaga rozpoznać stronę wśród wielu otwartych kart.

Teoria / Wyjaśnienia

Favicon najczęściej zapisuje się jako:
- favicon.ico,
- plik .png (np. 32×32 px, 64×64 px).
Umieszczamy ją w sekcji <head> dokumentu HTML.
Typowy zapis:
- <link rel="icon" href="/favicon.ico" type="image/x-icon">
- lub <link rel="icon" href="/favicon.png" type="image/png">.

Praktyczne przykłady

Przykład

<head>
  <meta charset="UTF-8">
  <title>Moja strona</title>
  <link rel="icon" href="/favicon.ico" type="image/x-icon">
</head>

Ćwiczenie

Przygotuj prostą ikonę (np. 32×32 px) w formacie .ico lub .png.
Umieść ją w katalogu public/ w projekcie.
Dodaj odpowiedni <link rel="icon" ...> w sekcji <head> swojej strony.