Favicons

There are those of you who think that I should not speak of things technical, as I am a technology amateur. And yet, my friends, I have seen much of the world whilst going through what I like to think of as “Blog Hell”. And what kind of a person would I be if I didn’t share my knowledge with all of you? I would be no kind of a person at all!  And so, critics be damned, I’m going to talk technical.

Okay, so next to the website URL there is a wee little picture. In many cases, this is the standard blue “e” of Internet Explorer.  But you may have noticed many websites and blogs (including, I hope, this blog) have a different picture there.

I would have been quite content with the blue “e” when I set up this blog, however the template I used changed it to a big black “G”. I could even have lived with the “G” if there’d been a “G” anywhere in my name. But there isn’t, so I made it my life’s goal to change the “G” to something else.

The first step was finding out what in the heck that wee little picture was called. I googled “what is the picture next to the URL?” and found out it was called a “favicon”.  You can find anything on Google.

It turns out that you can make any picture a favicon. You need to pick a .gif, .jpg, or .bmp and run them through a “favicon generator” website. I recommend a free site.  Here’s the one I used, but there are tons of them out there.  Once you run a picture through the site, you’ll get a file called “favicon.ico”. If you use the site I linked to above, you’ll get a zip file. You need to extract the file, and pull out the favicon.ico file into a directory where you can find it later. I put it on my desktop.

As an aside, when you create a favicon, remember that it’s going to be VERY small. So you probably don’t want to use a complicated picture. It took me a couple of tries to find one that seemed to work.

Once the favicon is generated, you need to add it to your blog. I can only tell you what I did in WordPress – you’ll have to check out your own software.

When I look at the FTP site for this blog on my host, I have a folder called “wp-content”. In that folder is a subfolder called “images”. There might already be a favicon there, as there was in my case with that big black “G”.  If there is, delete it. Then copy in the new favicon file you’ve just generated.

Favicons do not automatically update in your browser. You need to force the browser to refresh to see the new favicon. To do this, hold down the “shift” key and hit “refresh” at the URL. If that doesn’t work, then delete all temporary internet files and you should see the new favicon next to your URL. There also might be a problem if you are using an older browser.

Sounds simple, doesn’t it?  And yeah, I guess it basically was. But every time I messed up something and had to reload the theme, I had to change the favicon back as well. And it didn’t seem to change every time I changed it. So I guess what I’m saying is, as with all things computer, it might take a try or two to get things to look right. Just remember to breathe deeply.

And that is everything I know, or want to know, about favicons. May we use this knowledge only for good.