1. lépés: Készítsünk egy 16x16 pixel méretű képet. Ehhez használhatjuk az ingyenes Gimp alkalmazást, vagy akár egy online szerkesztőt is.
2. lépés: Konvertáljuk .ico formátumba. Gimp-ben van lehetőség .ico formátumba mentésre, de az első lépéshez hasonlóan, számos webes alkalmazás is létezik erre a feladatra.
3. lépés: Az így elkészített fájl kiterjesztése .ico lesz. Másoljuk ezt a fájlt a templates/<sablon neve>/ könyvtárba és nevezzük át favicon.ico névre.
4. lépés: Nyissuk meg a böngészőnket. Látható az új ikon? Ha igen, akkor minden működik. Ha nem, akkor sem biztos hogy valamit rosszul végeztünk. A böngészőket úgy készítették, hogy minimális legyen az adatforgalom, ezért nem frissítik a favicon-t minde oldalmegjelenítéskor. Az oldal frissítése (F5) sem segít minden esetben. Tegyük a következőt:
Ha ez nem működik, akkor törölni kell az átmenetileg tárol internet fájlokat és az előzményeket, majd újból megnyitni az oldalt.
Néhány sablon olyan kódot tartalmaz, amely átirányítja a böngészőt egy másik könyvtárba, vagy egy másik fájlhoz. Hogy meghatározzuk, hol kellene az új favicon-nak lennie, vizsgáljuk meg a http://example.com/templates/<sablon neve>/index.php fájl forráskódját. A következő kódot keressük:
<link rel="shortcut icon"
Itt megtaláljuk a könyvtár és a fájl nevét. Másoljuk az ikont ebbe a könyvtárba és nevezzük át erre a névre. Győződjünk meg arról, hogy a szervernek van hozzáférése ehhez a fájlhoz. Nézzük meg az alábbi példát.
<link rel="shortcut icon" href="http://www.example.com/templates/<sablon neve>/icon/favicon.ico" />
Forrás: Joomla! Documentation