A web icon is the small symbol or picture displayed on the left side of a browser tab, in your bookmark menu and/or in the web address bar. Commonly called the ‘favicon’, short for favorite icon, the web icon can be a variety of file types and is recognized by most modern browsers. The icon is a small graphic with big impact; the presence of a unique icon helps viewers easily recognize your site among others, and increases brand recognition. Every major website has a recognized icon, and there is no reason your site can’t (or shouldn’t) have one too.
Traditional web icon’s are .ico format, though .jpg , .gif and .png are widely accepted formats now as well. They are usually 16×16 and 32×32 pixels in size as well as 16- and 32-bit colors, and will be displayed accordingly depending on where they are used. One .ico file can contain multiple size and color formats of the same icon, in the same way a .gif can contain multiple frames.
To include an icon in your site you must first create the .ico file. There are various online applications available, such as Converticon, favicon.cc Generator, and FavIcon from Pics. If your logo does not translate well to such a small image, it is best to create a simplified version or another basic symbol that represents your company. The icon should be named ‘favicon’, as this is the name recognized by most browsers. You should then add the following line of code to your website inside the <head></head> tag: <link rel=”shortcut icon” href=”favicon.ico”>. The final step is to upload both the icon file and your updated html page to your server. Refresh your browser page and your new icon will appear!
If your site doesn’t have an icon, what are you waiting for? If you have questions or would like help creating your icon, just send us and email.
Thanks! This blog inspired me to create a favicon for our company website: http://www.colorgraphic.com
Looks great Fleming! I’m glad you found the post helpful.