Favicon

Et favicon er det lille ikon, der repræsenterer et website i browserens faner, bogmærker, historik og nogle søgeresultater. Navnet er en sammentrækning af “favorite icon”. Det fylder få pixels, men hjælper brugeren med hurtigt at genkende siden blandt mange åbne faner.

Faviconet er normalt en forenklet udgave af virksomhedens logo eller bomærke. Har logoet både symbol og langt navn, er det typisk symbolet, der fungerer. Hele teksten bliver for lille. Et godt favicon skal kunne aflæses, når det omtrent har størrelse som et bogstav i browserens faneblad.

Ikonet er ikke det samme som et almindeligt billede på siden. Det bliver angivet særskilt i websitets kode eller i WordPress som et webstedsikon. Browseren og andre tjenester henter derefter den fil, der er knyttet til sitet.

Google kan vise faviconet ved siden af sitenavnet i søgeresultaterne. Det betyder ikke, at et flot ikon giver højere placeringer. Det er en del af præsentationen i SERP’en, ikke en genvej til bedre SEO. Til gengæld kan et tydeligt ikon gøre resultatet lettere at genkende.

Faviconet er en lille del af den samlede visuelle identitet. Det skal føles som samme afsender som hjemmesiden, men det har sine egne praktiske krav. En detaljeret illustration kan være fin på en plakat og helt ubrugelig i en browserfane.

Begynd med et kvadratisk lærred og et enkelt motiv. Har virksomheden et bomærke, så brug det uden den fulde navnetekst. Har den kun et ordlogo, kan et tydeligt begyndelsesbogstav eller en forenklet form være bedre. Målet er genkendelse, ikke at presse hele designmanualen ind på et frimærke.

Test ikonet i meget lille størrelse. Zoom ikke kun ind i designprogrammet. Vis det omkring 16 × 16 og 32 × 32 pixels og sammenlign med andre faner. Forsvinder hullet i bogstavet, bliver to farver til én, eller ligner symbolet noget helt andet, skal formen forenkles.

Lever faviconet i et format, som den valgte løsning understøtter. Moderne websites bruger ofte PNG, SVG eller ICO, mens WordPress typisk kan generere flere nødvendige størrelser ud fra et større kvadratisk webstedsikon. Følg den konkrete platforms krav frem for at antage, at én lille fil passer overalt.

Google anbefaler, at faviconet er kvadratisk og i en størrelse, der er et multiplum af 48 pixels. Filen og forsiden skal kunne crawles. Et ikon, der er blokeret af robots.txt, gemt bag login eller returnerer en fejl, kan ikke forventes at dukke op i søgeresultaterne.

Tjek også kontrasten. Et hvidt symbol uden baggrund kan forsvinde i en lys browser, mens et sort symbol kan blive svært at se i mørk tilstand. En fast baggrundsform kan være en enkel løsning. Undgå dog en tynd kant, som ser elegant ud i 512 pixels og forsvinder helt i 16.

På en ny hjemmeside bør faviconet indgå i lanceringstjekket sammen med sidetitel, formularer, mobilvisning og HTTPS. Det er en lille opgave, men et manglende standardikon får hurtigt en ellers færdig side til at se halvfærdig ud.

En lokal restaurant har et rundt logo med navnet skrevet langs kanten og en lille gaffel i midten. Hele logoet bliver uploadet som favicon. I browserfanen bliver teksten til grå støj, og gaflen kan ikke ses. Ikonet ligner mest en utydelig mønt.

Designeren laver i stedet en enkel version med kun gaflen på restaurantens mørke baggrundsfarve. Skaftet gøres en anelse tykkere, og de mindste detaljer fjernes. Det er ikke en ændring af selve logoet. Det er en tilpasning til et ekstremt lille format.

Filen eksporteres i et stort kvadratisk format, så WordPress kan danne de mindre udgaver. Den kontrolleres på computer og mobil samt i en browser med både lyst og mørkt tema. Efter lancering bliver startsiden anmodet om genindeksering i Google Search Console.

