Dokumentacja HTML z przykładami: Favicon

Q: Jak dodać favicon w HTML?

Umieść plik ikony na swojej stronie i dodaj (albo ścieżkę do PNG lub SVG) wewnątrz . Przeglądarki pokażą ją wtedy na karcie, w zakładkach i w historii.

Q: Jaki rozmiar powinien mieć favicon?

Przygotuj favicon.ico (lub PNG) 32×32 dla kart, SVG, które skaluje się do każdego rozmiaru, i PNG apple-touch-icon 180×180 dla ekranów głównych iPhone'a. Aplikacje webowe z manifestem podają też PNG 192×192 i 512×512.

Q: Dlaczego mój favicon się nie wyświetla?

Zwykle przyczyną jest zła ścieżka w href, umieszczony poza albo przeglądarka nadal pokazuje starą ikonę z pamięci podręcznej. Otwórz adres ikony bezpośrednio, żeby sprawdzić ścieżkę, a potem przeładuj stronę z wyczyszczoną pamięcią podręczną albo dodaj do adresu wersję, np. ?v=2.

Q: Czy mogę użyć SVG lub PNG jako favicona?

Tak. Użyj albo . SVG działa w Chrome, Edge i Firefoksie; zachowaj też ICO lub PNG dla przeglądarek, które go nie obsługują.

Q: Czy potrzebuję rel="shortcut icon"?

Nie. rel="icon" to standardowa wartość. Słowo shortcut to pozostałość po starym Internet Explorerze i w obecnych przeglądarkach nic nie robi.

Jak dodać favicon

Zapisz ikonę na swojej stronie i wskaż ją znacznikiem <link rel="icon"> w <head>:

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

