CodeKitHubČo je tento nástroj?
favicon.ico nie je len malý obrázok — je to kontajnerový formát, ktorý dokáže obsahovať viacero veľkostí tej istej ikony v jednom súbore, takže si prehliadač, panel úloh alebo panel záložiek môže vybrať to rozlíšenie, ktoré vyzerá najostrejšie na danom mieste, kde ho zobrazuje. Premenovanie PNG na favicon.ico toto nevytvorí: je to jediný obrázok s nesprávnou príponou súboru, a hoci niektoré prehliadače to tolerujú, veľa nástrojov, crawlerov a starších prehliadačov čítajúcich surové bajty očakáva skutočnú štruktúru ICO kontajnera a zlyhá alebo sa vráti k prázdnej ikone.
Tento nástroj vytvára skutočný ICO kontajner: vykreslí vaše SVG v rozlíšení 16×16, 32×32 a 48×48, každé interne zakóduje ako PNG, a všetky tri zabalí do jedného platného favicon.ico pomocou rovnakého formátu PNG-v-ICO, ktorý podporuje každý prehliadač a OS od Windows Vista. Popri tom dostanete samostatné PNG súbory vo veľkosti 180×180 (veľkosť, ktorú iOS použije pre ikonu, keď niekto pridá vašu stránku na domovskú obrazovku) a 192×192 / 512×512 (veľkosti, ktoré si Android a inštalačné výzvy PWA berú z vášho web app manifestu).
Prečo ho používať?
- Vytvára skutočne platný viacrozlíšeniový favicon.ico, nie premenovaný PNG.
- Pokrýva každú veľkosť ikony, akú reálne nasadenie potrebuje, v jednom kroku: 16, 32, 180, 192, 512px.
- HTML pripravené na vloženie do <head> — žiadne hádanie atribútov rel/sizes/type.
- Nesquare SVG sú vycentrované na transparentnom štvorci namiesto natiahnutia.
- Všetko sa vykresľuje lokálne vo vašom prehliadači; SVG sa nikdy nenahráva.
Ako sa používa
- Kliknite na pole alebo doň presuňte svoj súbor SVG loga.
- Nástroj ho automaticky vykreslí v každej favicon veľkosti — žiadne nastavenia netreba konfigurovať.
- Stiahnite si favicon.ico pre koreň vašej stránky, plus jednotlivé PNG ikony.
- Skopírujte HTML úryvok a vložte ho do <head> vašej stránky.
Príklad
Vstup
logo.svg — firemná značka, 3 KB vektorVýstup
favicon.ico (16/32/48px kombinované), plus favicon-16.png, favicon-32.png, apple-touch-icon.png (180px), icon-192.png, icon-512.pngJedno SVG na vstupe, každý ikonový súbor, ktorý reálne nasadenie potrebuje, na výstupe.
Ktorá veľkosť ikony sa kde používa
| Súbor | Veľkosť | Použitie |
|---|---|---|
| favicon.ico | 16/32/48px (kombinované) | Karta prehliadača, panel záložiek, panel úloh |
| favicon-16.png / favicon-32.png | 16×16 / 32×32 | Záložná možnosť pre prehliadače, ktoré uprednostňujú PNG favicony |
| apple-touch-icon.png | 180×180 | Ikona domovskej obrazovky iOS pri pridaní stránky na domovskú obrazovku |
| icon-192.png | 192×192 | Ikona domovskej obrazovky Android, web app manifest |
| icon-512.png | 512×512 | Inštalačná výzva PWA, ikona úvodnej obrazovky Android |
Prečo záleží na zdrojovom SVG
Keďže SVG ukladá tvary ako matematiku, nie pixely, čerstvé vykreslenie v 16px aj v 512px vychádza z rovnakých presných dát ciest — na veľkom konci nevznikajú artefakty zväčšenia a na malom konci nie je potrebné žiadne vynútené hádanie prispôsobenia pixelom. Ak máte iba PNG logo, tento istý nástroj nepomôže; najskôr konvertujte alebo znova vytvorte logo ako SVG, keďže zväčšenie malého PNG na 512px by len vyprodukovalo rozmazaný výsledok.
Časté otázky
Prečo jednoducho nepremenovať PNG na favicon.ico?
Súbor .ico má vlastný binárny kontajnerový formát (hlavička ICONDIR popisujúca, koľko obrázkov obsahuje, nasledovaná záznamom adresára pre každý obrázok) — PNG súbor premenovaný na .ico je stále len PNG s nesprávnou príponou. Väčšina moderných prehliadačov je zhovievavá a aj tak ho vykreslí, no tento nástroj vytvára skutočný ICO kontajner obsahujúci tri skutočné rozlíšenia, čo je presne to, na čo bol formát navrhnutý a čo očakávajú prísnejšie čítačky.
Prečo potrebujem PNG ikony, keď už mám favicon.ico?
favicon.ico pokrýva len klasické použitie v karte prehliadača/záložkách. 180×180 PNG je to, čo iOS použije, keď používateľ pridá vašu stránku na domovskú obrazovku (apple-touch-icon), a 192×192 / 512×512 PNG sú to, čo si Android a inštalačné výzvy PWA berú z vášho web app manifestu. Bez nich sa vaša ikona na domovskej obrazovke telefónu vráti k všeobecnému snímku obrazovky alebo prázdnemu štvorcu.
Moje logo nie je štvorcové — čo sa s ním stane?
Je vycentrované na transparentnom štvorci pri každej cieľovej veľkosti namiesto natiahnutia, takže široké alebo vysoké logo si zachová svoje správne proporcie namiesto toho, aby sa stlačilo do štvorca.
Kam mám umiestniť stiahnuté súbory?
Umiestnite favicon.ico, apple-touch-icon.png, icon-192.png a icon-512.png do koreňového priečinka vašej stránky (vedľa index.html), potom vložte vygenerované <link> tagy do <head> vašej stránky.
Nahráva sa moje SVG niekam?
Nie. SVG sa vykresľuje na lokálne <canvas> prvky a súbory ICO/PNG sa zostavujú vo vašom prehliadači. Nič sa neposiela na server.