How to change your favicon
Written by Cory |
May 08, 2007
|
(109)
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.
Trackback(0)
Comments (109)
written by Stephan Hodges, May 10, 2007
written by Rgator, May 13, 2007
R
written by Rgator, May 13, 2007
Any ideas?
R
written by Rgator, May 13, 2007
Cool!
NOW TO MAKE AN ANIMATED FAVICON WORK!
R
written by Ahmad Alfy, May 14, 2007
" 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
written by nivaskapil, May 17, 2007
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
written by azman, May 20, 2007
written by nivas, June 02, 2007
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 06, 2007
written by nicolas, June 07, 2007
http://www.webscriptlab.com, F...graphics.
written by DragonTail, June 23, 2007
found this googlin from rrag the guy made that sites favicon
written by melias, June 29, 2007
written by Lynn, September 07, 2007
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 Lynn, September 09, 2007
Thanks so much for the great tips.
written by Linda, September 21, 2007
Thank you again.
written by ian elsby, October 17, 2007
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 Marcus, October 30, 2007
much appreciated
Marcus.
written by IKE, November 14, 2007
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
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
written by john beamer, December 01, 2007
Thanks Cory for the tips
written by thepcguy, December 02, 2007
that animated version didn't work for me but so far so good!
written by Jay, December 22, 2007
written by Casi, January 30, 2008
lol how do you clear your browsers cache?
thanks
written by brin, February 25, 2008
http://www.compassdesigns.net/tutorials/joomla-tutorials/how-to-install-joomla-1.5.html
written by Brin, February 26, 2008
I recommend not using fantastico --- it's a pain. Just upload the files.
written by jhon, March 03, 2008
please help
written by Timmy Taylor, March 05, 2008
Thanks Cory
written by Ash Nallawalla, March 15, 2008
written by Roman, March 27, 2008
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.
-Roman
written by Adaptiv Media, March 31, 2008
written by ken, April 08, 2008
written by Casey Carnnia, April 08, 2008
written by neeraj, May 06, 2008
give me advise
written by Mark, May 13, 2008
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 Mark, May 13, 2008
I was able to copy/paste the appropriate information and get the favicon to show.
written by Joel-B, June 04, 2008
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 26, 2008
but thanks again it was easy!!!!
written by David, July 30, 2008
written by Justin, August 02, 2008
Justin
written by horeca, August 30, 2008
written by webdesign, October 13, 2008
written by Nola, October 18, 2008
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
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 Sean Cornell, November 01, 2008
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 Adeboye moses, December 05, 2008
Great work here CORY
Do more for us all
written by Jens, December 19, 2008
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
written by Nawin83, December 22, 2008
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 Derrick, January 07, 2009
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
written by claire, January 19, 2009
thanks
written by Joyce, February 05, 2009
written by Ron, February 27, 2009
written by Kyle Carrington, March 03, 2009
written by Marcellionis, March 28, 2009
written by logcomptechs, April 03, 2009
written by Cristian, April 03, 2009
written by faridooi, April 07, 2009
Clear cache..
Vailo..
written by Amanda , April 08, 2009
written by orchid1, April 11, 2009
any ideas.
written by Joomla Hosting, June 09, 2009
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.
written by kerastes, July 22, 2009
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?
written by Simon Wells, July 22, 2009
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
The second missing code for admin:
written by Simon Wells, July 22, 2009
Post, won't let me add code.
Sorry friends, but hope you get the idea.
written by Alwin Augustin, September 07, 2009
written by Dani, October 01, 2009
i didnt have a favicon.ico to start with
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
written by SarahW, October 02, 2009
root/templates//images
not in the root/images folder
written by kirt, October 03, 2009
but when i go to (www.domain.com/joomla) favicon works perfectly
any advice?
written by JL , October 12, 2009
Plz email me
written by manuel, October 20, 2009
i had to upload favicon.ico into the images folder of the template
written by BW, October 30, 2009
written by budiman indrajaya, December 12, 2009
Write comment
Join the HowToJoomla Community!
- Create a profile
- Connect with other members
of the community - All for FREE
Already a member? Login here.


