favicon-FI

What is a Favicon and How Can I Get One?

Written by Tony Richardson on . Posted in Articles, Code, Freebies


What is a Favicon?  Well in short, its the little icon that typically appears in the top left corner of your browser for that particular website.  It is sometimes used by some browsers to identify web sites when bookmarked. The actual formal definition of a Favicon is as follows:

Fav·i·con  (short for Favorite icon)
/fævɪkɒn/

Noun - A file containing one or more small icons, most commonly 16×16 pixels, associated with a particular Web site or Web page.

Synonyms - shortcut iconWebsite iconURL icon, or bookmark icon.

To be more clear, a picture will probably be the best way to show what a Favicon is and where to see it.


Wikipedia Favicon


Below is an image of TutExpert’s current Favicon Image.  We may change the image in the future, but this is what we’ve decided on at this time.  It’s basically the logo image without the text.  I started by creating a white square for the background layer, and then I positioned the logo image as best as possible within the square.  After getting a good position, I selected the white square image and made certain to remove any stroke (outline) and then changed the white color to transparent (or you can delete all information on the background layer.  I selected both layers and then saved it as a .png which will save transparent layers.  Some formats like .jpg will not save transparent layers and will convert them to white, that’s why I choose .png or .gif formats.


favicon

Even if you have never created a Favicon before, I’m sure you’ve seen Favicons for websites and most likely remember the major ones. A Favicon is like a signature that identifies the site.  Many can be basic in design or similar if not identical to the logo of that site.  Some are over the top and extremely creative. But no matter what a site designer chooses, there are several unique aspects that should be addressed if you are looking to create your “own” Favicon.  

First lets get a full understanding of the Favicon.  Favicons appeared first in Internet Explorer 5.  It was done by placing the actual file named “favicon.ico” in the root of the website.  This would cause a 16 pixel x 16 pixel square image to appear next to the URL in the address bar and in bookmark lists.  This did not require any HTML editing and worked well. Initially this had the added benefit of estimating how many times sites were bookmarked by counting requests for the favicon, but this is no longer reliable since browsers started supporting the favicon for more than just bookmarks.

Now for the good stuff! How do you create your own Favicon?  Well it’s easier than you think.  I’ll run through the basics.  Favicons are primarily 16 x 16 pixels square.  This does not mean your original image needs to be this size.  That would be next to impossible to create due to the size limitation.  But with that said, you can start out with a larger image (square of course) and re-size it to a few standard sizes.  One of those being 16 x 16 pixels square.  While much larger sizes can be used these days, 16 pixels square is a good place to start.  I create 32 x 32 square and 16 x 16 square.  

Now, the best way I’ve found to create a Favicon without issue is to use a free Favicon generator online.  Simply do a search and many will appear.  I start with a larger image and either downsize it prior to uploading or some sites will downsize it for you.  

So for instance, I will create an image, any image that I want to have identify the site being created.  I make certain the image is square and then re-size the image and review the results prior to uploading to a Favicon Generator.   Here is a link to a Favicon Generator Site I use most often. http://tools.dynamicdrive.com/favicon/

Now here are a few things to remember.  After creating and saving the image, you will upload it to the Generator. If the generator did not re-name the file, be sure to re-name the final image file to favicon.ico prior to loading it in the root directory. And to get your site to recognize this as the site’s favicon image, use this code:

<link href="favicon.ico" rel="icon" type="image/x-icon" />
<link href="favicon.ico" rel="shortcut icon" type="image/x-icon" />

Place this code between the head tags of your site.

<head>
</head>

You will most likely have other code in the head area and the location of the code isn’t important, but only that they are in between the head tags. Now why both lines of code?  This is to be certain all browsers are able to read the code properly.  There are several other articles out there that give additional suggestions.  Favicons can be very touchy…if they aren’t showing up, don’t fret…it does take time and the cache must be removed or re-cached for many browsers.  At some point the icon usually shows up on most browsers.

Share This! Share on FacebookTweet about this on TwitterShare on Google+Share on LinkedInPin on PinterestShare on TumblrShare on StumbleUpon

Tags: , , , ,

Trackback from your site.

Stay In Touch

TutExpert.com is never far away. You can find us on any of these sites. Stop by and pay us a visit.

 


Latest Tweet