How to change your favicon

Welcome to the new HowToJoomla!

We've completely revamped the design to make the site easier to read and easier to navigate. We hope you like the changes!

May 08, 2007 | by Cory | 111 Comments

Update (February 9, 2009): A new article has been written that tells how to change your favicon in Joomla! 1.5.

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.

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.

About the Author

Cory Webb In the years since Joomla! was founded, Cory has built dozens of websites with Joomla! and helped thousands of people find answers to questions about Joomla! through HowToJoomla.net. Cory has also written a book about Joomla titled Beginning Joomla! Web Site Development published by Wrox in April, 2009. In February of 2008, Cory founded Cory Webb Media, LLC, where he provides consulting and web development services for companies of all sizes. You can follow Cory on Twitter @corywebb, or become a fan of Cory Webb Media on Facebook.

Set as favorite

Bookmark

Email This

Trackback(0)

TrackBack URI for this entry

Comments (111)

Subscribe to this comment's feed

...
written by Stephan Hodges, May 10, 2007

How would I go about setting up different icons for different pages? Especially forum pages, etc.

...
written by Cory, May 10, 2007

Hi Stephan,

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

Cory

-3

...
written by mkhor, May 11, 2007

Good tip! But i see this site is using joomla's default icon.

-4

...
written by Cory, May 11, 2007

Hi mkhor,

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

Cory

-1

...
written by Rgator, May 13, 2007

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

-1

...
written by Rgator, May 13, 2007

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

...
written by Rgator, May 13, 2007

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

-1

...
written by Ahmad Alfy, May 14, 2007

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

...
written by Ahmad Alfy, May 14, 2007

opps! here is the code :

" rel="shortcut icon" />

...
written by Ahmad Alfy, May 14, 2007

sorry the comment system keep blocking the code smilies/angry.gif

-1

...
written by nivaskapil, May 17, 2007

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

-1

...
written by Cory, May 17, 2007

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

...
written by azman, May 20, 2007

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

...
written by nivas, June 02, 2007

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

...
written by Goss, June 05, 2007

My fav icon appears in the browser address bar but not in the bookmarks. How can I fix this? Thanks!

...
written by Cory, June 06, 2007

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

...
written by nicolas, June 07, 2007

I just found one free favicon generator.
http://www.webscriptlab.com, F...graphics.

...
written by DragonTail, June 23, 2007

http://forum.joomla.org/index....714.0;wap2

found this googlin from rrag the guy made that sites favicon

...
written by melias, June 29, 2007

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!

...
written by Cory, June 29, 2007

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

...
written by islatur, August 29, 2007

thank you for the tip smilies/grin.gif

...
written by Lynn, September 06, 2007

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.

...
written by Cory, September 07, 2007

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.

...
written by Lynn, September 09, 2007

Got it Cory, thanks. I finally figured it out.
Thanks so much for the great tips.

...
written by Linda, September 20, 2007

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.

...
written by Cory, September 21, 2007

Hi Linda,

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

Good luck!

-1

...
written by webmaster, October 11, 2007

Didn't work in IE7, works ok in Firefox

...
written by ian elsby, October 17, 2007

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

...
written by Cory, October 17, 2007

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!

...
written by Adodis, October 24, 2007

Very good information..
Very simple and useful.

...
written by Marcus, October 30, 2007

thanks 4, easy, simple...brilliant steps

much appreciated

Marcus.

...
written by steven, November 01, 2007

very easy step .... thanks a lot.

...
written by IKE, November 14, 2007

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

...
written by thepcguyonline.com, November 17, 2007

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.

...
written by dwyne nelson, November 20, 2007

Thanks a lot for the heads up. that makes a l lot of sense, i will have to get into that.

...
written by nelson, November 20, 2007

thank you very much for the article. great stuff.

...
written by john beamer, December 01, 2007

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

...
written by thepcguy, December 02, 2007

The pc guy online . com
that animated version didn't work for me but so far so good!

...
written by Jay, December 22, 2007

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.

...
written by Cory, December 22, 2007

