News Feed E-mail

Get How-To's right in your inbox. Subscribe to the HowToJoomla! news feed e-mail. Just enter your email address here:

Delivered by FeedBurner

Affiliates

Azrul's JomComment
JoomlaShack
iJoomla
The Joomla! Store
Member of W3C Sites dot com
How to change your favicon PDF Print E-mail
Written by Cory   
Tuesday, 08 May 2007

The word "favicon" is short for "favorites icon", and it is the 16x16-pixel icon that is associated with your website and appears in the browser address bar and favorites menu (and in Firefox and Internet Explorer 7, it also appears on the browser tab). For this website, I am using the default Joomla! favicon because this site is a site about Joomla! The image below shows what your browser's address bar should look like when visiting this site.

All Joomla! installations come with that favicon installed, and a common mistake by many webmasters is to ignore the favicon, thereby keeping the default Joomla! icon for their site. Unless your site is about Joomla, you should not be using the default favicon. A good habit to get into when developing sites with Joomla! is to change the favaicon and use something more fitting for your site, like your logo. This article will explain how to create a favicon and then how to replace the default icon with your icon.

Creating your favicon

For the sake of simplicity, this section assumes you are using your logo for your icon.

Step 1: Shrink your logo

Using graphics software (like Adobe Fireworks or Adobe Photoshop), shrink your logo so that it will fit into a 16-pixel by 16-pixel square*. Then, save your new image as a 16x16 PNG or GIF file called "favicon.png" or "favicon.gif".

* It helps if your logo has relatively square dimensions, like the Joomla! logo.

Step 2: Convert the image to "favicon.ico"

This step is actually easier than it may seem. There are several options for doing this step, but my favorite is a web-based tool by Dynamic Drive called the "FavIcon Generator". You simply click the "Browse" button to locate your favicon.png or favicon.gif file, then click the "Create Icon" button to convert your image. The generator will then provide you with a favicon.ico version of your logo. It really is that simple.

Favicon maker- Create a favicon from any image

Step 3: Replace the default icon with your own

The default favicon is located in the "images" directory of your Joomla! installation. For example, on this site the favicon is located at http://www.howtojoomla.net/images/favicon.ico. Remove the default icon from your site, and upload your new icon in its place.

Done.

You may not be able to see your new favicon right away. The reason for this is because the default icon is probably still in your browser's cache. If you clear your browser's cache, you will be able to see the new favicon.

The favicon is a small thing that really will not affect the performance and look of your site, but paying attention to little details like that will give your site a more finished, professional feel.

As always, please feel free to post any questions or comments.

Trackback(0)
Comments (58)add comment
How would I go about setting up different icons for different pages? Especially forum pages, etc.
1

report abuse
vote down
vote up
May 10, 2007
Votes: -1
Hi Stephan,

That's a good question. I will have to look into that.

Cory
2

report abuse
vote down
vote up
May 10, 2007
Votes: +0
mkhor: ...
Good tip! But i see this site is using joomla's default icon.
3

report abuse
vote down
vote up
May 11, 2007
Votes: -1
Hi mkhor,

You are absolutely right. Since this site is about Joomla, I felt it was appropriate to use the default icon.

Cory
4

report abuse
vote down
vote up
May 11, 2007
Votes: +0
Now how do you add an animated favicon? These are really cool, though they only work with FireFox for the most part at the moment. Check out http://rgator.com with FireFox to see what I mean.

R
5

report abuse
vote down
vote up
May 12, 2007
Votes: +0
You know, your instructions must only be for 1.0 because this is not working with the 1.5 Beta 2. There is no favicon in the “root” image folder. I have found three different files throughout all the installation and I have replace each with one of my favicons and no luck yet.

Any ideas?

R
6

report abuse
vote down
vote up
May 12, 2007
Votes: +0
Finally got it, but I am not sure which switch did the trick!

Cool!

NOW TO MAKE AN ANIMATED FAVICON WORK!

R smilies/cool.gif
7

report abuse
vote down
vote up
May 12, 2007
Votes: +0
Ahmad Alfy: ... http://www.alfystudio.com
You can also use this code :

" rel="shortcut icon" />


on your head code and insert your favico.ico on the template folder in case you wanted the icon to change with the template

This way we have different icons on different templates smilies/grin.gif
8

report abuse
vote down
vote up
May 14, 2007
Votes: +0
Ahmad Alfy: ... http://www.alfystudio.com
opps! here is the code :

" rel="shortcut icon" />
9

report abuse
vote down
vote up
May 14, 2007
Votes: +0
Ahmad Alfy: ... http://www.alfystudio.com
sorry the comment system keep blocking the code smilies/angry.gif


