Favicon - logo, ikon eller minibillede i adresselinien

Af Jesper Brunholm

Opdateret: 20-10-2011

Det lille ikon

Lækkert favicon for Jpeg Crops i Opera

Favicon går under mange navne - især hvis man ikke er bare lidt usikker på den officielle betegnelse. Det handler om det lille ikon som man kan få til at stå ved siden af internetadressen øverst i de fleste browsere, hvor man i Internet Explorer som default ser et lille blåt "e" på et ark papir.

Favicons vises også ud for bogmærker, og teknikken er understøttet af en lang række browsere (Explorer 5+, Mozilla, Konqueror, Opera 7+, Safari m.fl.) i svingende grader - det vender jeg tilbage til.

Du kan springe direkte til: Lav ikonet  -  Sæt det ind på siden  -  Det virker ikke?

Lav ikonet

Et udsnit af bogmærker i mozilla

Et favicon kan teoretisk set godt bare være en .png-fil, men det understøttes ikke ret bredt, så det er smart at lave en .ico, som enten laves i et specielt program til ikoner (jeg kender ikke til nogen gratis af slagsen), eller man kan lave enten en png eller gif-fil, som så kan grafikkonverteres til at blive en .ico fil med henholdsvis png2ico, og gif2icon.
Det er begge to kommandoliniebaserede programmer, men prøv ad selv om det ikke lige er det du roder mest med - det er ret enkelt! :-)

Den grafikfil som skal konvertereres skal være 16x16 pixel. Det er smart at kalde den "favicon.ico" da i hvert fald Internet Explorer leder efter en fil med det navn.

Sæt det ind på siden

Der er flere måder at sætte favicon ind på, og Explorer leder fx. efter et favicon i roden af ethvert site den kommer ind på i flere af versionerne fra MSIE4 og opefter.
> Af hensyn til andre browsere er det imidlertid smart at lægge et link ind til filen også.

Velafprøvet kode til det formål:

"type="imag..." behøves strengt taget ikke for at validere, men det er rimeligt at sætte den efter min mening.
Der er egentlig også kun grund til enten "icon" eller "shortcut icon", men det skader ikke nogen browsere at de er der begge to, og der er enkelte som bedst forstår det når den ene eller anden af dem er der.
> Livrem og seler, med andre ord :-).

Hvorfor virker det ikke?

Explorer-default-ikonet, da den endnu ikke har "fanget" sidens favicon. Bemærk også på ikonet ovenfor at transparens er lidt farligt i denne sammenhæng, fordi ikonet både skal kunne gøre sig på hvid (i adresselinien) og grå baggrund.

Jeg skrev ovenfor at det virker i svingende grad - især Internet Explorer har sin egen vilje på det område, og skal nogen gange redes ret meget med hårene før det virker.

Du skal have bogmærke til siden, og Explorer skal have været lukket siden du lavede bogmærket. Du kan måske få den til det ved at trække Explorer-ikonet ned i html-dokumentet et par gange, så plejer det at hjælpe. Hvis det ikke hjælper er det imidlertid ikke sikkert at det er fordi du har lavet fejl.

En nem måde at se om det er din Explorer er gået i baglås er ved at prøve om du kan få favicon frem på den her side, hvor det altså er muligt :-). Prøv evt. at genstarte (computeren) - vises det nu?

Så gik der endelig en prås op for vores "elskede" Explorer :-).

I Mozilla 1+/Netscape6+ vises ikonet automatisk, så man kan checke at det er rigtigt sat med disse browsere. Du kan også taste adressen til favicon'et ind i adresselinien, så skal du kunne se ikonet i browservinduet.

Favicon er cache-baseret i Explorer (og sikkert flere andre browsere også, så hvis du slår caching fra på dine sider (med meta-tags eller lignende), eller hvis du indstiller din browser til ikke at bruge cache, så ryger favicon højst sandsynligt!

Du kan læse en del mere om favicon og hvordan du laver det på OSS for dk.edb.internet.webdesign, html.dk's faviconartikel og på favicon.com.