Website

How to Add Favicon to Website

how to add favicon to website

Introduction

Most of the websites online have their own specific logos and in most cases, they are used as website favicons. If you do not know what favicon is, here is a visual example:

favicon

Having a favicon on your website is of course much better than seeing a blank document icon on the browser, in addition, your website will look much more professional.

In this tutorial, we will learn a few easy ways on how to add a favicon to your website.

What you’ll need

Before you begin this guide you’ll need the following:

  • A square image you would like to add as favicon to your website
  • Access to your website files

Option 1 — Letting the browser automatically get your favicon (no need to change code of the site)

Most browsers automatically detect favicon.ico file located in your website directory and set it as the favicon of your website. This is the easiest way to add a favicon to your site.

  1. First of all, you must have a square dimensioned image in any image format (jpg, bmp, gif, png) in order for it to appear normally in browsers. Of course, non-square images will also work, however, such icons may not look professional.
  2. This option requires converting your image to .ico format. There are many tools online to do just that, however, in this tutorial, we will use convertico.com.
  3. Upon opening convertico.com you will see a button to select and upload your image file.
    convert to ico
  4. Click the button and select the image you like and right after you proceed your image will be converted automatically and appear on the right side of the website for download:
    download ico
  5. Download your image by clicking the Download arrow button and save your .ico file anywhere on your computer.
  6. Now rename the file to favicon.ico, because the browser will only recognize this name automatically.
  7. The last step is to upload this file to the host directory where your website files are located. For uploading, you can use File Manager or an FTP client. In Linux based hosts the directory is usually public_html however, may differ according to your own configuration or the host you are hosting the website at. In this case, better consult with the hosting provider.

When your favicon.ico file is uploaded along with the rest of your website files the browser will collect it automatically and show the image in the browser.

favicon shows

IMPORTANT: If you can’t see the new favicon, clear the cache of your browser and restart it.

Option 2 — Using a regular image and specifying it in the code of the website

If you feel that converting your image to another format is too much of a hassle, you can surely use a regular image as a favicon of your website.

  1. First of all, you must have a square dimensioned image in any image format (jpg, bmp, gif, png) in order for it to appear normally in browsers. Of course, non-square images will also work, however, such icons may not look professional.
  2. Upload this file to the host directory where your website files are located. In Linux based hosts the directory is usually public_html however, may differ according to your own configuration or the host you are hosting the website at. In this case, better consult with the hosting provider.
  3. Now you will need to specify the image you would like to use as a favicon in the code of your website. Add this line between the <head></head> tags in your website code:

IMPORTANT: Where type="image/png" change the png part to the format of your image and change favicon.png to your file name.

The HTML code will look similar to this now:

example html for favicon

Your image should now be shown as the favicon of the website.

favicon shows

IMPORTANT: If you can’t see the new favicon, clear the cache of your browser and restart it.

Conclusion

You have learned 2 ways to add a favicon on your website. This is a little job in your website development process but is quite essential to make your site look good to visitors.

Add Comment

Click here to post a comment

Com Domain Sale

Join thousands of subscribers worldwide

and get awesome deals & the newest tutorials to your email

Please wait...

Thank you for sign up!

More in Website
Improving Website Performance - Using A Content Delivery Network (CDN)
Improving Website Performance – Using A Content Delivery Network (CDN)

Close