A leírás bemutatja hogy mint minden másra, Favicon készítésre is alkalmas az ingyenes Gimp rajzolóprogram. 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. 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. 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.
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) Méret csökkentés után élesítsünk a fotón: 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:
A Gimp a kiterjesztésből felismeri a mentési formátumot, nem szükséges külön beállítás. Ha megtekintjük a mappát ahová a favicon.ico fájlt mentettük, rögtön látszik a produktum. 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
á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 /> 3. 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: Az 50 legszebb favicon.ico Kedvenc ikonok The Favicon Gallery 15,000 favicon a galériában Favicon gyűjtemény Linkek ingyenes Faviconokra: www.arth2o.hu Ingyenes favicon linkek Animált Ajax betöltést jelző ikonok Linkek Favicon HTML kódokra: Favicon. ico Hogyan helyezzük el HTML kódunkban Favicon.ico állomány megjelenítése Hogyan készítsünk más rajzolóprogrammal favicont Favicon IE-ben Mozgó favicon Ingyenes Online favicon generátorok: Anti favicon
Anti favicon png2ico Online favicon generátor feltöltött képből Favicon generátor Animált favicon készítés feltöltött állományból Ajax loading animated Gif A csatolt állományok között elérhető a szerkeszthető GIMP XCF fájl. nincs kapcsolódó bejegyzés. Téma: Webalkalmazás fejlesztés Forrás: http://opendir.hu Szerző: ArtH2O Erdeti URL: http://opendir.hu/webalkalmazas/gimp/92-keszitsunk-favicont-az-opendir-hu-site-nak/