Ever wondered how you add a favicon to your site? Here’s how (this applies specifically to WordPress because that’s what I’m learning at present but the essentials of each step are the same for a more traditional site where you would have specific pages instead of templates etc).
1. Create your icon
1. For me this is the hardest part because I’m not particularly gifted in the artistic department. Find an image you want to use or make use of an icon file that you already have. If you’re using an existing image in any format other than .ico you will need to find a way of converting it from the graphics format (.gif, .jpeg, .png etc) to the icon format (.ico). My weapon of choice for this (and for icon creation in general is icon sushi though you can use a plugin for Photoshop etc).
NOTE: make sure you’re OK with the copyright on any image you’re using for your favicon – it’s not smart to use copyright material from other people unless you’re given permission. Find non-copyright material or better still, just create something for yourself, give your site a nice personal feel. if you’re doing a branded site (corporate client etc) they should be able to provide logos etc that you can convert into favicon.ico
2. Size your icon to 16 x 16px – quite small but ideal for the address bar in your browser.
3. Save your new icon on your local hard disc with the name “favicon” and ensure that the extension is .ico so you have “favicon.ico”.
2. Upload the icon
4. Now you have your favicon.ico ready it’s time to upload it to your webserver using whatever method you normally use (I use Filezilla).
5. Upload the favicon.ico file into the main folder of the theme you’re using. If you’re using a child theme upload it into the root of your child theme folder.
6. Upload another copy of the favicon.ico file to the root directory of your site (ie. http://yoursite.tld/favicon.ico). Doing this will ensure the favicon is displayed in your RSS feed.
3. Link in the favicon.ico file
7. Nearly there. Using whatever method you normally use to edit your theme files amend the header.php file as follows:
(a) Search for the line of code that begins with:
<link rel="shortcut icon" and ends with /favicon.ico" />.
(b) Overwrite it, if it exists, or add the following code below the “head” HTML tag if the code doesn’t exist:
<link rel="shortcut icon" href="<?php bloginfo('stylesheet_directory'); ?>/favicon.ico" />
4. Empty Browser Cache
8. Flush out your browser cache and reload your webpage – your favicon should be smiling from up there on the address bar