Favicon w HTML

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 oraz 16x16 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.

Poprzedni
Następny
Scroll to Top