.ico zostáva očakávaným formátom v koreňovom adresári webu a väčšina online konvertorov vyžaduje odoslanie obrázka na server. Tu je postup, ako z PNG vytvoriť správny favicon.ico s viacerými rozmermi bez odosielania súborov.
.ico nie je iba premenovaný obrázok
Premenovať logo.png na favicon.ico nestačí. ICO je kontajnerový formát s vlastnou hlavičkou: opisuje počet obrázkov, ich rozmery a pozíciu každého z nich v súbore. Premenované PNG túto hlavičku nemá a prísnejšie prehliadače ho odmietnu zobraziť.
Správne ICO obsahuje viac rozlíšení rovnakej ikony. Prehliadač prečíta hlavičku, vyberie variant najbližší potrebnej veľkosti a nemusí nič zväčšovať.
Prevod PNG na ICO v troch krokoch
Prvý krok: pripravte zdroj. Najlepší výsledok poskytne štvorcové PNG s aspoň 512×512 pixelmi, pretože všetky rozmery vzniknú zmenšením. Ak má obrázok priehľadné pozadie, hneď sa rozhodnite, či ho zachováte: pre kartu je ideálne, no iOS a Android ho nahradia čiernou.
Druhý krok: vygenerujte rozlíšenia. Súbor musí obsahovať aspoň 16×16, 32×32 a 48×48. Zmena rozmerov musí používať kvalitné prevzorkovanie, inak sa malé verzie stanú nečitateľnými.
Tretí krok: zabaľte ich. Tri obrázky sa spoja do jedného kontajnera ICO s hlavičkou opisujúcou každú položku. Výsledok umiestnite do koreňového adresára webu ako favicon.ico a prehliadače ho nájdu aj bez značky HTML.
Prečo je lokálny prevod výhodnejší
Väčšina konvertorov PNG na ICO odošle súbor na server, ktorý ho spracuje a vráti výsledok. Vaše logo, často ešte pred zverejnením, sa tak ocitne na zariadení, ktoré neovládate, s pravidlami uchovávania, ktoré ste nečítali.
Moderný prehliadač pritom zvládne všetko sám: dekódovať PNG, zmeniť rozmery na canvas, znovu zakódovať každú veľkosť a zostaviť kontajner ICO. Presne to robí LFFavicon. Žiadna požiadavka neodosiela váš obrázok a zavretím karty sa všetko vymaže.
Výhoda nie je len teoretická: prevod je okamžitý, po načítaní stránky funguje aj offline a neexistuje poradovník ani denný limit.
Samotné .ico už nestačí
Prevod PNG na ICO pokryje karty a staršie klienty, no vynechá tri použitia: moderné prehliadače uprednostňujú SVG ostré pri každej veľkosti, domovská obrazovka iOS potrebuje nepriehľadné PNG 180×180 a Android číta webový manifest.
Keď už obrázok spracúvate, vytvorte rovno celú sadu. Generátor z rovnakého zdroja vytvorí .ico, SVG, ikonu Apple Touch aj ikony manifestu a pred stiahnutím zobrazí náhľad každého použitia.
Primárne zdroje
Časté otázky
Aký veľký PNG potrebujem na vytvorenie ICO?
Štvorec s aspoň 512×512 pixelmi. Pod 128×128 sa väčšie rozmery balíka musia zväčšiť a budú rozmazané. Ešte lepšie je SVG, ktoré nemá obmedzenie rozlíšenia.
Zachová sa v .ico priehľadnosť?
Áno, ICO podporuje úplný alfa kanál a priehľadné PNG zostane na karte priehľadné. Pri ikone iOS však systém priehľadné oblasti vypĺňa čiernou, preto pridajte pozadie.
Kam umiestniť súbor favicon.ico?
Do koreňového adresára domény, aby bol dostupný na https://votresite.com/favicon.ico. Prehliadače a roboty ho na tejto adrese požadujú podľa konvencie, aj keď ho nedeklaruje žiadna značka link.