Om Martin
Martin liker
Favicon
mandag 26. februar 2007 • 19 kommentarer
Et favicon er det lille ikonet som befinner seg foran URL-en i adressefeltet på nettleseren, omtrent slik:
Et favicon er ingen ny oppfinnelse, men jeg får rett som det er henvendelser om hvordan man lager et favicon og plasserer det i koden. Her er oppskriften:
- Velg deg et bilde som skal brukes som favicon. Bildet kan være hva som helst, men må ha samme høydre- / breddeforhold. Det vil si at det må være like høyt som det er bredt. Velg helst et bilde som ikke har for mye detaljer, slik at du kan se sluttresultatet.
- Et kjapt søk på Google bringer meg til siden jeg bruker for å generere selve ikonet. Velg for all del ikke et animert ikon, vær så snill.
- Når ikonet blir generert, sitter du igjen med en liten, pakket fil. Denne inneholder ikonet du ønsker å bruke, med det naturlige navnet “favicon.ico”. Denne filen laster du opp til roten av din webtjener, for eksempel slik:
http://www.bekkelund.net/favicon.ico. - Det neste du skal gjøre er å implementere ikonet i koden på siden din. Det gjør du ved å plassere koden
<link rel="shortcut icon" href="/favicon.ico" type="image/x-icon" />i head-elementet. - Vips, du har tatt i bruk ditt eget favicon.
19 kommentarer
-
Merk at favicon oftest er 16x16px, men .ico formatet har også støtte for å legge inn en 32x32px versjon. Om man vil tilrettelegge siden sin for å bli sett fra Nintendo Wii, og andre nettlesere som bruker det store ikonet; bør man sørge for at man har begge versjonene i .ico filen.
-
Er det noen spesiell grunn til at du bruker siden under punkt 2? (eksempel: den lager forskjellige størrelser i samme ico-fil)
-
Om du legg fila i root og kallar den favicon.ico, så blir det vel eit favicon automatisk. Altså du treng ikkje den
link rel="shortcut icon"..-greia om du kallar fila favicon.ico. Den er om du har fleire favicon du vekslar mellom, eller om fila di skulle heite noko anna (av ein eller anna teit grunn). -
Er det i det hele tatt noe poeng i å bruke ico formatet? Det virker som det går greit å bruke en annen mimetype, altså feks png, jpg el. Har dog ikke testet dette i andre nettlesere enn Firefox desverre.
-
Om du legg fila i root og kallar den favicon.ico, så blir det vel eit favicon automatisk. Altså du treng ikkje den
link rel="shortcut icon"..-greia om du kallar fila favicon.ico. Den er om du har fleire favicon du vekslar mellom, eller om fila di skulle heite noko anna (av ein eller anna teit grunn).Er det i det hele tatt noe poeng i å bruke ico formatet? Det virker som det går greit å bruke en annen mimetype, altså feks PNG, jpg el. Har dog ikke testet dette i andre nettlesere enn Firefox desverre.
Etter egen erfaring har jeg funnet ut at eldre nettlesere (les IE) må ha det inn med teskje. Både en favicon.ico (med rikitg MIME-type) og henvisning med link-tagg i head-elementet.
Det dere beskrev er mulig med de “ordentlige” nettleserne.
Einar
-
Er det noen spesiell grunn til at du bruker siden under punkt 2?
Nei, ikke annet enn at den alltid har fungert for meg, og at resultatet blir bra. Man kan like gjerne benytte en annen generator, så hvis noen vet om en bedre, er det fritt frem for anbefalinger.
Ellers har Einar rett i at visse nettlesere må ha det med te-skje, både hva gjelder link og format.
-
Hvordan får jeg dette til i WordPress? Ha prøvd med plugin Admin Favicon men det vises bare når jeg er logget inn i administrasjonspanelet. Gikk greit på en vanlig html side jeg har.
-
Jeg har manuelt implementert favicon i WordPress. Du benytter fremgangsmåten beskrevet i denne artikkelen, hvor du plasserer koden i punkt 4 i filen «header.php» i temaet du benytter.
Ellers har Audun en fin artikkel om favicon og WordPress.
-
Hei. Jeg får faviconet vist i nettadressen i IE7, men ikke i Mozilla Firefox. Gjør jeg noe galt?
-
Ikonet ditt vises fint i min Firefox, Ole Kenneth.
-
Hei Martin! Takk for gode tips! BRA!
Men min vises ikke i IE7, men i Firefox. Gjør jeg noe galt?
Ha en fin dag! -
Faviconet ditt fungerer fint i Safari, Jarle. Har ikke IE selv, men jeg vil tippe problemet ordner seg selv hvis du har fulgt oppskriften. Den gamle koden kan f.eks. være lagret i minnet (cache).
-
Hei!
Jeg har lagt inn et favicon på 16 x 16 pixler i root-mappa til en webside. Faviconet er lagt inn sammen med index-fila. Faviconet vises i Safari, Firefox og Opera, men ikke Internet Explorer…
Har også lagt inn koden du viser till ovenfor, i head-elementet, men det fungerer allikevel ikke.. Vet du hvorfor? -
Har du fulgt oppskriften, bør dette fungere, Lotte. Hvis ikke kan du prøve å tømme cache i Internet Explorer, uten at jeg vet om det vil hjelpe.
-
Hei Martin!
Lenge siden. Håper du har det bra!
Snakket med Ove om Favicon, og laget et til jobben på http://www.norsktilhengersenter.no .
Jeg kan jo ikke så altformye om websider, men fikk det til å virke der etter å ha lest gjennom noen nettsider inkludert din og sjekket at jeg gjorde ting riktig med et online program som jeg fant her: http://www.html-kit.com/favicon/validator/ .
Lurte på om du har noe innspill når faviconet da ikke kommer opp på http://www.nts.no som vi investerte i som forkortelse for norsktilhengersenter.no senere… den speiler jo egentlig bare hjemmesida, men favikonet kommer ikke opp der…
Setter pris på om du kommer med et innspill på eventuelt å få det til å fungere også der!
- Mathias
Har du synspunkter? Legg igjen en kommentar!
RSS og trackback
Med RSS kan du abonnere på nye kommentarer som postes til denne artikkelen.
Du kan legge igjen et trackback fra ditt eget nettsted ved å benytte trackback-adressen til denne artikkelen. Eventuelle tracback ser du under.
-
[...] har skrevet så fint om hvordan man legger inn favicon fra før, og denne viser hvordan koden skal se [...]
-
[...] enkelt for folk å kjenne igjen sakene dine. Ordne deg et favicon som vises på toppen av siden (Martin Bekkelund forklarer det godt). Et annet bærende og gjenkjennbart element i bloggen din er faktisk navnet. Spesielt hvis du er [...]
-
[...] var det denne koden da, som også skal plasseres et sted. For WordPressbrukere fant jeg det jeg trengte i forumet, og [...]
Flere artikler
- Hvilket firma dominerer IT-bransjen om tre år?
- Insentiver
- England
- Fra fysisk til digitalt
- IT-skepsis
- Smørmangel
- Carl I. krise
- Debattkastrering
- Selvforsyning
- TeknoTaxi
Enda flere artikler? Besøk arkivet.
Bekkelund.net er en blogg av Martin Bekkelund, hvor han lufter sine tanker om IT og IT-politikk. Martin arbeider til daglig som seniorrådgiver, foredragsholder og skribent i IT-bransjen, hvor han veileder bedrifter og organisasjoner i strategisk bruk av IT. Les mer...
© 1995-2012 Martin Bekkelund
Opphavsrett • RSS • Kontakt
Hans P. Fosseng
26. februar 2007 16.50
Takk for morsomt tips, har kjapt snekret et favicon selv nå:-)