Favicon is a short form of favorite icon. Microsoft first introduced it on using Internet Explorer 5 during March 1999. Later World Wide Web Consortium (W3C) standardized the use of favicon in HTML 4.01 recommendations. Favicon is also referred with many other names like site icon, URL icon, bookmarks icon, tab icon and shortcut icon.
General Usage of Favicon
The favicon is generally a .ico image uploaded to the root directory of your site. Then the favicon image is linked to the page using the following meta tag:
<link rel="shortcut icon" href="http://example.com/favicon.ico" />
The size of the favicon used is of 16 x 16 pixel.
Why You Should Use Favicon?
Favicons are used to increase the brand visibility of a website as it is shown on the browsers. Different browsers show the favicon in different places:
- Displayed on the browser tab
- Displayed as bookmarked icons
- Displayed in the address bar on some browsers
In addition to the usages on browser there are few other visibility factors. Search engines like Yandex shows the favicon in search results as shown below:
Also favicon may be used as a desktop or apple touch icon. Favicon image shall be used as an app icon on iPhone and iPad when you add the shortcut of the webpage.
In summary, companies use favicon same as their brand logo so that users can easily remember.
How to Add Favicon to Your WordPress Site?
It was an hassle to add favicon till WordPress version 4.2. In order to make things simple, adding favicon was made as a core functionality from version 4.3. The “Site Icon” module from Jetpack plugin was added into WordPress customizer as a default function. And you just need an image without any other need of meta tag or plugin.
WordPress site icon needs two simple requirements:
- Image should a square in size
- Minimum size should be 512px
You don’t need to use .ico image, simply prepare a .png, .jpg or .gif square image of 512px size to be used as a favicon on your WordPress site. The same icon will be used as an app icon on all mobile devices.
Prepare an image with smaller size with clear visibility using software like Photoshop or Snagit. Remember the favicon image will be resized to 16 x 16 px on the browser tab. Hence, prepare the image with dark color to increase the visibility.
Uploading Image to Site
Login to your admin panel and navigate to “Appearance > Customizer” menu. Click on the “Site Identity” option as shown in the below picture.
Click on the “Select Image” and upload your favicon image.
If you upload larger than 512px image size then WordPress will automatically open the crop image screen. Move the crop area and view the instant preview of your favicon on browser and as an app icon on the left panel.
Once the image is uploaded, click on the “Save & Publish” button.
That’s it!!! You are done. No need of meta tag insertion or plugin. Check your site on the browser to see the favicon is effective instantly. You may need to clear the browser history to delete the cached pages and load your page again.
Any time you can remove or change the favicon on your site.