Så skapar du en favicon till din blogg

Om du har en egenhostad blogg, alltså ligger på ett webbhotell, så kan du ha en favicon till din blogg. En favicon är den lilla ikon som syns i webbläsarfönstret, bredvid adressen.

Så här ser det ut här på Börja Blogga:

bbfavicon.jpg

En sådan kan du också ha på din blogg.

Innan vi skapar själva faviconen så tänkte jag visa hur koden som infogar den ser ut. Den ska ligga mellan dina head taggar, på alla sidor så klart. Här är den i originalutförande:

<link rel="shortcut icon" href="/favicon.ico" />

Den här kodsnutten inkluderar filen favicon.ico (ja, .ico, vi ska skapa en snart), som måste ligga i din domäns root. Alltså, om du surfar till http://domänen.se/favicon.ico så ska du komma till faviconen.

Kör du WordPress så kan du lägga faviconen i ditt temas mapp, och använda den här koden istället:

<link rel="shortcut icon" href="<?php bloginfo('template_directory'); ?>favicon.ico" />

PHP-snutten skickar till temats mapp, och där ligger faviconen.

Många WordPress-teman har redan en favicon. I så fall, lista ut var den ligger och byt ut den mot din egen, det är lättast. Vill du ha en fungerande favicon även i ditt RSS-flöde så måste du dessutom ha en favicon i domänrooten, enligt ovan.

Skapa en favicon

Det finns plugins till Photoshop såväl som fristående program för att skapa faviconer, men här är webben vår vän, så vi struntar i dem. Själva bilden måste du dock göra själv, och den ska vara 16×16 pixlar stor. Spara bilden i GIF, JPG, PNG, eller BMP-format – välj själv vilket.

Här är min bild, till Age of Conan-bloggen Living Hyboria: av31stare.gif

Verkligen liten, eller hur?

Okej, nu ska vi skapa faviconen! Gå till Dynamic Drives utmärkta Favicon Generator och bläddra upp din ikon.

favicongenerator1.jpg

Strunta i inställningarna under Optional, de är för andra typer av ikoner och vi vill ha en klassisk, 16×16 pixlar stor favicon.ico, inget annat!

Klicka på Create Icon-knappen. Du får nu upp en förhandsvisning av din nya favicon, ladda ner den med Download Favicon-knappen om du är nöjd, eller börja om ifall du vill laborera mer.

favicongenerator2.jpg

Nu laddas din favicon ner, med det helt korrekta namnet favicon.ico. Ladda upp den till din blogg, där du vill ha den i enlighet med instruktionerna här ovan. Se till att du läser in den i head-delen av ditt tema.

Klart! Så här fint blev det på Living Hyboria:

livinghyboriafavicon.jpg

Bonus! Dynamic Drives Favicon Generator klarar även av att göra om bilder som är större än 16×16 pixlar till faviconer, då skalar den ner dem automatiskt. Bra om du vill testa lite men inte orkar ändra bildens storlek själv.