Eller besøk arkivet

Martin på nettet

Med Martins øyne

Favicon

26. February 2007

Et favicon er det lille ikonet som befinner seg foran URL-en i adressefeltet på nettleseren, omtrent slik:

Favicon på bekkelund.net

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:

  1. 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.
  2. 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.
  3. 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.
  4. 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.
  5. Vips, du har tatt i bruk ditt eget favicon.

Abonner på kommentarer til denne artikkelen, alle kommentarer eller nye artikler.
Legg igjen trackback fra din egen side.

19 kommentarer

  1. Takk for morsomt tips, har kjapt snekret et favicon selv nå:-)

    Kommentar av Hans P. Fosseng — 26. February 2007 16:50

  2. Merk at favicon oftest er 16×16px, men .ico formatet har også støtte for å legge inn en 32×32px 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.

    Kommentar av Daniel Aleksandersen — 26. February 2007 17:16

  3. Er det noen spesiell grunn til at du bruker siden under punkt 2? (eksempel: den lager forskjellige størrelser i samme ico-fil)

    Kommentar av Petter — 26. February 2007 22:01

  4. 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).

    Kommentar av tanketom — 27. February 2007 12:45

  5. 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.

    Kommentar av Dagfinn — 27. February 2007 14:34

  6. 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 :)

    Kommentar av Einar — 27. February 2007 16:13

  7. 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.

    Kommentar av Martin — 27. February 2007 18:36

  8. 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.

    Kommentar av Graylady — 20. February 2008 19:17

  9. 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.

    Kommentar av Martin — 20. February 2008 19:39

  10. Hei. Jeg får faviconet vist i nettadressen i IE7, men ikke i Mozilla Firefox. Gjør jeg noe galt?

    Kommentar av Ole Kenneth Thomassen — 8. March 2008 0:01

  11. Ikonet ditt vises fint i min Firefox, Ole Kenneth. :-)

    Kommentar av Martin — 8. March 2008 12:51

  12. 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!

    Kommentar av Jarle Waldemar — 9. April 2008 11:45

  13. 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).

    Kommentar av Martin — 9. April 2008 18:36

  14. 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?

    Kommentar av Lotte — 12. June 2008 12:51

  15. 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.

    Kommentar av Martin — 12. June 2008 19:48

  16. 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

    Kommentar av Mathias Borgenhov — 18. August 2009 15:17

Si noe du også

Ved å trykke Post kommentar samtykker du i at du er kjent med personvernpolitikken og vil overholde retningslinjene for bruk av bekkelund.net.

Trackback og Pingback

Opphavsrett Martin Bekkelund © 1995-2009
Informasjon om opphavsrett — RSS — Kontakt