De små detaljer kan gøre en stor forskel, og det gælder også det beskedne favicon. De små brandmarkører har været en del af webbrowsere siden Internet Explorers storhedstid i 1990’erne, hvor de begyndte at dukke op i faner og bogmærker. Et favicon fungerer som en visuel genvej, der hjælper kunder med at forbinde et website med virksomhedens brandidentitet. For danske webshops er den slags små genkendelsespunkter særligt værdifulde, fordi nethandel fylder meget i danskernes hverdag.
Det generiske browserikon må gerne få fri. Et godt favicon tager ikke lang tid at lave, men kan gøre dit website nemmere at genkende og hjælpe brugerne med at finde den rigtige fane i et browservindue fyldt med åbne sider.
Hvad er et favicon?
Et favicon er en lille grafik, der vises ved siden af sidetitler i browserfaner, bogmærkelinjer, favoritlinjer, browserhistorik og på søgemaskinernes resultatsider (SERP’er).
Ordet er en sammentrækning af “favorite icon”, på dansk også kaldet et favoritikon. Et favicon fungerer som et visuelt bogmærke for dit website og gør det lettere at genkende siden, når der er mange faner åbne. Favicons kan også vises som genvejsikoner på proceslinjen, når et website fastgøres eller gemmes som genvej. Når brugere gemmer dit website som bogmærke, fungerer faviconet samtidig som bogmærkeikon, så siden er nemmere at finde blandt andre gemte websider.
I nogle operativsystemer kan man oprette skrivebordsgenveje ved at trække en webadresse fra browservinduet til skrivebordet. Her bliver faviconet ofte også brugt som genvejsikon.
Fordele ved at bruge favicons
Et favicon løfter ikke automatisk dit websites placering i søgemaskineoptimering (SEO), men sammen med andre forbedringer af brugeroplevelsen kan det bidrage til et mere brugervenligt website. Her er nogle af de måder, et favicon kan påvirke sitets performance på:
Øg CTR
Google og andre søgemaskiner viser favicons i søgeresultaterne. Et iøjnefaldende eller let genkendeligt favicon kan styrke brandgenkendelsen og gøre det mere sandsynligt, at folk klikker sig ind på dit website. Det kan øge din klikrate, også kaldet (CTR), som er en vigtig metric i e-handel, når det kommer til SEO-sammenhæng.
Styrk brandkendskabet
Når et favicon tager udgangspunkt i logoet eller andre visuelle elementer fra brandet, fungerer det som en lille, men effektiv brandmarkør i brugerens bogmærkelinje, browserfaner og SERP’er. Det kan være med til at øge kendskabet til brandet. Et favicon er dog ikke et tryghedsmærke i sig selv. For danske webshops bør det spille sammen med tydelige kontaktoplysninger, en gennemarbejdet dansk tekst og andre tegn på en seriøs webshop.
Forbedr brugeroplevelsen og tiden på siden
Et favicon, der er let at genkende, kan gøre det mere oplagt for brugeren at gemme siden som bogmærke. Den type adfærd kan søgemaskiner som Google opfatte som et positivt signal. Samtidig kan den lille forbedring af brugeroplevelsen føre til flere tilbagevendende besøg, mere trafik og længere tid på siden, altså den tid en bruger bliver på en webside, før vedkommende vender tilbage til søgeresultaterne.
Retningslinjer for at lave et favicon til dit website
Et godt favicon skal være enkelt, tydeligt og tilpasset de små formater, hvor det bliver vist. Derfor er især størrelse og filformat vigtige:
Vælg den rigtige størrelse
Den mest almindelige størrelse til et favicon er 16 x 16 pixels, selv om nogle favicons også laves i 32 x 32 pixels eller 48 x 48 pixels. Formatet 16 x 16 understøttes bredt i browsere, blandt andet i adresselinjen, faner og bogmærker. Derfor er det et sikkert valg. Test også faviconet på mobil, hvor mange danske kunderejser i dag både begynder og slutter.
Vælg et kompatibelt filformat
Filformatet har stor betydning for, hvor godt et billede fungerer som favicon. De mest almindelige formater er PNG og ICO. PNG-filer bruger tabsfri komprimering og understøtter gennemsigtighed, så billedkvaliteten bevares, når ikonet skaleres. ICO-filer, som blandt andet bruges i Windows, kan indeholde flere billedstørrelser og farvedybder i samme fil. Det gør formatet velegnet til små ikoner. SVG har ikke helt samme understøttelse i alle browsere, men formatet indlæses hurtigt og kan skaleres uden kvalitetstab. Undgå formater som JPEG, hvor billeddata går tabt, når ikonet skaleres ned.
Overvej et animeret favicon
Animerede GIF-filer eller JavaScript-filer kan give faviconet lidt ekstra liv, men de har også begrænsninger, især når det gælder understøttelse i forskellige browsere. Test derfor et animeret favicon i flere browsere. Det, der ser godt ud i Google Chrome, fungerer ikke nødvendigvis lige så godt andre steder.
Populære favicon-generatorer
Du kan bruge en online favicon-generator til at lave et tilpasset favicon, der passer til brandets visuelle identitet. Her er nogle populære muligheder:
- Favicon.io giver dig mulighed for at lave et favicon ud fra en billedfil, et link eller tekst og konvertere det til forskellige formater. Download de konverterede filer, læg dem i websitets rodmappe, kopiér link-tagsene, og indsæt dem i head-tagget på HTML-siden.
- RealFaviconGenerator er et interaktivt API, hvor du kan angive, hvordan masterbilledet skal behandles, før faviconet genereres.
- Favicon Generator kan lave favicons til forskellige platforme, så du kan se, hvordan designet tager sig ud på tværs af platforme og browsere.
- Favicon.ico & App Icon Generator fra Dan’s Tools lader dig uploade et eksisterende billede og konvertere det til ICO-format. Du kan også gå på opdagelse i ikonbiblioteket.
Sådan tilføjer du et favicon i HTML
Når faviconet til sitet er klar, skal du uploade det til websitet og tilføje kode, så browsere og webapps kan vise det.
Henvisningen til faviconet står som en kodelinje i sektionen i websitets HTML-fil. Browseren læser instruktionerne i head-tagget for at finde og vise faviconet. Lad os sige, at faviconfilen er en PNG-fil med navnet “brandXicon.png”. Så skal du blot tilføje denne linje inde i tagget <head></head>:
<link rel="icon" type="image/png" rel="noopener" target="_blank" href="/brandXicon.png">
Faviconet kan ligge i en hvilken som helst mappe på sitet. I eksemplet ligger det i sitets rodmappe, som er en almindelig placering. Kontrollér, at filstien er korrekt.
Det er også muligt at bruge flere favicon-størrelser og indlæse dem alle. Du skal bruge én kodelinje for hver størrelse, og de skal alle stå inde i -tagget. Giv hver størrelse et unikt filnavn, og tilføj attributten “sizes” til koden, sådan her:
<link rel="icon" type="image/png" sizes=”16x16” rel="noopener" target="_blank" href="/brandXicon16x16.png">
<link rel="icon" type="image/png" sizes=”32x32” rel="noopener" target="_blank" href="/brandXicon32x32.png">
Sådan tilføjer du et favicon til et Shopify-website
Har du et Shopify-website, kan du nemt tilføje et favicon uden at skrive kode:
1. Åbn administrationspanelet for webshoppen i en browser på computer.
2. Find det tema, du vil redigere, og klik på Tilpas for at åbne temaeditoren.
3. Klik på tandhjulsikonet for at åbne Temaindstillinger.
4. Vælg Logo eller Favoritikon, afhængigt af hvilken temaversion du bruger.
5. Klik på Vælg billede under Billede til favoritikon, og vælg et billede fra biblioteket, eller upload et nyt.
6. Hvis muligheden findes, kan du redigere Alternativ tekst for faviconet af hensyn til tilgængelighed. Teksten hjælper med at beskrive billedet.
7. Gem ændringerne, og test faviconet i forskellige browsere.
Du kan læse mere om at tilføje favicons fra en iPhone- eller Android-enhed på Shopifys hjælpeside om emnet.
Sådan tilføjer du et favicon i WordPress
Hvis webshoppen ligger på WordPress, kan du tilføje et favicon sådan her:
1. Gå til WordPress-dashboardet, og klik på Udseende.
2. Klik på Tilpas for at se listen over muligheder.
3. Klik på Webstedidentitet. Her styrer du blandt andet titel, tagline og logo.
4. Klik på Vælg webstedikon i sektionen Webstedikon for at uploade det nye favicon-billede.
5. Klik på Udgiv for at gøre ændringen synlig.
6. Test, hvordan faviconet vises i forskellige browsere.
Sådan tilføjer du et favicon i Wix
Et Wix-website leveres med et standardfavicon, men brugere med et Premium-abonnement kan tilpasse det. Sådan ændrer du faviconet på dit Wix-website:
1. Gå til Indstillinger i sitets dashboard.
2. Klik på Websiteindstillinger.
3. Klik på Upload billede under Favicon.
4. Vælg et eksisterende billede, eller upload et nyt fra computeren.
5. Klik på Vælg fil.
6. Klik på Gem, og udgiv derefter websitet.
Ofte stillede spørgsmål: Hvad er et favicon?
Er et favicon det samme som et logo?
Et favicon, også kaldet et favoritikon, er et lille ikon, der vises ved siden af sidens navn eller adresse i søgeresultater, browserfaner og bogmærker. Det gør det lettere for brugerne at genkende websitet. Et logo repræsenterer derimod brandet på tværs af markedsføring, emballage, sociale medier og andre kontaktpunkter. For de fleste brands deler favicon og logo visuelle elementer, og i nogle tilfælde kan de være identiske, hvis logoet er enkelt nok.
Hvad er et eksempel på et favicon?
Et favicon kan for eksempel være det lille ikon, du ser i browserfanen ved siden af websitets titel. Det hjælper brugerne med hurtigt at genkende siden visuelt. Shopifys favicon bruger for eksempel den velkendte indkøbspose med et “S” fra logoet.
Findes der værktøjer til at designe favicons?
Ja, der findes mange værktøjer, som kan hjælpe med at designe et favicon til dit website. Flere af dem er gratis. Populære onlinegeneratorer er blandt andet Favicon.io og RealFaviconGenerator.
Hvorfor er et favicon vigtigt for en dansk webshop?
Fordi danske kunder ofte skifter mellem søgeresultater, browserfaner og mobilskærme, før de køber. Et tydeligt favicon gør webshoppen lettere at genkende og kan give et mere professionelt førstehåndsindtryk, især når kunden sammenligner flere webshops på én gang.
