.ico je i dalje očekivani format u korijenu stranice, a većina online pretvarača traži slanje slike na svoj poslužitelj. Evo kako iz PNG-a dobiti ispravan favicon.ico s više dimenzija bez slanja ijedne datoteke.
.ico nije samo preimenovana slika
Preimenovanje logo.png u favicon.ico nije dovoljno. ICO je spremnički format s vlastitim zaglavljem: opisuje koliko slika sadrži, kojih su dimenzija i gdje svaka počinje u datoteci. Preimenovani PNG nema takvo zaglavlje pa ga stroži preglednici odbijaju prikazati.
Ispravan ICO sadrži nekoliko razlučivosti iste ikone. Preglednik čita zaglavlje, odabire inačicu najbližu potrebnoj veličini i ništa ne povećava.
Pretvorite PNG u ICO u tri koraka
Prvi korak: pripremite izvor. Kvadratni PNG od najmanje 512×512 piksela daje najbolji rezultat jer će sve dimenzije nastati smanjivanjem. Ako slika ima prozirnu pozadinu, odmah odlučite želite li je zadržati: izvrsna je za karticu, ali iOS i Android zamijenit će je crnom.
Drugi korak: izradite razlučivosti. Datoteka treba sadržavati barem 16×16, 32×32 i 48×48. Pri promjeni dimenzija potreban je kvalitetan filtar ponovnog uzorkovanja, inače male ikone postaju nečitljive.
Treći korak: spojite ih. Tri se slike objedinjuju u jedan ICO spremnik čije zaglavlje opisuje svaki unos. Rezultat smjestite u korijen stranice pod nazivom favicon.ico, gdje ga preglednici pronalaze i bez HTML oznake.
Zašto je lokalno pretvaranje važno
Većina pretvarača PNG-a u ICO šalje datoteku na poslužitelj koji je obrađuje i vraća rezultat. Vaš logotip, često i prije javnog predstavljanja, završava na računalu koje ne kontrolirate, uz pravila zadržavanja podataka koja niste pročitali.
Suvremeni preglednik može sve to obaviti sam: dekodirati PNG, promijeniti dimenzije na canvasu, ponovno kodirati svaku dimenziju i sastaviti ICO spremnik. Upravo to radi LFFavicon. Nijedan zahtjev ne prenosi vašu sliku, a zatvaranjem kartice sve se briše.
Prednost nije samo teorijska: pretvaranje je trenutačno, radi bez interneta nakon učitavanja stranice, nema reda čekanja ni dnevnog ograničenja.
Sama datoteka .ico više nije dovoljna
Pretvaranje PNG-a u ICO pokriva kartice i starije klijente, ali izostavlja tri konteksta: suvremene preglednike koji preferiraju SVG oštar u svakoj veličini, početni zaslon iOS-a koji traži neprozirni PNG od 180×180 i Android koji čita web manifest.
Budući da sliku već obrađujete, izradite cijeli skup odjednom. Generator radi upravo to: jedan izvor daje .ico, SVG, ikonu Apple Touch i ikone manifesta, uz pregled svakog konteksta prije preuzimanja.
Primarni izvori
Česta pitanja
Koja je veličina PNG-a potrebna za izradu ICO-a?
Kvadrat od najmanje 512×512 piksela. Ispod 128×128 veće dimenzije u paketu moraju se povećavati pa rezultat djeluje mutno. SVG je još bolji jer nema ograničenje razlučivosti.
Čuva li se prozirnost u datoteci .ico?
Da, ICO podržava potpuni alfa-kanal i prozirni PNG ostaje proziran u kartici. Pripazite na ikonu za iOS: sustav ispunjava prozirna područja crnom bojom pa joj dodajte pozadinu.
Gdje treba smjestiti datoteku favicon.ico?
U korijen domene, na adresu https://yoursite.com/favicon.ico. Preglednici i roboti prema konvenciji traže upravo tu adresu, čak i kada je nijedna oznaka link ne deklarira.