Home is where the heart is..

Välkommen till bloggen om design, webbutveckling och annat nyttigt!
Med erfarenhet i skorna delar vi gärna med oss av det vi kan.

Webbyrå med erfarenhet i skorna
14
Apr

Så skapar du en Favicon!

Postades i kategori Kodning, Webbdesign av Fernando Rodriguez

Favicon (kort för favorites icon) är en liten bild som är associerad med en viss hemsida och finns till vänster om adressfältet. Jag gillar att göra favicons för att det är en riktig utmaning med tanke på att ytan som du har att jobba med är 16×16 och på den ska du enkelt uttrycka webbsidans färgschema, verksamhet och känslan samtidigt som den ska vara igenkännbar av dina besökare.

Varför? När syns den?

Det är en liten identifierings icon som förutom att dyka upp bredvid webbplatsens adress kommer även att finnas när du bookmärker sidan, i tabbar på webbläsare som stödjer det samt som Internet-genväg på ditt skrivbord eller andra mappar. Favicon är inte obligatorisk och dagens webbstandard kräver inte det heller, men den ger sidan såklart en liten touch på detaljnivå.

Online favicon generators

Nedan finns en kort lista av online favicon generators som sparar dig beskärningsarbete i Photoshop, själva bilden som ska konverteras till favicon måste fortfarande skapas innan.
Efter ett par tester kan vi avslöja att kvaliteten på framgenererad favicon varierar beroende på vilken generator man använder.

  • Favicon.cc – Bäst i test! Fin gränssnitt med stöd för ritfunktion, preview, settings och nedladdning.
  • Dynamicdrive.com/favicon – Enkel och snabb, dock behåller inte proportionerna på bilden.
  • Freefavicon.com – Väldigt enkel, skapa & ladda ner, stöd för animerade favicons.
  • Favicon.nu – På svenska, enkel generator, vanliga och animerade, ger dig även kodsnutten.
  • etc..

Så klart om man vill ha full kontroll över hela framställningen av favicon kan man skapa den och spara själv.

Skapa en favicon själv.

Ladda ner .ico file extension

Öppna inte Photoshop än. Innan framtagningen av en favicon måste du se till att du kan spara i .ico format. Till det behöver du ett tillägg så kallad file format extension för Photoshop (ladda ner tillägget från Telegraphics). Lägg in tillägget i din Photoshop mapp (instruktionerna finns i nedladdade paketet) sedan kan du öppna Photoshop. Om du hade den på se till att starta om programmet.

Designa din favicon

Öppna nytt dokument i Photoshop och välj dimensioner för din nya fil. Begränsa inte arbetsytan till 16×16 än efter som det blir svårt att vara kreativ. Skapa en fyrkantig fil t ex 64×64 eller 112×112. Sen när du är klar kan du minska bildens storlek genom att gå in på Image » Image size (Alt+Ctrl+i) och skriva in 16×16. Designmässigt försök att få in logotypen / en del av logotypel eller något som påminner om den tillsammans med respektive färger.

Inspirera dig och se hur andra webbdesigners utformar sina favicons från följande inlägg på Smashing Magazine: Inspire yourself 50 remarkable favicons.

Spara och ladda upp

Klart? File » Save as.. » (från rullgardinslistan välj) Windows Icon (ICO). Kom ihåg att du kan även spara i .gif (vanlig eller animerad) och .png (t ex för frilagnda filer) men ingen av dem två fungerar i Internet Explorer. Namnet på filen ska vara favicon. Ladda upp filen på din ftp in i rotmappen. Nästa steg blir att lägga in koden i (X)HTML-filen som ska anropa bilden:

För .gif eller .png använd respektive koder:

Klart!

Hjälp! Favicon syns inte?

Kontrollera namnet på filen

Filen ska heta favicon.ico precis som i (X)HTML-koden som anropar filen.

Kontrollera format på filen

Filens format ska vara .ico precis som i (X)HTML-koden som anropar filen. Du kan även använda .gif (även med animation) och .png men då tappar man stödet för Internet Explorer.

Töm Cache

Ibland blir hela sidan cached vilket innebär att den befintliga ”tomma favicon” laddas in automatiskt för att läsa in sidan snabbare. Gå in på webbläsarens inställningar och töm cache, sen testa att ladda om hela sidan.

Ligger favicon i rotmappen?

Filen favicon.ico ska ligga i rotmappen (ej undermapp) på din ftp tillsammans med den filen som anropar den t ex index.html, header.php etc..

Testa i olika webbläsare

För att utesluta möjligheten att det är något fel på själva favicon.ico eller (X)HTML-koden som anropar den testa att öppna sidan i olika webbläsare. Syns den fortfarande inte se till att gå igenom ovanstående punkter.

Testa validera din favicon

Och sist men inte minst testa att validera din favicon. På denna sida får du även förklaring om vad som kunde ha gått snett och tips på hur du kan åtgärda problemet.

Fernando Rodriguez Fernando Rodriguez
En duktig webbutvecklare från södra Italien som brinner för backend programmering och CSS. Specialist på Drupal och Wordpress, jobbar på Creative Workshop webbyrå sen Mars 2010.