To cała odpowiedź dla prostej strony. href może wskazywać plik .ico, .png lub .svg. Przykład poniżej używa SVG wpisanego bezpośrednio w href jako data URI, więc nie potrzebuje osobnego pliku. Podgląd osadzony w innej stronie nie może zmienić karty twojej przeglądarki, więc skrypt rysuje tę samą ikonę na udawanej karcie i w trzech rozmiarach:

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="utf-8">
  <title>Bake Club</title>
  <link rel="icon" type="image/svg+xml"
    href="data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 32 32'%3E%3Crect width='32' height='32' rx='7' fill='%232563eb'/%3E%3Ctext x='16' y='23' font-size='20' font-family='Arial' font-weight='700' fill='white' text-anchor='middle'%3EB%3C/text%3E%3C/svg%3E">
  <style>
    body { font-family: system-ui, sans-serif; margin: 12px; }
    .bar { background: #e5e7eb; padding: 8px 8px 0; border-radius: 8px 8px 0 0; }
    .tab { display: inline-flex; align-items: center; gap: 8px; background: #fff; border-radius: 8px 8px 0 0; padding: 8px 14px; font-size: 13px; }
    .sizes { display: flex; align-items: end; gap: 16px; margin-top: 16px; font-size: 12px; color: #6b7280; }
    .sizes div { text-align: center; }
  </style>
</head>
<body>
  <div class="bar"><div class="tab"><img id="tab-icon" width="16" height="16" alt=""><span id="tab-title"></span></div></div>
  <div class="sizes" id="sizes"></div>
  <script>
    const href = document.querySelector('link[rel="icon"]').href;
    document.getElementById('tab-icon').src = href;
    document.getElementById('tab-title').textContent = document.title;
    for (const size of [16, 32, 64]) {
      const box = document.createElement('div');
      box.innerHTML = '<img width="' + size + '" height="' + size + '" alt=""><br>' + size + 'px';
      box.querySelector('img').src = href;
      document.getElementById('sizes').append(box);
    }
  </script>
</body>
</html>

Przy 16 pikselach jest miejsce na jedną pogrubioną literę albo prosty kształt, a drobne detale znikają. Projektuj ikonę najpierw dla najmniejszego rozmiaru. Zmień fill='%232563eb' na inny kolor (%23 to zakodowany w URL #), a każda kopia się zaktualizuje.

Jakie pliki przygotować

Przeglądarki, telefony i launchery aplikacji szukają różnych ikon. Mały zestaw obsługuje je wszystkie:

<link rel="icon" href="/favicon.ico" sizes="32x32">
<link rel="icon" href="/icon.svg" type="image/svg+xml">
<link rel="apple-touch-icon" href="/apple-touch-icon.png">
<link rel="manifest" href="/manifest.webmanifest">

Plik	Rozmiar	Do czego służy
`favicon.ico`	32×32	Karty przeglądarki i narzędzia, które szukają tylko `/favicon.ico`
`icon.svg`	Dowolny (wektor)	Ostre karty przy każdej gęstości ekranu, w Chrome, Edge i Firefoksie
`apple-touch-icon.png`	180×180	Ikona, gdy ktoś doda twoją stronę do ekranu głównego iPhone'a lub iPada
Ikony manifestu	PNG 192×192 i 512×512	Ekran główny Androida i zainstalowane aplikacje webowe

Większość przeglądarek sama pobiera też /favicon.ico z katalogu głównego strony, gdy strona nie ma linku do ikony, więc umieszczenie tam favicon.ico to przydatne ustawienie domyślne. Atrybut sizes mówi przeglądarce, jaki rozmiar ma każdy plik, żeby mogła wybrać najlepiej pasujący. Używaj rel="icon"; starsze rel="shortcut icon" działa tylko dlatego, że przeglądarki ignorują dodatkowe słowo.

Favicon z emotki

W prototypie lub na stronie osobistej emotka to szybki favicon. Umieść ją w elemencie SVG <text>:

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="utf-8">
  <title>Emoji favicon</title>
  <link rel="icon"
    href="data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 100 100'%3E%3Ctext y='.9em' font-size='90'%3E%F0%9F%8D%AA%3C/text%3E%3C/svg%3E">
</head>
<body style="font-family: system-ui, sans-serif;">
  <p>The icon at tab size and larger:</p>
  <img id="a" width="16" height="16" alt="">
  <img id="b" width="48" height="48" alt="">
  <script>
    const href = document.querySelector('link[rel="icon"]').href;
    document.getElementById('a').src = href;
    document.getElementById('b').src = href;
  </script>
</body>
</html>

%F0%9F%8D%AA to emotka ciastka zakodowana w URL. Emotkę rysuje czcionka emoji systemu operacyjnego, więc wygląda inaczej w Windowsie, macOS i Androidzie, a w prawdziwym produkcie lepiej sprawdzi się zaprojektowana ikona.

Ikona, która dostosowuje się do trybu ciemnego

Favicon w SVG może mieć własny CSS, łącznie z zapytaniem medialnym prefers-color-scheme, więc ciemna ikona może stać się jasna, gdy przeglądarka używa ciemnego motywu:

<!-- icon.svg -->
<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 32 32">
  <style>
    circle { fill: #111827; }
    @media (prefers-color-scheme: dark) { circle { fill: #f9fafb; } }
  </style>
  <circle cx="16" cy="16" r="14"/>
</svg>

Zmiana favicona w JavaScripcie

Strony używają zmieniającego się favicona do kropki powiadomień albo koloru statusu. Narysuj nową ikonę na <canvas> i ustaw href linku na obraz z canvasa:

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="utf-8">
  <title>Dynamic favicon</title>
  <link rel="icon" id="icon" href="data:,">
  <style>
    body { font-family: system-ui, sans-serif; margin: 12px; }
    button { font: inherit; padding: 6px 12px; margin-inline-end: 6px; }
    img { vertical-align: middle; margin-inline-start: 8px; }
  </style>
</head>
<body>
  <button id="on">New message</button>
  <button id="off">Clear</button>
  Current icon: <img id="preview" width="32" height="32" alt="">
  <script>
    function draw(withDot) {
      const canvas = document.createElement('canvas');
      canvas.width = canvas.height = 32;
      const ctx = canvas.getContext('2d');
      ctx.fillStyle = '#2563eb';
      ctx.fillRect(2, 2, 28, 28);
      if (withDot) {
        ctx.fillStyle = '#dc2626';
        ctx.beginPath();
        ctx.arc(24, 8, 7, 0, Math.PI * 2);
        ctx.fill();
      }
      const url = canvas.toDataURL('image/png');
      document.getElementById('icon').href = url;
      document.getElementById('preview').src = url;
    }
    document.getElementById('on').onclick = () => draw(true);
    document.getElementById('off').onclick = () => draw(false);
    draw(false);
  </script>
</body>
</html>

Na prawdziwej stronie w Chrome lub Firefoksie ikona karty zmienia się przy każdym ustawieniu href, w tym samym momencie, w którym zmienia się tutaj obrazek podglądu.

Częste błędy

Zła ścieżka. href="favicon.ico" jest względne wobec bieżącej strony, więc psuje się na /blog/post. Użyj ścieżki od katalogu głównego: href="/favicon.ico".
Oczekiwanie, że zmiana pojawi się od razu. Przeglądarki mocno cache'ują faviconki. Przeładuj z wyczyszczoną pamięcią podręczną albo zmień adres (/favicon.ico?v=2), gdy podmieniasz ikonę.
Szczegółowe logo zmniejszone do 16 pikseli. Uprość je: jedna litera lub jeden kształt z mocnym kontrastem.
Tylko SVG. Zachowaj też ICO lub PNG dla przeglądarek bez obsługi favicona SVG i dodaj apple-touch-icon dla iOS.
Link w <body>. Trzymaj go w <head> razem ze znacznikiem title i innymi metadanymi.

Najczęściej zadawane pytania

Jak dodać favicon w HTML?

Umieść plik ikony na swojej stronie i dodaj <link rel="icon" href="/favicon.ico"> (albo ścieżkę do PNG lub SVG) wewnątrz <head>. Przeglądarki pokażą ją wtedy na karcie, w zakładkach i w historii.

Jaki rozmiar powinien mieć favicon?

Przygotuj favicon.ico (lub PNG) 32×32 dla kart, SVG, które skaluje się do każdego rozmiaru, i PNG apple-touch-icon 180×180 dla ekranów głównych iPhone'a. Aplikacje webowe z manifestem podają też PNG 192×192 i 512×512.

Dlaczego mój favicon się nie wyświetla?

Zwykle przyczyną jest zła ścieżka w href, <link> umieszczony poza <head> albo przeglądarka nadal pokazuje starą ikonę z pamięci podręcznej. Otwórz adres ikony bezpośrednio, żeby sprawdzić ścieżkę, a potem przeładuj stronę z wyczyszczoną pamięcią podręczną albo dodaj do adresu wersję, np. ?v=2.

Czy mogę użyć SVG lub PNG jako favicona?

Tak. Użyj <link rel="icon" href="/icon.svg" type="image/svg+xml"> albo <link rel="icon" href="/icon.png" type="image/png">. SVG działa w Chrome, Edge i Firefoksie; zachowaj też ICO lub PNG dla przeglądarek, które go nie obsługują.

Czy potrzebuję rel="shortcut icon"?

Nie. rel="icon" to standardowa wartość. Słowo shortcut to pozostałość po starym Internet Explorerze i w obecnych przeglądarkach nic nie robi.

Czy mogę użyć emotki jako favicona?

Tak, umieszczając ją w SVG: data URI z SVG zawierającym element <text> z emotką. Przydaje się w prototypach, ale emotka wygląda inaczej w każdym systemie operacyjnym.

Powiązane zagadnienia