Czym jest favikona i jak zrobić ją z logo (2026)

Favikona to maleńka ikona reprezentująca twoją stronę w karcie przeglądarki, zakładce lub na ekranie głównym telefonu. Zrób ją z symbolu swojego logo, uprość, by czytała się w 16–32 pikselach, i dostarcz minimalny zestaw plików na 2026: SVG, awaryjny ICO oraz apple-touch-icon 180×180.

Autor LogoSagaOpublikowano
Na tej stronie
  1. Czym jest favikona?
  2. Dlaczego favikona ma znaczenie?
  3. Rozmiary i formaty favikony, których potrzebujesz
  4. Jak zrobić favikonę z logo
  5. Podłączanie favikony w HTML
  6. Bonus: favikona, która dostosowuje się do trybu ciemnego
  7. Testowanie favikony
Ten sam znak pokazany w rozmiarach favikony, włącznie z wersją wielkości karty przeglądarki.
Favikona to znak twojego logo, uproszczony tak, by pozostał czytelny w maleńkich rozmiarach.

Czym jest favikona?

Favikona (skrót od „favorite icon”, ulubiona ikona) to mały kwadratowy obraz reprezentujący stronę w karcie przeglądarki, zakładce, wpisie historii i na ekranie głównym telefonu. Prawie zawsze jest uproszczoną wersją logo marki — konkretnie znaku, bo w tym rozmiarze nie ma miejsca na pełną nazwę.

Dlaczego favikona ma znaczenie?

Favikona to mały, ale stały element brandingu. Przy kilkunastu otwartych kartach jest często jedynym sposobem, w jaki ktoś dostrzega twoją stronę na pierwszy rzut oka, a ikona zapisana na ekranie głównym zasiada obok dopracowanych ikon aplikacji. Ostra, spójna z marką favikona wygląda przemyślanie; brakująca lub rozmyta wygląda niedokończenie.

Rozmiary i formaty favikony, których potrzebujesz

Nie potrzebujesz kilkunastu ikon, które wymieniają stare poradniki. W 2026 minimalny, niezawodny zestaw jest mały:

PlikRozmiarPrzeznaczenie
favicon.svgdowolnynowoczesne przeglądarki; adaptuje się do trybu ciemnego
favicon.ico16 + 32awaryjne (starsze przeglądarki)
apple-touch-icon.png180×180ekran główny iOS
ikony PWA (opcjonalne)192, 512instalowalne aplikacje internetowe

Rozmiary jak 64×64, 96×96 i 128×128, które zalecają starsze poradniki, są przestarzałe — pomiń je. Plik .ico to rozwiązanie awaryjne, a nie główny plik: przeglądarki obsługujące SVG wolą jego.

  1. Zacznij od znaku, a nie pełnego logo — nazwa nie odczyta się w rozmiarze karty.
  2. Uprość pod maleńkie rozmiary. Porzuć drobny detal, cienkie linie i subtelne gradienty, które znikają w 16–32 pikselach. Preferuj śmiałe kształty i wysoki kontrast.
  3. Zachowaj kwadrat z odrobiną marginesu, by nie był ściśnięty przy krawędziach karty.
  4. Wyeksportuj zestaw — SVG, ICO i PNG 180×180 — z wektorowego pliku wzorcowego swojego logo.
Krok eksportu w edytorze LogoSaga pokazujący favicon.svg dołączony do plików logo.
Eksport z wektorowego pliku wzorcowego daje ci favikonę, która dokładnie pasuje do logo.

Ponieważ SVG jest idealnym formatem wzorcowym, warto zrozumieć SVG vs PNG dla logo, zanim wyeksportujesz.

Podłączanie favikony w HTML

Wskaż na pliki z sekcji <head> swoich stron. Nowoczesny, minimalny zestaw wygląda tak:

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

Przeglądarki obsługujące SVG używają go; reszta wraca do ICO.

Bonus: favikona, która dostosowuje się do trybu ciemnego

Favikona SVG może nieść własne stylowanie dla trybu ciemnego. Osadź w SVG zapytanie medialne, by znak zmieniał kolory wraz z motywem przeglądarki:

<style>
  path {
    fill: #18231d;
  }
  @media (prefers-color-scheme: dark) {
    path {
      fill: #eef1ea;
    }
  }
</style>

Chrome, Firefox i Edge to honorują; Safari jeszcze nie, więc wybierz kolory, które pozostają czytelne w obu motywach jako rozwiązanie awaryjne.

Testowanie favikony

Sprawdź ją w prawdziwej karcie przeglądarki, w wersji jasnej i ciemnej oraz na ekranie głównym telefonu. Ponieważ przeglądarki mocno buforują favikony, po każdej zmianie zrób twarde odświeżenie — albo wyczyść pamięć podręczną, zmieniając nazwę pliku lub dodając ?v=2. Jeśli w rozmiarze karty wygląda mętnie, uprość znak jeszcze bardziej: favikona to uczciwy test tego, jak dobrze logo się zmniejsza.

Jeśli budujesz logo w LogoSaga, eksport zawiera już favicon.svg obok SVG i PNG logo, więc favikona zawsze dokładnie pasuje do znaku.

Stwórz logo z pasującą favikoną

Częste pytania

Jaki rozmiar powinna mieć favikona?

Dostarcz skalowalny SVG plus rastrowe rozmiary PNG: 32×32 to nowoczesny standard karty, 16×16 to klasyczny mały rozmiar, a 180×180 to ikona Apple touch. Aplikacje PWA potrzebują też 192×192 i 512×512.

W jakim formacie powinna być favikona — SVG, PNG czy ICO?

Użyj SVG do nowoczesnych przeglądarek, ICO jako awaryjnego rozwiązania dla starszych i PNG do apple-touch-icon oraz rozmiarów PWA. SVG jest skalowalny i może nawet dostosować się do trybu ciemnego; ICO obsługuje starsze przeglądarki.

Czy favikona może się zmieniać w trybie ciemnym?

Tak, z favikoną SVG. Osadź w SVG zapytanie medialne prefers-color-scheme, by zdefiniować kolory jasne i ciemne. Safari jeszcze tego nie honoruje, więc wybierz neutralny kolor, który czyta się na obu.

Dlaczego moja favikona się nie pokazuje ani nie aktualizuje?

Przeglądarki agresywnie buforują favikony. Po zmianie odśwież na twardo albo wyczyść pamięć podręczną, zmieniając nazwę pliku lub dodając ciąg zapytania jak favicon.svg?v=2, i potwierdź, że znaczniki link w nagłówku strony są poprawne.

Źródła