favicon Artikler

Tilføj et ikon til din hjemmeside med favicon.ico

Hvis du bruger Chrome, Mozilla, Konqueror, Galeon, Safari, Internet Explorer, Edge Opera eller hvilken som helst anden browser, har du så nogensinde lagt mærke til at for mange websites i dine foretrukne (bookmarks) er det sædvanlige ikon udskiftet med et andet?

Prøv f.eks. at bookmarke denne side, og kig så på listen over dine bookmarks, du vil sikkert se noget i denne retning af nedenstående.


Ganske smart ikke? For det første er det jo lidt pænere end bare at have et standard ikon, og for det andet for det jo sitet til at træde lidt frem i forhold til de andre.

Det lille ikon hedder et “favicon” – det er en forkortelse for “Favorites Icon”, og udtales på engelsk som [fav-eye-con]. I denne artikel skal vi se på, hvordan du kan lave dit eget favicon til dit website.

Udover at blive brugt, når du bookmaker, så bruges favicons også, når du f.eks. gemmer en side som genvej på dit skrivebord eller når du har hjemmesiden åben i en fane i browseren.

Sådan laver du et favicon

Et favicon er en lille fil, som ligger i roden af et website. Et favicon skal være af filtypen icon (.ico) – det må maksimalt have 16 farver, og skal have en størrelse på 16 gange 16 pixels.

Det er super nemt at lave et favicon. Du skal blot finde det billede du ønsker at bruge og sikre dig at:

  1. Det er kvadratisk
  2. Det har en gennemsigtig baggrund (png)

Herefter kan du bruge en af de utallige online tjenester til omdanne dit billede til et ikon. Vi bruger selv tjeneste fra dynamic drive, som du kan finde her.

Hvordan får du ikonet ind på din side?

Hvis du gerne vil kalde dit ikon for noget andet end standardnavnet favicon.ico, eller hvis du gerne vil have det til at ligge et andet sted en i roden af sitet, kan du bruge elementet <link>.

Dette gøres ved at indsætte følgende linie i head-sektionen af dine sider:

<html>
<head>
<title>min side</title>
<link rel="shortcut icon" href="/mappe/ikon.ico">
</head>
<body>

Hvor /mappe/ikon.ico angiver stien til dit ikon.

Bruger du WordPress?

Hvis du bruger WordPress er processen endnu nemmere. Her skal du blot hente pluginnet Favicon XT-manager og uploade dit orginale billede til pluginnet. 

Herefter omdannet pluginnet dit billede til et ikon og sørger for, at det komme på din hjemmeside

Nice to know

Hvilke browsere virker favicons i?

ALLE!

Hvordan opfører ældre browsere sig hvis de møder et site med et favicon?

De ignorerer simpelthen bare ikonet, det har ingen betydning.

Jeg har skiftet mit favicon, men min browser husker stadig det gamle – hvad gør jeg?

Denne situation kan drille lidt. Tøm cachen i din browser, slet alle favicons og indsæt dem igen. Dette skulle hjælpe.

Kan man som bruger slå favicons fra i sin browser?

Nej, ihvertfald ikke i de browsere vi har i dag.

HTML.dk
På HTML.dk ❤ vi kode. Vi skriver kode, læser kode og drømmer kode... Her på sitet deler vi ud af vores viden, og har du brug for vores hjælp, skal du være velkommen til at kontakte os!