Favicon
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.
13 kommentarer til «Favicon»
-
Takk for morsomt tips, har kjapt snekret et favicon selv nå:-)
-
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.
-
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).
2 trackback / pingback til «Favicon»
-
[...] 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 [...]
Legg igjen en kommentar
Før du poster en kommentar må du være kjent med retningslinjene for kommentarposting, samt personvernpolitikken for bekkelund.net.
Felter merket med * må fylles ut. Din e-postadresse vil ikke være synlig.
Formatering med XHTML: Du kan bruke disse elementene til formatering: <a href="" title=""> <abbr title=""> <acronym title=""> <b> <blockquote cite=""> <cite> <code> <del datetime=""> <em> <i> <q cite=""> <strike> <strong> . Tekstbaserte uttrykksikoner konverteres automatisk til bilder. Hjelp til formatering.
Martin Bekkelund er fornøyd bruker av WordPress med hjemmelaget tema.
Du kan abonnere på både artikler som Atom, RSS 2.0 eller RSS 0.92, samt kommentarer som RSS 2.0.
Denne artikkelen ble til ved hjelp av 13 kopper espresso konsumert på 0.484 minutter.