WordPress Templates | Organic ThemesChange Your Theme Favicon
David Morgan on April 16, 2011
26 Comments
These are examples of the default Organic Themes favicons.
Favicons are the small icons for your website that are typically displayed in your web browser. All Organic Themes contain a leaf favicon, or in the case of the Structure Theme, an “ST” icon. Favicons can be created using various image editing software. Easier solutions involve generating a favicon from an image using a website such as this, or creating your own favicon using Faviconer. If you would like to change the favicon of your theme, follow these instructions:
- Log in to the server of your site using an FTP client such as FileZilla, or within your hosting options.
- Locate the images folder within your themes directory. The path should be similar to wp-content > themes > organic_theme > images.
- Upload your favicon.ico file in to the images directory, overwriting the existing favicon file.
- You’re done!
Note: Favicons are registered deep in your browsers cache. So you may not see the change right away unless your browsers cache is cleared and/or restarted.
I keep trying the steps above, but it just won’t change from the leave to my own favicon. Please help me. I need it to worlk really fast. Thank you
If you have replaced the file correctly, it does work fast. Everyone else should see your new favicon immediately. However, you will not see the changes until the old favicon is cleared from your cache. This has nothing to with the theme, and everything to do with your browser.
These instructions aren’t working for me. When I downloading filezilla, these instructions don’t give mention how to fill in the blanks. Is the host, wordpress.org? When I try it, I get error messages. Type in username and password, no luck.
Within my hosting options, I see no folder that says “images” under organic themes. Only Widgets | Menus | Header | Background | Theme Options.
Is there a better step by step process that outlines the process more accurately. One that follows the prompts as they appear on the screen. There appear to be many missing pieces.
Thanks,
Mo
Yeah I’ve tried this as well with no luck. It worked fine on a press75 theme mind…
1) Deleted favicon.ico from organic_non-profit/images
2)Replaced with my own favicon.ico file
3) Cleared browser cache
4) Restarted browser
Still the leaf!
Hello,
Is there a way to do this from the wordpress dashboard? I’m not that great with the more technical side, and I don’t see any upload button in editor on the dashboard.
Or do I have to go through the server? (I’m using godaddy)
Generally, you will need to upload the favicon to your theme folder through your server. However, you may be able to change the favicon using a plugin, http://wordpress.org/extend/plugins/search.php?q=favicon&sort=
Ok, but what happen if I erase the favicon.ico original file and then I upload the new one? because I did it like this and doesn´t work… how can i do it?.
Many thanks!
Also I did it in the right way with a diferent template and still not working… how can I do?
These instructions aren’t working for me. When I downloading filezilla, these instructions don’t give mention how to fill in the blanks. Is the host, wordpress.org? When I try it, I get error messages. Type in username and password, no luck.
Within my hosting options, I see no folder that says “images” under organic themes. Only Widgets | Menus | Header | Background | Theme Options.
Is there a better step by step process that outlines the process more accurately. One that follows the prompts as they appear on the screen. There appear to be many missing pieces.
Thanks,
Mo
Thank you for this tutorial,
I’ve tried to save favicon.ico using Photoshop and no luck. It was so simple to create it with Faviconer!
You made my day
What about for multi-site setups where I only want to change the favicon for a site instance?
Can I add a PHP condition that changes the favicon for a site ID? If so where would this code go?
Worked like a dream, thanks for the tutorial.
This totally does not work for me. I’ve uploaded, deleted the favicon from the proper directory (found the directory, removed the old .ico, saw it as a leaf), double checked to make sure the new one is correct, cleared my cache, checked other browsers, etc. It changed on Firefox but no luck with Safari or Chrome on the Mac.
Your new favicon works for me. It’s very persistent in the cache. In some case you may need to restart your browser or computer entirely before noticing the effect.
Hi,
I’ve done according to the above but the favicon is still not showing, even I have cleared the cache and restart my computer. Is there anything I can do?
Also, how can I hide the “The Structure Theme v3 by Organic Themes · WordPress Hosting” at the footer? I don’t want to show the leaf favicon either.
Please help!
Thanks!
Hi Grace,
Your favicon is showing correctly for me (a circle with an l shape in the middle). Regarding the footer links, please see here: http://www.organicthemes.com/tutorial/change-the-footer-links/.
Thanks!
My favicon is showing correctly for me blog, thanks for the tutorial
Thank you for this tutorial,
Those the favicon requires to be a certain pixel size?
Does
Hi Hektor,
16×16 or 32×32 are the standard sizes.
Thanks!
Hi
I have replaced the favicon icon on the root and within the theme images folder and it’s still not working.
What is the code that should be in the header.php file?
Hi Charlie,
Before changing any code, try clearing your browser cache, or using another browser to view your site. For instance, I see your custom favicon just fine.
Thanks!
I follow your instructions and find the leaf favicon, but can’t do anything with it because it is locked. I can’t upload my own favicon or delete the leaf. Any suggestions?
Thanks!
Duncan,
Replace the favicon.ico file with your own.
Thanks!