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.
REKLAMA
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. Nastavte pozadí
Zvolte barvu pozadí ikony nebo zachovejte průhlednost.3. Stáhněte ikony
Stáhněte favicon.ico a kompletní sadu PNG ikon jedním kliknutím nebo každý soubor samostatně. Všechny ikony jsou připraveny k použití.
REKLAMA
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), používané také 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ů.
REKLAMA
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. Nastavte pozadí
Zvolte pozadí ikony.
Pozadí – průhledné nebo zvolená barva.
3. 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 jedním kliknutím nebo stáhněte jednotlivé ikony zvlášť.
Průhledné pozadí (PNG/ICO)
Barva pozadí:
Možnost generování – co dělá?
Pozadí (průhledné nebo barva)
Ve výchozím nastavení generátor zachovává průhlednost. Můžete také zvolit konkrétní barvu pozadí.
REKLAMA
Jak stáhnout vygenerované soubory?
Po vygenerování ikon máte několik možností stažení:
Stáhnout vše jedním kliknutím
Tlačítko Stáhnout uloží všechny vygenerované soubory najednou. 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.
REKLAMA
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.
REKLAMA
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.
REKLAMA
Č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.
Mohu vygenerovat jen favicon.ico bez ostatních ikon?
Nástroj vždy vygeneruje celou sadu: favicon.ico a PNG ikony 16×16, 32×32, 180×180, 192×192 a 512×512. Po vygenerování si můžete stáhnout jen ty soubory, které potřebujete – každá ikona má vlastní tlačítko stažení.
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.
REKLAMA
Objevte další nástroje
Editor obrázků
Změňte velikost, ořízněte a převeďte obrázek. Hotové formáty pro sociální sítě, kulaté avatary, export JPG/PNG/WebP.
Kontrola meta titulku a popisu
Zkontrolujte délku titulku a popisu v pixelech. Živý náhled v Google a tipy na optimalizaci.
Generátor favicon
Vytvořte kompletní sadu favicon.ico pro svůj web z jednoho obrázku. Všechny potřebné velikosti, bez přihlášení.
Generátor barevných palet
Vygenerujte 9 palet z jedné barvy: monochromatickou, komplementární, triádickou a další. Kódy HEX.
Kontrola kontrastu barev
Zkontrolujte kontrast textu a pozadí podle WCAG 2.1 AA a AAA. Automatická korekce barev.
Generátor QR kódu zdarma
Vytvořte QR kód pro web, vizitku vCard nebo tisk. Export PNG a SVG, bez registrace.
Počítadlo slov a znaků
Spočítejte slova, znaky, věty a čas čtení. Zkontrolujte čitelnost pomocí skóre Flesch-Kincaid.