Favicon, skrót od “favorite icon”, jest małą ikoną związaną z daną stroną lub stronami internetowymi, wyświetlaną w przeglądarce internetowej. Pojawia się ona na paskach adresu, w zakładkach strony oraz na listach ulubionych, pomagając użytkownikom łatwiej identyfikować i odróżniać strony internetowe. W tej lekcji przeanalizujemy, jak dodać favicon do strony HTML, omawiając różne formaty i praktyki.
Przykład kodu: Dodawanie Favicon do strony HTML
<!DOCTYPE html>
<html lang="pl">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Przykład Favicon</title>
<!-- Dodanie Favicon -->
<link rel="icon" type="image/png" sizes="32x32" href="favicon-32x32.png">
<link rel="icon" type="image/png" sizes="16x16" href="favicon-16x16.png">
<!-- Apple Touch Icon dla urządzeń Apple -->
<link rel="apple-touch-icon" sizes="180x180" href="apple-touch-icon.png">
<!-- Ikona dla systemu Windows Tiles -->
<meta name="msapplication-TileColor" content="#da532c">
<meta name="msapplication-TileImage" content="mstile-144x144.png">
<!-- Ikona maskowalna dla nowoczesnych przeglądarek -->
<link rel="mask-icon" href="safari-pinned-tab.svg" color="#5bbad5">
<style>
body {
font-family: Arial, sans-serif;
margin: 20px;
padding: 20px;
border: 1px solid #ddd;
text-align: center;
}
</style>
</head>
<body>
<h3>Witaj w lekcji o Favicon!</h3>
<p>Ta strona demonstruje, jak dodać różne typy favicon do Twojej strony HTML.</p>
</body>
</html>
Szczegółowy opis
- Favicon dla różnych rozdzielczości: W przykładzie użyto różnych rozmiarów favicon, co pozwala na lepszą obsługę na różnych urządzeniach. Używamy
32x32
pikseli dla standardowych wyświetlaczy oraz16x16
pikseli dla mniejszych ikon, takich jak te na paskach zakładek. - Apple Touch Icon: Jest to specjalna ikona dla urządzeń Apple, która pojawia się, gdy użytkownik dodaje stronę do ekranu domowego na urządzeniu iOS. Rozmiar
180x180
pikseli jest zalecany dla optymalnej jakości. - Ikona dla systemu Windows Tiles: Meta tagi dla kafelków systemu Windows pozwalają na określenie koloru kafelka oraz obrazu, który powinien się na nim wyświetlać. Umożliwia to bardziej spersonalizowaną prezentację strony na urządzeniach z systemem Windows.
- Ikona maskowalna: Używana głównie w Safari na macOS, pozwala na dodanie ikony, która może być maskowana i dostosowywana kolorystycznie przez przeglądarkę, dzięki czemu pasuje do stylu systemu użytkownika.
Podsumowanie
Dodanie favicon do Twojej strony HTML jest prostym, ale ważnym krokiem w budowaniu profesjonalnej obecności w Internecie. Dzięki faviconie użytkownicy mogą łatwiej rozpoznać Twoją stronę wśród wielu otwartych zakładek lub na liście ulubionych. Przestrzeganie najlepszych praktyk, takich jak dostarczanie ikon w różnych rozmiarach i formatach, zapewnia, że favicon będzie wyglądała dobrze na różnych urządzeniach i w różnych przeglądarkach.