Publisert i bloggen, torsdag 5. desember 2013:

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

Relatert innhold

Da Outlook stjal ikonet mitt

Bloggen

Paid and organic last click
Are og Ida på date
Kunstig intelligens
Vekst- prosjektet
Da Outlook stjal ikonet mitt
Sen eller tidlig påske?
Koordinater i SVG
Påstand: Corner er mål
Vestfold-Rogaland kalkulator
Twitter og VM på ski
My New Year's Resolutions
Et bilde sier mer enn tusen ord
Rogaland blir nye Vestfold
På størrelse med Vestfold
Datoformat i Excel og Google Analytics
what3words Hvilke tre ord?
Covfefe will make America great again
Om domenenavn og firmanavn
Fotballfrue: Jeg tar innpå deg
Sakte-TV: Se gresset gro
Sakte-TV: Se maling tørke
Første generasjon iPapp har kommet
Jukselapp fotografering
Det sorte hullet cookies disabled
Høysesong for kjipe annonser
Om analsex og popups
Rotasjon av vindsymboler
Hvor mye er Fotballfrue verdt?
Slik tar du et screenshot
Nyttige husketrekanter
Enklere utregning med kryssmultiplisering
Min egen lille adventskalender
Logge antall likes på Facebook
Hva er sitemap.xml?
Hva er robots.txt?
Responsivt design
Webscraping med PHP
Jeg sammenligner epler og pærer
Scalable Vector Graphics
Google Analytics API: Hente data
Google Analytics API: Muligheter
HTML5: Video
Big Data
Cookies: Hvordan det brukes
Cookies: Hva er det?
Excel i to vinduer
CRM-systemet «Kontor»
Gigantisk timelapse
Hva er jQuery?
Overvåke ReadyNAS DUO med PHP
Favicon - ikonet i adressefeltet
Animert heading på hardcode.no
CSS -sprites
Komprimere PNG-bilder
Redesign av hardcode.no
Klikkbar flash uten clickTAG
Relevans har stor verdi
Alle har wide- screen i 2013
Markedsandeler nettlesere 2010
Internet Explorer-vindu i feil størrelse
Hvor stor er en piksel?
Markedsføring og kundelojalitet
Flash-versjoner
Vestre Sylling og Øverskogen JFF
Sidevisninger, besøk og brukere
Widescreen kommer
Hvor brede bør sidene være?
Fortsatt lese hele saken?
Lese hele saken nå?
Første møte med AdWords
Bort med IE6
Utviklingen på nettleserfronten
Nyttige jukselapper
Nye Sylling.no
Klær med egen logo?
Værdata fra yr.no
Logodesign trender i 2008
Gmail grimaser
Google Analytics
Publiseringssystemet Outpost
Hardcode.no relanseres
Publiserings -systemet