Jak funguje Generátor favicon
Tento nástroj vezme jeden soubor obrázku, který poskytnete, a převede jej na sadu ikon vhodných pro různé účely na webu, jako jsou ikony na záložkách prohlížeče, Apple touch ikony a ikony pro progresivní webové aplikace (PWA). Následně tyto ikony zabalí do souboru ZIP, který je připraven ke stažení, a vygeneruje potřebný HTML kód pro jejich integraci do vašich webových stránek.
Nástroj je určen pro tvůrce webů, kteří chtějí převést stávající logo nebo obrázek na soubory potřebné pro záložky prohlížečů, Apple touch ikony a ikony pro Android. Využije ho každý, kdo potřebuje hotový balíček souborů a HTML kód pro ikony webu, nebo uživatelé, kteří chtějí vygenerovat favicon.ico a kompletní sadu ikon z jediného souboru PNG, JPG nebo SVG.
Vstupní parametry a podporované formáty
Pro generování ikon můžete použít jeden obrázek ve formátu PNG, JPG nebo SVG. Při nahrávání souborů platí následující pravidla a omezení:
- Velikost souboru: Maximální povolená velikost nahrávaného obrázku je 50 MB.
- Doporučené rozlišení: Pro formáty PNG nebo JPG se doporučuje rozlišení alespoň 512 × 512 pixelů. Pokud použijete menší zdrojový obrázek, velké ikony mohou vypadat neostře, protože dojde k jejich zvětšení.
- Detekce rozměrů: Po načtení obrázku nástroj zobrazí jeho šířku a výšku ve formátu „
{w}×{h}px“.
Přizpůsobení nečtvercových obrázků a pozadí
Generované ikony mají vždy čtvercový formát. Pokud váš zdrojový obrázek není čtvercový, můžete si vybrat ze dvou způsobů, jak se s tímto rozdílem nástroj vypořádá:
- Přizpůsobit (s okraji): Celý obrázek zůstane viditelný, bude vycentrován a kolem něj se doplní prázdné okraje. Toto chování je nastaveno jako výchozí.
- Vyplnit (oříznout): Obrázek vyplní celý čtverec a přečnívající okraje se oříznou.
Dále můžete nastavit pozadí ikon:
- Průhledné: Ikony nebudou mít žádnou barvu pozadí. Toto nastavení je výchozí a je velmi vhodné pro záložky prohlížeče.
- Barva: Můžete zvolit konkrétní barvu pozadí. Použití barvy pozadí je bezpečnější pro ikony na domovské obrazovce iPhonu, protože průhledná místa se na těchto zařízeních vykreslují černě.
Obsah vygenerovaného balíčku ikon
Po dokončení generování získáte ke stažení ZIP soubor, který obsahuje kompletní sadu ikon pro různé platformy a zařízení:
- favicon.ico: Obsahuje verze v rozlišení 16, 32 a 48 pixelů.
- PNG ikony: Ikony v rozlišeních 16, 32, 180, 192 a 512 pixelů.
- site.webmanifest: Malý textový soubor, který obsahuje seznam velkých ikon.
- Vektorový soubor: Pokud jako zdroj použijete formát SVG, bude samotný vektor zahrnut přímo v balíčku ikon, což zajistí dokonalou ostrost při jakékoli velikosti.
Součástí výstupu je také HTML kód, který zkopírujete a vložíte do sekce head (<head>) svých webových stránek pro správné propojení všech vygenerovaných ikon.
Ochrana soukromí při zpracování
Váš obrázek se převádí na ikony přímo v prohlížeči. Na servery BroBroGo se nic nenahrává.
Možné chybové stavy a jejich řešení
Během práce s nástrojem se mohou objevit následující chybová hlášení v závislosti na stavu zdrojového souboru nebo průběhu zpracování:
- „Tento soubor se nepodařilo otevřít jako obrázek. Může být poškozený, prázdný, nebo se o obrázek vůbec nejedná.“ – Zobrazí se, pokud soubor nelze přečíst jako platný grafický formát.
- „Tento soubor SVG se nepodařilo přečíst. Zkontrolujte, zda se jedná o platný dokument SVG.“ – K této chybě dochází při nahrání poškozeného nebo nekompatibilního SVG souboru.
- „Podporovány jsou pouze obrázky ve formátech PNG, JPG a SVG.“ – Zobrazí se při pokusu o nahrání jiného formátu souboru.
- „Tento soubor je větší než 50 MB. Použijte menší zdrojový obrázek.“ – Systém vás upozorní, pokud nahraný soubor překročí povolený limit velikosti.
- „Nejprve vyberte obrázek ve formátu PNG, JPG nebo SVG.“ – Tato zpráva se zobrazí, pokud se pokusíte spustit generování bez vybraného souboru.
- „Malý zdrojový obrázek (
{w}×{h}px): velké ikony mohou vypadat neostře. Nejlepších výsledků dosáhnete s rozlišením 512 × 512 nebo větším – případně s formátem SVG.“ – Varování upozorňující na nízké rozlišení zdrojového obrázku. - „Generování selhalo. Zkuste jiný obrázek.“ – Obecná chyba, pokud proces vytváření ikon z nějakého důvodu selže.
Často kladené otázky (FAQ)
Které soubory jsou součástí balíčku ikon?
Soubor favicon.ico obsahující verze 16, 32 a 48 pixelů, ikony PNG o velikostech 16, 32, 180, 192 a 512 pixelů a soubor site.webmanifest, který odkazuje na velké ikony. Pokud začnete s formátem SVG, bude zahrnut i samotný vektor. Vše je zabaleno v jednom ZIP archivu.
Jakou velikost by měl mít zdrojový obrázek?
Ideální je formát SVG – každá ikona se vykresluje přímo z vektoru, takže zůstává ostrá i při velikosti 16 pixelů. U formátů PNG nebo JPG začněte s rozlišením alespoň 512 × 512; menší obrázky se musí zvětšit a mohou působit rozmazaně.
Mělo by být pozadí průhledné, nebo barevné?
Ikony na záložkách vypadají skvěle s průhledným pozadím. Domovské obrazovky iPhonů a iPadů však průhledná místa vykreslují černě – pokud si uživatelé mohou přidat váš web na plochu, doporučujeme zvolit barvu pozadí.
Co se stane s obrázkem, který není čtvercový?
Ikony jsou čtvercové, ale váš obrázek se nikdy nedeformuje. Ve výchozím nastavení se vycentruje a doplní okraji; přepnutím na možnost „Vyplnit (oříznout)“ naopak přečnívající okraje oříznete.
Kam mám soubory na svém webu umístit?
Nahrajte je do kořenového adresáře svého webu tak, aby byl soubor favicon.ico dostupný na adrese /favicon.ico, a poté vložte vygenerované řádky do sekce head (<head>) svých stránek. Prohlížeče si samy vyberou správnou velikost.