One detail I notice many authors overlook on their personal websites is the Favicon. It’s deceptively important. Everything worthwhile needs a symbol. Companies have logos. Members of royalty have seals. Satan has all-powerful glyphs that usually contain pentagrams. People associate all these symbols with their respective brand, and an author’s symbol is no less important. So sneak it in everywhere you can!

First, what is a favicon? It’s the little icon that appears at the top of a browser tab on most modern web browsers (with Internet Explorer being a notable exception), next to the name of the website. It also appears on browser front pages, like this:

what is a favicon

Didn’t notice this until I saved the picture, but I find it kind of sad that Suntrust doesn’t have a favicon.

As you can see, it’s a small detail that’s conspicuous only when it’s missing. It’s also subliminal brand advertising.

 

This simple tutorial is a step-by-step guide to install a favicon on your website.

 

Favicons are 16×16 pixel images. That’s pretty tiny. Select an image for yours that represents your brand and looks good and is recognizable in a really, really small picture. A simple, single-color graphic, or a one to two letter abbreviation is usually a good idea. Once you select a graphic, the next step is to format the picture file so it can be converted into an icon. Most folks have MSPaint, which comes with Windows, so that’s what I’ll use for this tutorial. If you can’t use Paint for some reason, send me a message and I’ll be happy to help you use whatever you have. Here’s what to do:

1.) Use Paint to open the photo you want to format into a favicon.

2.) Click on “resize”.

02_resize

3.) In the resulting pop-up window, uncheck the box beside “Maintain Aspect Ratio,” click to resize by “pixels”, and input “16” in both the horizontal and vertical input fields. Click okay.

resize settings

Resize settings.

4.) Next, save the file in “png” format, like so:

Save examples

5.) You now have the cocoon file that will soon blossom into a beautiful favicon. To make this happen, you need to use a converter. There are quite a few free ones to choose from online. Personally, I like http://converticon.com/.
Follow the quick step-by-step instructions to create and download your new favicon.

6.) Once you have the teserac— I mean, the favicon, it’s time to add it to your website. Upload the file to your WordPress media library, then copy down its URL.

7.) Now, paste the URL into this snippet of HTML code:

wp_head(); ?>
<link rel=”icon” type=”image/ico” href=”INSERT URL HERE”/>

8.) The next step requires delving into the code of your site, which may seem terrifying, but I promise the change is relatively simple and benign. From your WordPress Dashboard, go to Appearance→Editor

Here's the editor.

Here’s the editor.

9.) On the right hand side of the page, you should see your “Header” template listed. Click that.

Find your Header code here.

Find your Header code here.

10.) This is the code in which you’ll insert your favicon. The only thing you need to do for the code to function is paste it in somewhere between the <head> and </head> tags. I like to put mine right before </head>, because it’s easier to find there and it doesn’t get in the way of any of the rest of the header code.

Insert code

Insert code

That’s it! All done. Update/save the change, then close the window. You can now re-open your site to see how it looks. If it doesn’t appear at first, hit cntrl+F5 to refresh the entire contents of your page.

On a non-Wordpress site, the process is the same, you just have to find your header code wherever it may be and paste in the new code. Also, since you may not have a media library, you have to upload your icon via FTP. Hope this helps!

 Ω