Článek

Tvorba favicony z PNG

Favicona je malá grafika, kterou prohlížeče zobrazují v záložkách, záložkách a seznamech historie. Správné provedení zahrnuje více než jen změnu velikosti loga: formát .ico balí více rozlišení do jednoho souboru, moderní prohlížeče preferují PNG, mobilní zařízení mají vlastní apple-touch-icon a manifesty webových aplikací potřebují vlastní sadu ikon. Tento článek pokrývá každou část a vysvětluje, jak vytvořit celou sadu z jediného zdrojového PNG.

Napsal Bastien Sulyan · Publikováno dne 29. června 2026

Co je favicona a kde ji prohlížeče používají

Slovo favicon je spojením slov "favorite icon" (oblíbená ikona). Prohlížeče ji poprvé zobrazovaly v adresním řádku v Internet Exploreru 5 (1999), poté ji přijaly pro záložky. Dnes se zobrazuje v záložkách prohlížeče, nástrojové liště záložek, historii procházení, na stránce nové záložky v některých prohlížečích a na panelech úloh operačního systému, když je web připnutý. Na mobilních zařízeních, pokud uživatel přidá web na domovskou obrazovku, zařízení použije příbuzný, ale odlišný obrázek nazývaný apple-touch-icon namísto standardní favicony. Vyhledávače někdy zobrazují favicony vedle výsledků ve svém rozhraní. Grafika je záměrně malá, díky čemuž je účinná pro rychlou vizuální identifikaci, ale také náročná na správné zpracování: na 16x16 pixelech se detailní logo stane nečitelnou skvrnou. Soubor favicony prošel v průběhu desetiletí několika formáty, přičemž .ico zůstává nejšíře kompatibilním a PNG je nyní moderním výchozím formátem pro většinu prohlížečů.

Kontejner .ico: více rozlišení v jednom souboru

Formát .ico je kontejner, nikoli jednotlivý obrázek. Jeden soubor .ico může obsahovat více bitmapových obrázků v různých rozlišeních, z nichž každý je uložen jako samostatná položka v indexu na začátku souboru. Tři nejběžnější velikosti jsou 16x16, 32x32 a 48x48 pixelů. Když Windows zobrazuje faviconu v Průzkumníku nebo na hlavním panelu, vybere položku, která nejlépe odpovídá zobrazovacímu kontextu. Starší verze Windows potřebovaly položku 48x48 pro sloty vysoké hustoty na hlavním panelu. Prohlížeče požadují faviconu o velikosti 16x16 pro záložky, ale mohou použít větší položku, pokud je detekován displej s vyšší hustotou. Zabalení všech tří velikostí do jednoho souboru .ico znamená, že jeden HTTP požadavek pokryje každý případ použití. Distribuce jako samostatných PNG je také platná, ale vyžaduje další link tagy a přidává HTTP požadavky. Interní obrázky uvnitř souboru .ico jsou standardní data BMP nebo PNG, takže kontejner přidává jen malou režii záhlaví na položku.

Navrhování pro malé velikosti: zjednodušte značku

Na 16x16 pixelech máte celkem 256 pixelů. Typický logotyp se slovní značkou nebo jemnými detaily se stane při této velikosti nečitelným. Standardním přístupem je vytvoření zjednodušené značky: jediné písmeno, abstraktní tvar nebo ikona, která reprezentuje značku bez spoléhání na detaily. Několik specifických problémů, které je třeba předvídat: tenké tahy zcela zmizí při malých velikostech, zejména na displejích bez retiny. Páry písmen a detaily v negativním prostoru se slévají v šedý šum. Přechody jsou téměř neviditelné. Vysoký kontrast mezi značkou a jejím pozadím je jediným největším faktorem čitelnosti. Pevný tvar na jednoduchém pozadí se téměř vždy čte lépe než detailní ilustrace na 16x16. Velikosti 32x32 a 48x48 jsou benevolentnější a mohou podporovat o něco více detailů, ale verze 16x16 by měla být považována za závazné omezení. Pokud se značka stále nečte na 16x16, design potřebuje další zjednodušení.

Moderní sada: .ico, PNG ikony, apple-touch-icon, manifest a HTML link tagy

