How to use Favicon in a Static Website

There are many platforms available to build a blog or websites. However, when it has come with a Business blog or website, your brand on your website Favicon is essential. To create a successful branding make sure that you add a Favicon to your Site.  A Favicon is a cute little unique image that expresses your website or product branding in the browser tab area.

Why Favicon is so Important:

Usually, people tend to open many tabs while they browse the internet. When they need to switch one tab to another, they usually identify your website by this Favicon. If your site has no Favicon, it makes them stuck while they want to switch to your website in the browser. That is why Favicon is essential.

There are a couple of ways to add Favicon to your site. If you want to add a Favicon manually and your website is built with plain HTML, then the following code might help you to get this stuff.

<head>
<link rel="icon" type="image/png" href="https://example.com/myicon.png">
</head>

Here I explain the process step by step how to add Favicon to your website :

  1. Make a 16X16 image of your logo and save it in .png format.
  2. Upload the image to your theme directory.
  3. Add link tag with rel, type and href attributes after your tag.
  4. Set the rel value as “icon.”
  5. Define the type of “image/png.”
  6. Moreover, your image links within the value of the href attribute.
  7. Save the file and view the change.

If you use WordPress the process is the same but you can try this code to your header.php before the tag. You may use your FTP or you may use WordPress Built-in editor for this purpose.

<head>
<link rel="icon" type="image/png" href="https://yourdomain.com/favicon.png"/>
<link rel="shortcut icon" type="image/png" href="https://yourdomain.com/favicon.png"/>
</head>

Make sure to change http://www.yourdomain.com/favicon.png URL by your own domain name.

If your theme is a child theme or not contain a header.php file, then you can use this plugin to insert header and footer for your theme. You need to add this code after activating this plugin.

If you do not like to code or to use FTP or any process described above, You can still add your Favicon by this simple All in one Favicon Plugin.

Disclaimer: Now adding Favicon is super simple and very easy for every WordPress platform and theme. If you’re building a static website you can use this method to create your webpage favicon.

I think you find this article pretty simple to follow. However, still, if you have any questions or comments feel free to notify us by comments here or contact us via Twitter, G+ or Facebook.