.ico on saidi juurkaustas endiselt eeldatav vorming ning enamik veebiteisendajaid palub pildi oma serverisse üles laadida. Siin selgitame, kuidas saada PNG-st korrektne mitme mõõtmega favicon.ico ilma midagi üles laadimata.
.ico ei ole lihtsalt ümber nimetatud pilt
Faili logo.png ümbernimetamisest favicon.ico-ks ei piisa. ICO on oma päisega konteinerivorming: see kirjeldab piltide arvu, nende mõõtmeid ja iga pildi alguskohta failis. Ümber nimetatud PNG-l sellist päist pole ning rangemad brauserid keelduvad seda kuvamast.
Korrektne ICO sisaldab sama ikooni mitmes eraldusvõimes. Brauser loeb päist, valib vajalikule suurusele lähima variandi ega pea midagi suurendama.
Teisenda PNG ICO-ks kolme sammuga
Esimene samm: valmista lähtepilt ette. Vähemalt 512×512-piksline ruudukujuline PNG annab parima tulemuse, sest kõik mõõtmed saadakse vähendamise teel. Kui pildil on läbipaistev taust, otsusta kohe, kas see säilitada: vahekaardile sobib see hästi, kuid iOS ja Android asendavad selle mustaga.
Teine samm: loo eraldusvõimed. Fail peaks sisaldama vähemalt mõõtmeid 16×16, 32×32 ja 48×48. Mõõtmete muutmisel tuleb kasutada kvaliteetset diskreetimisfiltrit, muidu muutuvad väikesed suurused loetamatuks.
Kolmas samm: paki need kokku. Kolm pilti koondatakse ühte ICO-konteinerisse, mille päis kirjeldab iga kirjet. Tulemus paigutatakse saidi juurkausta nimega favicon.ico, kust brauserid leiavad selle ka HTML-sildita.
Miks kohalik teisendamine on oluline
Enamik PNG-st ICO-ks teisendajaid laadib faili serverisse, töötleb seda seal ja saadab tulemuse tagasi. Sinu logo, sageli juba enne avalikustamist, satub seadmesse, mida sa ei kontrolli, ning allub säilitamisreeglitele, mida sa pole lugenud.
Moodne brauser suudab aga kõik ise teha: dekodeerida PNG, muuta selle mõõtmeid canvas-elemendil, kodeerida iga suuruse uuesti ja koostada ICO-konteineri. Just nii töötab LFFavicon. Ükski päring ei sisalda sinu pilti ning vahekaardi sulgemine kustutab kõik.
Kasu pole üksnes teoreetiline: teisendamine toimub kohe, töötab pärast lehe laadimist ka võrguühenduseta ning puuduvad järjekorrad ja päevased piirangud.
Ainult .ico-failist enam ei piisa
PNG teisendamine ICO-ks katab vahekaardid ja vanemad kliendid, kuid jätab katmata kolm kasutuskohta: moodsad brauserid, mis eelistavad igas suuruses teravat SVG-d, iOS-i avakuva, mis vajab läbipaistmatut 180×180 PNG-d, ja Android, mis loeb veebimanifesti.
Kuna töötled pilti niikuinii, loo kogu komplekt korraga. Generaator teebki seda: üks lähtepilt annab .ico, SVG, Apple Touchi ikooni ja manifestiikoonid ning enne allalaadimist näed iga kasutuskoha eelvaadet.
Algallikad
Korduma kippuvad küsimused
Kui suurt PNG-d on ICO loomiseks vaja?
Vähemalt 512×512-pikslist ruutu. Alla 128×128 puhul tuleb paketi suuremaid mõõtmeid suurendada ning tulemus jääb udune. SVG on veel parem, sest sellel puudub eraldusvõime piirang.
Kas .ico säilitab läbipaistvuse?
Jah, ICO-vorming toetab täielikku alfakanalit ning läbipaistev PNG jääb vahekaardil läbipaistvaks. Ole aga iOS-i ikooniga ettevaatlik: süsteem täidab läbipaistvad alad mustaga, seega lisa sellele taust.
Kuhu peaks favicon.ico-faili paigutama?
Domeeni juurkausta, kus see on kättesaadav aadressil https://yoursite.com/favicon.ico. Brauserid ja roomajad küsivad kokkuleppeliselt just seda aadressi ka siis, kui ükski link-silt seda ei deklareeri.