Udělej ze svého loga favicon.ico a kompletní sadu ikon

Poslední revize obsahu:2026-09-07

Nahraj logo ve formátu PNG, JPG nebo SVG. Nástroj z něj složí soubor favicon.ico, který v sobě nese tři velikosti, a k tomu pět samostatných PNG ikon. Soubory vznikají v tvém prohlížeči a odtud putují rovnou na disk — stáhneš si je najednou nebo po jednom.

Náhled a soubory favicon

Přidejte obrázek vlevo pro vygenerování favicon.ico a sady PNG ikon v souladu s aktuálními doporučeními.

favicon.ico

ICO 16x16 + 32x32 + 48x48

K vygenerování

favicon-16x16.png

PNG 16x16

K vygenerování

favicon-32x32.png

PNG 32x32

K vygenerování

apple-touch-icon.png

PNG 180x180

K vygenerování

android-chrome-192x192.png

PNG 192x192

K vygenerování

android-chrome-512x512.png

PNG 512x512

K vygenerování

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 co je apple-touch-icon?

Favicon je ikona webu, kterou prohlížeč kreslí na kartě vedle názvu stránky, v liště záložek a v historii. Encyklopedická definice ji popisuje jako ikonu, která se objevuje před adresou v adresním řádku nebo na kartě otevřené stránky [1]. Na kartě má k dispozici stranu o délce zhruba deseti pixelů, tedy méně místa, než zabere jediné písmeno této věty.

Apple-touch-icon je stejná grafika připravená pro iPhone a iPad. Dostane se na domovskou obrazovku ve chvíli, kdy si někdo uloží tvůj web jako zástupce. Její strana měří 180 pixelů, protože ji systém kreslí ve velikosti blízké běžné aplikaci.

Dvě největší ikony ze sady, 192 a 512 pixelů, slouží webovým aplikacím. Android po nich sáhne při vytváření zástupce a při instalaci a najde je díky souboru manifestu, tedy dokumentu, ve kterém web uvádí svůj název, barvy a právě tento seznam ikon [2].

Jak vytvořit favicon z vlastního loga?

Nahraj logo do pole Přidat základní obrázek, klikni na Vygenerovat favicon a stáhni si šest souborů: favicon.ico a PNG ikony se stranou 16, 32, 180, 192 a 512 pixelů. Obrázek zpracuje prohlížeč na tvém počítači a hotové soubory ukládáš rovnou na disk.

Soubor favicon.ico je přitom víc než jeden obrázek. Formát ICO je schránka na několik verzí téže grafiky a generátor do ní vkládá tři: 16, 32 a 48 pixelů. Prohlížeč nebo systém si ze souboru vybere velikost, která odpovídá místu, kde ikonu právě kreslí. Karta prohlížeče sáhne po nejmenší, zástupce na ploše po větší.

Názvy souborů odpovídají tomu, co hledají šablony webů a dokumentace: favicon.ico, favicon-16x16.png, favicon-32x32.png, apple-touch-icon.png, android-chrome-192x192.png a android-chrome-512x512.png. Nahraj je na server přesně v té podobě, v jaké vyšly z generátoru.

Jaké soubory dostaneš a kde se každý z nich objeví?

Generátor vytváří vždy celou sadu. Níže najdeš velikost každého souboru a místo, kde ho návštěvník opravdu uvidí.

Název souboru	Velikost	Kde se objeví
favicon.ico	16, 32 a 48 px v jednom souboru	Karta prohlížeče, lišta záložek, zástupce na ploše
favicon-16x16.png	16 × 16 px	Karta prohlížeče na obrazovce s běžnou hustotou
favicon-32x32.png	32 × 32 px	Karta prohlížeče na obrazovce s vysokou hustotou
apple-touch-icon.png	180 × 180 px	Domovská obrazovka iPhonu a iPadu
android-chrome-192x192.png	192 × 192 px	Zástupce na domovské obrazovce Androidu
android-chrome-512x512.png	512 × 512 px	Úvodní obrazovka a instalace webové aplikace

Jakou velikost ikony chtějí Google, Apple, Android a WordPress?

Každé z těchto míst čte ikonu podle vlastních pravidel. Jedna sada z generátoru je pokryje všechna najednou.

Kde se ikona objeví	Potřebná strana	Formát souboru
Výsledky vyhledávání Google	Nejméně 8 px, doporučeno nad 48 px	ICO, PNG, JPEG, GIF, BMP, TIFF nebo PPM
Karta prohlížeče	16 px, na husté obrazovce 32 px	ICO nebo PNG
Domovská obrazovka iPhonu a iPadu	180 px	PNG
Zástupce na domovské obrazovce Androidu	192 px	PNG
Instalace webové aplikace	512 px	PNG
Ikona webu ve WordPressu	Nejméně 512 px	PNG nebo JPG

Požadavky Googlu na favicon včetně čtvercového tvaru a seznamu formátů popisuje dokumentace vyhledávače [3]. Hranici 512 pixelů pro ikonu webu uvádí dokumentace WordPressu [4].

Kde uvést každý ze stažených souborů?

Čtyři soubory zapíšeš do sekce head stránky a dva největší uvedeš v souboru manifestu.

Soubor z generátoru	Místo zápisu	Atribut rel
favicon.ico	Sekce head stránky	icon
favicon-16x16.png	Sekce head stránky	icon
favicon-32x32.png	Sekce head stránky	icon
apple-touch-icon.png	Sekce head stránky	apple-touch-icon
android-chrome-192x192.png	Soubor manifestu, seznam icons	Zápis v manifestu
android-chrome-512x512.png	Soubor manifestu, seznam icons	Zápis v manifestu

Hodnoty atributu rel, podle kterých Google favicon rozpozná, jsou icon, apple-touch-icon a apple-touch-icon-precomposed [3]. Hotové řádky kódu najdeš níže, v záložce HTML.

Jak generátor favicon používat?

Od kompletní sady ikon na disku tě dělí tři kroky:

1. Přidej základní obrázek
Přetáhni soubor na pole Přidat základní obrázek nebo na ně klikni a vyber grafiku z disku. Nástroj přijímá PNG, JPG/JPEG a SVG a pod polem ukáže název a velikost vybraného souboru.
2. Nastav pozadí
Generátor startuje s bílým pozadím. Zaškrtnutí pole Průhledné pozadí (PNG/ICO) nechá plochu kolem tvé značky prázdnou a vlastní odstín vybereš vzorníkem vedle popisku Barva pozadí.
3. Vygeneruj a stáhni
Klikni na Vygenerovat favicon. Za chvíli se v pravém sloupci objeví šest souborů s jejich velikostí a s celkovou velikostí nad nimi. Tlačítko Stáhnout uloží celou sadu a každý řádek má vlastní tlačítko Stáhnout.

Průhledné pozadí (PNG/ICO)

Barva pozadí:

Pozadí ikony: průhledné, nebo barevné?

Bílá platí jako výchozí nastavení

Po otevření stránky stojí vzorník na bílé a tuhle barvu dostane všech šest ikon. Hodí se k logům v tmavých tónech a všude tam, kde má ikona vypadat stejně na světlé i tmavé liště karet.

Průhledné pozadí (PNG/ICO)

Zaškrtnutí tohoto pole nechá plochu kolem tvé značky prázdnou a vzorník barvy se přitom stane neaktivním. Vyber ho, pokud má tvoje logo vlastní tvar — kruh, monogram, písmeno — a chceš, aby přejímalo barvu podkladu, na kterém zrovna leží.

Vlastní barva z tvé identity

Vzorník přijme libovolný odstín, včetně toho z tvého manuálu značky. Pokud hledáš přesnou hodnotu z hotového materiálu, vytáhneš ji extraktorem barev z obrázku a vložíš ji sem.

Jaký zdrojový obrázek dá nejlepší výsledek?

Nejmenší ikona ze sady má stranu 16 pixelů, takže o výsledku rozhoduje především to, co nahraješ.

Vsaď na jednoduchý tvar a jednu silnou značku
Při straně 16 pixelů zůstávají čitelné monogramy, jednotlivá písmena a sevřené symboly. Na informačních tabulích funguje stejný mechanismus: piktogram nese svůj obsah v několika tazích, protože má zabrat na dálku a v malém měřítku.
Nahraj logo ve formátu SVG
Soubor SVG popisuje tvary křivkami a geometrickými útvary, takže generátor kreslí každou velikost z úplného popisu. Při našem měření vyšel okraj kruhu v ikoně o straně 512 pixelů čistě: na přímce vedoucí jeho středem nepadl ani jeden pixel s přechodovým odstínem. Stejný soubor se hodí i mimo ikony: bitmapu téže značky do prezentace nebo do e-mailového podpisu připraví převodník SVG na PNG.
Vyber soubor se stranou nejméně 512 pixelů
Takovou stranu má největší ikona ze sady. U rastrového souboru této velikosti vzniká každá menší ikona zmenšením, a to zachovává ostrost okrajů.
Nahraj obrázek s libovolnými proporcemi
Nástroj ho vepíše do čtverce celý: zvětší nebo zmenší obrázek na delší stranu, vystředí ho a volné pruhy vyplní vybraným pozadím. Vezmi vodorovné logo o rozměrech 400 × 100 pixelů. V ikoně se stranou 64 pixelů z něj vyjde pruh vysoký 16 pixelů a nad ním i pod ním zůstane pozadí. Pokud chceš, aby značka vyplnila celý čtverec, ořízni logo na čtverec v editoru obrázků a teprve potom ho nahraj sem.
Zvol kontrast, který obstojí v obou motivech
Ikona leží jednou na světlé liště karet a jindy na tmavé. Odstíny zřetelně odlišné od bílé i od černé si čitelnost udrží v obou případech.
Nech u okrajů rezervu kvůli Androidu
Android umí ikonu oříznout do kruhu nebo do čtverce se zaoblenými rohy. Specifikace zaručuje viditelnost uvnitř kruhu s poloměrem dvou pětin kratší strany, měřeným od středu [2], takže vystředěná značka projde každým takovým ořezem.
Začni od PNG, pokud máš logo v jiném formátu
Pole Přidat základní obrázek pracuje se soubory PNG, JPG/JPEG a SVG. Značka uložená jinak potřebuje jen jeden průchod převodníkem navíc. Fotku z iPhonu otevře převodník HEIC na PNG. Grafiku staženou z webu převede převodník WEBP na PNG nebo převodník AVIF na PNG. Logo dodané v manuálu značky v PDF vytáhne převodník PDF na PNG.

Stačí samotný soubor SVG jako ikona webu?

Ikona ve formátu SVG dnes funguje v prohlížečích na počítači — Chrome a Edge ji čtou od verze 80, Firefox od 41. Na iPhonu a iPadu to zvládá Safari od verze 26 [5]. SVG se proto nejlépe uplatní jako doplněk sady, vedle souborů ICO a PNG.

Favicon pro výsledky vyhledávání čte Google ze souborů ICO, PNG, JPEG, GIF, BMP, TIFF a PPM [3]. Sada z tohoto generátoru se do tohoto seznamu vejde hned dvakrát: jednou souborem favicon.ico, podruhé ikonami PNG. Pokud už vlastní soubor SVG máš, nech ho v sekci head vedle nich — každé z těchto míst pak najde formát, který umí přečíst.

Kam vygenerované soubory nahrát?

Čtyři cesty podle toho, na čem tvůj web stojí:

