Skapa en egen Favicon

Allt fler websidor skaffar en egen favicon. Det är den där lilla bilden som ligger till vänster om websidans adress i adressfältet på din webläsare.

Blogger har en egen bild, den lilla oranga rutan med ett vitt B, som finns på alla Blogspotbloggar.
De vill inte att man ska byta ut den ikonen, men det är möjligt med ett litet så kallat "hack".

Dock vill jag tala om att risken finns att den favicon du skapar nu kanske inte kommer att fungera längre fram eftersom Blogger aktivt söker nya vägar att hindra oss bloggare från att använda oss av dessa "hack". Men - för tillfället fungerar det och hur du gör ska jag visa dig nu.

Börja med att skapa eller ladda hem en bild (ingenting upphovsrättsskyddat förstås!)
Det är bra att utgå från en bild som är ungefär 100x100 pixlar, för då ser du på ett ungefär hur mycket som får plats i din favicon, men det går bra med ett normalstort fotografi också.
Dock försvinner alla detaljer, din favicon kommer bara att vara 16x16 pixlar stor när den är färdig, så utgå helst från en liten, tydlig, kvadratisk bild.

Om du vill ha en genomskinlig bakgrund - t.ex. bara visa en bokstav - kan du spara din bild i png.format.


När du har bestämt dig för vilken bild du ska använda går du till din bloggs Layout - Redigera HTML.

Några få rader ner i din kodmall hittar du taggen:

<title><data:blog.pageTitle/></title>

Precis ovanför den klistrar du in följande kod:

<link href='http://www.DIN BILDADRESS' rel='shortcut icon' type='image/vnd.microsoft.icon'/>

Nästa steg är att gå in på den här sidan: The Favicon Labs

Här laddar du upp din bild!


När bilden är uppladdad och omvandlad till formatet .ico kan du kopiera bildens adress. Nederst i rutan finns en kodrad och i den raden finns din bilds adress. Kopiera från http:// och till slutet på adressen - det som står mellan "-tecknen.


Gå tillbaka till din bloggs Layout - Redigera HTML-läge och byt ut orden DIN BILDADRESS i koden du klistrade in mot din bilds webadress.

Spara mallen.

Det kan ta en liten stund innan din favicon visas, det verkar vara lite olika.

Du bör kunna se din favicon om du använder Firefox eller Internet Explorer 7, medan det har visat sig vara problematiskt för de som fortfarande surfar med Internet Explorer 6.
Om du hör till dem som har den sistnämna så ska du veta att vi andra ändå kan se din favicon, även om du inte gör det, så bytet är ändå värt besväret!

Lägg till en ikon vid bloggpostens rubrik

Visst kan det vara gulligt med en liten ikon/bild brevid din rubrik i blogginläggen.
Det är inte svårt alls att lägga in i din kodmall, men att välja vilken bild man vill ha - tja, det kan ju vara lite knepigare...

Det första du gör är att bestämma vilken bild du vill ha och hur stor den ska vara. Jag har i mitt exempel en bild ovan som är 50x50 pixlar stor, så minska 10-20 pixlar om du vill ha en mindre bild och öka storleken om den ska vara större.

Nästa steg är att ladda upp din bild på t.ex. Photobucket eftersom du behöver ha en webadress till din bild.
Kopiera den här koden och klistra in den i Anteckningar (finns i din dators startmeny om du använder Windows):

<img src="http://DIN BILDADRESS HÄR" style="border-width:0px" /> 

Byt ut DIN BILDADRESS HÄR mot din bilds direklänk. Det är den länken som jag ringat in med rött nedan. Se till att det inte blir dubbla http:// - jag lät det vara kvar i koden för att förtydliga vart din adress ska klistras.


När du har gjort det går du in på din bloggs Layout - Redigera HTML.
Kryssa i rutan "Utöka Gränssnittskomponentmallar". Då visas hela din bloggmall istället för den kortare versionen.

Nu är det dags för Ctrl+F igen. När du trycker på de två tangenterna samtidigt visas en sökruta/rad ( beroende på om du har Internet Explorer eller Firefox ) och du kan skriva i ett sökord. Kopiera följande kod och klistra in i sökrutan :

<a expr:href='data:post.url'>   

Du kan också söka efter orden manuellt, men det är mycket text att leta igenom så jag rekommenderar sökfunktionen.

När du hittat rätt rad klistar du in din kod med bildadressen precis efter > tecknet, som i nedanstående exempel.

Klicka på förhandsgranska!
Spara om du är nöjd.

Nu kommer din bild att visas vid varje inlägg där du har en rubrik. Om du inte skriver en rubrik över ditt inlägg blir det alltså ingen bild!