I’ve just moved my blog from Typepad to WordPress. One of the things I’ve wanted to display is a favicon. It took me a helluva long time to even find an image that didn’t look too crummy at the infinitesmially small size of 16×16. I’m not even fully happy with my current favicon because the pattern (a gorgeous Gees Bend quilt) cannot be seen clearly. I’ve found that you have to use a graphic or image with a single clear design. Lots of colors or shapes will not work. Even images that look great at 75px look senseless at 16.
But the killer problem I faced was that after following the instructions at Favicon from Pics the best I could manage was for the favicon to display intermittently in my Firefox URL address bar. If, for example, I switched to a new browser tab, the favicon disappeared from the address bar. And the favicon never displayed in the tabbed browser bar where I had my blog.
Here’s where Snaerff comes in–the man of the hour (and a tip of that hat to his blog, Wonderings, as well). Sometimes I feel at sea when it comes to technical problems I face in WordPress (mostly because I’m new to it). Not Snaerff (who’s been with WordPress a similarly short time). He said he’d fix it and by God that’s what he did. He even apologized in one e mail for the fact that he needed to leave the house for a few hours and couldn’t complete his work on this project till then.
Here’s the post that Snaerff wrote to the WordPress forum:
1. Create your 16 x 16 favicon and name it ‘favicon.ico’).
2. Save it to your public_html (aka “root”) directory.
3. In that same directory, find “ .htaccess”. You must edit that by adding the following NEW line underneath everything else that’s in it:
AddType image/x-icon .ico
4. Save that file without changing anything else, then go to where your theme is kept: (mine’s in public_html/wp-content/themes/themename)
5. Once there, open header.php (it contains your meta information at the top [title, character set used, etc]).
6. Edit that file to include (ie; add) the following line (making sure that it’s INSIDE the HEAD section, and that you replace my URI with yours):
[open tag]link rel=”shortcut icon” href=http://www.mysiteurl.com/public_html/favicon.ico” type=”image/ico” /[/tag] [sorry, but WP decided it’s refusing to honor code tags here so I had to fool it…]
7. That’s the end of the website end of things. Now head to FireFox and select the Tools/options/cache area. Clear the cache (this may take a while) then restart FireFox.
8. Click on your bookmark for your site and you should see the new favicon in both the navigation bar and the bookmark. You may need to click on it a second time. Open a new tab in your browser and click on your bookmark again – this time you should see your favicon in there, too!
I just practised all this on my site and it’s working fine, now. The reason you have to add the extra bit into your .htaccess file is because Apache (running on many servers) doesn’t recognise .ico the way some other server software does. WordPress typically runs on servers with Apache running. You’ll never need to clear the cache, etc again: if you ever want to change your favicon just upload it so as to replace the current one and refresh your site … it should be visible in the nav bar, bookmark and tab (I just checked … it does work!).
Snaerff says that this is a known Firefox bug but he couldn’t identify which one. I did some research and it looks awfully like “location bar ( address bar ) loses favicon when opening new tab” (bug 253542).
Snaerff’s workaround it truly a thing of beauty! Thank you Snaerff!