Favicon – vad är det och varför bör du ha en?

Vad läsarna möts av när de besöker din blogg bidrar till deras uppfattning av den. Känns bloggen genomtänkt (se vår artikel om den gyllene tre-enigheten här) ökar chansen att läsaren kommer tillbaka fler gånger. Det finns flera saker du kan göra för att påverka det här intrycket, en favicon som en del av din bloggdesign är en av dem. Det kan verka som en småsak, men även detaljer är viktiga för ett bra helhetsintryck.

Favicon

Men vänta nu, vad är en favicon?

En favicon är ikonen som visas i webbläsaren bredvid namnet på din blogg. Bilden nedan visar fyra flikar med fyra olika favicons. Better Bloggers har ett b. Lindas blogg har ett L, Isabels site har hennes initialer och min teknikblogg har en gammal dator 🙂

favicon

Om du har din blogg hos en bloggportal kan det vara så att deras favicon kommer att visas på alla bloggar inom den bloggportalen. För att vara helt säker kan det vara bra att kontakta bloggportalens kundtjänst. Men har du till exempel en egen WordPress-installation har du möjligheten att välja favicon helt själv!

Hitta en favicon

Kanske är du riktigt duktig på det här med design och kan skapa en helt egen favicon, good for you! För oss andra är Google ett ovärderligt verktyg. Med rätt sökinställningar går det snabbt och enkelt att leta reda på färdiga ikoner, som dessutom är fritt fram att använda.

Såhär hittar du en favicon med hjälp av Google

På Google kan du välja att göra en bildsökning. Där kan du sedan välja Search Tools > Size > Icon och Usage rights > Labeled for reuse. Alla ikoner som dyker upp i din sökning därefter är fria att använda som favicons på din blogg.

Filformat

För att kunna läsas in av samtliga webbläsare (det finns ju så många att välja mellan!) bör en favicon vara av filformatet png. Gif och ico fungerar också, men det kan vara bra att hålla sig till png som är den webbstandard som är satt av W3C.

Storleken är också begränsad, en favicon bör vara 16×16 pixlar. Det här kan du ändra i de flesta bildredigeringsprogram, men även på hemsidor som Favicon Generator.

HTML-kod

För att visa din favicon på bloggen kan du lägga till den med hjälp av HTML-kod. Det gör du i header-filen i din bloggdesign. Såhär ser koden ut:
<link rel=”icon” type=”image/png” href=”LÄNK”>
Ersätt LÄNK med länken till din favicon.

Tillägg

I WordPress kan du installera ett tillägg (plugin) istället för att lägga till din favicon med HTML-kod, det är mycket enklare.

Favicon by RealFaviconGenerator är ett exempel på ett sådant tillägg, med den kan du ladda upp och aktivera din favicon. Via deras hemsida kan du under processen även redigera ikonen ifall det visar sig att den inte är kompatibel med alla enheter.

Hur ser det ut på din blogg idag? Har du en favicon, om ja – hur ser den ut?

Sara Hellman

Teknikintresserad 25-åring som för närvarande pluggar Digital tjänsteutveckling vid Luleå Tekniska Universitet, med målet att arbeta som webbutvecklare efter studierna.

9 Comments
  1. Dock är 16×16 den absolut minsta storleken som behövs. För att se snyggt ut på alla olika enheter och t.ex. som favorit och ikon på Apple-enheter m.m. så behövs en rad olika storlekar. Här är en bra sida som visar vilka som behövs och kan fixa iordning det åt dig realfavicongenerator.net.
    En annan bra grej är att WordPress nu mer har en inbyggd favicon-funktion under: Appearance > Customize > Site Identity.

Leave a Reply

Your email address will not be published.

You may use these HTML tags and attributes: <a href="" title=""> <abbr title=""> <acronym title=""> <b> <blockquote cite=""> <cite> <code> <del datetime=""> <em> <i> <q cite=""> <s> <strike> <strong>