Favicon - ikonet i adressefeltet

Har du lagt merke til disse ikonene som ofte dukker opp i nettleseren din? I adressefelt, faner, bokmerker eller favoritter?

Ikoner

Det kalles «favicon», en kortform for «Favorite icon», siden det tidligere var mest vanlig å vise disse i listen over favoritter eller bokmerker.

Filformatet

Et slikt ikon har historisk sett vært i ikonformat, med filetternavnet .ico, med alle de begrensninger dette formatet har hatt. De fleste nye nettlesere støtter imidlertid nå også formatene PNG og GIF, noe som gjør oppgaven med å lage et ikon mye enklere.

Størrelsen har tradisjonelt vært 16x16 piksler, men større dimensjoner støttes, og anbefales, i dag. En passende størrelse kan være 64x64 piksler, men man bør være oppmerksom på at bildet bør kunne være tydelig om det skaleres ned til en mye mindre størrelse. Det anbefales altså ikke å presse inn massevis av tekst i et ikon i størrelse 64x64 piksler.

Mitt favicon

Først må jeg innrømme at jeg ikke har hatt noe favicon på hardcode.no på mange år, så jeg måtte snekre sammen noe jeg kunne bruke som et eksempel i dette blogginnlegget. Med andre ord kunne jeg kanskje gjort meg litt mer flid med designet.

Jeg har laget dette enkle ikonet i størrelsen 64x64 piksler, og det skalerer forholdsvis greit til 48x48, 32x32 og 16x16 piksler også:

favicon 64x64 favicon 48x48 favicon 32x32 favicon 16x16

Hvordan ta i bruk ikonet

Alt du trenger å gjøre er å legge til følgende kodesnutt mellom <head> og </head>, selvfølgelig med riktig URL til ditt eget favicon:

<link rel="shortcut icon" href="http://hardcode.no/favicon.png">

Og slik blir det seende ut i Google Chrome:

Mitt eget favicon

Svend Asbjørn Sylling, 5. desember 2013

Bloggen fra Sylling Hardcode