How to add a favicon in wordpress
Such a small detail like adding a small image, a favicon, to your URL may seem trivial but it can actually say a lot about your brand, apart from helping your visitor remember your site more easily. More importantly, having a favicon on your Web site or blog allows the visitors to quickly identify your site in their favourites folder(s) among the other bookmarked sites.
So what is a favicon?
A favicon (favourites icon) is an icon associated with a blog/site. Most popular browsers display a favicon as 16×16 pixel icons next to the URL in the address bar, next to the title in tabs, and next to the title as well as in your bookmarks.
With more requests from clients I have found this method one of the easiest to follow and implement in creating a favicon:
To start you will need an image that represents your business, ideally it will generate from your logo or Corporate Identity. As the size is only 16×16 pixels your logo must be clearly identified. If you have a lot of detail then it is worth customising the design and artwork to fit for your Your blog/site.
Once you have your image using your graphic editor of choice you may be able to output in the required PC format of .ico at 16×16 pixel. If you can’t then don’t worry as there are many online favicon generators that will simply take your saved image and do all the cutting and formatting for you as well. Some will also create supporting logos for iPhones and Android handsets.
How to add a Favicon to your Site or Blog?
Now that you have your favicon ready, simply place it in the root directory. Most popular browsers will automatically detect and use the favicon.
To make sure the results stick, add the following line to the header.php file of your theme, between the <head> and </head> tags:
<link rel=”shortcut icon” href=”wp-content/themes/current_theme/favicon.ico” />
*change ‘current_theme’ to the name of the theme that you are currently using.
Please note that some of the online Favicon Generators may have slightly different instructions on how to ad the Favicon.
Congratulations, you have just added a Favicon to your site and learnt something new!
Favicon generators and Links that might be useful:
- How to Create a Favicon in Photoshop
- Favicon Converter | Favicon Converter 2 | Favicon Converter 3
- Favicon Maker | Favicon Maker 2 | Favicon Maker 3
Would you like some inspiration?
Want to read more WordPress tutorials?