Čo je favicon a ako ho vytvoriť z loga (2026)

Favicon je maličká ikona, ktorá zastupuje váš web v záložke prehliadača, v záložkách alebo na ploche telefónu. Vytvorte ho zo symbolu svojho loga, zjednodušte ho, aby sa čítal v 16 – 32 pixeloch, a dodajte minimálnu sadu pre rok 2026: SVG, záložné ICO a 180×180 apple-touch-icon.

Autor LogoSagaPublikované
Na tejto stránke
  1. Čo je favicon?
  2. Prečo na favicone záleží?
  3. Veľkosti a formáty faviconu, ktoré potrebujete
  4. Ako vytvoriť favicon z loga
  5. Prepojenie faviconu vo vašom HTML
  6. Bonus: favicon, ktorý sa prispôsobí tmavému režimu
  7. Testovanie faviconu
Tá istá značka zobrazená vo veľkostiach favicony, vrátane verzie vo veľkosti záložky prehliadača.
Favicon je značka vášho loga, zjednodušená tak, aby zostala jasná v maličkých veľkostiach.

Čo je favicon?

Favicon (skratka z „favorite icon“) je malý štvorcový obrázok, ktorý zastupuje web v záložke prehliadača, v záložkách, v histórii a na ploche telefónu. Takmer vždy je to zjednodušená verzia loga značky — konkrétne značky, pretože na celý názov v tejto veľkosti nie je miesto.

Prečo na favicone záleží?

Favicon je malý, ale stály kúsok brandingu. S tuctom otvorených záložiek je to často jediný spôsob, ako niekto váš web na prvý pohľad nájde, a ikona uložená na plochu sedí vedľa vyladených ikon aplikácií. Ostrý favicon verný značke pôsobí premyslene; chýbajúci alebo rozmazaný pôsobí nedokončene.

Veľkosti a formáty faviconu, ktoré potrebujete

Tucet ikon, ktoré staré návody vypisujú, nepotrebujete. V roku 2026 je minimálna, spoľahlivá sada malá:

SúborVeľkosťÚčel
favicon.svgľubovoľnámoderné prehliadače; zvláda tmavý režim
favicon.ico16 + 32záložné (staršie prehliadače)
apple-touch-icon.png180×180domovská obrazovka iOS
Ikony PWA (voliteľné)192, 512inštalovateľné webové aplikácie

Veľkosti ako 64×64, 96×96 a 128×128, ktoré odporúčajú staršie návody, sú zastarané — vynechajte ich. .ico je záložný, nie hlavný súbor: prehliadače, ktoré podporujú SVG, mu dajú prednosť.

Ako vytvoriť favicon z loga

  1. Začnite značkou, nie celým logom — názov sa v záložke neprečíta.
  2. Zjednodušte pre maličké veľkosti. Zahoďte jemný detail, tenké čiary a jemné prechody, ktoré v 16 – 32 pixeloch zmiznú. Uprednostnite odvážne tvary a vysoký kontrast.
  3. Držte to štvorcové s trochou okraja, aby to nebolo natlačené na okraje záložky.
  4. Exportujte sadu — SVG, ICO a 180×180 PNG — z vektorového masteru svojho loga.
Krok exportu v editore LogoSaga zobrazujúci favicon.svg zahrnutý so súbormi loga.
Export z vektorového masteru dá favicon, ktorý presne zodpovedá logu.

Keďže SVG je ideálny master formát, oplatí sa porozumieť SVG vs PNG pre logá skôr, než začnete exportovať.

Prepojenie faviconu vo vašom HTML

Odkážte na súbory z <head> svojich stránok. Moderná, minimálna sada vyzerá takto:

<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" />

Prehliadače s podporou SVG ho použijú; ostatné spadnú späť na ICO.

Bonus: favicon, ktorý sa prispôsobí tmavému režimu

SVG favicon dokáže niesť vlastný štýl pre tmavý režim. Vložte dovnútra SVG media query, aby značka menila farby podľa motívu prehliadača:

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

Chrome, Firefox a Edge to rešpektujú; Safari zatiaľ nie, tak ako záložné zvoľte farby čitateľné na oboch motívoch.

Testovanie faviconu

Skontrolujte ho v reálnej záložke prehliadača, vo svetlom aj tmavom režime, a na ploche telefónu. Keďže prehliadače favicony tvrdo kešujú, po akejkoľvek zmene urobte tvrdé obnovenie — alebo vynúťte vyprázdnenie cache premenovaním súboru či pridaním ?v=2. Ak vo veľkosti záložky vyzerá kalne, značku ďalej zjednodušte: favicon je poctivý test toho, ako dobre sa logo zmenšuje.

Ak si logo vytvoríte v LogoSaga, export už obsahuje favicon.svg popri SVG a PNG loga, takže favicon vždy presne zodpovedá značke.

Vytvorte logo so zodpovedajúcim faviconom

Časté otázky

Akú veľkosť má mať favicon?

Dodajte škálovateľné SVG plus rastrové veľkosti PNG: 32×32 je moderný štandard pre záložky, 16×16 klasická malá veľkosť a 180×180 Apple touch icon. PWA navyše potrebujú 192×192 a 512×512.

Aký formát má favicon mať — SVG, PNG, alebo ICO?

Použite SVG pre moderné prehliadače, ICO ako záložné pre staršie a PNG pre apple-touch-icon a veľkosti PWA. SVG je škálovateľné a dokáže sa prispôsobiť aj tmavému režimu; ICO pokryje staršie prehliadače.

Môže sa favicon meniť v tmavom režime?

Áno, s SVG faviconom. Vložte dovnútra SVG media query prefers-color-scheme a definujte svetlé a tmavé farby. Safari to zatiaľ nerešpektuje, tak zvoľte neutrálnu farbu čitateľnú na oboch.

Prečo sa môj favicon nezobrazuje alebo neaktualizuje?

Prehliadače favicony agresívne kešujú. Po zmene tvrdo obnovte stránku, alebo vynúťte vyprázdnenie cache premenovaním súboru či pridaním query reťazca ako favicon.svg?v=2, a overte, že link tagy v hlavičke stránky sú správne.

Zdroje