smilies/grin.gif smilies/grin.gif
10

report abuse
vote down
vote up
May 14, 2007
Votes: +0
nivaskapil: ...
hi yaar,
can you help me with how to create a structure like the one in
http://www.compassdesigns.net/joomlabook/
check where the login form and about the site and about compass designsmodule resides

can you help me out how to use the same kind of effectr in sites.

with regards
K.Nivas
11

report abuse
vote down
vote up
May 17, 2007
Votes: +0
Hi nivaskapil,

The template he is using for that site is the Nova template from JoomlaShack.com, and you can download it there for free.

Cory
12

report abuse
vote down
vote up
May 17, 2007
Votes: +0
azman: ...
i was install joomla at localhost. I trying to copy new favicon.ico into /image folder but it seen doesn't change to new icon, it still keep showing joomla icon, but if rename the new favicon to other name instead of favicon.ico, i will work fine. Why?please advice
13

report abuse
vote down
vote up
May 20, 2007
Votes: +0
nivas: ...
hi yaar,
for my website i am in need to arrange a content in such an syntax that i need subcategories within cattegories.is it really possible in joomla.

can you help me out with subcategory modules in joomla
14

report abuse
vote down
vote up
June 02, 2007
Votes: +0
My fav icon appears in the browser address bar but not in the bookmarks. How can I fix this? Thanks!
15

report abuse
vote down
vote up
June 05, 2007
Votes: +0
Hi Goss,

That has something to do with your browser. You probably have the Joomla favicon saved in your browser's cache. The only thing I can suggest is to clear your browser's cache.

Cory
16

report abuse
vote down
vote up
June 05, 2007
Votes: +0
I just found one free favicon generator.
http://www.webscriptlab.com, F...graphics.
17

report abuse
vote down
vote up
June 07, 2007
Votes: +0
DragonTail: ... http://thedeath.org
http://forum.joomla.org/index....714.0;wap2

found this googlin from rrag the guy made that sites favicon
18

report abuse
vote down
vote up
June 23, 2007
Votes: +0
melias: ...
I need help! This has been driving me crazy all day. I am a newbie to anything remotely related to Mambo or web developing or anything so bear with me. I've already created the new favicon I would like to replace but how in the world do I replace it? I know that it is in (mywebsite)/images but how do I get there? If someone could put real simple steps of how to do this I would GREATLY appreciate it!
19

report abuse
vote down
vote up
June 29, 2007
Votes: +0
Hi melias,

How do you normally load files to your web server? You should have some sort of ftp access or cPanel access or something like that.

Cory
20

report abuse
vote down
vote up
June 29, 2007
Votes: +0
thank you for the tip smilies/grin.gif
21

report abuse
vote down
vote up
August 29, 2007
Votes: +0
I generated the favicon per your instruction and saved to desktop.
I went into the www and public_html folders and deleted the favicon.ico files, uploading the new file to each.
I emtied my browser cache, both firefox and safari (using a mac).
Still not getting the new favicon.
Any ideas?
Thanks in advance.
Warning. I am a newby.
22

report abuse
vote down
vote up
September 06, 2007
Votes: +0
Hi Lynn,

The favicon that I see on your site looks like the top of your logo. Is that what it should be? If so, you did it correctly. I use a PC, so I am not sure how to properly clear the browser cache on a Mac.
23

report abuse
vote down
vote up
September 06, 2007
Votes: +0
Got it Cory, thanks. I finally figured it out.
Thanks so much for the great tips.
24

report abuse
vote down
vote up
September 08, 2007
Votes: +0
Wow, Cory. I just followed your instructions and bam -- I now have a new favicon on my site. This coming from someone who is not a programmer. Thank you for your website, and sharing your expertise on Joomla. I've been rather lost since the developer who programmed my site basically hightailed it outta town without putting on any of the finishing touches or leaving behind instructions to glean the best out of Joomla. I am so happy I came upon your site.

Thank you again.
25

report abuse
vote down
vote up
September 20, 2007
Votes: +0
Hi Linda,

I'm glad you found this useful. I hope you are able to get the finishing touches on your site.

Good luck!
26

report abuse
vote down
vote up
September 20, 2007
Votes: +0
webmaster: ... http://www.10-6-club.com
Didn't work in IE7, works ok in Firefox
27

report abuse
vote down
vote up
October 11, 2007
Votes: +0
Hi Cory,

I need some help please!

Ive created a new favicon on my new Joomla site. I followed your instructions to change the default favicon but am getting nowhere fast.

1. I tried to delete the /images favicon.ico but the file does not delete. I tried to upload the new favicon.ico file but Joomla doesnt allow this file to overwrite the existing file in /images folder.

