Favicon is an abbreviation for “favourites icon” because they were created to appear in your bookmarks or favourites. They are the small images you see at the top of your browser tabs when visiting a webpage.
The favicon helps to identify to the user which site they are on and is an extra tool in branding a website. Browsers can also show the favicon in the address bar and is generally a smaller, or trimmed down version of the site’s logo.
Favicon 1
Why favicons are important
While small in size, a favicon is a further tool to help you brand your website, keeping your logo in front of your readers even when they are not viewing your page. Favicons also make it easier for users to identify different websites when they have multiple tabs opened in a browser.
With the advent of mobile devices, favicons now come in many different sizes, and many mobile browsers will show you the favicon as an icon when you save a page to your home screen. Using a high-quality favicon is essential to maintaining the quality of your site’s branding across all the ways your website might be read.
How to create a favicon
While favicons can be created by hand with graphic design programs such as Adobe Photoshop with an ICO plugin, the time requirement with so many different sizes makes this impractical for most. Thankfully, there is a host of online tools that will generate it for you.
An online tool such as realfavicongenerator.net allows you to upload a single image and generate all the required favicon files for the many different devices it might be shown on.
Uploading a high quality image with dimensions of at least 260px by 260px will produce the best results across desktop and mobile devices.
Other online services that you could also use are:
- Favicon CC
- Favicon Generator
- Dynamic Drive Favicon Tool
What are the qualities of a good favicon?
It have the potential to be shown as small as 16px and as large as 180px depending on which of the many devices a website is being viewed on. It is essential the source of your image favicons is high quality and at least 260px by 260px in size. Commonly, the source image will be in JPG or PNG format, with the PNG format being the most common if the image requires transparency.
Images with a single logo or better still icon will work best, and will be a good representation of your website on mobile devices if they are used as a shortcut on the home screen. Photos or images with a lot of detail will not be legible in most sizes smaller than the original, and should not be used.
Fun (sort of) favicon fact
Favicons were not always only for looks. Before the age of Google Analytics, favicons were used by search engines to estimate website traffic based on how many users bookmarked a page (and so had the it stored in their browser).