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 which site the user is on and is an extra tool for branding a website. Browsers can also show the favicon in the address bar. It is generally a smaller or trimmed-down version of the site’s logo.
Why favicons are important
Although small in size, a favicon serves as an additional tool to help you brand your website, keeping your logo visible to readers even when they are not actively viewing your page. Favicons also simplify the process for users to identify different websites when they have multiple tabs open 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 and Favicon Generator
What are the qualities of a good favicon?
A good favicon has 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. The source of your image favicons must be 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).