Browse All Articles
> Web 2.0 Favicon Tutorial
What you will need
Any version of Photoshop or similar product (examples in Photoshop)
FTP Access to your joomla install or ability to upload images within joomla administrator backend
1. Create Image
Lets start off with creating a new document - 400 x 400 pixels.
Use the Paint Bucket Tool with color - #333333 and fill your image.
Now Use the Ellipse tool to create a large circle, use any styling you want at this point, I went with a red fade.
Remember that any part you do thats small on the 400x400 will not be visible on the favicon 16x16.
Now add the Text you want to see, In this case I used a large letter T.
Remember the favicon is very small so its hard to make out words.
(unless you do a word scroller but that is for another tutorial)
Now save your file as a .jpg
2. Convert Image to Favicon
Open your internet browser and paste this link
-- Favicon Creator.
Favicon Creator will turn your large image into your joomla sites new favicon.
Once you have browsed to the above site, select Import Image from the left menu.
Browse to the file you created on your PC and saved as a JPEG
Select Keep Dimension
You will now see your favicon, you can adjust it using the built-in editor.
If you are happy, simply download it and you are done.
3. Add Favicon to Web Site
replace your favicon.ico within your www (root web) folder of your joomla install;
upload it to the site via media manager; or
use Joomla Administrator upload.
You now have a fancy new favicon.
You can experiment with Favicons within photoshop, the favicon creator website or use any of the ones created by other users.
There is the ability to create animated favicons that display scrolling text, have a look at the examples on the Favicon site.
Note: this can be used for all non joomla sites as well.