Favicon - ikonet i adressefeltet
Har du lagt merke til disse ikonene som ofte dukker opp i nettleseren din? I adressefelt, faner, bokmerker eller favoritter?
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å:
Merknad: Mitt favicon ble oppdatert i 2016, noe du kan lese mer om i historien om da Outlook stjal ikonet mitt
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: