Favicon generator

Ako vytvoriť favicon pre web

Nahrajte logo alebo symbol – pretiahnutím, výberom súboru alebo zo schránky cez Ctrl + V. Najlepší zdroj je SVG alebo štvorcový PNG aspoň 512 × 512 px, ideálne s priehľadným pozadím. Zvoľte, či má mať ikona priehľadné alebo farebné pozadie, koľko okraja nechať okolo loga, napíšte názov webu a farbu motívu a kliknite na Vytvoriť ikony. Hneď uvidíte, ako bude ikona vyzerať v záložke prehliadača v svetlom aj tmavom režime a v každej veľkosti, stiahnete ZIP so všetkými súbormi a skopírujete hotový kód do hlavičky stránky. Celý proces beží v prehliadači, logo sa nikam neodosiela.

Čo je v sade a na čo ktorý súbor slúži

Jedna ikona dnes nestačí – prehliadač v záložke chce 16 px, iPhone na ploche 180 px, Android 192 a 512 px, Google vo výsledkoch vyhľadávania násobky 48 px. Generátor preto vyrobí celú sadu:

Súbor favicon.ico vzniká priamo v prehliadači: je to kontajner s troma PNG obrázkami (16, 32 a 48 px), ktorému rozumejú všetky prehliadače aj Windows. Prehliadače ho navyše hľadajú na adrese /favicon.ico automaticky, aj keď naň v kóde nie je odkaz – preto patrí do koreňa webu.

Kam súbory nahrať a ako vložiť kód

Všetky súbory nahrajte do koreňového priečinka webu – tam, kde je index.html alebo hlavný súbor šablóny –, aby boli dostupné na adresách ako https://vasweb.sk/favicon.ico. Vygenerovaný kód vložte do časti <head> každej stránky: v statickom webe do šablóny, vo WordPresse do hlavičky témy (lepšie cez detskú tému alebo plugin na vkladanie kódu do hlavičky), v Astro, Next.js či Nuxte do rozloženia. Ak súbory umiestnite inam než do koreňa, upravte cesty v kóde aj v manifeste. Vo WordPresse funguje aj jednoduchšia cesta: Vzhľad → Prispôsobiť → Identita webu → Ikona webu, kam nahráte 512 px PNG z tejto sady – WordPress si zvyšné veľkosti odvodí sám, hoci bez ICO a SVG. Shopify, Wix či Webnode majú vlastné políčko na favicon v nastaveniach obchodu alebo webu.

Ako navrhnúť ikonu, ktorá funguje aj v 16 pixeloch

V záložke prehliadača má favicon len 16 × 16 px – celé logo s názvom firmy sa zmení na nečitateľnú škvrnu. Použite jeden jednoduchý symbol alebo písmeno, výrazný kontrast a žiadne drobné detaily. Ikona sa zobrazuje na svetlom aj tmavom pozadí – tmavomodrý symbol na priehľadnom pozadí v tmavom režime zmizne; nástroj vám oba režimy ukáže v náhľade, a ak ikona na jednom z nich zaniká, dajte jej farebné pozadie. Okraj 10 % okolo loga pomáha hlavne ikone na ploche iPhonu a Androidu, kde sa rohy zaobľujú; logo, ktoré sa dotýka okrajov, pôsobí stiesnene. Vždy nahrávajte najväčší zdroj, aký máte – z malého obrázka nástroj veľké ikony len rozmaže. SVG je ideálne: každá veľkosť sa vykreslí priamo z vektora, a navyše vznikne favicon.svg, ktoré moderné prehliadače zobrazia ostro na akomkoľvek displeji.

PNG do ICO a ICO do PNG

Hľadáte len „png to ico“? Tento nástroj je presne to – z PNG (aj JPG, WebP či SVG) vyrobí favicon.ico s tromi veľkosťami, a k tomu zvyšok sady, ktorú by ste inak dorábali. Stiahnuť môžete aj len samotný ICO pri jeho názve v zozname súborov. Opačný smer, ICO do PNG, zvládne nástroj JPG do PNG: súbor .ico otvorí prehliadač, vyberie z neho najväčší vložený obrázok a uloží ho ako PNG. Vektorové logo do PNG v presnej šírke prevedie SVG do PNG.

Favicon sa nezobrazuje – najčastejšie príčiny

Vyrovnávacia pamäť: prehliadače si ikonu pamätajú veľmi dlho; otvorte web v anonymnom okne alebo načítajte priamo adresu /favicon.ico a obnovte ju cez Ctrl + F5. Cesta: súbory musia byť presne tam, kam ukazuje kód – pozor na podpriečinky a na veľké a malé písmená. Blokovanie: robots.txt, ochrana priečinka heslom alebo bezpečnostný plugin nesmú ikonu blokovať; Google vo výsledkoch zobrazí len ikonu, ktorú jeho robot môže stiahnuť, a to v násobkoch 48 px – preto je v ICO aj 48 px verzia. Typ súboru: server má ICO posielať ako image/x-icon a SVG ako image/svg+xml; väčšina hostingov to robí sama. Záložky a plocha: už uložené záložky a ikony na ploche telefónu si starú ikonu nechajú, kým ich nepridáte znova.

Bez nahrávania na server

Online generátory favicon zväčša logo nahrajú na svoj server – pri nezverejnenom logu alebo internom projekte to nie je ideálne. Tu vzniká celá sada vrátane ICO a manifestu priamo vo vašom prehliadači; logo počítač neopustí a po načítaní stránky nástroj funguje aj bez internetu. Je zadarmo, bez registrácie a bez vodoznaku. Pred nahraním na web môžete logo ešte upraviť: pozadie z fotky odstráni remove background, štvorec vyreže orezanie obrázka a formát zmení WebP do PNG.