Gör din egen favicon
En favicon är den lilla ikonen som syns bredvid webbadressen i adressfältet, eller som en ikon ifall du sparar en webbsida som ett bokmärke i din webbläsare. Om du tittar i adressfältet nu så ser du att jag har en favicon som består av ett j och ett h. Vad ska nu detta vara bra för då?
Alltid bra med visualisering
Jag nämnde tidigare att man får med ikonen när man sparar en sida som ett bokmärke och här är det väldigt bra med denna lilla ikon. När man som jag har hundratals bokmärken blir det otroligt mycket lättare att hitta det man är ute efter. Bokmärker jag tex Aftonbladets webbsida så ser jag direkt deras logga bland mina bokmärken istället för att läsa rad för rad tills jag hittar rätt. Ett annat plus är också att en webbsida med en favicon känns mer professionell. Hur skaffar man nu då en sådan här favicon till sin egen webbsida?
Ladda ner plugin
Det första du behöver är ett plugin till Photoshop som kan läsa och spara i formatet .ico. Detta plugin kan du ladda ner ifrån Telegraphics. När du sedan laddat ner och installerat detta plugin är det bara att sätta igång.
Starta Photoshop
Kör igång Photoshop och skapa dig en arbetsyta på 16px * 16px, ja du hörde rätt, en favicon är nämligen inte större än så. Tycker du att det är svårt att designa på en sådan liten arbetsyta kan du börja med en lite större, säg 50*50px.
Sedan är det bara att börja designa det du känner för, gärna något som har en igenkänningsfaktor från din websida som tex en logotyp eller liknande. När vi sedan är klar så ska vi minska vår favicon till dess rätta storlek 16*16px. Detta gör vi genom att gå till Image->Image Size och sätta width och height till 16px.
Nu är det dags att spara, det gör vi genom att gå till File->Save As och då ska vi välja var och hur vi vill spara vår favicon. Ikonen ska sparas i rotkatalogen hos din webbsida dvs i samma katalog där din index fil ligger. Den ska sparas i formatet .ICO som vi installerade tidigare.
Efter du tryckt Save i denna rutan dyker det upp en ruta till som frågar vilket ikon format du vill spara ikonen i, du ska välja Standard ICO.
Länka via HTML filerna
Nu ska vi lägga till länkningen från våra HTML filer. Det som behövs göras är att lägga till följande rad i head sektionen av webbsidan:
<link rel="icon" href="/favicon.ico" type="image/x-icon" />
Lägg till denna rad i de filer du vill att ikonen ska synas, sedan är det bara att ladda upp ikonen tillsammans med HTML sidorna till ditt webbhotell och vips så har vi fått en snygg ikon vid sidan av Url:en i adressfältet. Visst känns din webbsida genast en aning mer professionell.
Du har kommit till slutet av inlägget
Tyckte du inlägget var intressant? Läs dessa också:
4 kommentarer till Gör din egen favicon
Vill du ha en bild till din kommentar?Lämna en kommentar
Notiser
Google lanserar Font API
I dagarna har Google släppt ett antal stora nyheter. En av dom mest intressanta är Font API:et. Nu kan man ...Läs merInternet Explorer 9 kan bli riktigt bra
Microsoft är åter igen på gång med en ny version av sin hatade och oftast smutskastade webbläsare Internet Explorer. Version ...Läs merMest lyssnat i veckan
Kommenterar mest
Citat
Du och jag vi är av samma sort, var vi än är längtar vi alltid bort
—
Arkiv
Flickr
10 juni 2009, kl 11:25
Jättebra guidé men jag hittar inte head sektionen på mina html kodex.
Ska man gå in på utseénde och sedan välja edit och sedan finns det en panel på vänster sida. Vart hittar jag head eller finns den om man skrollar ner på stilmalen?
Skulle verkligen uppskatta hjälp, eftersom jag har designat en favicon.
Tack på för hand, Albin!
10 juni 2009, kl 12:28
Efter att ha kikat på din sida så antar jag att du använder WordPress. I ditt tema finns det en fil som heter header.php.
I den filen som innehåller huvudet av html dokumentet finns en head sektion. Där ska du lägga kodraden som jag beskriver ovan. Sedan laddar du upp faviconen i rotmappen på ditt webbhotell. Hör av dig igen om du inte hittar eller det inte fungerar.
14 juni 2009, kl 22:24
Haha, nu dumförklarar jag mig själv säkert ännu mera. Men jag undrar vad som menas med rotmappen. För jag verkar hitta det du menar, skulle det kunna vara så enkelt som att klicka på ”uppdatera fil” alldra längst ner på sidan!?
15 juni 2009, kl 8:17
Ja om du går till Utseende -> Redigerare så finns det till höger en länk som heter Rubrik (header.php) i den filen ska du lägga in kodraden någonstans mellan <head></head> och klicka på ”uppdatera fil”.
Sedan måste du lägga upp favicon filen på din webbserver också. Med rotmappen menas egentligen huvudmappen i hierarkin på servern. Där laddar du upp faviconen via tex ett ftp-program.
Hoppas du får ordning på det hela nu, hör av dig om du har fler frågor =)