Add or Change Favicon WordPress
How to put or add a favicon.ico into wordpress without plugins or how to change favicon.ico in wordpress if you already have one built in your theme.
Have you ever wondered how to have a small icon or small image in your browser if you open a wordpress blog? That’s called favicon, it’s like a branding of your site. Most websites nowadays have this favicon, either html static websites and even wordpress blogs.
In the video we will create a favicon with GIMP (free source image editing program), upload it and then adding php code to a static html code in our header.php.
If you just want to change your favicon, you don’t need to follow this step, just look where the old favicon, and replace it with the new one.
As usual, backing up a theme is a really nice idea.
These are the steps.
1. Create a new file in GIMP, size= 16×16 px (pixel)
2. Save the file as favicon.ico
3. Upload the file to /images folder or /img depends on where you have your images are stored in your theme file (wp-content/themes/yourthemes)
4. Add favicon html static code to header.php:
<link REL="SHORTCUT ICON" HREF="http://www.yoursite.com/images/favicon.ico"/>
And then replace this code with wordpress codex, here is the php code:
<link rel="shortcut icon" href="<?php bloginfo('template_directory');?>/images/favicon.ico" />
Note:
1.If you save favicon.ico in different folder, then replace “images” folder with your folder name.
2. If you just change your favicon, then don’t add anything in your header.php file. Just overwrite the old favicon.ico to the new one, it should work fine.
So, that’s it. If you are using firefox, the favicon may not appear immediately, clean up your cache and it will show up sooner or later. I notice other browsers display it faster, so you might want to check it in other browser too, in case you can’t wait
Related posts:
- Add “logo” to Twenty Ten WordPress
- Change “Home” page in your wordpress site to your own created page
- Change Page order WordPress
- Change language in “GIMP” to English
- Install WordPress locally (mac)
- Change your default Avatar with your own picture
- Change Twenty Ten’s background- WordPress
- How to change permalinks wordpress
Dina this is useful..Usually what I do is upload the favicon at the root of WordPress installation and that does everything.
Hey Harsh
I agree with you, that can be done that way, but it will only work if your theme file already have the code. I notice some themes came with already built-in favicon, however still many people don’t have favicon in their sites
Great tutorial, as always ! By the way, I found a free website that converts any image format to icon format : http://iconverticons.com/ So if you are working in Adobe Illustrator or Photoshop, you can save your document as 16×16 .PNG and then use the mentioned website to convert to .ICO.
@Pham-Pham, Yes, there are lots of favicon generator out there, and they are mostly free.
Thanks for the quick link.