# Favicon-design: små ikoner med ditt eget uttrykk
[Canonical HTML page](https://gradiently.design/nb/guide/favicon-design)
Faviconet er merkevarens mest gjentatte element og det minste. Det må fungere ved 16 piksler, på lyse og mørke faner, ved siden av femti andre nettsteder. Slik får du det til å holde.
## The short version
- Et favicon er det lille ikonet som representerer et nettsted i faner, bokmerker, historikk, hjemmeskjermer og søkeresultater.
- Et moderne minimum er en favicon.ico på 32×32, et SVG-ikon, et Apple touch-ikon på 180×180 og PNG-er på 192×192 og 512×512 i et nettappmanifest.
- Google Søk viser faviconet ved siden av resultatene og ber om et kvadratisk ikon, helst større enn 48×48 piksler.
- Faviconer fungerer best som én tydelig form eller bokstav med sterk kontrast, fordi detaljer forsvinner ved 16 piksler.
- Et SVG-favicon kan bytte farger i mørk modus med en mediespørring inne i filen.
Et **favicon** er det lille kvadratiske ikonet som står for nettstedet ditt i faner, bokmerker, historikk, telefonens hjemmeskjerm og Google-resultater. Det vises ofte bare i 16 eller 32 piksler, så godt favicon-design må være kompromissløst: én kraftig form eller bokstav, høy kontrast og ingen fine detaljer. Teknisk trenger du bare noen få filer, en ICO på 32×32, en SVG, et Apple touch-ikon på 180×180 og to PNG-er til manifestet, samt noen linjer HTML.
## Favicon-størrelser og filer du faktisk trenger
Eldre guider lister tjue størrelser. Moderne nettlesere skalerer godt, så et kort sett dekker alle steder faviconet vises. Dette følger tilnærmingen [web.dev](https://web.dev/articles/add-manifest) anbefaler for manifester, og dagens nettleseratferd for resten.
| Fil | Størrelse | Brukes av |
| --- | --- | --- |
| `favicon.ico` | 32×32 | Eldre nettlesere og alt som ber om `/favicon.ico` direkte |
| `icon.svg` | Skalerbar | Moderne nettlesere som støtter SVG-faviconer. Kan tilpasses mørk modus |
| `apple-touch-icon.png` | 180×180 | Hjemmeskjermer på iPhone og iPad, og Safari-bokmerker |
| `icon-192.png` | 192×192 | Android-hjemmeskjerm via nettappmanifestet |
| `icon-512.png` | 512×512 | Oppstartsskjermer og appinstallasjoner på Android via manifestet |
Fem filer. Legg dem i roten av nettstedet eller et annet sted, så lenge HTML-en peker til dem.
Google Søk viser også faviconer ved resultatene. Deres [favicon-retningslinjer](https://support.google.com/webmasters/answer/9290858) ber om et kvadratisk ikon, anbefaler større enn 48×48 piksler og sier at det skal representere merkevaren. PNG-ene på 192 og 512 oppfyller dette. Sjekk siden før lansering, siden Google oppdaterer den.
## Slik legger du til favicon på nettstedet
```html
```
Legges i `head` på hver side. Nettlesere som forstår SVG foretrekker det, mens andre bruker ICO-filen.
```json
{
"name": "Studio Nine",
"icons": [
{ "src": "/icon-192.png", "type": "image/png", "sizes": "192x192" },
{ "src": "/icon-512.png", "type": "image/png", "sizes": "512x512" },
{ "src": "/icon-mask.png", "type": "image/png", "sizes": "512x512", "purpose": "maskable" }
]
}
```
Et enkelt `manifest.webmanifest`. Det maskérbare ikonet er valgfritt og lar Android beskjære det til egne former.
> **Maskérbare ikoner trenger luft** Android kan beskjære et maskérbart ikon til en sirkel, avrundet kvadrat eller en form mellom dem. Hold det viktige innenfor den midtre sirkelen, omtrent 80 % av bredden, og fyll resten med bakgrunnsfarge.
## Design et favicon som er tydelig ved 16 piksler
Ved 16 piksler har du 256 punkter. En full navnelogo blir en grå flekk, tynne streker forsvinner og to like farger flyter sammen. Faviconer folk kjenner igjen straks er nesten alltid én av tre ting: én bokstav, et enkelt symbol eller en heldekkende form i en særegen farge.
Et kvadratisk appikon med én fet bokstav N på en gradientbakgrunn
Én kraftig bokstav på en tydelig bakgrunn. Den kan fortsatt leses når nettleseren krymper den til 16 piksler.
Et kvadratisk ikon med et studionavn på tre ord, for detaljert til å fungere som favicon
Det fulle navnet ser fint ut ved 512 piksler, men blir uleselig tekstur ved 16. Spar det til selve siden.
### Unngå
- Hele logoen med navnet
- Hårfine streker og små indre åpninger
- To nærstående farger som glir sammen
- Detaljer helt ut til kantene
- Et gjennomsiktig ikon som forsvinner på mørke faner
### Gjør dette
- Én bokstav, ett monogram eller symbol
- Streker på minst 2 piksler ved 32×32
- Sterk kontrast mellom form og bakgrunn
- Fyll mesteparten av kvadratet med litt luft rundt
- Test med lyst og mørkt nettlesertema
## Farge og gradienter i et lite ikon
Fargen gjør mer av jobben enn formen i denne størrelsen, fordi det er den folk ser etter i en rad med faner. En gjenkjennelig merkevarefarge slår et smart symbol. Gradienter kan fungere hvis de er tydelige og korte: to fargestopp med klar forskjell i lyshet leses som en belyst flate, mens en subtil blanding med mange stopp bare ser grumsete ut ved 16 piksler.
- Indigo til rosa: tydelig: `linear-gradient(135deg, #4338ca 0%, #db2777 100%)`
- Blågrønn til lime: tydelig: `linear-gradient(135deg, #0f766e 0%, #a3e635 100%)`
- Lyse gråtoner: forsvinner: `linear-gradient(135deg, #e5e7eb 0%, #d1d5db 50%, #e5e7eb 100%)`
Favicon-bakgrunner trenger en tydelig endring i lyshet og en klar fargetone. Den siste forsvinner mot en lys fanelinje.
Har merkevaren allerede en særegen bakgrunn, kan et utsnitt av den gi et gjenkjennelig favicon. Marks fra Gradiently er nyttige her: samme uttrykk som ligger bak innleggene kan stå bak én bokstav på 512×512, så fanen og feeden føles som én merkevare. Sørg for sterk kontrast mellom bokstaven og bakgrunnen, som dekket i [logo på gradientbakgrunn](https://gradiently.design/nb/guide/logo-on-gradient-background).
## Faviconer for mørk modus med SVG
Et svart ikon forsvinner på en mørk fanelinje, og et hvitt på en lys. Fordi et SVG-favicon er et lite dokument, kan det ha sin egen mediespørring og bytte farger med nettlesertemaet.
```html
```
Lagre som `icon.svg`. Et avrundet felt med bokstaven N som bytter om fargene i mørk modus.
Et heldekkende felt bak symbolet er den enkleste forsikringen: det er tydelig på alle bakgrunner, lyse og mørke, uten å avhenge av mediespørringen. [SVG eller PNG](https://gradiently.design/nb/guide/svg-vs-png) forklarer hvorfor du bør beholde vektorfilen.
## En rask favicon-sjekkliste
1. **Begynn med logoens enkleste del** Et monogram, den første bokstaven eller symbolet alene. [Logovarianter](https://gradiently.design/nb/guide/logo-variations) dekker det å lage en egen liten variant.
2. **Tegn først på 32×32** Design på det lille rutenettet og skaler opp, ikke motsatt. Tykke streker og romslige åpninger.
3. **Eksporter de fem filene** ICO på 32×32, SVG, Apple touch-ikon på 180×180 og manifest-PNG-er på 192 og 512.
4. **Test i ekte faner** Åpne nettstedet ved siden av ti andre, med lyst og mørkt tema. Finner du ikke fanen på ett sekund, forenkle.
Faviconet står sammen med [Open Graph-bildet](https://gradiently.design/nb/guide/open-graph-image-size) og profilbildene i sosiale medier som små, faste merkevaresignaler. Hold dem enhetlige, og se [logostørrelser](https://gradiently.design/nb/guide/logo-sizes) for hele settet.
## FAQ
### Hvor stort bør et favicon være?
Lag en favicon.ico på 32×32, en SVG, et Apple touch-ikon på 180×180 og PNG-er på 192×192 og 512×512 i et manifest. Nettleserne velger og skalerer fra disse.
### Hvordan legger jeg favicon til nettstedet mitt?
Last opp ikonfilene og legg taggene `link rel="icon"` og `link rel="apple-touch-icon"` i `head` på hver side, samt en manifestlenke til Android.
### Hvorfor vises ikke faviconet mitt i Google?
Google trenger et kvadratisk favicon, helst større enn 48×48 piksler, lenket fra forsiden og tilgjengelig for gjennomsøking. Oppdateringen kan ta litt tid etter endringer.
### Kan et favicon være SVG?
Ja. Moderne nettlesere med SVG-støtte bruker det, og det er skarpt i alle størrelser. Behold favicon.ico som reserve.
### Bør faviconet være hele logoen?
Vanligvis ikke. Bruk én bokstav, et monogram eller logosymbolet, fordi en hel navnelogo er uleselig ved 16 piksler.