.ico er fortsatt det forventede formatet i rotmappen til et nettsted, og de fleste nettbaserte konverteringsverktøy ber deg laste opp bildet til serveren deres. Slik lager du en riktig favicon.ico med flere størrelser fra en PNG, uten å laste opp noe.
En .ico-fil er mer enn et bilde med nytt navn
Det er ikke nok å gi logo.png navnet favicon.ico. ICO er et beholderformat med et eget filhode som beskriver hvor mange bilder det inneholder, hvilke mål de har og hvor hvert bilde begynner i filen. En PNG med nytt navn har ikke dette filhodet, og strengere nettlesere nekter å vise den.
En riktig ICO inneholder flere oppløsninger av samme ikon. Nettleseren leser filhodet, velger varianten som ligger nærmest ønsket størrelse og slipper å oppskalere.
Konverter PNG til ICO i tre trinn
Første trinn er å klargjøre kildebildet. En kvadratisk PNG på minst 512×512 piksler gir best resultat, fordi alle størrelser lages ved nedskalering. Hvis bildet har gjennomsiktig bakgrunn, bør du nå bestemme om den skal beholdes. Den passer godt i en fane, men iOS og Android erstatter den med svart.
Andre trinn er å generere oppløsningene. Filen bør minst inneholde 16×16, 32×32 og 48×48. Størrelsesendringen må bruke et godt resamplingsfilter, ellers blir de minste størrelsene uleselige.
Tredje trinn er å samle bildene. De tre bildene pakkes i én ICO-beholder med et filhode som beskriver hver oppføring. Resultatet legges i nettstedets rotmappe med navnet favicon.ico, der nettlesere finner det selv uten et HTML-element.
Derfor er lokal konvertering viktig
De fleste PNG-til-ICO-verktøy laster opp filen til en server, behandler den og sender resultatet tilbake. Logoen din, ofte før den er offentlig lansert, havner på en maskin du ikke kontrollerer, med regler for oppbevaring du ikke har lest.
En moderne nettleser kan likevel gjøre alt selv: dekode PNG-bildet, endre størrelsen på et canvas, kode hver størrelse på nytt og sette sammen ICO-beholderen. Det er slik LFFavicon fungerer. Ingen forespørsel sender bildet ditt, og alt slettes når du lukker fanen.
Fordelen er også praktisk: konverteringen skjer umiddelbart, fungerer uten nett etter at siden er lastet inn, og har verken kø eller daglig grense.
En .ico-fil alene er ikke lenger nok
Konvertering fra PNG til ICO dekker faner og eldre klienter, men etterlater tre bruksområder: moderne nettlesere som foretrekker en SVG som er skarp i alle størrelser, iOS-startskjermen som trenger en PNG på 180×180 uten gjennomsiktighet, og Android som leser webmanifestet.
Når du først behandler bildet, kan du like gjerne lage hele settet samtidig. Det gjør generatoren: ett kildebilde brukes til .ico, SVG, Apple Touch-ikonet og manifestikonene, med forhåndsvisning for hvert bruksområde før nedlasting.
Primærkilder
Vanlige spørsmål
Hvor stor må PNG-filen være for å lage en ICO?
Et kvadrat på minst 512×512 piksler. Under 128×128 må de større bildene i pakken oppskaleres, og resultatet blir uskarpt. En SVG er enda bedre, siden den ikke har noen oppløsningsgrense.
Bevares gjennomsiktigheten i .ico-filen?
Ja, ICO-formatet støtter en full alfakanal, og en gjennomsiktig PNG forblir gjennomsiktig i fanen. Vær likevel oppmerksom på iOS-ikonet: systemet fyller gjennomsiktige områder med svart, så legg til en bakgrunn.
Hvor skal favicon.ico-filen ligge?
I domenets rotmappe, tilgjengelig på https://yoursite.com/favicon.ico. Nettlesere og søkeroboter ber som standard om akkurat denne adressen, selv om ingen link-kode angir den.