# Favicon-design: små ikoner, der stadig ligner dig
[Canonical HTML page](https://gradiently.design/da/guide/favicon-design)
Dit favicon er den mest gentagne og den mindste del af dit brand. Det skal klare sig i 16 pixels, på lyse og mørke faner, ved siden af halvtreds andre sites. Sådan får du det til at holde.
## The short version
- Et favicon er det lille ikon, der repræsenterer et website i browserfaner, bogmærker, historik, hjemmeskærme og søgeresultater.
- Et moderne minimumssæt er en favicon.ico i 32×32, et SVG-ikon, et Apple touch icon i 180×180 og PNG-filer i 192×192 og 512×512 i et web app manifest.
- Google Søgning viser et sites favicon ved siden af resultaterne og beder om et kvadratisk ikon, helst større end 48×48 pixels.
- Favicons fungerer bedst som én kraftig form eller ét bogstav med stærk kontrast, fordi detaljer forsvinder i 16 pixels.
- Et SVG-favicon kan skifte farver i mørk tilstand med en media query inde i filen.
Et **favicon** er det lille kvadratiske ikon, der står for dit website i browserfaner, bogmærker, historik, telefonens hjemmeskærm og Googles resultater. Det vises ofte i kun 16 eller 32 pixels, så godt favicon-design er hårdhændet: én kraftig form eller ét bogstav, høj kontrast, ingen fine detaljer. Teknisk set skal du kun bruge en håndfuld filer, en ICO i 32×32, en SVG, et Apple touch icon i 180×180 og to PNG-filer til manifestet, plus nogle få linjer HTML.
## De favicon-størrelser og filer, du faktisk har brug for
Gamle guides nævner tyve størrelser. Moderne browsere skalerer fint, så et kort sæt dækker alle de steder, et favicon vises. Det følger den tilgang, der anbefales på [web.dev](https://web.dev/articles/add-manifest) for manifester, og browsernes nuværende adfærd for resten.
| Fil | Størrelse | Bruges af |
| --- | --- | --- |
| `favicon.ico` | 32×32 | Ældre browsere og alt, der beder direkte om `/favicon.ico` |
| `icon.svg` | Skalerbar | Nuværende browsere, der understøtter SVG-favicons; kan tilpasse sig mørk tilstand |
| `apple-touch-icon.png` | 180×180 | Hjemmeskærme på iPhone og iPad samt bogmærker i Safari |
| `icon-192.png` | 192×192 | Androids hjemmeskærm via web app manifestet |
| `icon-512.png` | 512×512 | Androids startskærme og appinstallationer via manifestet |
Fem filer. Læg dem i roden af dit site eller hvor som helst, så længe HTML-koden peger på dem.
Google Søgning viser også favicons ved siden af resultaterne. Googles [retningslinjer for favicons](https://support.google.com/webmasters/answer/9290858) beder om et kvadratisk ikon, anbefaler et større end 48×48 pixels og siger, at det skal repræsentere dit brand. PNG-filerne i 192 og 512 opfylder begge kravene; tjek siden før lancering, for Google reviderer den.
## Sådan tilføjer du et favicon til dit site
```html
```
Skal stå i `head` på hver side. Browsere, der forstår SVG, foretrækker den; andre falder tilbage til 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" }
]
}
```
En minimal `manifest.webmanifest`. Det maskerbare ikon er valgfrit og lader Android beskære det til sine egne former.
> **Maskerbare ikoner kræver luft** Android kan beskære et maskerbart ikon til en cirkel, en squircle eller et afrundet kvadrat. Hold den vigtige del inden for den midterste cirkel, cirka 80 % af bredden, og fyld resten med baggrundsfarve.
## Design et favicon, der kan læses i 16 pixels
I 16 pixels har du 256 prikker. Et helt ordmærke bliver til en grå plet, tynde streger forsvinder, og to ens farver smelter sammen. De favicons, folk genkender med det samme, er næsten altid én af tre ting: et enkelt bogstav, et simpelt symbol eller en massiv form i en karakteristisk farve.
Et kvadratisk appikon med ét fedt bogstav N på en gradientbaggrund
Ét tungt bogstav på en kraftig baggrund. Det kan stadig læses, når browseren skrumper det til 16 pixels.
Et kvadratisk ikon med et studienavn på tre ord, for detaljeret til at fungere som favicon
Hele navnet ser fint ud i 512 pixels og bliver til ulæselig tekstur i 16. Gem det til selve siden.
### Undgå
- Hele logoet med ordmærket
- Hårfine streger og små punktsrum
- To nære farver, der flyder sammen
- Detaljer, der går helt ud til kanten
- Et gennemsigtigt ikon, der forsvinder på mørke faner
### Gør
- Ét bogstav, monogram eller symbol
- Streger på mindst 2 pixels i 32×32
- Stærk kontrast mellem form og baggrund
- Fyld det meste af kvadratet, med lidt luft
- Test på lyse og mørke browsertemaer
## Farve og gradienter i et lille ikon
I den størrelse gør farven mere arbejde end formen, for det er den, folk leder efter i en række faner. En genkendelig brandfarve slår et smart symbol. Gradienter kan fungere, hvis de er kraftige og korte: to farvestop med en tydelig forskel i lyshed læses som en belyst overflade, mens en diskret blanding med mange stop bare ser mudret ud i 16 pixels.
- Indigo til pink: kan læses: `linear-gradient(135deg, #4338ca 0%, #db2777 100%)`
- Petrol til lime: kan læses: `linear-gradient(135deg, #0f766e 0%, #a3e635 100%)`
- Blege gråtoner: forsvinder: `linear-gradient(135deg, #e5e7eb 0%, #d1d5db 50%, #e5e7eb 100%)`
Favicon-baggrunde kræver en tydelig ændring i lyshed og en selvsikker kulør. Den sidste forsvinder mod en lys fanelinje.
Hvis dit brand allerede har en karakteristisk baggrund, kan et udsnit af den blive en markant favicon-flise. Gradiently Marks er nyttige her: det samme udtryk, der ligger bag dine opslag, kan ligge bag et enkelt bogstav i 512×512, så fanen og feedet føles som ét brand. Sørg for, at bogstavet bevarer stærk kontrast mod flisen, som beskrevet i [logo på gradientbaggrund](https://gradiently.design/da/guide/logo-on-gradient-background).
## Favicons til mørk tilstand med SVG
Et sort ikon forsvinder på en mørk fanelinje og et hvidt på en lys. Fordi et SVG-favicon er et lille dokument, kan det have sin egen media query og skifte farver med browserens tema.
```html
```
Gem som `icon.svg`. En afrundet flise med bogstavet N, der bytter om på farverne i mørk tilstand.
En massiv flise bag symbolet er den enkleste forsikring: den kan læses på enhver baggrund, lys eller mørk, uden at være afhængig af media queryen. [SVG vs PNG](https://gradiently.design/da/guide/svg-vs-png) forklarer, hvorfor det er vektorfilen, du skal gemme.
## En hurtig tjekliste til dit favicon
1. **Start med den enkleste del af dit logo** Et monogram, forbogstavet eller symbolet alene. [Logovarianter](https://gradiently.design/da/guide/logo-variations) handler om bevidst at bygge en lille version.
2. **Tegn det i 32×32 først** Design på det lille gitter, og skalér op, ikke omvendt. Tykke streger, generøse mellemrum.
3. **Eksportér de fem filer** ICO i 32×32, SVG, Apple touch icon i 180×180 og PNG-filer i 192 og 512 til manifestet.
4. **Test i rigtige faner** Åbn dit site ved siden af ti andre, i lyst og mørkt tema. Kan du ikke finde din fane på et sekund, så forenkl.
Faviconet står sammen med dit [Open Graph-billede](https://gradiently.design/da/guide/open-graph-image-size) og dine profilbilleder på sociale medier som de små, konstante signaler fra et brand. Hold dem ensartede, og se [logostørrelser](https://gradiently.design/da/guide/logo-sizes) for hele sættet.
## FAQ
### Hvilken størrelse skal et favicon have?
Lav en favicon.ico i 32×32, en SVG, et Apple touch icon i 180×180 og PNG-filer i 192×192 og 512×512 i et manifest. Browserne vælger og skalerer ud fra dem.
### Hvordan tilføjer jeg et favicon til mit website?
Upload ikonfilerne, og tilføj tags med `link rel="icon"` og `link rel="apple-touch-icon"` i `head` på hver side, plus et manifest-link til Android.
### Hvorfor vises mit favicon ikke i Google?
Google kræver et kvadratisk favicon, helst større end 48×48 pixels, som er linket fra din forside og kan crawles. Det kan tage noget tid, før det opdateres, når du har ændret det.
### Kan et favicon være en SVG?
Ja, nuværende browsere, der understøtter SVG-favicons, bruger den, og den forbliver skarp i alle størrelser. Behold en favicon.ico som reserve.
### Skal mit favicon være hele mit logo?
Som regel ikke. Brug ét bogstav, et monogram eller logoets symbol, for et helt ordmærke er ulæseligt i 16 pixels.