A leírás bemutatja hogy mint minden másra, Favicon készítésre is alkalmas az ingyenes Gimp rajzolóprogram.

cij4080310092738.jpg

1, Készítsünk egy 160×160-as új képet.
Azért kell ekkora, hogy kényelmesen „elférjünk” benne, majd a végén készítünk belőle 16×16-ost. Nagyítsuk fel a képet, hogy jó látható legyen.

3zfu080310075058.jpg

2, Rajzoljuk meg a kívánt ikont. Itt használhatjuk a kreatív energiáinkat rendesen. A leírás részekén letölthető és az oldal irányelveinek megfelelően felhasználható a képeken látható ikon.

qj6c080310075300.jpg

3, Csökkentsük az ikon 16×16 pixeles méretre, a képen látható módon (images/scale_image). Élesítsük egy picit az ikonon, mert a méret csökkentésével egy kicsit elmosódottabbak lettek a körvonalak. Az élesítés funkciót mindig használhatjuk, ha kicsinyítünk. (filter/enhance/sharpen)

tier080310075511.jpg

Méret csökkentés után élesítsünk a fotón:

p8qm080310075216.jpg

4, mentsük el a képet.
Első lépésben a képen látható módon a rétegeket összevonjuk.
Majd mentés másként (file/Save_AS SFT+CTRL+S) és adjuk meg a favicon.ico nevet. A mentésnél még lesz egy felbukkanó ablak de nyomjunk mentést.
A fájl kiterjesztésből a Gimp már tudja hogy ikonként mentünk.

Rétegek összefésülése:

6axk080310075413.jpg

A Gimp a kiterjesztésből felismeri a mentési formátumot, nem szükséges külön beállítás.

jlf0080310092308.jpg

Ha megtekintjük a mappát ahová a favicon.ico fájlt mentettük, rögtön látszik a produktum.

t0y2080310092156.jpg

5. Favicon.ico megjelenítés, program a HTML kódban. Bár fejlettebb böngészők mint a Firefox alapból megtalálja a favicon.ico állományt anélkül, hogy azt be kéne linkelni a HTML kódunk fejléc részébe. A favicon.ico állományunkat töltsük fel. (lehetőleg oda ahol az index.html|php fájlunk található, ha máshová tesszük akkor az útvonalakra figyeljünk.) De gondolván a népszerűbb ám gyengébb böngészőkre is íme a kód: (Elhelyezni a head és /head közötti HTML részbe kell)

  1. <head>
  2. <link rel=”icon” href=”http://www.domain.tld/favicon.ico” type=”image/x-icon” />
  3. <link rel=”shortcut icon” href=”http://www.domain.tld/favicon.ico” type=”image/x-icon” />
  4. </head>

Animált (Mozgó) favicon készítése és beillesztése:
A fentiek alapján a mozgást a rétegeken el kell készíteni, majd *.gif formátumba mentsük el a 16×16 pixeles képet. Nem árt egy *.ico állomány is hátha nem fog működni mindenkinek, minden böngészőben. Töltsük fel az állományokat a tárhelyre, és a html fejlécbe helyezzük el az alábbi kódokat.

  1. Normál ikon belinkelése a fejlécbe
  2. <link rel=”shortcut icon” href=”http://www.domain.tld/favicon.ico” type=”image/icon” />
  4. Mozgó Gif ikon belinkelése
  5. <link rel=”shortcut icon” href=”http://www.domain.tld/favicon.gif” type=”image/gif” />

Miért jó ha van favicon.ico állományunk?

  • az webszerver szoftvert (Apache) megkíméljük a rengeteg hiba bejegyzéstől a log fájlba
  • néhány 404-es oldalt lekérést megtakaríthatunk vele
  • személyesebbé tehetjük az oldalunkat vele
  • Egy egyedi favicon-ra a felhasználók is emlékezhetnek, miközben a saját könyvjelzőik között kutakodnak az oldalunk után.

Nem jelenik meg az ikon a böngészőben:

  • Nincs feltöltve az favicon.ico állomány
  • Rossz az útvonal a favicon.ico állományra
  • Rossz a belinkelés, vagy rossz helyen van a kód
  • Hibás a favicon.ico állomány (vagy nem egyezik a kiterjesztés és a típus)
  • A böngésző Cacheből nyomja az oldalt (töröljük (az előzmények megőrzése 21 napig ???))
  • Firefoxban látszik de más böngészőben nem? – nincs belinkelve; hibás kód; rossz helyen van a forrásba
  • Localhoston még jó volt.. :-) ..fel kéne tölteni

Megjegyzés:
Érdemes minél kevesebb színnel és formával megoldani, mivel a méret elég kicsi.

A legszebb faviconok gyűjteménye:

Linkek ingyenes Faviconokra:

Linkek Favicon HTML kódokra:

Ingyenes Online favicon generátorok:

A csatolt állományok között elérhető a szerkeszthető GIMP XCF fájl.

nincs kapcsolódó bejegyzés.