WordPress
V dnešním WordPressu ikonu nastavíš v administraci, v Nastavení › Základní nastavení. Pole se tam jmenuje Ikona webu. Klasické šablony nabízejí tutéž volbu navíc v přizpůsobení vzhledu, v sekci s identitou webu.
Nahraj tam soubor android-chrome-512x512.png. Dokumentace žádá čtvercový obrázek o straně nejméně 512 pixelů [4] a menší varianty si WordPress připraví sám.
Chceš mít pod kontrolou každý soubor? Nahraj celou sadu přes FTP do kořenové složky webu a zapiš odkazy tak, jak ukazuje karta HTML.
Shopify
V administraci obchodu jdi na Online Store, najdi svou šablonu a klikni na Edit theme. V Theme settings otevři sekci s logem a v ní pole Favicon image. Názvy položek uvádíme anglicky, přesně tak, jak je uvádí dokumentace Shopify.
Shopify uvádí jako doporučenou velikost 32 × 32 pixelů a větší obrázky na ni sám zmenší [6]. Nahraj proto android-chrome-512x512.png — necháš si tím rezervu kvality pro obrazovky s vysokou hustotou.
HTML
Zkopíruj soubory do kořenové složky webu, tedy tam, kde leží index.html. Prohlížeče se na adresu /favicon.ico ptají samy a ostatní ikony najdou podle odkazů v sekci <head>:
```
<link rel="icon" href="/favicon.ico" sizes="32x32">
<link rel="icon" type="image/png" sizes="16x16" href="/favicon-16x16.png">
<link rel="icon" type="image/png" sizes="32x32" href="/favicon-32x32.png">
<link rel="apple-touch-icon" sizes="180x180" href="/apple-touch-icon.png">
```
Dvě největší ikony uvedeš v souboru manifestu, v seznamu icons, spolu s jejich rozměry a typem image/png.
Ikonu jde vložit také rovnou do kódu jako řetězec znaků — připraví ho převodník obrázku na Base64. U jednosouborových stránek a prototypů se to hodí; vedle nech běžný soubor na adrese /favicon.ico, protože po něm sahá robot Google [3].
Next.js
Next.js s App Routerem rozpozná ikony podle názvu souboru a odkazy do sekce head doplní sám [7]:
- app/favicon.ico — výhradně ve složce app/ a výhradně s příponou .ico
- app/icon.png — PNG ikona; pod tímto názvem funguje i .jpg a .svg a další varianty číslujeme jako icon1.png, icon2.png
- app/apple-icon.png — protějšek souboru apple-touch-icon.png; tento název přijímá .png, .jpg a .jpeg
Ikony 192 a 512 pixelů nech ve složce public/ a uveď je v manifestu. Celou sadu můžeš popsat také v layout.tsx, v objektu metadata.icons.

Jak se favicon chová ve výsledcích vyhledávání Google?

Google ukazuje ikonu webu ve výsledcích vedle jeho názvu, na telefonu i na počítači. Aby ji stáhl, potřebuje přístup ke dvěma věcem: Googlebot indexující obrázky musí mít možnost projít samotný soubor ikony a běžný Googlebot úvodní stránku [3]. Nech proto složku s ikonou mimo blokující pravidla v souboru robots.txt.

Po výměně souboru se hodí trocha trpělivosti: dokumentace říká otevřeně, že opětovné procházení potrvá od několika dnů do několika týdnů [3]. Google navíc upozorňuje, že se favicon ve výsledcích objeví podle jeho rozhodnutí, i když jsou všechny pokyny splněné.

Samotná ikona patří do vrstvy, která výsledek zobrazuje, a přesně tak ji dokumentace vyhledávače popisuje. Skutečně působí na rozpoznatelnost: ve sloupci výsledků a mezi desítkou otevřených karet bývá jediným barevným prvkem, podle kterého člověk odliší tvůj web od ostatních.

Zdroje

