.ico on yhä sivuston juuresta odotettava tiedostomuoto, ja useimmat verkkopalvelut pyytävät lähettämään kuvan palvelimelleen. Näin teet PNG-kuvasta kelvollisen monikokoisen favicon.ico-tiedoston lähettämättä mitään verkkoon.
.ico ei ole vain uudelleennimetty kuva
Pelkkä logo.png-tiedoston nimeäminen favicon.ico-tiedostoksi ei riitä. ICO on säiliömuoto, jolla on oma otsake: se kertoo kuvien määrän, mitat ja kunkin kuvan sijainnin tiedostossa. Uudelleennimetyltä PNG:ltä puuttuu tämä otsake, eivätkä tarkasti muotoa noudattavat selaimet näytä sitä.
Kelvollinen ICO sisältää saman kuvakkeen useissa tarkkuuksissa. Selain lukee otsakkeen ja valitsee tarvitsemaansa kokoa lähimmän version, jolloin suurentamista ei tarvita.
Muunna PNG ICO-muotoon kolmessa vaiheessa
Valmistele ensin lähdekuva. Vähintään 512×512 pikselin neliömäinen PNG antaa parhaan tuloksen, koska kaikki koot saadaan pienentämällä. Jos kuvassa on läpinäkyvä tausta, päätä heti, haluatko säilyttää sen: se sopii välilehteen, mutta iOS ja Android korvaavat sen mustalla.
Luo toiseksi eri tarkkuudet. Tiedoston on sisällettävä vähintään koot 16×16, 32×32 ja 48×48. Koon muuttamisessa on käytettävä laadukasta uudelleennäytteistystä, jotta pienet versiot pysyvät luettavina.
Kokoa kolmanneksi paketti. Kolme kuvaa yhdistetään samaan ICO-säiliöön, jonka otsake kuvaa jokaisen kuvan. Tulos sijoitetaan sivuston juureen nimellä favicon.ico, jolloin selaimet löytävät sen myös ilman HTML-tunnistetta.
Miksi paikallinen muunnos merkitsee paljon?
Useimmat PNG–ICO-muuntimet lähettävät tiedostosi palvelimelle käsiteltäväksi ja palauttavat tuloksen. Logosi päätyy näin usein jo ennen julkaisua koneelle, jota et hallitse ja jonka säilytyskäytäntöä et ole lukenut.
Nykyselain osaa tehdä kaiken itse: purkaa PNG:n, muuttaa sen kokoa canvas-pinnalla, koodata jokaisen koon ja koota ICO-säiliön. Juuri näin LFFavicon toimii. Kuvaasi ei lähetetä yhdessäkään pyynnössä, ja välilehden sulkeminen poistaa kaiken.
Hyöty on myös käytännöllinen: muunnos on välitön, se toimii ilman verkkoyhteyttä sivun lataamisen jälkeen, eikä jonoja tai päivittäisiä rajoituksia ole.
Pelkkä .ico ei enää riitä
PNG:n muuntaminen ICO-muotoon kattaa välilehdet ja vanhat ohjelmat, mutta kolme käyttötilannetta jää puuttumaan: nykyselaimet, jotka suosivat kaikissa koissa tarkkaa SVG:tä, iOS:n aloitusnäyttö, joka tarvitsee peittävän 180×180 PNG:n, sekä Android, joka lukee verkkomanifestia.
Kun käsittelet kuvan kerran, samalla kannattaa luoda koko paketti. Generaattori käyttää samaa lähdettä .ico-tiedostoon, SVG:hen, Apple Touch -kuvakkeeseen ja manifestikuvakkeisiin. Näet jokaisen käyttötilanteen esikatselun ennen lataamista.
Alkuperäislähteet
Usein kysytyt kysymykset
Minkä kokoinen PNG tarvitaan ICO:n luomiseen?
Vähintään 512×512 pikselin neliö. Alle 128×128-kuvasta paketin suuret koot on suurennettava, jolloin tulos on sumea. SVG on vielä parempi, sillä sen tarkkuutta ei ole rajattu.
Säilyykö läpinäkyvyys .ico-tiedostossa?
Kyllä, ICO tukee täyttä alfakanavaa, ja läpinäkyvä PNG pysyy läpinäkyvänä välilehdellä. iOS-kuvakkeessa on kuitenkin oltava tausta, sillä järjestelmä täyttää läpinäkyvät alueet mustalla.
Minne favicon.ico sijoitetaan?
Verkkotunnuksen juureen niin, että se on saatavilla osoitteessa https://votresite.com/favicon.ico. Selaimet ja robotit pyytävät sitä tästä osoitteesta käytännön mukaisesti, vaikka sitä ei olisi määritetty link-tunnisteella.