A favicon is a good way to express the identity of a website and to be an identifier when it's in a browser tab next to a ranger of other open websites. This article will focus on best practices of including a favicon to your website.
Image size and shape
The ideal image size for a favicon depends on the browser and on the platform. However, we recommend the use of a square format and a file size of minimum 32x32 pixels. For high resolution displays and high-density screens you may wish to try 64x64 pixels or above. Most browsers will still display the favicon at around 32x32 pixels.
Details
As mentioned above, the favicon is yet another source of branding and identification for websites. However, given its small dimension, you must take into consideration that highly detailed pictures would look quite confusing. When designing your favicon, keep it simple. Use your logo or a minimalist picture that represents your business.
Transparency
One commonly found feature on most favicons is their background transparency. This helps it blend nicely with the browser background, without creating awkward contrast or edges. Note the difference in the example below - the favicon with the transparent background looks significantly more professional than the one with the white background. Keep this in mind when designing your own favicon.