Favicon — Wikipedie
Web Application Manifest — W3C
Define Website Favicon for Search Results — Google Search Central
Customizer — Identita webu — WordPress
SVG favicons — Can I use
Theme settings — favicon image — Shopify Help Center
favicon, icon a apple-icon — Next.js

Všechny hodnoty v tabulkách jsme spočítali z definic jednotek a před zveřejněním ověřili výpočtem. Historické údaje a názvy místních jednotek vycházejí ze zdrojů uvedených výše.

Poslední revize obsahu: 7. září 2026 · napsal a zkontroloval tým Arteon

Časté dotazy ke generátoru favicon

Kolik souborů stačí běžnému firemnímu webu?

Tři: favicon.ico, favicon-32x32.png a apple-touch-icon.png. První pokryje kartu prohlížeče a výsledky vyhledávání, druhý obrazovky s vysokou hustotou, třetí domovskou obrazovku iPhonu. Dvě největší ikony přijdou na řadu ve chvíli, kdy budeš chtít web nabídnout jako webovou aplikaci.

Musí být favicon čtvercový?

Google vyžaduje poměr stran 1:1 [3] a WordPress u ikony webu čeká čtverec také [4]. Generátor to pohlídá za tebe: obrázek s libovolnými proporcemi vepíše do čtverce celý a doplní ho vybraným pozadím, takže všech šest souborů vyjde čtvercových.

Proč prohlížeč pořád ukazuje starou ikonu?

Prohlížeč uchovává ikony v mezipaměti déle než zbytek stránky. Otevři adresu samotného souboru, například /favicon.ico, a načti ji znovu s vynecháním mezipaměti pomocí Ctrl + F5. K odkazu můžeš také připsat číslo verze, například /favicon.ico?v=2 — pro prohlížeč je to pak nová adresa.

Ovlivňuje favicon pozici webu v Googlu?

Dokumentace vyhledávače popisuje favicon jako součást vzhledu výsledku [3]. Vliv na samotnou pozici je nepřímý a týká se toho, jak rychle člověk rozpozná tvou značku ve sloupci výsledků.

Co přesně je uvnitř souboru favicon.ico z tohoto generátoru?

Tři obrázky téže grafiky: 16 × 16, 32 × 32 a 48 × 48 pixelů, každý uložený jako PNG uvnitř schránky ICO. Prohlížeč i systém si z nich vyberou verzi, která odpovídá místu, kde ikonu kreslí.

Co je ikona maskable a která její oblast je bezpečná?

Je to ikona připravená pro systémové masky Androidu, který ji ořízne do kruhu, do čtverce se zaoblenými rohy nebo do kapky. Specifikace manifestu zaručuje viditelnost uvnitř kruhu s poloměrem dvou pětin kratší strany, měřeným od středu obrázku [2]. Značka umístěná v této oblasti projde každým tvarem masky.

Kam na serveru stažené soubory patří?

Do kořenové složky webu, vedle úvodního souboru. Prohlížeče se na adresu /favicon.ico ptají samy, i bez odkazu v kódu, a ostatní ikony najdou podle řádků ze sekce head uvedených výše v záložce HTML.

Můžu si stáhnout jen jeden soubor ze sady?

Ano. Každý řádek v seznamu výsledků má vlastní tlačítko Stáhnout, takže si uložíš jednu ikonu ve chvíli, kdy na webu aktualizuješ jedinou velikost. Tlačítko Stáhnout nad seznamem uloží celou sadu najednou.

Jaké obrázky generátor přijímá a co se stane s mým souborem?

Pole Přidat základní obrázek přijímá soubory PNG, JPG/JPEG a SVG. Celá práce probíhá v tvém prohlížeči: obrázek se načte do paměti karty, tam vzniknou všechny ikony a odtud putují na disk. Tlačítko Vymazat odstraní obrázek i výsledky okamžitě a zavření karty udělá totéž.