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 –
- http://favicon-generator.org/
- http://www.favicon.cc/
- http://www.faviconer.com/
- http://tools.dynamicdrive.com/favicon/
- https://websitesetup.org/favicon-generator/
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 –
https://www.deepanshugahlaut.com/wp-content/themes/twentyfourteen/images/favicon.ico
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=”https://www.deepanshugahlaut.com/wp-content/themes/twentyfourteen/images/favicon.ico”/>
Step 5: Reload your site after saving all the files. Here is the result –
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.
10 Ways to Get More Followers on LinkedIn Company Page
Can you not also add this in one of the Dashboard menus? It might be Settings or under Theme Options?
Yes you can! If you are using an elegant theme, then from the theme options or setting page, under favicon settings box. You can input the URL of your favicon image, or upload the same.
I’m fairly certain you can also just put the favicon.ico in the root of the site, like public_html and it will show.
Yes it will! Just make sure the correct path in href.