Thanks, Jay! smilies/cheesy.gif

...
written by Casi, January 30, 2008

Hey, just wondering .
lol how do you clear your browsers cache?

thanks smilies/grin.gif

...
written by Cory, January 30, 2008

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.

...
written by brin, February 25, 2008

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

...
written by Brin, February 26, 2008

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.

...
written by jhon, March 03, 2008

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

...
written by Timmy Taylor, March 05, 2008

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

...
written by Ash Nallawalla, March 15, 2008

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.

...
written by Roman, March 27, 2008

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

...
written by Cory, March 27, 2008

In 1.5.2, the favicon is in your template folder.

...
written by Adaptiv Media, March 31, 2008

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?

...
written by ken, April 08, 2008

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

...
written by Casey Carnnia, April 08, 2008

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.

...
written by neeraj, May 06, 2008

I have made favicon icon according to your topic but it is not working properly
give me advise

...
written by Cory, May 06, 2008

Hi Neeraj, you probably need to clear your browser's cache in order to see the new favicon.

-1

...
written by Andrej, May 09, 2008

Good site but could u fix your rss feed smilies/grin.gif

...
written by Mark, May 13, 2008

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

...
written by Cory, May 13, 2008

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.

...
written by Mark, May 13, 2008

Thanks, Cory! You were absolutely right!

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

...
written by Joel-B, June 04, 2008

With Joomla 1.5, be sure to delete default favicon.ico completely. With most Joomla installs there are permissions issues, so if you can log-in as root or manually delete via cpanel or something before uploading the new icon that is best.

I was having an issue where my new favicon was showing, but then on every re-load it was switching back to the default joomla favicon and then re-loading my new one. After getting around the permissions issue and deleting the old ones, now it works great!

...
written by Mike Cross, June 25, 2008

Finally a set that explains thing very clear. Thanks a lot for explaining the favicon.ico to a T or step by step. ME... I am very new at building web site and for some reason no one I mean no one is telling you what to do step by step and what will be the resoults. Now I have a little question..... how long does it take before I see the favicon change to my logo I uploaded??????
but thanks again it was easy!!!! smilies/grin.gif

...
written by David, July 30, 2008

Thanks for the tutorial Cory

...
written by David, July 30, 2008

One question though, mine shows fine in FF, but how do you make it show up in ie7?

...
written by Justin, August 02, 2008

I don't know if anyone posted this before but you can also simply save your 16 X 16 logo as a microsoft icon file using Gimp or Gimpshop which i free open source editor and upload it as your new favicon.ico file. Clear your browsers cache and you should see your new favicon appear. thanks for the instructions cory.

Justin

...
written by horeca, August 30, 2008

I tryed on my web site to put it in images folder, but nothing happen how it is possible? areyou sure that i have to put favicon.ico there on joomla 1.5.6 ?

-1

...
written by webdesign, October 13, 2008

Nice tutorial but how do i change it in joomla ? i dont like overwriting files. because i have multiple sites running from the same joomla core files.

...
written by Nola, October 18, 2008

I'm new to joomla, I'm using the latest Joomla 1.57 and I wanted to create a favicon for a clients site im working on.

Using my client's logo logo I uploaded it to http://tools.dynamicdrive.com/favicon/ and it created my .ico file

I added this to the head area of my templates index.php which can be found in templates/templatename

-1

...
written by Nola, October 18, 2008

Well that didn't show the code hmm maybe try this...

...
written by Nola, October 18, 2008

Well that didn't show again so now I'm using an image that I just screencapped of the code in the ndex.php file of the template I'm using..

...
written by Nola, October 18, 2008

-2

...
written by Sean Cornell, November 01, 2008

How to change the favicon.ico in Joomla 1.5.

A lot of people have problems with this and it is happens because of 3rd party template installs by Joomla are 'owned' by nobody, and the favicon.ico that is used is pulled from the root of the chosen template ie: /templates/my_template/favicon.ico NOT the site root NOR /images/

So most users upload a replacement not realising that the FTP client has returned a 550 or permission denied. Trying to change the permissions with CHMOD does not work as you are not the owner.

Ask your host (or use Shell access, to CHOWN the template root to the you, the user.

Now upload and replace your favicon.ico into /templates/my_template/ and flush your caches.

Have fun.

...
written by Chris208, November 10, 2008

Great tip works well

...
written by Webdesign, November 24, 2008

Much better then a standard joomla icon

thanks!

...
written by Dinocrysis, November 27, 2008

Gracias por los tips! Now my favicon appears! smilies/cheesy.gif

...
written by Adeboye moses, December 05, 2008

To be sincere i really find this usefull. but i think since joomla is an opensource, we can do what we like with it. so i personally decided to change my favicon to what i want. I really like using for its simplicity.

Great work here CORY

Do more for us all

...
written by Cory Webb, December 05, 2008

Hi Adeboye,

I don't believe anyone is saying that you can't change your favicon. As you say, you are allowed to modify Joomla any way you want to since it is open source and released under the GPL.

Cory

...
written by Jens, December 19, 2008

I cannot find the ico! It is not in the images dir. I use Joomla 1.5.8.

For another template it works - icon is copied into the template dir, but for this one from siteground it does not work.

How can I put it into css?

...
written by Jens, December 19, 2008

I solved it! Apparently you have to add "favicon.ico" to you templatedetails.xml

...
written by Cory Webb, December 19, 2008

Hi Jens,

This article was actually written for Joomla 1.0.x. In Joomla 1.5.x, you need to replace favicon.ico in the directory of the template you are using. So, you favicon would be at templates/your_template/favicon.ico

...
written by Nawin83, December 22, 2008

Hi,
Thanks, Cory.

In Joomla 1.5

step 1) replace your ico file to joomla/templates/YOUR TEMPLATE /favicon.ico

step 2) replace your ico file to joomla/administrator/templates/YOUR TEMPLATE /favicon.ico

step 3) clear your browser cookie

...
written by favicon gif, January 07, 2009

My Thanks, I can see my favicon at firefox

...
written by Derrick, January 07, 2009

some versions of joomla 1.5 do not have the favicon in the images directory. it is generated with an abosulte path. this tutorial only works with older versions.

you will have to hack your code to get you favicon in there through your index.php i believe.

nice tut for older versions though.

...
written by Perdere Peso, January 16, 2009

I tried as you said and it works fine. Thank you so much!

I can't find images folder to replace existing favicon
written by claire, January 19, 2009

i can't find the existing favicon icon to replace it...where would i find it if i am looking through control panel folders?
thanks

Joomla! 1.5 Favicon
written by Cory, January 19, 2009

Hi claire,

The favicon in Joomla! 1.5 is located in your template folder. You can find it at templates/yourtemplate/favicon.ico, where "yourtemplate" is the name of your template. If there is no favicon.ico file there, then you simply need to upload your favicon to that folder.

Text with favicon?
written by Joyce, February 05, 2009

I noticed that paypal and godaddy have not only a favicon, but also TEXT along side it. How do we do that too???

Favicon trouble
written by Ron, February 27, 2009

I just had my programmer upgrade from v1.0 to v1.5 and my favicon changed. I placed it in the templates folder but it did not change. Please help.

Favicon
written by Kyle Carrington, March 03, 2009

Delete the old favicon in your root directory, and upload it again, to public_html or where-ever your root is! Done.

Favicon
written by Marcellionis, March 28, 2009

Simply I've replaced the favicon.ico in ../templates/ja_purity/favicon.ico. That's all. Works with joomla 1.5.9. smilies/wink.gif

Animated Favicon
written by logcomptechs, April 03, 2009

hello, I was able to get the regular favicon to work, but i would like to use the animated one but cant seem to get it to show. Need help, thanks

...
written by Cory, April 03, 2009

Hi logcomptechs... I'm not very familiar with how to get an animated favicon working. Let me know if you figure it out.

Favicon change in template
written by Cristian, April 03, 2009

For me it didn't work to change the favicon in the images folder . I had to change it in the images folder of my template. Voila it worked.

