Guider om favicon
Tydelige svar på spørsmålene som dukker opp når du lager et favicon: hvilke størrelser, hvilke formater og hvilken kode du skal lime inn.
Favicon-størrelser: formater og bruksområder
Søk etter «favicon-størrelse» gir fortsatt sjekklister med femten filer fra 2014. I praksis dekker seks størrelser nå nettleserfaner, søkeresultater, iOS, Android og PWA-er. Her ser du hvilke, og hvorfor.
Les guidenKonverter PNG til ICO, gratis
.ico er fortsatt det forventede formatet i rotmappen til et nettsted, og de fleste nettbaserte konverteringsverktøy ber deg laste opp bildet til serveren deres. Slik lager du en riktig favicon.ico med flere størrelser fra en PNG, uten å laste opp noe.
Les guidenapple-touch-icon: størrelse, format og kode
Apple Touch-ikonet angir bildet som brukes når en besøkende legger nettstedet til på startskjermen på en iPhone. Det er atskilt fra faviconet i nettleserfanen og ikonene som er angitt i webappmanifestet.
Les guidenFavicon for mørk modus med SVG
En svart logo på gjennomsiktig bakgrunn ser perfekt ut i en lys fane og forsvinner i en mørk. ICO-formatet kan ikke tilpasse seg, men et SVG-favicon kan: det inneholder en CSS-regel som bytter farger etter nettleserens tema.
Les guidenLegg til et favicon i HTML
Et pålitelig favicon i HTML bygger på et lite sett med tilgjengelige filer og lenker i head. Fremgangsmåten dekker moderne faner, eldre klienter og snarveier på mobil uten en mengde historiske varianter.
Les guidenFavicon vises ikke eller oppdateres ikke
Når et favicon mangler, er ikke alltid filen problemet. Nettleseren, et CDN, en service worker og en søkemotor kan ha lagret hver sin versjon. Systematisk feilsøking gjør at du slipper å endre flere ting samtidig.
Les guidenFavicon i Next.js App Router
App Router kan lage ikonelementer fra filer med standardnavn eller fra metadata-objektet. Begge fremgangsmåtene fungerer, men en blanding uten tydelige regler kan lett gi konkurrerende deklarasjoner.
Les guidenGuide til SVG-favicon
SVG holder kantene skarpe ved alle pikseltettheter og kan tilpasse fargene til temaet. Denne fleksibiliteten har ett krav: filen må være selvstendig, enkel og lesbar på svært liten plass.
Les guiden