Konverter PNG til ICO (favicon)

Hva et favicon må gjøre

Et favicon vises svært lite, ofte bare 16 × 16 piksler. I den størrelsen forsvinner fine detaljer, og tynne linjer blir helt borte. Et godt favicon er en kraftig, enkel form med høy kontrast: én bokstav, en forenklet versjon av logomerket eller en kompakt form i merkevarefargen. Inneholder hele logoen din tekst, bruker du bare symbolet, eller bare forbokstaven.

Grunnen til at .ico-filer inneholder flere størrelser, er at det ser uskarpt ut å forstørre eller forminske ett enkelt bilde når det vises. Ved å levere versjoner på 16, 32, 48 og 64 piksler kan operativsystemet eller nettleseren vise et pikselperfekt bilde i hver situasjon: 16 px i fanen, 32 px i bokmerkelisten på en skjerm med høy DPI, 48 px på en snarvei i oppgavelinjen i Windows, og så videre.

Slik gjør du klar original-PNG-en

• Gjør den kvadratisk. Er logoen din bred, plasserer du den først på et kvadratisk, gjennomsiktig lerret, eller beskjærer til symbolet med beskjæringsverktøyet.
• Start med 256 piksler eller mer. Å forminske fra en stor, ren original gir et jevnere resultat enn å forstørre en liten.
• Behold gjennomsiktig bakgrunn hvis formen er kompakt, slik at den ser bra ut i både lyse og mørke temaer i nettleseren. Er formen tynn eller lys i fargen, plasserer du den heller på et ensfarget kvadrat.
• Unngå tekst som er lengre enn én eller to bokstaver; den blir uleselig ved 16 piksler.

Slik installerer du faviconet

Lagre den nedlastede filen som favicon.ico og legg den i rotmappen på nettstedet ditt. Legg deretter til dette i <head> på hver side:

<link rel="icon" href="/favicon.ico" sizes="any">

De fleste plattformer har en egen innstilling i stedet: WordPress kaller det Nettstedsikon under Utseende, Shopify og Squarespace har et favicon-felt i temainnstillingene, og Webflow har et under Project Settings. Last opp .ico-filen der. For en fullstendig veiledning kan du lese slik lager du et favicon.

Et steg videre

For hele settet med ikoner som moderne enheter ber om, trenger du også en PNG på 180 piksler til snarveier på startskjermen i iOS (apple-touch-icon) og PNG-filer på 192 og 512 piksler til Android og manifestet for nettappen. Det er vanlige PNG-filer, så bruk verktøyet for å endre størrelse til å lage dem fra samme original. .ico-filen fra denne siden dekker nettleserfaner, bokmerker og Windows, som er der folk flest legger merke til at et favicon mangler.