You must have noticed that a lot of websites have a small image on the browser with the site-title when they load. Google, for example, currently has a white ‘g’ in blue background. These are favicons. If you are wondering what is a favicon and how can you get one for your website, read on.
Favicon is a coinage from ‘favorite icon’ first implemented with the bookmarks of Internet Explorer 4 (IE still calls bookmarks ‘favorites’). This image appears with the page title in the browser bar, in tabs where the browser permits tabbed browsing, just before the page url in the address bar, and in the bookmarks. Some feed readers also display it beside a site’s feed.
Previously, the browser would load the image to the bookmarks from the root of the site. Today, we use HTML to link to the image so that each page can have a different icon if necessary. Most sites, however, have just one icon since the purpose is to brand and personalize the entire site, and not individual pages.
The standard HTML markup for linking to a favicon is < link rel=”shortcut icon” href=”images/favicon.ico” />. The ‘images’ folder, if used for all images on site, makes for convenient organization. You can actually keep the favicon anywhere so long as you link properly to it.
The favicon image can be in three formats: gif, png and ico. The ico format is by far the most widely used, and one that most browsers and feed readers recognize. The ico file type is an image file extension used in Microsoft Windows. An image can be converted and saved in the ico format using free online resources or even with the Paint program using the ‘Save As’ command.
Making your own favicon
To begin with, you need to select an image that best represents your brand. Next use an image editor to ensure that it is cropped square and resized to 16×16 pixels. Quite a few online resources can do the resizing for you. Now search online for sites that will convert your image to ico format. Three of the more popular ones are listed below.
If you don’t already have your favorite image, this site will allow you to create one, after which it will convert it into the ico format for download. If you are not savvy with image editors, this is the site for you.
2. Favicon Generator
This site will scale images of any size, but without preserving aspect ratio. This means you must have a square image ready for conversion and scaling. Just right click and save the converted image to your computer.
A versatile resource, this site will scale your image during upload and provide you with grid handles to crop the image before conversion.
Usually, the converted file will have the proper extension, but it pays to make certain. By default, Windows does not show extensions. You will not normally see a Photo.jpg or Photo.pnj on your computer – it will appear as only ‘Photo’ with the default icon. To view the extension, open windows explorer, go to Tools > Folder Options > View and uncheck ‘Hide extensions for known file types’. Click OK. Now all files on your computer will show their extensions.
Upload your favicon
The usual procedure is to upload the image via FTP to the root directory of your website and use the required HTML markup. If you are using a WordPress blog, the icon may be placed in the roots of either the WordPress installation or your current theme. Next, you will have to edit the Theme and place a line of code in the header.php file: <link rel=”shortcut icon” href=”<?php bloginfo(‘stylesheet_directory’); ?>/favicon.ico” />. There are two ways to avoid this hassle: use a plug-in like ‘All In One Favicon’ or use a theme (Thesis, for example) that only requires you to upload the image.
By now, you probably know enough about what is a favicon and how can you get one for your website. All it remains is for you to decide upon an image. Favicons are an essential part of branding yourself. People surfing the Internet are so used to seeing favicons that even if they don’t realize what it is, a site without favicon is likely to appear bland and uninteresting at first glance. If you want a distinct online presence, a favicon is not something you would want to miss out on.
About Author: Jason Smith is an online manager for Superior Notary Services. He is an expert on SEO & PPC tactics and in his free times likes to read and understand about mobile notaries.