Faviconvejledninger
Klare svar på spørgsmålene, der opstår, når du laver et favicon: hvilke størrelser, hvilke formater og hvilken kode du skal indsætte.
Faviconstørrelser: formater og anvendelse
En søgning på “faviconstørrelse” giver stadig tjeklister med femten filer fra 2014. I praksis dækker seks størrelser nu browserfaner, søgeresultater, iOS, Android og PWA'er. Her får du dem og forklaringen på hvorfor.
Læs vejledningenKonvertér en PNG til ICO gratis
.ico er stadig det forventede format i et websites rod, og de fleste onlinekonvertere beder dig uploade billedet til deres server. Her viser vi, hvordan du laver en korrekt favicon.ico med flere størrelser ud fra en PNG uden at uploade noget.
Læs vejledningenapple-touch-icon: størrelse, format og kode
Apple Touch-ikonet angiver udtrykkeligt det billede, der bruges, når en besøgende føjer dit website til hjemmeskærmen på en iPhone. Det er fortsat adskilt fra browserfanens favicon og ikonerne i webappmanifestet.
Læs vejledningenFavicon til mørk tilstand med SVG
Et sort logo på gennemsigtig baggrund ser perfekt ud i en lys fane og forsvinder i en mørk. ICO-formatet kan ikke tilpasse sig, men det kan et SVG-favicon: det indeholder en CSS-regel, som skifter farver efter browserens tema.
Læs vejledningenTilføj et favicon i HTML
Et pålideligt favicon i HTML afhænger ikke af ét magisk tag. Det bruger et lille sæt tilgængelige filer og links placeret i head. Denne fremgangsmåde dækker moderne faner, ældre klienter og mobilgenveje uden et væld af historiske varianter.
Læs vejledningenFavicon vises eller opdateres ikke
Når et favicon mangler, er filen ikke altid problemet. Browseren, en CDN, en service worker og en søgemaskine kan hver gemme forskellige versioner. En systematisk diagnose forhindrer, at du ændrer flere ting på én gang.
Læs vejledningenFavicons i Next.js App Router
App Router kan generere ikonelementer fra filer med bestemte navne eller fra metadata-objektet. Begge metoder er gyldige, men blander du dem uden en klar regel, kan det nemt skabe konkurrerende angivelser.
Læs vejledningenVejledning til SVG-favicons
SVG holder kanterne skarpe ved enhver pixeltæthed og kan tilpasse farverne til temaet. Fleksibiliteten har ét krav: filen skal være selvstændig, enkel og læsbar på meget lidt plads.
Læs vejledningen