Annons:
Etikett03-html
Läst 6496 ggr
johan-ahlback
2/11/10, 2:04 PM

FavIcon (Favorites Icon)

Bild 1. Klicka för att öppna i full storlek.

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:

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

Annons:
[Tassy]
2/11/10, 3:04 PM
#1

Kanonbra! Precis vad jag letade efter ju Skrattande

AndreasS
2/11/10, 4:40 PM
#2

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

Favicon generator

Och det ska räcka med bara fungerar i FF i alla fall.


Mvh: Andréas "Bubben" Sandberg | 021media.se - Västerås hetaste nyhetsbilder | En blogg om min vardag, med psykisk ohälsa - Bubben´s | Forza Grönvitt 100% kärlek

johan-ahlback
2/11/10, 4:57 PM
#3

#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

AndreasS
2/11/10, 4:59 PM
#4

Okej, där ser man.


Mvh: Andréas "Bubben" Sandberg | 021media.se - Västerås hetaste nyhetsbilder | En blogg om min vardag, med psykisk ohälsa - Bubben´s | Forza Grönvitt 100% kärlek

Linnea
2/12/10, 11:14 AM
#5

En sån vill jag ha!

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

Frida
11/28/10, 3:13 PM
#6

"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

Annons:
Mari
11/29/10, 12:01 PM
#7

#6 Oj, jag som nyligen har trilskats med det där men jag kommer tyvärr inte ihåg hur jag gjorde. ikonen ligger direkt i huvudmappen hos mig, tror bara det är någonstans bland inställningarna man ska skriva in namnet på ikonen :)

Sajtvärd för Djurfoto
www.mariekengren.se

Upp till toppen
Annons: