Adding Favicons

I had decided I wanted to add a favicon to the site. A favicon is the small graphic that appears either in your bookmarks or next to the URL in your web browser. For me, it makes it easier to find a site among the many I have bookmarked.

For my favicons, I usually prefer something simple.  I created the graphic using white space in a text editor, then used a screen capture utility to create a GIF file. I then renamed the GIF to favicon.ico and the image was created.

The trick then became uploading the image to the site. In most cases, with custom built websites, you can just places these files in the root directory. When creating a favicon for a site that’s a WordPress blog, it seems a little coding is necessary.

I edited the header.php file for the active WordPress theme (wp-content/themes/[yourtheme]/header.php) and added the line:

<link rel=”shortcut icon” href=”favicon.ico”>

There may be some WordPress theme that alread include the “shortcut icon” link – if this is the case, just replace their href with your own.

I’d been told this is all that’s necessary, and that the graphic would be found once placed in the root directory. For my hosting provider, that didn’t work as my favicon was replaced on page-loads by their favicon. I got around this problem by creating a custom folder in my site root directory, placing the favicon in that folder, and replacing the href tag described above with an absolute URL path. As you can see above, this worked!!

Comments are closed.