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 on on 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.  In this case, it was just the initials SP in a font that I thought represented the spirit of the site (for you font-geeks, it was  “Handwriting – Dakota”).  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 font 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 is just a WordPress blog, it seems that it’s necessary to do a little coding.

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”>

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!!

Leave a Reply