Soubor .ico je stále očekávaným formátem v kořenovém adresáři webu a většina online převodníků vyžaduje odeslání obrázku na server. Zde zjistíte, jak z PNG vytvořit správný favicon.ico s více velikostmi bez nahrávání souborů.
.ico není jen přejmenovaný obrázek
Přejmenovat logo.png na favicon.ico nestačí. ICO je kontejnerový formát s vlastní hlavičkou: popisuje počet obrázků, jejich rozměry i místo, kde každý z nich v souboru začíná. Přejmenované PNG tuto hlavičku nemá a přísné prohlížeče ho odmítnou zobrazit.
Správný ICO obsahuje tutéž ikonu v několika rozlišeních. Prohlížeč přečte hlavičku, vybere variantu nejbližší požadované velikosti a nic nezvětšuje.
Převod PNG na ICO ve třech krocích
Nejprve připravte zdroj. Čtvercové PNG alespoň 512×512 pixelů dává nejlepší výsledek, protože všechny velikosti vzniknou zmenšením. Má-li obrázek průhledné pozadí, rozhodněte se hned, zda ho chcete zachovat: pro kartu je skvělé, ale iOS a Android ho nahradí černou.
Poté vygenerujte rozlišení. Soubor musí obsahovat minimálně 16×16, 32×32 a 48×48. Změna velikosti musí používat kvalitní převzorkování, jinak budou malé varianty nečitelné.
Nakonec vše zabalte. Tři obrázky se spojí do jediného kontejneru ICO s hlavičkou popisující jednotlivé záznamy. Výsledek umístíte do kořenového adresáře webu pod názvem favicon.ico a prohlížeče ho najdou i bez HTML značky.
Proč záleží na lokálním převodu
Většina převodníků PNG na ICO odešle soubor na server, který ho zpracuje a vrátí výsledek. Vaše logo, často ještě před veřejným představením, tak skončí na cizím počítači s pravidly uchovávání, která jste nečetli.
Moderní prohlížeč přitom zvládne vše sám: dekódovat PNG, změnit jeho velikost na plátně canvas, znovu zakódovat jednotlivé velikosti a sestavit kontejner ICO. Přesně to dělá LFFavicon. Žádný požadavek neodesílá váš obrázek a zavřením karty se vše smaže.
Výhody nejsou jen teoretické: převod je okamžitý, po načtení stránky funguje offline a neexistuje fronta ani denní limit.
Samotné .ico už nestačí
Převod PNG na ICO pokryje karty a starší klienty, ale vynechá tři použití: moderní prohlížeče preferující SVG ostré ve všech velikostech, plochu iOS vyžadující neprůhledné PNG 180×180 a Android čtoucí webový manifest.
Když už obrázek zpracováváte, vytvořte rovnou celou sadu. Přesně to dělá generátor: ze stejného zdroje vznikne .ico, SVG, ikona Apple Touch i ikony manifestu, s náhledem každého použití před stažením.
Primární zdroje
Časté otázky
Jak velké PNG potřebuji pro vytvoření ICO?
Čtverec alespoň 512×512 pixelů. Pod 128×128 se větší varianty v balíčku musí zvětšovat a budou rozmazané. SVG je ještě lepší, protože nemá omezení rozlišení.
Zůstane v .ico zachovaná průhlednost?
Ano, ICO podporuje plný alfa kanál a průhledné PNG zůstane průhledné i v kartě. Pozor ale na ikonu pro iOS: systém vyplňuje průhledná místa černě, proto jí přidejte pozadí.
Kam umístit soubor favicon.ico?
Do kořenového adresáře domény, aby byl dostupný na https://votresite.com/favicon.ico. Prohlížeče a roboti ho na této adrese hledají podle zavedené konvence, i když ho nedeklaruje žádná značka link.