What is a Favicon?
A Favicon is the small icon you see in most browsers to the left of the Address Bar when visiting a website.
Why include a Favicon on Your WordPress Site?
It’s a really quick way to give your WordPress Blog a more professional look. It helps with the branding of your site, and makes the visit more memorable. Not only this, but in most browsers if someone bookmarks your site, it’ll be added next to the bookmark title as a small icon which looks great.
How Do You Create a Favicon?
This bit is simple. Once you’ve found an image that you’d like to use as a Favicon, head over to Favicon.co.uk, upload your image, and this site will convert it to a Favicon and make it available for download. Remember it’s best to use an image with minimal fine detail, as this won’t show up when the image is shrunk down to favicon size. Consider using a single character with a coloured background for a good effect.
How Do You Add the Favicon to WordPress?
There are a few ways of completing this, but the instructions below are the simplest:
- Log into your WordPress Sites Admin area, and Navigate to Media > Add New.
- Click ‘Select Files’, and upload the Favicon file you generated at favicon.co.uk.
- Before Clicking ‘Save all Changes’, highlight and copy the ‘File URL’ that WordPress gives you to your clipboard.
- Go to the Appearance > Editor menu on the left side of the WordPress Site Admin area.
- Select the Header file on the right hand side of this Editor Screen.
- Look for the Closing </head> tag, and insert the following just above this </head> tag:
<link rel=”icon” href=”PASTE THE FILE URL INFO HERE” type=”image/x-icon”>
Don’t forget to replace the “PASTE THE FILE URL INFO HERE” with the link you copied in step 3 above (keeping the speech marks).
- Before going to check your work, make sure you save this file by clicking ‘Update File’ at the bottom of the editor screen.
You can now navigate to your WordPress Site and view the new icon you’ve generated next to the Address Bar. If this hasn’t appeared yet, it’s worth trying to clear your browser cache and reopening the browser window. If you’re really keen – try bookmarking your site too, and you’ll see the favicon appear next to the bookmark title!
Feel free to comment below if you need help with this or experience any problems.