För att få en liten bild på din servar att agera favicon krävs det inte mycket. Endast en kort liten kodsnutt. Den ska helt enkelt in i head-taggen, och det enda du behöver tänka på är vart du gjort av bildfilen.
Kodsnutten ser ut såhär:
<link rel="shortcut icon" href="images/favicon.ico">
Den här koden går in i mappen images och hämtar favicon.ico, och sätter den som sidans favicon. Simpelt.
Den här enkla koden kan du absolut nöja dig med, men det finns faktiskt ett sätt att ta det här ett steg längre. Webbläsaren Internet Explorer stödjer inte några än filtyper än .ico som favicons, men det gör så gott som alla andra läsare. Vad är då fördelen med att använda något annat än .ico? Låt säga att våra logga inte täcker varje pixel i bilden, då måste vi sätta en bakgrundsfärg. Och gör vi inte det själva så görs det automatiskt i konverteringen till .ico. Det brukar i dessa fall bli vitt. Om vi däremot får möjligheten att använda png-filer dyker det upp nya möjligheter! Png-formatet stödjer transparens, det vill säga genomskinlighet. Vi kan alltså välja att sätta vissa pixlar till att visa det som ligger bakom bilden, vilket gör att loggan i sig slipper en fast bakgrundsfärg.
Men hur blir det då med kodsnutten ovan? Den hämtar ju en .ico-bild. I HTML kan vi utnyttja något som heter conditional comments. Det är en liten funktion som gör att du kan avgöra om användaren kör med Internet Explorer eller inte. Om det nu skulle vara så att hen gör det så vill vi hämta .ico-bilden. Annars kör vi på vår png-bild. Koden ska då se ut såhär:
<link rel="shortcut icon" href="images/favicon.png">
<!--[if IE]>
<link rel="shortcut icon" href="images/favicon_ie.ico">
<![endif]-->