Artikel

Oprettelse af et favicon fra en PNG

Et favicon er en lille grafik, som browsere viser i faner, bogmærker og historikelister. At gøre det rigtigt involverer mere end blot at ændre størrelsen på et logo: .ico-formatet pakker flere opløsninger i én fil, moderne browsere foretrækker PNG, mobilenheder har deres eget apple-touch-icon, og webapp-manifester har brug for deres eget ikonsæt. Denne artikel dækker hvert stykke og forklarer, hvordan man producerer hele sættet fra en enkelt kilde-PNG.

Skrevet af Bastien Sulyan · Udgivet den 29. juni 2026

Hvad et favicon er, og hvor browsere bruger det

Ordet favicon er en sammentrækning af "favorite icon". Browsere viste det første gang i adresselinjen i Internet Explorer 5 (1999), og adopterede det derefter til bogmærker. I dag optræder det i browserfaner, bogmærkeværktøjslinjen, browserhistorikken, siden for ny fane i nogle browsere og operativsystemets proceslinjer, når et websted er fastgjort. På mobil, hvis en bruger tilføjer et websted til deres startskærm, bruger enheden et relateret men distinkt billede kaldet apple-touch-icon frem for det standard favicon. Søgemaskiner viser undertiden favicons ved siden af resultater i deres interface. Grafikken er lille af design, hvilket gør den effektiv til hurtig visuel identifikation, men også krævende at producere godt: ved 16x16 pixels bliver et detaljeret logo en utydelig plet. Favicon-filen selv er gået gennem adskillige formater gennem årtiene, med .ico der forbliver den bredest kompatible og PNG nu som den moderne standard for de fleste browsere.

.ico-containeren: flere opløsninger i én fil

.ico-formatet er en container, ikke et enkelt billede. En enkelt .ico-fil kan indeholde flere bitmapbilleder i forskellige opløsninger, der hver er gemt som en separat post i et indeks i starten af filen. De tre mest almindelige størrelser er 16x16, 32x32 og 48x48 pixels. Når Windows viser et favicon i Explorer eller på proceslinjen, vælger det den post, der bedst passer til visningskonteksten. Ældre Windows-versioner havde brug for en 48x48-post til proceslinjer med høj tæthed. Browsere anmoder om faviconet ved 16x16 for faner, men kan bruge en større post, hvis en skærm med højere tæthed registreres. Pakning af alle tre størrelser i én .ico-fil betyder, at en enkelt HTTP-anmodning dækker alle anvendelsestilfælde. Distribuering af dem som separate PNG'er er også gyldigt, men kræver ekstra link-tags og tilføjer HTTP-anmodninger. De interne billeder inde i en .ico-fil er standard BMP- eller PNG-data, så containeren tilføjer kun et lille header-overhead pr. post.

Design til meget små størrelser: forenkl mærket

Ved 16x16 pixels har du 256 pixels i alt. En typisk logotype med et ordmærke eller fine detaljer bliver ulæselig i den størrelse. Standardtilgangen er at skabe et forenklet mærke: et enkelt bogstav, en abstrakt form eller et ikon, der repræsenterer brandet uden at stole på detaljer. Et par specifikke problemer at forudse: tynde streger forsvinder fuldstændigt ved små størrelser, især på ikke-retina-skærme. Bogstavpar og negative-space-detaljer smelter sammen til grå støj. Gradienter bliver næsten usynlige. Høj kontrast mellem mærket og dets baggrund er den eneste største faktor i læsbarhed. En solid form på en simpel baggrund læses næsten altid bedre end en detaljeret illustration ved 16x16. Størrelserne 32x32 og 48x48 er mere tilgivende og kan understøtte lidt mere detalje, men 16x16-versionen bør behandles som den bindende begrænsning. Hvis mærket stadig ikke læses ved 16x16, har designet brug for yderligere forenkling.

Det moderne sæt: .ico, PNG-ikoner, apple-touch-icon, manifest og HTML-link-tags

Et komplet favicon-setup til et offentligt websted har i øjeblikket brug for fem ting. For det første et favicon.ico i roden af webstedet (browsere anmoder om /favicon.ico direkte uden et link-tag som reserve). For det andet en 32x32 PNG til moderne skrivebordsbrowsere, deklareret med et link-tag: `<link rel="icon" type="image/png" sizes="32x32" href="/favicon-32x32.png">`. For det tredje en 16x16 PNG til fane-størrelsen: `<link rel="icon" type="image/png" sizes="16x16" href="/favicon-16x16.png">`. For det fjerde et apple-touch-icon ved 180x180 pixels til iOS-startskærmsogmærker: `<link rel="apple-touch-icon" sizes="180x180" href="/apple-touch-icon.png">`. For det femte et webapp-manifest (site.webmanifest) med en 192x192 og en 512x512 PNG til Android og progressive web-apps. Gennemsigtighed understøttes i PNG og i PNG-kodede poster inde i .ico, selvom apple-touch-icon bør have en uigennemsigtig baggrund, fordi iOS ignorerer alpha-kanalen og fylder gennemsigtige områder med sort.

Gør det lokalt: favicon-generator holder dit billede på din enhed

Favicon-generatoren på dette websted tager en PNG og producerer det komplette sæt: et favicon.ico med flere opløsninger pakket med 16x16-, 32x32- og 48x48-poster, de individuelle PNG-størrelser til direkte link-tag-brug og apple-touch-icon på 180x180. Alt dette sker i din browser ved hjælp af Canvas API og en JavaScript .ico-encoder. Dit kildebillede uploades aldrig noget sted; det forbliver på din enhed. Det betyder noget, når kildefilen er et firmalogo eller et aktiv, der ikke bør forlade din maskine, inden du kontrollerer, hvor det ender. Hver genereret fil tilbydes som sin egen download, med de konventionelle filnavne. Du kopierer dem til roden af dit websted og tilføjer de tilsvarende link-tags til dit HTML-head. Hvis dit kildelogo har fine detaljer, der ikke overlever 16x16-gengivelsen, kan du beskære eller forenkle det inden du dropper det i generatoren, eller angive et andet kildebillede, der er specifikt forberedt til faviconet.

Værktøjer i denne artikel

Ofte stillede spørgsmål

Har jeg stadig brug for et favicon.ico, hvis jeg deklarerer PNG-link-tags?

Ja, af to grunde. For det første leder browsere, der ikke læser din HTML (webcrawlere, RSS-læsere, nogle gamle mobilbrowsere), efter /favicon.ico direkte i domænets rod. Hvis den fil er fraværende, genererer de en 404-anmodning ved hvert sideindlæsning, hvilket tilføjer støj til dine serverlogger og en lille unødvendig rundtur. For det andet genkender ældre versioner af Internet Explorer kun .ico-formatet og ignorerer PNG-link-tags. At angive begge dækker alle tilfælde.

Kan jeg bruge en SVG som favicon?

Chrome og Firefox understøtter SVG-favicons via `<link rel="icon" type="image/svg+xml" href="/favicon.svg">`. Safari understøtter ikke SVG-favicons. Fordi SVG-favicons er opløsningsuafhængige, ser de skarpe ud på enhver skærmtæthed, herunder retina-skærme, uden at kræve flere størrelsesvarianter. Den praktiske anbefaling er at deklarere SVG-link-tagget til browsere, der understøtter det, og stadig inkludere .ico-reserven for komplet dækning. SVG-favicons kan også inkludere en `prefers-color-scheme`-medieforespørgsel til automatisk at skifte mellem en lys og mørk version.

Hvilket billede skal jeg starte fra for at få det bedste resultat?

En kvadratisk PNG ved 512x512 eller større med en gennemsigtig baggrund giver den mest fleksibilitet. At starte stort og nedskalere bevarer mere detalje end at starte fra et lille billede. Hvis dit hovedlogo inkluderer et ordmærke, overvej at forberede en separat forenklet version, der kun viser ikonet eller mærket, fordi teksten ikke vil være læsbar ved 16x16 uanset kilderasterns opløsning. Høj kontrast mellem mærket og dets baggrund er den mest pålidelige forudsigelse for, om de små størrelser vil læse klart.