favicon.ico browserikon

Lær om <link> elementet der kan bruges til at inkludere CSS og RSS og det lille ikon som vises ved browserens adressefelt når man besøger en hjemmeside

Introduktion til link element

<link> elementet bruger i <head>-delen af et HTML dokument.

<link> elementet kan bruges til at sætte et favicon på siden.
<link> elementet kan bruges til at tilknytte en CSS fil til siden.
<link> elementet kan bruges til at tilknytte en RSS fil til siden.

Ikon introduktion

Her ses et lille ikon på 16 x 16 pixels.

favikon 16x16

Det kan bruges til at lave en favicon.ico der vises i browserens faneblad.
favicon i browsertab

Det gør det blandt andet lettere at genkende et link i bogmærke listen uden man behøver læse teksten.
favicon i bogmærkeliste


favicon.ico er i ICO formatet som er lidt specielt i det man kan gemme flere størrelser af ikonet i samme fil.

Her ses genvejsikoner på skrivebordet.
Hvis man kun har ikonet på 16x16 pixels i ico filen så vises det lille ikon men har man ikonet i større størrelser så kan 48 x 48 pixels ikonet bruges som her.
genvejslink med favikon på Windows skrivebord

Det vil være optimalt at have sit ikon i flere størrelser, for eksempel 16x16, 32x32, 48x48 og 128x128 pixels men det er ikke et krav.

Lav favicon.ico

Du kan bruge favicon.cc, dynamicdrive favicon Generator, ICO converter hvis du vil tegne et ikon eller konvertere fra et billede du har.

Tegneprogrammet GIMP kan også lave ICO filer.

HTML koden

Når du har din ico fil er du klar til at sætte den på hjemmesiden med følgende kode.


Man kan også have ikonet i en anden mappe og bruge et andet filnavn som her.

.htaccess

Hvis man kalder ikonfilen for noget andet end favicon.ico eller lægger filen et andet sted end i roden af hjemmesiden så kan det være man får en masse 404 fejl i sin hjemmeside statistik fordi der er nogen browsere der forsøger at hente favicon.ico fra roden af hjemmesiden lige meget hvad.

Nogle browsere forsøger automatisk at hente en favicon.ico fil fra roden af hjemmesiden selvom man ikke har angivet dette nogle steder i sin kode.

Hvis man bruger Apache kan man i .htaccess i roden af hjemmesiden skriver følgende så bliver de browsere forsøger at hente favicon.ico i roden af hjemmesiden viderestille til den ønskede valgfrie fil.

Ryd faviconer fra browserens cache

one does not simply clear the favicon from the browser's cache
Når man rydder browserens cache så forstår man det gerne som om at alt fra hjemmesiderne slettes men det er ikke tilfældet for favicon i mange browsere.

Det kan betyde at selvom du har ændret faviconet på din hjemmeside så vises det gamle favicon selvom du har ryddet browserens cache.

En simpel måde at få browseren er ved at ændre filnavnet eller hvis man ønsker at beholde samme filnavn kan man tilføje ?version=2 efter filnavnet og hver gang man ændre ikonet man kan øge tallet.

I Firefox kan man åbne places.sqlite filen med tilføjelsen SQLite Manager hvor der kan være gemt faviconer selvom man har rydder cachen i Firefox.
Kig i den table som hedder moz_favicons, højre klik på den og vælg Empty Table i genvejsmenuen for at tømme den.
Filen places.sqlite kan findes i about:support ved at trykke på Åbn mappe ved Profilmappe.

Shortcut icon eller shortcut

The shortcut link type is often seen before icon, but this link type is non-conforming, ignored and web authors must not use it anymore.

MIME type

Skriv din kommentar

Spørg mig om hvad som helst
Du kan også skrive direkte til mig på
Stem
Søg
Language

Select English to navigate the website in English. Things like the navigation menu and contact form will be in English, but the main content on each page will not be translated.