Kompletní nastavení favicony pro veřejný web v současnosti vyžaduje pět věcí. Za prvé, favicon.ico v kořenovém adresáři webu (prohlížeče požadují /favicon.ico přímo bez link tagu jako zálohu). Za druhé, PNG 32x32 pro moderní desktopové prohlížeče deklarované s link tagem: `<link rel="icon" type="image/png" sizes="32x32" href="/favicon-32x32.png">`. Za třetí, PNG 16x16 pro velikost záložky: `<link rel="icon" type="image/png" sizes="16x16" href="/favicon-16x16.png">`. Za čtvrté, apple-touch-icon o rozměrech 180x180 pixelů pro záložky domovské obrazovky iOS: `<link rel="apple-touch-icon" sizes="180x180" href="/apple-touch-icon.png">`. Za páté, manifest webové aplikace (site.webmanifest) s PNG 192x192 a 512x512 pro Android a progresivní webové aplikace. Průhlednost je podporována v PNG a v položkách kódovaných PNG uvnitř .ico, ačkoli apple-touch-icon by měl mít neprůhledné pozadí, protože iOS ignoruje alfa kanál a vyplní průhledné oblasti černou barvou.

Lokálně: favicon-generator ponechá váš obrázek na vašem zařízení

Nástroj favicon-generator na tomto webu vezme PNG a vytvoří kompletní sadu: favicon.ico s více rozlišeními obsahující položky 16x16, 32x32 a 48x48, jednotlivé PNG velikosti pro přímé použití s link tagy a apple-touch-icon 180x180. Vše se děje ve vašem prohlížeči pomocí Canvas API a JavaScriptového kodéru .ico. Váš zdrojový obrázek není nikam nahrán; zůstává na vašem zařízení. To je důležité, když je zdrojový soubor logem firmy nebo jakýmkoli podkladem, který by neměl opustit váš počítač, dokud nekontrolujete, kam půjde. Každý vygenerovaný soubor se nabídne jako samostatné stažení s konvenčním názvem souboru. Zkopírujete je do kořenového adresáře svého webu a do hlavičky HTML přidáte odpovídající link tagy. Pokud váš zdrojový logo obsahuje jemné detaily, které nepřežijí vykreslení na 16x16, můžete ho oříznout nebo zjednodušit před vložením do generátoru, nebo dodat jiný zdrojový obrázek připravený speciálně pro faviconu.

Nástroje v tomto článku

Časté dotazy

Potřebuji stále favicon.ico, pokud deklaruji PNG link tagy?

Ano, ze dvou důvodů. Za prvé, prohlížeče, které nečtou váš HTML (webcrawlery, čtečky RSS, některé staré mobilní prohlížeče) hledají /favicon.ico přímo v kořenovém adresáři domény. Pokud tento soubor chybí, generují 404 požadavek při každém načtení stránky, což přidává šum do serverových protokolů a zbytečný malý round trip. Za druhé, starší verze Internet Exploreru rozpoznávají pouze formát .ico a ignorují PNG link tagy. Poskytnutí obou pokrývá všechny případy.

Mohu jako faviconu použít SVG?

Chrome a Firefox podporují SVG favicony přes `<link rel="icon" type="image/svg+xml" href="/favicon.svg">`. Safari SVG favicony nepodporuje. Protože SVG favicony jsou rozlišení nezávislé, vypadají ostře na jakékoli hustotě displeje, včetně retina obrazovek, bez potřeby více velikostních variant. Praktickým doporučením je deklarovat SVG link tag pro prohlížeče, které ho podporují, a stále zahrnout zálohu .ico pro úplné pokrytí. SVG favicony mohou také obsahovat mediální dotaz `prefers-color-scheme` pro automatické přepínání mezi světlou a tmavou verzí.

Z jakého obrázku mám začít pro nejlepší výsledek?

Čtvercové PNG o rozměrech 512x512 nebo větší s průhledným pozadím poskytuje největší flexibilitu. Začátek s velkou velikostí a zmenšování zachovává více detailů než začátek z malého obrázku. Pokud vaše hlavní logo obsahuje slovní značku, zvažte přípravu samostatné zjednodušené verze zobrazující pouze ikonu nebo značku, protože text nebude čitelný na 16x16 bez ohledu na zdrojové rozlišení. Vysoký kontrast mezi značkou a jejím pozadím je nejspolehlivějším ukazatelem toho, zda se malé velikosti budou číst zřetelně.