Převod PNG do ICO (favicon)

Favicon je malá ikona, kterou prohlížeče zobrazují na kartě, v liště záložek a v historii. Tento nástroj promění PNG v plnohodnotný soubor .ico ve více velikostech, s verzemi 16, 32, 48 a 64 pixelů, vytvořený celý na vašem zařízení bez nahrávání.

Jak převést PNG do ICO

Přetáhněte svůj obrázek PNG do nástroje níže. Nejlépe funguje čtvercový obrázek.
Výstupní formát je už nastaven na ICO (favicon).
Klikněte na Spustit a vytvoří se .ico ve více velikostech.
Stáhněte svůj favicon.ico a vložte ho do kořenové složky webu.

Co má favicon dělat

Favicon se zobrazuje ve velmi malé velikosti, často 16 pixelů čtverečních. V takové velikosti jemné detaily zmizí a tenké čáry se úplně ztratí. Dobrý favicon je výrazný, jednoduchý tvar s vysokým kontrastem: jedno písmeno, zjednodušená verze značky z loga nebo plný tvar v barvě značky. Pokud vaše celé logo obsahuje text, použijte jen značku, nebo jen první písmeno.

Soubory .ico obsahují několik velikostí proto, že zvětšování nebo zmenšování jediného obrázku při zobrazení vypadá rozmazaně. Díky verzím o 16, 32, 48 a 64 pixelech může operační systém nebo prohlížeč v každé situaci zobrazit obrázek přesný na pixel: 16 px na kartě, 32 px v seznamu záložek na displeji s vysokým DPI, 48 px u zástupce na hlavním panelu Windows a tak dále.

Jak připravit zdrojové PNG

Udělejte ho čtvercové. Pokud je vaše logo široké, nejdřív ho umístěte na čtvercové průhledné plátno, nebo ho ořízněte na značku nástrojem pro ořez.
Začněte na 256 pixelech nebo víc. Zmenšení z velkého čistého originálu dá hladší výsledek než zvětšení malého.
Pokud je tvar plný, ponechte průhledné pozadí, aby dobře vypadal ve světlém i tmavém motivu prohlížeče. Pokud je tvar tenký nebo světlý, umístěte ho raději na jednobarevný čtverec.
Vyhněte se textu delšímu než jedno nebo dvě písmena; v 16 pixelech nebude čitelný.

Jak favicon nainstalovat

Stažený soubor uložte jako favicon.ico a umístěte ho do kořenové složky webu. Pak do <head> každé stránky přidejte:

<link rel="icon" href="/favicon.ico" sizes="any">

Většina platforem má místo toho vlastní nastavení: WordPress ho nazývá Ikona webu v sekci Vzhled, Shopify a Squarespace mají pole Favicon v nastavení šablony a Webflow ho má v Project Settings. Tam nahrajte soubor .ico. Kompletní návod najdete v článku jak vytvořit favicon.

Jak jít dál

Pro kompletní sadu ikon, kterou moderní zařízení vyžadují, budete potřebovat také PNG o 180 pixelech pro zástupce na ploše iOS (apple-touch-icon) a PNG o 192 a 512 pixelech pro Android a manifest webové aplikace. To jsou běžné soubory PNG, takže je vytvořte ze stejného originálu nástrojem pro změnu velikosti. Soubor .ico z této stránky pokryje karty prohlížeče, záložky a Windows, tedy místa, kde si lidé chybějícího faviconu všimnou nejčastěji.

Často kladené otázky

Jak velké má být zdrojové PNG?

Čtvercové a alespoň 64 × 64 pixelů. Čtvercové PNG o 256 pixelech dává po zmenšení nejčistší výsledky. Nečtvercové obrázky se vycentrují a doplní průhledným okrajem.

Co je uvnitř souboru .ico?

Čtyři obrázky kódované jako PNG ve velikosti 16, 32, 48 a 64 pixelů. Prohlížeče i Windows si vyberou velikost, která se do daného místa hodí nejlépe, takže ikona vypadá ostře na kartě, v záložkách i v zástupci na ploše.

Jak přidám favicon na svůj web?

Nahrajte favicon.ico do kořenové složky webu (aby byl dostupný na vasweb.cz/favicon.ico) a do <head> svých stránek přidejte <link rel="icon" href="/favicon.ico">. Prohlížeče favicony silně ukládají do mezipaměti, takže změnu možná uvidíte až po tvrdém obnovení stránky.

Potřebuji v roce 2026 ještě soubor .ico?

Moderní prohlížeče přijímají favicony v PNG i SVG, ale .ico je jediný formát, který funguje všude, včetně starších prohlížečů, zástupců ve Windows a některých čteček zpráv. Většina webů nabízí obojí.

Vaše soubory nikdy neopustí vaše zařízení

Každý nástroj na Squishly Tools je 100 % zdarma a běží celý ve vašem prohlížeči. Vaše obrázky a dokumenty se zpracovávají ve vašem vlastním počítači a nikdy se nenahrávají na server. Žádné účty, žádné vodoznaky a žádný háček.