Artikkel

Lage et nettstedikon fra en PNG

Et nettstedikon er en liten grafikk som nettlesere viser i faner, bokmerker og historikklister. Å få det riktig innebærer mer enn å endre størrelsen på en logo: .ico-formatet pakker flere oppløsninger i én fil, moderne nettlesere foretrekker PNG, mobile enheter har sitt eget apple-touch-icon, og web-app-manifester trenger sitt eget ikonsett. Denne artikkelen dekker hver del og forklarer hvordan du produserer hele settet fra én enkelt kilde-PNG.

Skrevet av Bastien Sulyan · Publisert 29. juni 2026

Hva et nettstedikon er og hvor nettlesere bruker det

Ordet favicon er en sammentrekning av "favorite icon". Nettlesere viste det først i adressefeltet i Internet Explorer 5 (1999), og adopterte det deretter for bokmerker. I dag vises det i nettleserfaner, bokmerkelinjen, nettleserhistorikken, ny-fane-siden i noen nettlesere, og operativsystemets oppgavelinjer når et nettsted er festet. På mobil, hvis en bruker legger til et nettsted på hjemmeskjermen sin, bruker enheten et relatert men distinkt bilde kalt apple-touch-icon i stedet for standard nettstedikon. Søkemotorer viser noen ganger nettstedikoner ved siden av resultater i grensesnittet. Grafikken er liten av design, noe som gjør den effektiv for rask visuell identifikasjon, men også krevende å produsere godt: ved 16x16 piksler blir en detaljert logo et utydelig flekkete bilde. Selve nettstedikonfilen har gått gjennom flere formater opp gjennom tiårene, med .ico som forblir det mest bredt kompatible og PNG nå som moderne standard for de fleste nettlesere.

.ico-beholderen: flere oppløsninger i én fil

.ico-formatet er en beholder, ikke ett enkelt bilde. En enkelt .ico-fil kan inneholde flere bitmapbilder i ulike oppløsninger, der hver er lagret som en separat oppføring i en indeks i begynnelsen av filen. De tre vanligste størrelsene er 16x16, 32x32 og 48x48 piksler. Når Windows viser et nettstedikon i Utforsker eller på oppgavelinjen, velger det oppføringen som passer best til visningskonteksten. Eldre Windows-versjoner trengte en 48x48-oppføring for tetthetsspor på oppgavelinjen. Nettlesere ber om nettstedikon ved 16x16 for faner, men kan bruke en større oppføring hvis en skjerm med høyere tetthet oppdages. Å pakke alle tre størrelsene i én .ico-fil betyr at én enkelt HTTP-forespørsel dekker alle brukstilfeller. Å distribuere dem som separate PNG-er er også gyldig, men krever ekstra link-tagger og legger til HTTP-forespørsler. De interne bildene inne i en .ico-fil er standard BMP- eller PNG-data, så beholderen legger bare til en liten headeroverhead per oppføring.

Designe for bittesmå størrelser: forenkle merket

Ved 16x16 piksler har du 256 piksler totalt. En typisk logotype med et ordmerke eller fine detaljer blir uleselig i den størrelsen. Standardtilnærmingen er å lage et forenklet merke: en enkelt bokstav, en abstrakt form eller et ikon som representerer merket uten å stole på detaljer. Noen spesifikke problemer å forutse: tynne streker forsvinner helt ved små størrelser, spesielt på skjermer som ikke er retina. Bokstavpar og detaljer i negativt rom flyter sammen til grått støy. Gradienter blir knapt synlige. Høy kontrast mellom merket og bakgrunnen er den enkeltfaktoren som betyr mest for leselighet. En solid form på en enkel bakgrunn leser nesten alltid bedre enn en detaljert illustrasjon ved 16x16. Størrelsene 32x32 og 48x48 er mer tilgivende og kan støtte litt mer detaljer, men 16x16-versjonen bør behandles som den bindende begrensningen. Hvis merket fortsatt ikke leses ved 16x16, trenger designet ytterligere forenkling.

Det moderne settet: .ico, PNG-ikoner, apple-touch-icon, manifest og HTML link-tagger

