What is Favicon or Site Icon?

Favicon also referred as favorite icon or site icon is a small icon displayed on browser’s tab. This helps to easily identify a web site especially when many browser tabs are opened at the same time. In addition to browser display some search engines also display the icon in search results.

How to Add Favicon?

Sites managed with content management systems have two easy ways to integrate your favicon image.

1. Theme – most free and paid themes offer a way to add favicon image as a theme option without the need of any additional code.
2. Plugins – if the theme does not provide this option, many plugins can do the trick.

WordPress offers favicon as a builtin feature called “Site Icon” so the site owner can easily upload icon image file without any third party assistance. For the sites managed with other site builders that don’t support favicon integration, follow the below two steps to add favicon:

• Step1 – uploading a .ico image to site
• Step2 – linking the image on the header part of the site using the below code:

<link rel="shortcut icon" href="Your Favicon Link"/>

At any case you need to create a visible image on your own and upload it to your site. You can use premium image editors like Snagit or free tools like Microsoft Paint to create an image file. Alternatively you can also use free favicon generators available online to convert the image to a perfect favicon for your site.

Note: Unfortunately many site builders like Weebly does not allow free users to add favicon to their site. This is a premium feature which you will only get after upgrading to one of the paid plans.

Favicon Image Specifications

Generally favicon is an .icon image file though it is possible to use .jpg or .png formats also. Since the browsers display the image in tiny size, you should create a favicon in smaller sizes like 16px x 16px or 32px x 32px. It is better to avoid using large image sizes which will not be visible clearly when scaled down to smaller size.

In contrast, WordPress needs a minimum size of 512px x 512px image since WordPress also use the same icon as an app icon on for mobile devices.

Note that you can also create animated favicons to display on the browser. Though we don’t recommend animated images due to its distractive nature, you can create such images using online favicon generator tools.

Importance of Favicon

Though favicon does not have any SEO importance it has a real benefit on branding and usage. Site owners can easily build a brand icon image displaying as a favicon to attract users. Search engines like Yandex also shows the icon in search results as shown below making it unavoidable for site owners.

From user’s perspective when many tabs are opened in a browser it is difficult to find a site among all those opened tabs. Below is how the Google Chrome browser looks when opened with multiple tabs and favicon is visible for a user to easily navigate through the tabs. For example, user can easily select Google by looking at the favicon.

Another aspect from users is when viewing history or bookmarked pages where favicon is explicitly displayed. Hence we recommend to use a quality image as a favicon for your site so that users can easily remember. Apple also shows favicon in Safari browser on both macOS and iOS devices.