.ico je še vedno pričakovana oblika v korenu strani, večina spletnih pretvornikov pa zahteva nalaganje slike na njihov strežnik. Poglejmo, kako iz PNG dobiti pravilen favicon.ico z več velikostmi, brez kakršnega koli nalaganja.
.ico ni zgolj preimenovana slika
Preimenovanje logo.png v favicon.ico ni dovolj. ICO je vsebniška oblika z lastno glavo: opisuje število slik, njihove dimenzije in začetni položaj vsake slike v datoteki. Preimenovani PNG te glave nima in strožji brskalniki ga zavrnejo.
Pravilen ICO vsebuje več ločljivosti iste ikone. Brskalnik prebere glavo, izbere različico, ki je najbližje potrebni velikosti, in mu ni treba ničesar povečevati.
Pretvorba PNG v ICO v treh korakih
Prvi korak: pripravite izvorno sliko. Kvadratni PNG velikosti vsaj 512×512 slikovnih pik daje najboljši rezultat, saj vse velikosti nastanejo s pomanjšavo. Če ima slika prosojno ozadje, se zdaj odločite, ali ga boste ohranili: za zavihek je odlično, iOS in Android pa ga nadomestita s črno.
Drugi korak: ustvarite ločljivosti. Datoteka naj vsebuje vsaj 16×16, 32×32 in 48×48. Spreminjanje velikosti mora uporabljati kakovosten filter prevzorčenja, sicer majhne različice postanejo neberljive.
Tretji korak: združite jih. Tri slike se sestavijo v en vsebnik ICO, glava pa opiše vsak vnos. Rezultat postavite v koren strani z imenom favicon.ico, kjer ga brskalniki najdejo tudi brez oznake HTML.
Zakaj je lokalna pretvorba pomembna
Večina pretvornikov PNG v ICO naloži datoteko na strežnik, jo tam obdela in vrne rezultat. Vaš logotip, pogosto še pred javno objavo, pristane na napravi zunaj vašega nadzora, s pravili hrambe, ki jih niste prebrali.
Sodobni brskalnik pa vse to zmore sam: dekodira PNG, mu spremeni velikost na platnu canvas, znova kodira vsako velikost in sestavi vsebnik ICO. Tako deluje LFFavicon. Nobena zahteva ne prenese vaše slike in zaprtje zavihka vse počisti.
Prednost ni le teoretična: pretvorba je takojšnja, po nalaganju strani deluje brez povezave in ni čakalne vrste ali dnevne omejitve.
Samo .ico ne zadostuje več
Pretvorba PNG v ICO pokrije zavihke in starejše odjemalce, tri okolja pa ostanejo brez podpore: sodobni brskalniki, ki imajo raje pri vseh velikostih oster SVG, začetni zaslon iOS, ki zahteva neprosojen PNG 180×180, in Android, ki bere spletni manifest.
Ker sliko že obdelujete, ustvarite celoten nabor hkrati. Generator naredi prav to: iz enega vira nastanejo .ico, SVG, ikona Apple Touch in ikone manifesta, s predogledom vsakega okolja pred prenosom.
Primarni viri
Pogosta vprašanja
Kako velik PNG potrebujem za ICO?
Kvadrat velikosti vsaj 512×512 slikovnih pik. Pod 128×128 je večje velikosti v paketu treba povečati in rezultat je zamegljen. SVG je še boljši, ker nima omejitve ločljivosti.
Ali se prosojnost ohrani v .ico?
Da, ICO podpira polni kanal alfa in prosojni PNG ostane prosojen na zavihku. Pazite pa na ikono iOS: sistem prosojna območja zapolni s črno, zato ji dodajte ozadje.
Kam sodi datoteka favicon.ico?
V koren domene, dosegljiva na https://yoursite.com/favicon.ico. Brskalniki in pajki po dogovoru zahtevajo prav ta naslov, tudi če ga ne navaja nobena oznaka link.