Et komplett nettstedikon-oppsett for et offentlig nettsted trenger for øyeblikket fem ting. For det første, en favicon.ico i roten av nettstedet (nettlesere ber om /favicon.ico direkte uten en link-tag som reserve). For det andre, en 32x32 PNG for moderne desktopnettlesere, deklarert med en link-tag: `<link rel="icon" type="image/png" sizes="32x32" href="/favicon-32x32.png">`. For det tredje, en 16x16 PNG for fanestørrelsen: `<link rel="icon" type="image/png" sizes="16x16" href="/favicon-16x16.png">`. For det fjerde, et apple-touch-icon ved 180x180 piksler for iOS hjemmeskjerm-bokmerker: `<link rel="apple-touch-icon" sizes="180x180" href="/apple-touch-icon.png">`. For det femte, et web-app-manifest (site.webmanifest) med en 192x192 og en 512x512 PNG for Android og progressive webapper. Gjennomsiktighet støttes i PNG og i PNG-kodede oppføringer inne i .ico, men apple-touch-icon bør ha en ugjennomsiktig bakgrunn fordi iOS ignorerer alfa-kanalen og fyller gjennomsiktige områder med svart.

Gjøre det lokalt: favicon-generator holder bildet ditt på enheten din

Favicon-generator på dette nettstedet tar en PNG og produserer det komplette settet: en multi-oppløsnings favicon.ico pakket med 16x16, 32x32 og 48x48 oppføringer, de individuelle PNG-størrelsene for direkte link-tag-bruk, og 180x180 apple-touch-icon. Alt dette skjer i nettleseren din ved hjelp av Canvas API og en JavaScript .ico-koder. Kildebildet ditt lastes aldri opp noe sted; det forblir på enheten din. Dette er viktig når kildefilen er en bedriftslogo eller et asset som ikke bør forlate maskinen din før du kontrollerer hvor det går. Hver generert fil tilbys som sin egen nedlasting, med de konvensjonelle filnavnene. Du kopierer dem til roten av nettstedet ditt og legger til de tilsvarende link-taggene i HTML-hodet ditt. Hvis kildelogoen din har fine detaljer som ikke overlever 16x16-gjengivelsen, kan du beskjære eller forenkle den før du slipper den inn i generatoren, eller levere et annet kildebildesom er spesielt forberedt for nettstedsikonet.

Verktøy i denne artikkelen

Ofte stilte spørsmål

Trenger jeg fortsatt en favicon.ico hvis jeg deklarerer PNG link-tagger?

Ja, av to grunner. For det første vil nettlesere som ikke leser HTML-en din (web-roboter, RSS-lesere, noen gamle mobilnettlesere) se etter /favicon.ico direkte i roten av domenet. Hvis den filen er fraværende, genererer de en 404-forespørsel ved hver sideinnlasting, noe som legger støy til serverloggene dine og en liten unødvendig rundtur. For det andre gjenkjenner eldre versjoner av Internet Explorer bare .ico-formatet og ignorerer PNG link-tagger. Å tilby begge dekker alle tilfeller.

Kan jeg bruke en SVG som nettstedikon?

Chrome og Firefox støtter SVG-nettstedikoner via `<link rel="icon" type="image/svg+xml" href="/favicon.svg">`. Safari støtter ikke SVG-nettstedikoner. Fordi SVG-nettstedikoner er oppløsningsuavhengige ser de skarpe ut på hvilken som helst skjermtetthet, inkludert retina-skjermer, uten behov for flere størrelsevarianter. Den praktiske anbefalingen er å deklarere SVG link-tag for nettlesere som støtter det og fortsatt inkludere .ico-reserve for komplett dekning. SVG-nettstedikoner kan også inkludere en `prefers-color-scheme` mediespørring for å bytte mellom en lys og mørk versjon automatisk.

Hvilket bilde bør jeg starte fra for å få det beste resultatet?

En kvadratisk PNG ved 512x512 eller større med gjennomsiktig bakgrunn gir mest fleksibilitet. Å starte stort og skalere ned bevarer mer detaljer enn å starte fra et lite bilde. Hvis hovedlogoen din inkluderer et ordmerke, bør du vurdere å forberede en separat forenklet versjon som bare viser ikonet eller merket, fordi teksten ikke vil være lesbar ved 16x16 uavhengig av kildeoppløsningen. Høy kontrast mellom merket og bakgrunnen er den mest pålitelige predikatoren for om de små størrelsene vil leses tydelig.