Does your website have a favicon?

The favicon is a little image icon associated with your website. Web browsers use them in the window URL bar, on tabs and in your bookmarks – where you would see the name and/or URL of your website. You’ve probably noticed the little square icons while surfing the web. See mine above in your browser and in the screenshot below. Yup, that’s my face saying hello!

faviconscreenshot
Now the question is if you have a custom favicon for your website? Don’t let your hosting company give you a default image! Your favicon is another little branding element, so make sure you take advantage of it.

Create your custom favicon

The first thing to do is to create your own custom favicon. Use an image that fits with your website branding and looks good at a small size. You often want to crop just a letter or small part of an image. The image has to be square 16 x 16 pixel in size. You can use whatever graphic program you have to create your image and save as “favicon.ico” filename or try online services like faviconer.com

Installing a Favicon in WordPress

Once you have your favicon file, to install it for your WordPress website/blog upload the favicon.ico file into your WordPress root directory and theme directory. Then you just need to add this snippet of code into the <head> section of your files – which is in the header.php file for most themes.

<link rel="shortcut icon" href="<?php bloginfo('stylesheet_directory'); ?>/favicon.ico" />

Of course, you can ask your web designer to do all this and for some themes they might have an area that lets you define this or add a function to activate.

Once the changes have been made, you might need to clear your browser cache to see the update. It’s a small detail, but a great touch to really customize and personalize your website to keep your branding consistent, wherever your website shows up. This applies in many feedreaders as well!