2. I then uploaded a favicon.ico file with a different name into /folders. I then tried to replace the file name in the Global Config field but get this error report...An Error Has Occurred! Unable to open config file to write!...Although the status of the configuration.php file is WRITEABLE.

Any help would be appreciated
Ian
28

report abuse
vote down
vote up
October 17, 2007
Votes: +0
Hi Ian,

It sounds like the favicon.ico file in your /images folder is not writeable, which is why you are unable to replace it. You need to change permissions on that file.

Good luck!
29

report abuse
vote down
vote up
October 17, 2007
Votes: +0
Very good information..
Very simple and useful.
30

report abuse
vote down
vote up
October 24, 2007
Votes: +0
Marcus: ... http://joomla.org
thanks 4, easy, simple...brilliant steps

much appreciated

Marcus.
31

report abuse
vote down
vote up
October 30, 2007
Votes: +0
very easy step .... thanks a lot.
32

report abuse
vote down
vote up
November 01, 2007
Votes: +0
i've created a new favicon named favicon2.ico

when i reload my website it displays my new favicon for 1-2 seconds then it goes back to default joomla favicon.ico....

can anyone help me with this?

thanx in advance
33

report abuse
vote down
vote up
November 13, 2007
Votes: +0
thepcguyonline.com: ... http://thepcguyonline.com
here is what worked for me.

ico wasn't showing but i uploaded my icon and renamed it to something else like pcg.ico
i then went into the global config and renamed the default which was set to favicon.ico to pcg.ico. hit save, apply. and bingo it worked. copying or renaming it to favicon did not work for me, but renaming it did.
34

report abuse
vote down
vote up
November 17, 2007
Votes: +0
dwyne nelson: ... http://www.relatos.ws
Thanks a lot for the heads up. that makes a l lot of sense, i will have to get into that.
35

report abuse
vote down
vote up
November 20, 2007
Votes: +0
thank you very much for the article. great stuff.
36

report abuse
vote down
vote up
November 20, 2007
Votes: +0
john beamer: ... http://f1pitlane.net
In joomla 1.5 rc3 you need to put the favicon in you template file, not in the images file ...

Thanks Cory for the tips
37

report abuse
vote down
vote up
December 01, 2007
Votes: +0
The pc guy online . com
that animated version didn't work for me but so far so good! smilies/smiley.gif
38

report abuse
vote down
vote up
December 01, 2007
Votes: +0
Cory, I want to say THANK YOU for providing a great site and a great service to us all. I saw your little bio and blog page as well. Awesome for you to keep up the family life, great job, and all the sites. Very well done and much appreciated.
39

report abuse
vote down
vote up
December 21, 2007
Votes: +0
Thanks, Jay! smilies/cheesy.gif
40

report abuse
vote down
vote up
December 21, 2007
Votes: +0
Hey, just wondering .
lol how do you clear your browsers cache?


thanks smilies/grin.gif
41

report abuse
vote down
vote up
January 29, 2008
Votes: +0
Hi Casi, It depends on which browser you are using. For Firefox, click Tools -> Clear Private Data, then make sure the "Cache" box is checked, and click the Clear Private Data button.
42

report abuse
vote down
vote up
January 29, 2008
Votes: +0
brin: ...
For those of you who can't not view there folders, it might be because you used fantastico. If so then reinstall joomla. Here is a link on the how to.

http://www.compassdesigns.net/tutorials/joomla-tutorials/how-to-install-joomla-1.5.html
43

report abuse
vote down
vote up
February 25, 2008
Votes: +0
Brin: ...
Hey guys another tip for the ones who can't find the Joomla folder in there FTP.......it might be in public_html folder....search for it is there somewhere.

I recommend not using fantastico --- it's a pain. Just upload the files.
44

report abuse
vote down
vote up
February 26, 2008
Votes: +0
jhon: ...
hi ,i tried using your method but none works i am using joomla 1.5.1 i.e the latest one but the favicon dosent gets removed at all
please help
45

report abuse
vote down
vote up
March 03, 2008
Votes: +0
Timmy Taylor: ... http://www.timmytaylor.com
I'm in the middle of Transferring my old-school html site to a new joomla one, and it was taking me forever to find where the favicon goes. I thought it always had to be in the main site folder, not images, but there you go. Ok, now it's time to play with components......

Thanks Cory
46

report abuse
vote down
vote up
March 05, 2008
Votes: +0
Ash Nallawalla: ... http://www.netmagellan.com
No need to clear the cache, as you will delete more than you need to. Just load the new favicon by viewing it in your browser, e.g. in mine it is http://www.trainsem.com/images/favicon.ico. This will replace the version in the cache and you are all set.
47

