CodeKitHubCo je tento nástroj?
favicon.ico není jen malý obrázek — je to kontejnerový formát, který může obsahovat několik velikostí stejné ikony v jednom souboru, takže prohlížeč, hlavní panel nebo panel záložek si mohou vybrat, které rozlišení vypadá nejostřeji pro místo, kde ho zobrazují. Přejmenování PNG na favicon.ico to nevytvoří: je to jeden obrázek s nesprávnou příponou souboru, a zatímco to některé prohlížeče tolerují, spousta nástrojů, crawlerů a starších prohlížečů čtoucích syrové bajty očekává skutečnou strukturu kontejneru ICO a selže nebo se přepne na prázdnou ikonu.
Tento nástroj vytváří skutečný kontejner ICO: vykreslí vaše SVG na 16×16, 32×32 a 48×48, zakóduje každou jako PNG interně a zabalí všechny tři do jednoho platného favicon.ico pomocí stejného formátu PNG-v-ICO, který podporuje každý prohlížeč a OS od Windows Vista. Kromě toho dostanete samostatné soubory PNG ve velikosti 180×180 (velikost, kterou iOS používá pro ikonu, když si někdo přidá váš web na domovskou obrazovku) a 192×192 / 512×512 (velikosti, které Android a instalační výzvy PWA čerpají z vašeho web app manifestu).
Proč ho používat?
- Vytváří skutečně platný vícerozlišovací favicon.ico, ne přejmenované PNG.
- Pokrývá každou velikost ikony, kterou skutečné nasazení potřebuje, na jeden průchod: 16, 32, 180, 192, 512px.
- Připravené HTML pro <head> — žádné hádání atributů rel/sizes/type.
- Nečtvercová SVG jsou centrována na průhledný čtverec místo roztažení.
- Vše se vykresluje lokálně ve vašem prohlížeči; SVG se nikdy nenahrává.
Jak se používá
- Klikněte na pole nebo do něj přetáhněte svůj SVG soubor loga.
- Nástroj ho automaticky vykreslí ve všech velikostech faviconu — žádná nastavení k úpravě.
- Stáhněte favicon.ico pro kořen vašeho webu, plus jednotlivé PNG ikony.
- Zkopírujte úryvek HTML a vložte ho do <head> vaší stránky.
Příklad
Vstup
logo.svg — firemní značka, 3 KB vektorVýstup
favicon.ico (16/32/48px kombinováno), plus favicon-16.png, favicon-32.png, apple-touch-icon.png (180px), icon-192.png, icon-512.pngJedno SVG dovnitř, každý soubor ikony, který skutečné nasazení potřebuje, ven.
Kde se která velikost ikony používá
| Soubor | Velikost | Používá se pro |
|---|---|---|
| favicon.ico | 16/32/48px (kombinováno) | Karta prohlížeče, panel záložek, hlavní panel |
| favicon-16.png / favicon-32.png | 16×16 / 32×32 | Záložní řešení pro prohlížeče preferující PNG favicony |
| apple-touch-icon.png | 180×180 | Ikona domovské obrazovky iOS, když je web přidán na domovskou obrazovku |
| icon-192.png | 192×192 | Ikona domovské obrazovky Android, web app manifest |
| icon-512.png | 512×512 | Instalační výzva PWA, ikona úvodní obrazovky Android |
Proč záleží na zdrojovém SVG
Protože SVG ukládá tvary jako matematiku spíše než pixely, čerstvé vykreslení na 16px a na 512px vychází ze stejných přesných dat cesty — na velkém konci nevzniká artefakt zvětšení a na malém konci nevzniká vynucené hádání pixel-snappingu, ke kterému by nástroj musel dělat kompromis. Pokud máte jen PNG logo, tento stejný nástroj vám nepomůže; nejprve logo převeďte nebo znovu vytvořte jako SVG, protože zvětšení malého PNG na 512px by jen vytvořilo rozostřený výsledek.
Časté dotazy
Proč jednoduše nepřejmenovat PNG na favicon.ico?
Soubor .ico má svůj vlastní binární kontejnerový formát (hlavičku ICONDIR popisující, kolik obrázků obsahuje, následovanou položkou adresáře pro každý obrázek) — PNG soubor přejmenovaný na .ico je stále jen PNG se špatnou příponou. Většina moderních prohlížečů je shovívavá a vykreslí ho stejně, ale tento nástroj vytváří skutečný kontejner ICO obsahující tři skutečná rozlišení, což je to, k čemu byl formát navržen a co očekávají přísnější čtečky.
Proč potřebuji PNG ikony, když už mám favicon.ico?
favicon.ico pokrývá jen klasické použití karty prohlížeče/záložek. PNG 180×180 je to, co iOS používá, když uživatel přidá váš web na domovskou obrazovku (apple-touch-icon), a PNG 192×192 / 512×512 jsou to, co Android a instalační výzvy PWA čerpají z vašeho web app manifestu. Bez nich se ikona na domovské obrazovce telefonu vrátí k obecnému snímku obrazovky nebo prázdnému čtverci.
Moje logo není čtvercové — co se s ním stane?
Je centrováno na průhledný čtverec v každé cílové velikosti spíše než roztaženo, takže široké nebo vysoké logo si zachová správné proporce místo toho, aby bylo natlačeno do čtverce.
Kam mám umístit stažené soubory?
Umístěte favicon.ico, apple-touch-icon.png, icon-192.png a icon-512.png do kořenové složky vašeho webu (vedle index.html), poté vložte vygenerované značky <link> do <head> vaší stránky.
Nahrává se moje SVG někam?
Ne. SVG je vykresleno na lokální prvky <canvas> a soubory ICO/PNG jsou sestaveny ve vašem prohlížeči. Nic se neodesílá na server.