Browserfanen viser det nye ikon med det samme efter cache er ryddet, men Google viser fortsat det gamle i en periode. Det er normalt. Google bestemmer selv, hvornår faviconet hentes igen, og der er ingen garanti for, at det altid bliver vist.

Restauranten bruger samtidig det fulde logo på menukort, facade og hjemmeside. Faviconet er altså ikke en erstatning for et ordentligt logo. Det er den lille arbejdsudgave, der skal kunne overleve steder, hvor der næsten ikke er plads.

Den største faldgrube er for mange detaljer. Små bogstaver, tynde linjer, skygger og farveovergange bliver hurtigt til grums. Et favicon må gerne være enklere end logoets hovedversion. Det vigtigste er, at formen stadig tilhører samme identitet.

En anden fejl er at bruge et rektangulært logo i et kvadratisk felt. Systemet skalerer hele bredden ned, og resultatet bliver endnu mindre. Beskær ikke bare tilfældigt. Lav en bevidst variant med et symbol, monogram eller andet element, der kan stå alene.

Pas også på filstørrelsen. Et favicon er lille på skærmen, men en uhensigtsmæssig fil kan stadig være unødigt tung. Brug fornuftig billedkomprimering og undgå at servere et kæmpe foto som ikon.

Til sidst kan browsercache snyde. Du har skiftet filen, men den gamle bliver ved med at stå i fanen. Test i privat vindue, ryd relevant cache og kontrollér filens URL. Lad være med at ændre fem andre ting, før du har sikret, at du ikke bare kigger på en gammel kopi.

Favicon og app-ikon overlapper nogle steder, men de er ikke altid samme fil eller størrelse. En genvej på en mobilskærm kan bruge et større ikon med andre krav. Derfor bør et moderne site have en samlet ikonpakke frem for kun en gammel favicon.ico.

Et favicon har normalt ingen brugbar alt-tekst, fordi det ikke er et almindeligt indholdsbillede. Tilgængeligheden ligger i, at siden stadig har et korrekt navn og en forståelig titel. Ikonet er supplerende genkendelse.

Bruger du et WebP-billede som del af hjemmesidens indhold, betyder det ikke automatisk, at formatet også er det bedste til faviconet. Vælg efter browser- og platformsunderstøttelse. Et filformat er et værktøj, ikke en religion.

Faviconet bør være dokumenteret sammen med logoets øvrige varianter, så næste redesign ikke starter med et tilfældigt udsnit. Du kan læse mere om den samlede oplevelse i guiden til at skabe en brugervenlig hjemmeside.

Et stærkt logosystem har varianter til forskellige størrelser: fuldt logo, kompakt version og et symbol til helt små flader. Faviconet er den mindste stresstest. Hvis intet i identiteten kan fungere småt, kan der være behov for en bevidst mikroudgave.

Den variant bør ikke improviseres af den person, der tilfældigvis uploader hjemmesiden. Dokumentér den sammen med de øvrige filer, så ikonet bliver ens på hovedsite, webshop og eventuelle undersider.

Test faviconet i mere end én browser og på både lys og mørk brugerflade. En mørkegrøn form kan være tydelig på hvid baggrund og næsten forsvinde i en mørk fane. Du behøver ikke lave et cirkus af varianter, men symbolet skal have kontrast nok til de mest almindelige visninger.

Kontrollér også resultatet på mobil, hvor ikonet kan optræde i bogmærker, historik og genveje. Et symbol, der virker ved 32 × 32 pixels, kan stadig se skævt ud, når operativsystemet beskærer det i en cirkel eller afrundet firkant. Hold derfor vigtig grafik væk fra kanten.

Når en ny hjemmeside lanceres, bør favicon være et fast punkt på tjeklisten sammen med sidetitel, kontaktoplysninger og formularer. Det er en lille fil, men en glemt standardglobus får løsningen til at se ufærdig ud. På samme måde bør en webshop ikke stå med platformens standardikon efter åbning.

Gem kildefilen i den mappe, hvor virksomhedens øvrige logofiler ligger. Notér hvilke eksportstørrelser der er lavet, og hvem der må ændre dem. Så slipper næste medarbejder for at tage et screenshot af logoet og beskære sig frem til noget, der næsten ligner.