report abuse
vote down
vote up
March 14, 2008
Votes: +1
Roman: ... http://shinee.org/
Hi,
I have Joomla v.1.5.2, I have looked and looked for this favicon file everywhere! I still can't seem to find it. If anyone can help me please do so. I really need it. smilies/sad.gif

-Roman
48

report abuse
vote down
vote up
March 27, 2008
Votes: +0
In 1.5.2, the favicon is in your template folder.
49

report abuse
vote down
vote up
March 27, 2008
Votes: +0
Adaptiv Media: ... http://www.adaptivmedia.com/
Dynamic Drive has a cool favicon generator. It allows you to make transparent ones too.. How do i clean an old favicon from my cache when i update it to a new one? I just emptied my temporary files but IE7 is still showing up the old one. Any ideas?
50

report abuse
vote down
vote up
March 31, 2008
Votes: +0
ken: ...
for me on joomla 1.5.1 the favicon only works when i put www. in front of my web name when i don't add www. joomla favicon shows up can you help me with this plzz its driving crazy
51

report abuse
vote down
vote up
April 08, 2008
Votes: +0
Casey Carnnia: ... http://www.carnnia.com
Ash Nallawalla hit the nail on the head. The trouble with the favicon that doesn’t want to go away (J 1.5) is in the cached data.
52

report abuse
vote down
vote up
April 08, 2008
Votes: +0
neeraj: ... http://home
I have made favicon icon according to your topic but it is not working properly
give me advise
53

report abuse
vote down
vote up
May 06, 2008
Votes: +0
Hi Neeraj, you probably need to clear your browser's cache in order to see the new favicon.
54

report abuse
vote down
vote up
May 06, 2008
Votes: +0
Andrej: ... http://hop.lt
Good site but could u fix your rss feed smilies/grin.gif
55

report abuse
vote down
vote up
May 08, 2008
Votes: +0
This is a joomla! 1.0.13 site...

Hmm... My favicon shows when I log in as admin... and it showed in a template I used to use. I just installed a new template, and no favicon... Not even the joomla default fav icon. What in the template could prevent the favicon from showing?

Any help/suggestions would be appreciated.

My favicon: http://pack162ct.org/cms/images/favicon.ico
56

report abuse
vote down
vote up
May 13, 2008
Votes: +0
Hi Mark,

The template you are using does not reference the favicon. In a Joomla 1.0.x template, there is a php command that should go between the "HEAD" tags called "mosShowHead()", and it appears the template you are using does not have that.
57

report abuse
vote down
vote up
May 13, 2008
Votes: +0
Thanks, Cory! You were absolutely right!

I was able to copy/paste the appropriate information and get the favicon to show.
58

report abuse
vote down
vote up
May 13, 2008
Votes: +0

Write comment
quote
bold
italicize
underline
strike
url
image
quote
quote
smile
wink
laugh
grin
angry
sad
shocked
cool
tongue
kiss
cry
smaller | bigger

busy
 
Tag it:
Delicious
Digg
Technorati
Next >
Advertisement

About HowToJoomla

HowToJoomla was started in September 2006 by me, Cory Webb, a long-time Mambo/Joomla user with a desire to give back to the community that has given so much to him.

HowToJoomla is not the best, most comprehensive Joomla tips site out there. That's not the goal. The goal is to share some of the knowledge and experience that I have gained through years of using the world's best content managment system. I hope that you will find this site useful and visit often. As I come across new tips and ideas, I will post them here for all to see.

I hope you enjoy using HowToJoomla and find it very useful.

Please take some time to read the Disclaimer.

Thanks for visiting!

About Me

I am a 28-year-old husband and father of a beautiful baby girl named Lucy. I have a degree in Electrical Engineering from the University of Texas at Austin, an MBA from Baylor University, and over 4 years experience working with the Mambo/Joomla CMS.

On February 1, 2008, I started a web design, development, and consulting company specializing in designing and developing custom Joomla-powered websites. The new company is aptly named Cory Webb Media, LLC. The double meaning is purely unintentional, but with a last name like "Webb" it is difficult to escape the obvious puns. If you are looking for professional assistance with your website, please feel free to contact me to discuss your project.

I also run HowToJoomla, CoryWebb.com (my personal website/blog), and JoomlaForm.com (a site dedicated to promoting good design in the Joomla! community). In my spare time (if there is such a thing), I volunteer with the youth ministry at my church.

Copyright © 2006 - Cory Webb Media, LLC - All rights reserved.
Powered by Joomla!