We all, overlook little things most of the time that can set the website, business or company apart from the competition. Favicon is one of those little things that you may be overlooking when it comes to website design and user experience.
What is a favicon?
A favicon, favorite icon or bookmark icon, is an icon displayed at the top of the tab in the browser, which is associated with a website or web page.
Why use a favicon on your website?
Favicon serves following purposes:
- It helps identify a website visually.
- It differentiates you as a brand.
- It easily identifies you in the Bookmarks list.
- It makes your website more distinctive and memorable.
How to create a favicon for your website?
Typically, a favicon is a graphic of size 16×16 pixels and is saved as favicon.ico in the root directory of your website. You can use an image of 16×16, 32×32, 48×48, or 64×64 pixels in size, of .ico, .png, .gif format. However, you should always use .ico instead of .png or .jpg because
- It is compatible with all browsers, including Internet explorer 5.0.
- All modern browsers always request a favicon.ico so it’s best practice to have a favicon.ico file, to avoid 404 error.
You can convert images of any format to .ico format (16 x 16 size) by using one of the following tools –
Steps to add a favicon to a WordPress site:
I’m going to explain how you can add a favicon to your website by uploading it to the images folder.
Before changing favicon:
Step 1: Create a favicon.ico file from the tools, I listed above.
Step 2: Upload this file to your theme image folder through FTP or your hosting file manager.
- Go to wp-content folder, then
- Go to themes folder, then
- Go to your current theme folder, for ex – twentyfourteen
- Go to images folder, then
- Upload the favicon.ico to this folder.
Step 3: After uploading note the URL of the favicon.ico file. Just like this –
Step 4: After this, place the following code in your header.php file within <head> tag –
<link rel=”shortcut icon” type=”image/x-icon” href=”http://www.deepanshugahlaut.com/wp-content/themes/twentyfourteen/images/favicon.ico”/>
Is there any plugin to add a favicon to WordPress website?
You can also add a favicon to your website by using plugins. Here are some free favicon plugins for WordPress below –
What are your thoughts about this? Do you find it helpful? Please share in comments.