Anna Young’s ‘Strips Talk of the Nation’ Gees Bend quilt: my new favicon and gravatar
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 .ico4. 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!
Hello there, I notice the favicon works in Firefox, but neither of my other browsers use the icon when I visit the site, and it shows up only briefly with Netscape (on Mac OS X) before it disappears completely and forever.
That leads me to believe the “link rel” tag might be at fault… I see that it points to a “public_html” folder when the actual location of the icon (as far as the Internet is concerned) is the root directory of your website. Even though you uploaded the icon to your “public_html” folder, that isn’t considered part of the web address as far as the rest of the world is concerned. The Apache web server translates that to your domain name. The favicon can actually be accessed at one of these two addresses:
https://www.richardsilverstein.com/favicon.ico
https://www.richardsilverstein.com/favicon.ico
The second address is probably valid because of the .htaccess mod_rewrite rules WordPress uses.
Here’s my overly-wordy explanation of the symptoms….
The root domain name (https://www.richardsilverstein.com/) is the default place a web browser will look for your favicon, unless specifically told to look someplace else. That is, if you leave out the link rel=”Shortcut Icon” tag, most web browsers will check for a favicon.ico file at the root address of your website:
https://www.richardsilverstein.com/favicon.ico
But your pages specifically tell web browsers to look for the icon in your “public_html” directory, which doesn’t actually exist according to the Internet… that folder is specific to your particular web server and represents your domain name. If you load the address, https://www.richardsilverstein.com/public_html/favicon.ico you’ll get a “404, file not found” response.
Firefox is either smart enough to ignore the “Shortcut Icon” tag when it doesn’t find the icon in the “public_html” directory that you specified… either that or it’s too dumb to recognize the tag any old way. Often the wrong way does lead you where you want to go.
My Mac OS X versions of the Internet Explorer and Safari web browsers seem stymied when they can’t find the icon in the “public_html” directory, and they don’t look for it where they would normally search… the root domain name. They throw up their hands, scratch behind their ears and shrug their shoulders. “Favicon? We don’t see no stinking favicon.”
As for Netscape’s strange disappearing act: it loads the favicon from the default directory before it loads the actual page (Firefox does this also,) but when Netscape finishes loading the page it reads the “Shortcut Icon” tag, and goes looking for the icon in the “public_html” directory. When it doesn’t find an icon there, rather than use the icon it has already found, it displays a crystal clear 16×16 patch of nothing. (Which is good, because that lets you know a problem exists.)
And all that blather means… you might try removing the “public_html” part from the favicon’s address in the link rel=”Shortcut Icon” tag. That should display the favicon for those web browsers which are less liberal and more literal than Firefox when they interpret the “Shortcut Icon” tag.
Hopefully that will fix everything up 100%… because I hate to be wrong about anything, although I often am.
I created my FavIcon using the serviceof http://www.html-kit.com/favicon/
T think they have tutorial how to display your fav ico, too.
Cheers for this, I’ve been scratching my head about this one when putting a favicon on our new http://christmas.vg site on its own dedicated server.
There’s a couple of faults in your code though (some missing “s), it should read:
or wherever it is!
Other than that, some sound advice.
Those of us who are on our own servers can use httpd.conf instead of .htaccess (and should be for speed!)
Stripped out my code there – oops!