1. Nahrajte obrázek
Přetáhněte soubor do vyznačené oblasti nebo jej vyberte ze zařízení. Nejlépe se hodí čtvercový obrázek.
Vytvořte favicon.ico pro svůj web z jednoho obrázku
Nahrajte obrázek a nástroj vygeneruje favicon.ico a kompletní sadu PNG ikon potřebných pro prohlížeče, mobilní zařízení a Lighthouse.
Loading tool editor...
Tento nástroj funguje na větší obrazovce
Pro pohodlné použití tohoto nástroje jej otevřete na notebooku, stolním počítači nebo tabletu v režimu na šířku.
Tip
Pokud používáte tablet, přepněte do režimu na šířku - jakmile bude okno dostatečně široké, nástroj se automaticky načte.
Co je favicon a proč je důležitá?
Favicon je malá ikona, která se zobrazuje v záložce prohlížeče, v seznamu záložek a na domovské obrazovce telefonu. Je to jeden z prvních prvků, které uživatel uvidí – ještě před načtením stránky.
Profesionální favicon buduje rozpoznatelnost značky a usnadňuje uživateli najít vaši stránku mezi mnoha otevřenými záložkami. Absence favicon může působit neprofesionálně a snížit důvěru návštěvníků.
Jak použít generátor favicon
Generování favicon zabere jen několik minut:
2. Ořízněte a upravte
Upravte oblast ořezu pro výběr vhodné části obrázku. Podívejte se, jak vypadá v různých velikostech.3. Stáhněte ikony
Stáhněte favicon.ico a kompletní sadu PNG ikon v souboru ZIP. Všechny ikony jsou připraveny k použití.
Jaké ikony generátor vytváří?
Kaźdá velikost má své využití:
favicon.ico (32×32)
Klasický formát rozpoznávaný všemi prohlížeči. Zobrazuje se na záložce prohlížeče.
16×16 a 32×32 PNG
Standardní velikosti pro moderní prohlížeče. Zobrazují se na záložkách a v panelech.
180×180 PNG (apple-touch-icon)
Ikona pro zařízení Apple (iPhone, iPad). Zobrazuje se na domovské obrazovce po přidání stránky.
192×192 a 512×512 PNG
Ikony pro webové aplikace (PWA). Vyžadovány manifestem a používány v obchodech s aplikacemi.
Pokud nevytváříte PWA, stačí vám: favicon.ico, 32×32 PNG a 180×180 PNG. Tyto tři soubory pokryjí většinu případů použití.
Čím je tento generátor favicon výjimečný?
Lokální zpracování v prohlížeči
Obrázek se nenahrává na žádný server. Veškeré zpracování probíhá na vašem zařízení.Splnění požadavků Lighthouse
Generované ikony splňují požadavky Google Lighthouse na velikost a formát.Ikony pro všechna zařízení
Jedna sada souborů pokryje všechny prohlížeče, iOS, Android a Windows.Bez limitů, bez registrace
Vygenerujte tolik favicon, kolik potřebujete. Bez registrace, bez poplatků.
Jak používat generátor favicon?
Generátor vás provede celým procesem krok za krokem:
1. Přidejte zdrojový obrázek
Přetáhněte soubor na vyznačenou oblast nebo vyberte obrázek z disku.
Podporované formáty: PNG, JPG, SVG. Nejlépe funguje jednoduché logo nebo ikona o rozměrech alespoň 512×512 pixelů.
2. Zvolte velikosti ikon
Zaškrtněte, které velikosti ikon potřebujete.
Můžete vybrat všechny nebo jen některé. Pro běžný web stačí: favicon.ico, 32×32 a 180×180.
3. Nastavte možnosti generování
Nastavte doplňkové možnosti:
- Pozadí – průhledné nebo zvolená barva
- Manifest – konfigurační soubor pro PWA
- Automatické stažení – soubory se stáhnou ihned po vygenerování
4. Vygenerujte a stáhněte soubory
Po spuštění generování nástroj zpracuje obrázek lokálně – nic se neodesílá na server.
Stáhněte všechny soubory jako ZIP archiv nebo stáhněte jednotlivé ikony zvlášť.
Velikosti PNG
16x1632x32180x180
Průhledné pozadí (PNG/ICO)
Barva pozadí:
Možnosti generování – co dělá každá z nich?
Pozadí (průhledné nebo barva)
Ve výchozím nastavení generátor zachovává průhlednost. Můžete také zvolit konkrétní barvu pozadí.
Generovat manifest (site.webmanifest)
Konfigurační JSON soubor pro webové aplikace (PWA). Pokud nevytváříte PWA, tato možnost není potřeba.
Jak stáhnout vygenerované soubory?
Po vygenerování ikon máte několik možností stažení:
Stáhnout vše jako ZIP
Tlačítko Stáhnout vše zabalí všechny vygenerované soubory do jednoho ZIP archivu. To je nejpohodlnější volba, když potřebujete kompletní sadu ikon.Stáhnout jednotlivé soubory
Každá vygenerovaná ikona má vlastní tlačítko stažení – můžete stáhnout jednotlivý soubor bez stahování celé sady. Užitečné při aktualizaci jen jedné velikosti.
Kde a jak nahrát favicon?
WordPress
Většina WordPress šablon má vestavěnou možnost nastavení ikony webu. Najdete ji v administraci:
Vzhled → Přizpůsobit → Identita webu → Ikona webu
Nahrajte soubor 512×512 – WordPress automaticky vygeneruje menší velikosti. Pro plnou kontrolu můžete soubory nahrát přímo do kořenového adresáře přes FTP.
Jaký zdrojový obrázek funguje nejlépe?
Favicon je velmi malá grafika – i 16×16 pixelů. Proto ne každý obrázek je vhodný jako zdroj:
Jednoduché tvary a čitelné symboly
Nejlépe fungují jednoduchá loga, jednotlivá písmena nebo symboly. Vyhněte se složitým grafikám s mnoha detaily.Čtvercový formát
Favicon je čtvercový. Pokud má zdrojový obrázek jiné proporce než 1:1, bude oříznut nebo roztažen.Dostatečná velikost
Doporučujeme zdrojový obrázek o rozměrech alespoň 512×512 pixelů. Menší obrázky budou zvětšeny.SVG jako ideální zdroj
SVG se škáluje bez ztráty kvality, takže ikony budou ostré ve všech velikostech.
Favicon ve výsledcích vyhledávání Google a Seznam.cz
Google zobrazuje favicony vedle URL adresy webu ve výsledcích vyhledávání. Mobilní výsledky ukazují favicony od roku 2019. Desktopové výsledky následovaly v lednu 2020. Favicon je viditelným prvkem značky v každém vyhledávání na Googlu.
Google stanovuje konkrétní požadavky na zobrazení faviconů. Ikona musí mít rozměry alespoň 48×48 pixelů. Musí být čtvercová. Obrázek musí zůstat zřetelně viditelný na bílém pozadí. Google odmítá ikony s nevhodným nebo prázdným obsahem.
Googlebot prochází a indexuje favicony nezávisle na obsahu stránky. Aktualizace faviconu ve výsledcích může trvat několik dní až týdnů. Soubor favicon nesmí být zablokován v robots.txt - jinak Google nemůže získat novou verzi.
Seznam.cz - český vyhledávač s podílem na trhu kolem 25 % - rovněž zobrazuje favicony v seznamu výsledků. Profesionální favicon zvyšuje rozpoznatelnost značky v obou vyhledávačích současně. Bing a DuckDuckGo také ukazují favicony vedle každého odkazu ve výsledcích.
Favicon a vizuální identita značky v Česku
Vizuální konzistence mezi faviconem a logotypem posiluje zapamatovatelnost značky. Ikona se zobrazuje v kartách prohlížeče, v záložkách, v historii prohlížení a na domovské obrazovce telefonu. Když má uživatel deset nebo více karet otevřených, favicon zůstává jediným viditelným prvkem identifikujícím web.
V českém e-commerce se favicon zobrazuje u výsledků srovnávačů cen. Na Heureka.cz a Zboží.cz odlišuje obchod od konkurence a signalizuje profesionalitu. Shoptet - nejrozšířenější český e-shopový systém - umožňuje nastavení faviconu v administraci v sekci vzhled šablony. WooCommerce a PrestaShop nabízejí stejnou možnost.
Zákon o přístupnosti webových stránek veřejných institucí vyžaduje dostatečný kontrast pro vizuální prvky. Favicon musí být čitelný v světlém i tmavém režimu. Kontrastní barvy a jednoduché tvary tento požadavek spolehlivě splňují.
Firmy poskytující služby - od advokátních kanceláří po zubní ordinace - budují důvěru klientů již na úrovni ikony v kartě prohlížeče. Absence faviconu nebo výchozí ikona prohlížeče může naznačovat nízkou úroveň profesionality.
Favicon pro PWA a mobilní zařízení
Progressive Web Apps vyžadují další ikony nad rámec standardního faviconu. Soubor manifest.json musí obsahovat pole ikon s rozměry 192×192 a 512×512 pixelů ve formátu PNG.
Maskable ikony jsou speciální typ ikony pro zařízení s Androidem. Operační systém ořezává maskable ikony do různých tvarů - kruhů, zaoblených čtverců nebo kapek. Bezpečná zóna pokrývá vnitřních 80 % plochy obrázku. Všechny podstatné grafické prvky musí být uvnitř této zóny, aby nedošlo k oříznutí.
Apple vyžaduje samostatný soubor apple-touch-icon o rozměrech 180×180 pixelů. Tento soubor musí být deklarován v sekci head dokumentu HTML - iOS ho nečte ze souboru manifest.
Česko má vysokou penetraci chytrých telefonů. České banky jako Česká spořitelna a ČSOB a e-shopy využívají technologii PWA pro rychlý přístup z domovské obrazovky telefonu bez instalace z obchodu s aplikacemi.
Audit Lighthouse v nástrojích pro vývojáře Chrome ověřuje přítomnost a platnost faviconu a ikon PWA. Chybějící nebo neplatný favicon generuje varování v kategorii PWA auditu.
Často kladené otázky o generátoru favicon
Jaký obrázek je nejlepší pro favicon?
Čtverccový obrázek (alespoň 512×512 px) s jednoduchým pozadím je nejlepší. Logo, iniciály nebo jednoduchá ikona dávají nejlepší výsledky. Obrázky s mnoha detaily mohou vypadat špatně v malé velikosti (16×16 px).
Jaký je rozdíl mezi favicon.ico a PNG?
ICO soubor může obsahovat několik velikostí v jednom souboru a je podporován všemi prohlížeči, včetně starších. PNG soubory mají vyšší kvalitu, ale vyžadují samostatný HTML tag pro každou velikost. Doporučuje se používat obojí.
Odesílá se obrázek na server?
Ne. Veškeré zpracování probíhá ve vašem prohlížeči. Obrázek se neukládá a neodesílá nikam.
Jak přidat favicon na web?
Umístěte soubory ikon do kořenové složky webu a přidejte příslušné HTML tagy do sekce <head> stránky. Stažený ZIP soubor obsahuje pokyny pro implementaci.
Pomozte nám vylepšit naše nástroje
Máte nápad na novou funkci, našli jste chybu nebo chcete navrhnout jiný nástroj, který by usnadnil vaši práci? Napište nám – odpovídáme do 24 hodin.