Skapa en favicon.ico (hemsideikon)

(utskriftsvänlig PDF-dokument med skärmbilder som länk nedan, kommer öppnas i nytt fönster/flik)
UA 025 - Svenska - Skapa en hemsideikon-favicon.ico.pdf

Webbplatser har möjlighet att visa en liten ikon på webbläsarens flik, vid favoriter och även om man lägger ut den som genväg till skrivbordet.

Det är filen favicon.ico som innehåller ikonen. Det som är lite speciellt är att den innehåller flera olika storlekar på ikonen. Det som normalt visas på flikar är 16x16 px (pixel/punkter), om användaren däremot har ställt in ”stora ikoner” så visas den normalt i 32x32 px, och lägger man ut det som en genväg på skrivbordet så är den oftast 48x48 px.

När ni skapar er favicon måste ni därför göra flera enskilda bilder. Det är inget som säger att de måste vara samma motiv, men det skulle vara förvirrande för besökaren om dess favorit har en helt annan ikon än den som blir på webbläsarens flik. Däremot har ni en komplicerad ikon så kan ni förenkla den lilla och ta bort sådant som inte får plats. Därför kan det vara tämligen tidskrävande att göra sin favicon.ico

Exempelvis så har webbplatsikonen som QBRITS använder till sina exempel sex olika varianter på storlekar. Den minsta på 16x16 px har mycket liten skuggning medan de större har mer.

För att göra en Favicon behöver man ett ritprogram som stödjer det ico-formatet. Vissa större ritprogram som finns att köpa har det inbyggt men det finnas även en uppsjö av gratisprogram som går att använda. Utöver att kunna spara ner i ico-format så finns några andra grundläggande krav att ställa på ett sådant program.

1. Måste kunna hantera transparent färg då vi inte vet vilken bakgrundfärg som besökaren har ställt in på sin dator. Bakgrundsfärgen skiljer sig även mellan aktiv och inaktiva flikar.

2. Måste kunna klippa in en bild från datorn. Ni har säkert er logo som bild och då vill ni kunna klippa in den in i favicon-ritprogrammet så att man har något att börja med.

3. Det är även en stor fördel om den klarar av att skala (ändra storlek) i samband med att man klistrar in bilder. Dels för att förenkla i punkten ovan men även när man gjort den största versionen så förenklar det markant om man kan klippa in den till den mindre för att sedan justera det som behövs, och sedan klippa in den till nästa mindre osv.

 

 

Val av ritprogramför favicon.
Gratisprogram (freeware) kan vara av dålig kvalité och även innehålla virus, hämta de därför så nära utvecklaren som möjligt. Det vore exempelvis oklokt att hämta en Windows-uppdatering från annat ställe än microsoft.com eller .se. Det är även god sed att göra en extra virusskanning på installationsfilen man hämtat ner.

Vi har här listad tre stycken olika gratis favicon-ritprogram; Varav den första behöver inte installeras utan kan köras direkt i en webbläsare. Då det är gratisprogram som inte utvecklats av/för QBRITS, så kan vi inte garantera dess funktion, och inte heller att de inte påverkar er dator på olämpligt sätt. Därför rekommenderar vi 1:an.

  1. X-Icon Editor; Kan köras direkt i webbläsare och behöver inte installeras på er dator. Den innehåller alla nödvändiga funktioner och är enkel att använda. Se dock till att exportera ofta (=spara) då risken finns att man kan förlora arbetet i webbläsare. Fungerar på alla datorer som kör tämligen modern webbläsare.
    X-Icon Editor finns på länken http://www.xiconeditor.com/
  2. Junior Icon Editor: Tidigare haft namnet Free Icon Editor, är ett program som installeras på datorn och har många likheter med Microsoft Paint. Finns många olika ritverktyg och textverktyg i programmet. Finns endast för Windows.
    Junior Icon Editor kan hämtas från länken:
    http://junior-icon-editor.soft112.com/


  3. Greenfish Icon Editor Pro; Är ett mycket enkelt ritprogram men som har all funktionalitet som behövs. Dessvärre har utvecklaren slutat med distributionen men den finns tillgänglig på flera ställen, installationsfilen heter ”gfie_setup_3.4.exe” och finna bland annat under länken (endast Windows-version):
    http://download.cnet.com/Greenfish-Icon-Editor-Pro/3000-2193_4-10773415.html


Installera er favicon.ico på er webbplats

Var ni skall lägga upp er färdiga favicon.ico  beror på eran sajt. Använder ni Wordpress så finns det ofta i temat möjligheta att ange favicon.ico, men det kan även vara så ni får byta ut en som ligger i ert valda temat.  Vissa teman har inte support för favicon över huvud taget.

Om ni är osäker på vart den skall ligga kan ni gå in och titta på källkoden för er hemsida, i början kan det stå ”<link rel=shortcut icon” vilket kan ge en ledtråd vart filen skall läggas Exempelvis: <link rel="shortcut icon" href=http://xxxx.xxxxx.xx/images/favicon.ico, vilket tyder på att den skall ligga i biblioteket /images/.

Om ni inte använder Wordpress och har heller inte angivit någon speciell plats vart favicon.ico skall ligga så brukar det räcka att den placeras i rooren (där ni har index.html).

När ni byter ut er favicon.ico-fil kan det dröja innan ni ser ändringen i er webbläsare. Detta då olika fabrikat och versioner av webbläsare hanterar filen på olika sätt. Gemensamt är att om webbläsaren inte besökt sidan tidigare kommer den läsa ner den nya favicon.ico-filen. Om det inte bara räcker med att stänga webbläsaren så kan ni prova med att radera webbläsarens cache så kan den kanske dyka upp. Men enklast är att prova en dator som aldrig tidigare varit inne på er sajt.