E-handelsekspert - Hvad er et favicon? Praktisk guide til website-ikoner

Når du åbner en browser-tab ser du et lille ikon ved siden af sidetitlen. Det er dit favicon, en lille detalje som de fleste brugere ikke tænker over men som gør en reel forskel for genkendelse og troværdighed. Med Progressive Web Apps og mobile bogmærker er favicons blevet mere nuancerede at implementere korrekt.

Hvad er et favicon?

Favicon er en forkortelse af “favorite icon” og er et lille ikon der repræsenterer dit website. Det vises i browser tabs som det lille ikon til venstre for sidetitlen, i bogmærker og favorites når brugere gemmer dit site, i browser historik i listen over besøgte sider, på mobile home screens når brugere tilføjer dit site som app via PWA, i søgeresultater hvor Google i nogle tilfælde viser favicons, og på social bookmarks platforme som Pinterest og Pocket.

Oprindeligt var favicons simple 16x16 pixel .ico filer. I dag findes de i størrelser fra 16x16 til 512x512 pixels og formater som PNG, SVG og ICO designet til at fungere på alt fra gamle Windows-browsere til moderne iPhones og Android-enheder.

Hvorfor er favicon vigtigt for e-handel?

Når en bruger har 20+ tabs åbne er dit favicon ofte den eneste måde de kan identificere din webshop. Et distinkt og genkendeligt favicon gør det nemt for kunder at finde tilbage til din shop mellem alle de andre tabs. Brugere genkender favicons hurtigere end sidetitler da vores hjerner processerer visuelle symboler hurtigt, og et tydeligt favicon gør det lettere at huske dit brand.

Sites uden favicons eller med det generiske globe eller page ikon fremstår uprofessionelle og mindre troværdige. Dette er særligt kritisk for e-handelswebshops hvor tillid er afgørende for at kunder gennemfører køb. Et gennemtænkt favicon signalerer at du tager detaljer seriøst og er en reel forretning. Favicons forbedrer navigation og gør det lettere for brugere at skifte mellem tabs hurtigt, finde dit site i historik eller bogmærker og genkende dit brand med det samme.

Google viser favicons i mobile søgeresultater og har eksperimenteret med det på desktop også. Et tiltalende og genkendeligt favicon kan øge klikraten fra søgeresultater da dit resultat skiller sig ud visuelt. Hvis du bygger en Progressive Web App eller vil have brugere til at kunne tilføje din webshop til deres mobile startskærm kræver det korrekte favicon og app-ikoner i forskellige størrelser.

Sådan laver du et godt favicon

Ved 16x16 pixels er der ikke plads til komplekse designs, så brug et simpelt symbol eller monogram, din brands initialer, en ikonisk del af dit logo eller en abstrakt form der repræsenterer dit brand. Undgå detaljerede illustrationer eller lange ord da de bliver uigenkendelelige ved små størrelser.

Brug stærke og kontrastfulde farver der skiller sig ud. Hvis dit favicon primært er hvidt eller lyst kan det forsvinde på lyse browser-temaer, og hvis det er mørkt kan det forsvinde på mørke temaer. Overvej at lave både light og dark mode versioner da moderne browsere understøtter dette med SVG favicons. Dit favicon skal visuelt relatere til dit hovedlogo og brandidentitet selvom det er simplificeret, og test at det samme design fungerer ved 16x16, 32x32 og 180x180.

Essentielle favicon-størrelser

Moderne websites kræver faktisk ikke et hav af forskellige størrelser som tidligere antaget. Du skal bruge favicon.ico med 16x16 og 32x32 til legacy browser-support da ICO-formatet understøttes af alle browsere og nogle ældre browsere kræver det. Du skal bruge favicon.png med 32x32 eller 48x48 til moderne browsere der foretrækker PNG. Du skal bruge Apple Touch Icon på 180x180 til iOS home screens. Du skal bruge PWA icons på 192x192 og 512x512 defineret i din manifest.json for Progressive Web Apps. SVG favicon er optional men fremtidsrettet da det kan skalere perfekt til enhver størrelse og kan understøtte dark mode automatisk via CSS embedded i SVG’en.

Den minimale implementering kræver fire linjer HTML i head sektionen med link til favicon.ico, favicon.svg, apple-touch-icon.png og manifest.json. Det er fem filer og fire linjer HTML, og resten er legacy overhead som du ikke behøver.

Sådan implementerer du favicons

Den nemmeste måde er at bruge favicon generators som RealFaviconGenerator.net der uploader dit logo og genererer alle nødvendige størrelser og kode automatisk, Favicon.io som er en simpel generator der laver favicons fra tekst, billede eller emoji, og Favicon.im der er en moderne generator fokuseret på minimalistisk tilgang. Disse værktøjer giver dig typisk en ZIP-fil med alle favicons og HTML-kode til at indsætte i din head.

Hvis du vil have fuld kontrol kan du designe dit favicon ved høj opløsning på 512x512 i Figma, Sketch eller Adobe XD og eksportere i de nødvendige størrelser. Konverter til ICO med et værktøj som ConvertICO.com eller ImageMagick, og hvis du bruger SVG sørg for at inline CSS og hold filen så minimal som muligt under 10KB.

WordPress har mange temaer med indbygget favicon-support hvor du går til Customizer, Site Identity og Site Icon og uploader. Shopify håndterer det under Online Store, Themes, Customize, Theme Settings og Favicon. For at dit favicon vises i Google søgeresultater skal det være mindst 48x48 pixels, tilgængeligt via HTTPS, i .ico, .png, .jpg eller .svg format, og ikke ændres for ofte da Google ikke crawler dagligt.

Gode råd til favicons

SVG er fremtiden for favicons da det skalerer perfekt til enhver størrelse, har meget mindre filstørrelse end PNG og ICO, og kan inkludere mørkt tema-varianter via indlejret CSS med prefers-color-scheme media query.

Sørg for at dit favicon ser godt ud på lyse browser-temaer, mørke browser-temaer, iOS home screen med ofte lys baggrund, og Android home screen der varierer. Standardiserede filnavne på root niveau som /favicon.ico, /favicon.svg, /apple-touch-icon.png og /manifest.json hjælper med SEO og kompatibilitet da mange crawlers og browsere leder automatisk efter disse.

Hold dine favicon-filer så små som muligt med ICO under 15KB, PNG under 10KB per fil og SVG under 5KB. Brug værktøjer som TinyPNG eller ImageOptim til at komprimere uden kvalitetstab. Sæt lange cache-headers for favicons da de ændres sjældent, men vær opmærksom på at du skal ændre filnavnet for at bust cachen ved ændringer. Test dit favicon i Chrome, Safari, Firefox, Edge og Opera på både desktop og mobile da hvert browser har subtile forskelle. Til Android PWA brug maskable icons med ekstra padding så de kan beskæres til forskellige former hvor safe zone er en central cirkel på 80% af billedets dimensioner.

Opsummering

For e-handelswebshops gælder det at et veldesignet favicon styrker dit brand, forbedrer brugeroplevelsen og signalerer professionalisme. Det er en lille detalje der kan gøre en forskel for om besøgende husker dig.