47 besökare, 1 medlem och 1 Student är online nu
Loopia

webdesign och HTML

Favicon- egen ikon till webbplatsen

Gör en egen ikon till din webbplats som kan användas till favoriter i Internet Explorer, bokmärken i Firefox eller som ikon för genväg på skrivbordet. Prova själv att lägga till Webdesignskolan bland dina Favoriter/Bokmärken om du inte gjort det redan!

 

Favicon till Favorit eller Bokmärke:

 

Favicon till genvägar på Skrivbordet:

 

Skapa en ikon

Själva ikonen måste vara i formatet .ico och den vanligaste storleken är 16x16 pixlar eller 32x32 pixlar. Antalet färger bör inte vara mer än 256 färger.

Du skapar ikonen i ett program som kan spara i formatet .ico som tex Icon Forge. På adressen www.favicon.com Öppnas i nytt fönster (Open in new window)  finns utförligare information om Favicon och du kan även hämta programmet Icon Forge där.

OBS! Du kan använda många olika program för att skapa ikonen men viktigt är att den verkligen är i en ikon och inte en vanlig bild med filtillägget .ico

Du kan använda programmet Icon Forge Öppnas i nytt fönster (Open in new window)  som förutom att skapa ikoner även kan göra markörer (cursors). Bygg din ikon från grunden eller använd en befintlig logotype eller bild som förlaga och konvertera den till en ikon.

I exemplet nedan har vi importerat vår egen logotype i GIF-format till programmet Icon Forge:

Redigera och spara din ikon. OBS! Filnamnet måste vara favicon.ico

Mer information om hur du skapar ikoner finner du i hjälpfunktionen i respektive program.

 

Skapa din favicon direkt online

Nu kan du skapa din favicon direkt online! Besök HTML-kit Öppnas i nytt fönster (Open in new window)  och tjänsten "FavIcon from Pics" där du snabbt och enkelt kan göra om dina bilder till ikoner.

  1. Ange vilken bild du vill göra om till favicon genom att bläddra fram den på din dator:

  2. Skapa ikonen med knappen "Generate Favicon.ico"
  3. Du ser resultatet som en förgranskning och kan spara favicon som en ZIP-fil med knappen "Download Favicon":

  4. Packa upp innehållet i ZIP-filen som innehåller filen "favicon.ico" och mappen "extra":



    Mappen "extra" innehåller instruktioner för hur du tillämpar favicon.ico (du kan även läsa mer om detta nedan).

 

Tillämpa favicon.ico

När du skapat ikonen och gett den namnet favicon.ico tillämpar du den på dina sidor genom någon av följande metoder:

  1. Publicera filen favicon.ico till rotmappen på din webbserver. Ikonen ska då fungera tillsammans med alla sidor i undermapparna på din webbplats. Tips! För säkerhets skull kan du även lägga en ikon i varje undermapp där du har sidor som ska använda ikonen.
  2. Vill du att din favicon bara skall synas på vissa undersidor så lägger du den i valfri undermapp och anger sökvägen till ikonen inom <HEAD> på varje sida som ska använda ikonen. Om du tex har olika favicon.ico för olika sidor kan du använda denna metod. Ger även ett säkrare resultat i andra webbläsare än Internet Explorer:

    <HEAD>

    <link rel="shortcut icon" href="http://www.dinwebadress.com/mapp/    favicon.ico">

    </HEAD>


     

Felsökning

När du provar din ikon så kan det hända att den inte visas i Internet Explorer vilket kan bero på att du har sidan som Favorit sedan tidigare. Prova följande åtgärder:

  1. Radera den gamla favoriten och lägg till den på nytt.
  2. Rensa webbläsarens cacheminne med menyn "Verktyg/Internet-alternativ..." och knappen "Rensa tidigare" och eventuellt även knappen "Ta bort filer...".
  3. Stäng Internet Explorer och starta om webbläsaren på nytt.
  4. Uppdatera sidinnehåll i webbläsarens innehåll med snabbkommandot F5 eller knappen "uppdatera"
  5. Håll SHIFT+höger musknapp intryckt och dra ikonen lite åt höger. I vissa fall uppdateras ikonen till din favicon.ico direkt:

    SHIFT+Dra med höger musknapp:


    ...favicon visas:
  6. Publicera ikonen i binärt format (binary mode) i ditt FTP-program. Vissa program kan skicka filen i ASCII-format.

Räkna inte med att din favicon alltid fungerar då funktionen är något instabil i framförallt Internet Explorer medan däremot Firefox visar favicon korrekt. Läs mer om webbläsare i guiden "webbläsare och säkerhet" »
Läs mer om felsökning på www.favicon.com Öppnas i nytt fönster (Open in new window)