2014-01-27

Being a successful online marketer is all about paying attention to the little details. The favicon is your sites logo and is often over looked but adds the extra polish to your blog or website.

What is a favicon?

The favicon (favorites icon) is an icon associated with a URL that is displayed in a browser’s address bar or next to the site name in a bookmark list.  It’s the small image file that represents a website similar to a company logo.  From a marketing perspective the favicon is your logo and supports the “Branding” of your blog or website.  It is displayed alongside your website’s URL (like the Kozzi example), and its displayed in a user’s bookmarks. When a user adds a site to their bookmarks they have the option of creating their own name.  The favicon, however, is associated with the URL and will be displayed next to the name they chose.

Benefits of a favicon

As with corporate logos, users will associate your site with your online logo (favicon) making it essential to create a memorable and appealing favicon to represent your site.  A well designed favicon stands out from your competition in a web user’s bookmark list and contributes to your site’s branding.  The benefits to your site are numerous.

 Branding: A clear and clean favicon design gives users a feel of professionalism which elevates your sites brand or image. It elevates your sites image and therefore creditability to web savvy web users; increasing the likely hood that the user will make a purchase or view you as an ‘authoritative’ website in its field.  

Increase in Traffic: The key benefit to a clear, clean,  - noticeable – favicon is that it will increase your traffic.  Market research has determined that web users eyes are naturally drawn towards pictures. Each time a web users views their bookmark list your logo (favicon) will be visible and present. Even if they are not looking to visit your site, just viewing the logo (favicon) might lead to a followup visit. If the web user is looking for your bookmark, you will stand out among the dozens or even hundreds of sites that have no favicon, increasing the likelihood finding your bookmark and you receiving a return visit.  But if they can’t easily find you — they will likely abandon the search and visit another site.

Creating a favicon

The file specifications for a favicon are standard:

dimensions of 16 x 16 or 32 x 32 pixels,

color depth of 8-bit or 24-bit, and 

be a static image file (as most browsers do not support animated gifs).

.ico file extension*

*All major browsers support recognize .gif, .jpeg, or .png formats, but Internet Explorer only recognizes .ico as a favicon.  Therefore for universal compatibility you should make your favicon a .ico file.

How to create it

Creating a is easy!  You can also use any image editing program, including Photoshop, Corel Paint, and GIMP to create your favicon.

Kozzi has thousands of icons and buttons that can be used as a favicon.  Just go to Kozzi and search using the keyword ‘icon’, ‘logo’, ‘button’, or even ‘simple button’ and you will be presented with 10′s of thousands of examples that might be used directly or give you some creative inspiration.

When it’s time to actually create the favicon, make sure the canvas or image size is something like 125 x 125 pixels, and then be creative!  You can reduce the size of the favicon once its completed.

After you’ve designed a neat favicon, check that the image size is 16 x 16 pixels and use this online tool to easily create a favicon.  Once you have your favicon it’s time to add it to your site

Add Favicon to your website

Upload your favicon to your website’s root directory using FTP. 

Insert the code in the HEAD section of your pages <link rel=”shortcut icon” type=”image/x-icon” href=”/favicon.ico”>

Add Favicon to wordpress

Upload your favicon to your website’s root directory using FTP. Paste this code into your theme’s header.php file.

Paste this code into your theme’s header.php file.

<link rel="icon" href="http://www.kozzi.com/favicon.ico"type="image/x-icon" />

<link rel="shortcut icon"href="http://www.kozzi.com/favicon.ico" type="image/x-icon" />

Note: you must replace kozzi.com with your site’s URL.

If your theme does not have a header.php file you can use either of these wordpress plugins. 

Insert Headers and Footers 

All in One Favicon

Well thats its!  Your favicon might be small but it can make a big difference on the success of your site.

The post Add a Favicon to Your Site appeared first on Digital Image Magazine.

Show more