Thanks alot
written by faridooi, April 07, 2009

It work for me, just paste in the template folder..

Clear cache..

Vailo..

no favicon in images folder
written by Amanda , April 08, 2009

My images folder does not have a favicon.ico. I cannot get rid of the joomla favicon. Where else would it be?

But
written by orchid1, April 11, 2009

Id id this but the Favicon on my browsers favorite toolbar is still the joomla favicon.
any ideas.

Favicon
written by Joomla Hosting, June 09, 2009

orchid1 try these steps.
remove the favourite from you brower.
Clear your browser cache.
Load the site back up and now add it to favourites.

I had the same problem and this fixed my issue.

Where is the favicon?
written by kerastes, July 22, 2009

Hello,

I am new to this by the way,i have searched in my joomla image folders and in my ftp image folders and i can not find any icon named favicon in order for me to replace it, also my website shows by default not the joomla favicon but just a white page icon. Now this is a template i am using so probably they have have changed something but anyway i uploaded my favicon in the images folder but nothing, should i upload it in my ftp or from my joomla backend?

Try This
written by Simon Wells, July 22, 2009

@kerastes
Open your website in your browser.
If you are using Firefox/Mozilla/Flock etc, then right click the page and select "VIEW PAGE SOURCE"
When the page opens, look for something like this, using this site as an example:

Here you will see that the favicon.ico reside in the htj_960 template folder.

You should use ftp or cPanel etc, to place you favicon.ico file in your chosedn templates location.

This procedure is also try for your administration pages. The majority of users will use the standard admin template, so using the above procedure go look at:

Again, upload your file to that location.

As you say that your site only shows a white page, then it most likely that the template you use, does not have a favicon.ico supplied with it.

For those that say they have tried and it does not work, try purging your cache, via Tools in the Admin Panel.
Then clear your browsers cache (CTRL + F5)

Would be interesting to know.

...
written by Simon Wells, July 22, 2009

Looks like the code got stripped from my post.

...
written by Simon Wells, July 22, 2009

The first missing code, looking for the .ico file, using this sites as reference.

The second missing code for admin:

...
written by Simon Wells, July 22, 2009

@Cory,

Post, won't let me add code.

Sorry friends, but hope you get the idea.

...
written by kerastes, July 24, 2009

@SIMON WELLS

THANKS A LOT!! WORKED LIKE A CHARM!

It was useful
written by Alwin Augustin, September 07, 2009

Actually this is a very simple thing that many of us often forget to do. I put this in my blog also thinking that it will help someone

didnt have a favicon.ico to start with :(
written by Dani, October 01, 2009

Hi guys

i didnt have a favicon.ico to start with smilies/sad.gif

and after following thise 4 steps, the new one i uploaded didnt show.

if didnt have a favicon.ico to start with, does adding one should make it apere?

Thanks
Dani

Favicon not in root images
written by SarahW, October 02, 2009

The Favicon for my 1.5.12 install was in:

root/templates//images

not in the root/images folder

This is terrible
written by kirt, October 02, 2009

my favicon won't appear example: (www.one.domain.com)
but when i go to (www.domain.com/joomla) favicon works perfectly

any advice?

help
written by JL , October 12, 2009

If i put the favicon.ico in the folder off my template where its suposse to go right ? it dowsnt work how can resolve this many thanks

Plz email me

joomla 1.5.2
written by manuel, October 20, 2009

Joomla 1.5.2 - to make it works..
i had to upload favicon.ico into the images folder of the template

favicon still not showing
written by BW, October 30, 2009

Hi, still not able to get my favicon to show after following all the above steps. Uploaded it to the right directories and made sure it is reference in index.php. Using Joomla 1.0. Please help!

thank's a lot
written by budiman indrajaya, December 12, 2009

hi i'm from indonesia just wanna say thank's for this tips,

changing icon
written by shane, February 24, 2010

The reason the icon isnt changing is because you need to right click on the icon select properties, then tick the box where it says read only, click apply up load to templates/rhuk_milkyway, all done. I found that was the only way to do this. Shane