03. HTML

FavIcon (Favorites Icon)

2010-02-11 14:04 #0 av: johan-ahlback

En FavIcon är en liten ikon som visas i samband med din sida, till exempel i adressfältet. Den visas också i din favoritlista eller bland bokmärken och det blir därför lättare att hitta. Nu ska vi skapa en FavIcon.

Först ska vi ta reda på vad vi behöver.

Ett program där du kan skapa din icon och spara den till png (de flesta program alltså)
Ett program som konverterar png filen till en .ico fil. (Imagicon är ett bra sådant)
Det finns även sidor där du kan ladda upp en fil och få tillbaka den som ico.

Det är faktiskt allt som behövs så nu ska vi kolla på lite andra saker.

Hur stor ska den vara?

Oftast visas en FavIcon i 16x16 px så det är en bra storlek. Men ibland kan den visas som större. Oftast gör inte det någonting då det handlar om så små storlekar. Men vill man ha bra kvalitet på sin FavIcon så kan man göra den större. Men jag rekomenderar att inte gå över 32x32px på grund av laddningstiden.

Hur många färger ska den innehålla?

Man ska försöka att hålla sig under 16 färger. Detta kan man ställa in när man sparar från photoshop eller andra program. Man kan göra en FavIcon med transparent bakgrund men kom ihåg att det transparenta läggs till som en färg. Att man inte ska ha fler färger beror på laddningstider och filstorlek.

Nu kan vi börja skapa vår FavIcon.

Jag kommer använda bokstaven M i min FavIcon med samma grafiska profil som headern på min hemsida. Jag kommer att skapa den i photoshop i storleken 32x32px.

När du är klar med din FavIcon så sparar du den som png med namnet favicon.

För er som använder photoshop:

Gå in under arkiv och spara för webb och enheter (file - save for web and devices)
Då får du upp en ruta där du kan ställa in hur många färger du vill ha. Välj png-8 och 16 färger.
Klicka på spara och döp den till favicon.

Nu ska vi konvertera den till en ico fil.

Öppna Imagicon och dra din png till rutan. Då skapas en ico-fil i samma mapp som png-filen. (i andra program kanske du måste öppna filen i programmet. Och det kanske finns andra inställningar du måste göra)

Lägga till din FavIcon på din sida.

Om man placerar en favicon.ico i sin huvudmapp på servern så ska den visas automatiskt. Men detta fungerar inte alltid så jag brukar lägga till två rader kod i html dokumenten. Jag är inte säker på att båda behövs men jag blev rekommenderad att göra så. Dessa raderna är:
<link rel="icon" href="favicon.ico" type="image/x-icon">
<link rel="shortcut icon" href="favicon.ico" type="image/x-icon">

Sen är det klart.

 

 

Ålder föder inte visdom. Eftertanke gör det.

Värd för Trackmania iFokus och medarbetare på Hemsidor iFokus

MadeByJohan.se

Anmäl
2010-02-11 15:04 #1 av: [Tassy]

Kanonbra! Precis vad jag letade efter ju Skrattande


Anmäl
2010-02-11 16:40 #2 av: AndreasS

Hittade en sida där man skapa sin icon från vilken bild som helst.

Favicon generator

Och det ska räcka med bara <link rel="shortcut icon" href="din mapp/favicon.ico" /> fungerar i FF i alla fall.

Mvh: Andréas Sandberg | 021media.se - Västerås hetaste nyhetsbilder | En blogg om oss och vår vardag - Bubben´s & Bella´s Blogg | Forza Grönvitt 100% kärlek

Anmäl
2010-02-11 16:57 #3 av: johan-ahlback

#2 ja men det kan uppstår problem. Jag fick till exempel inte upp iconen. och jag sitter på ett ubuntu anpassat firefox.

Ålder föder inte visdom. Eftertanke gör det.

Värd för Trackmania iFokus och medarbetare på Hemsidor iFokus

MadeByJohan.se

Anmäl
2010-02-11 16:59 #4 av: AndreasS

Okej, där ser man.

Mvh: Andréas Sandberg | 021media.se - Västerås hetaste nyhetsbilder | En blogg om oss och vår vardag - Bubben´s & Bella´s Blogg | Forza Grönvitt 100% kärlek

Anmäl
2010-02-12 11:14 #5 av: Linnea

En sån vill jag ha!

Skynda långsamt så går det fortare
Sajtvärd på
Fälttävlan

Anmäl
2010-11-28 15:13 #6 av: Frida

"Min" hemsida är skapad med WordPress, har testat att ha .ico-filen i huvudmappen samt themesmappen men inget händer. Frågan är: vilken av alla filer ska den där koden in i för att det ska fungera och i vilken mapp borde favicon.ico ligga?

Värdinna på Fantasy
Medarbetare på World of Warcraft

Anmäl

Det finns en till kommentar till den här diskussionen. Den är bara synlig för medlemmar på iFokus. För att läsa kommentaren, logga in eller registrera dig på iFokus.