How to add a favicon to your website - PNG format

Use this tutorial if you have a PNG formatted favicon. A PNG formatted favicon ends with the .png file extension. If you have a ICO formatted favicon use this tutorial instead.

Step 1: Name Your Favicon

While not required, we recommend that you name your PNG formatted favicon favicon.png. If you want to use a custom name then head to this advanced tutorial.

Step 2: Upload Your Favicon

While not required, we recommend that you upload your favicon to your website's main or root directory. The file should be accessible at yourwebsite.com/favicon.ico. If you want to use a custom location then head to this advanced tutorial.

Step 3: Link to Your Favicon

You will need tell the web browser the location of your favicon. This requires placing a link tag within the head tag of your website. An example of the link tag is shown below. You will need to replace the value of the href attribute with the location of your PNG formatted favicon.

<link rel="icon" href="http://www.yourwebsite.com/favicon.png">

Step 4: Testing

Once you've uploaded the favicon you should be able to verify that installation worked by viewing the favicon in the tab of the browser. Bookmark your webpage to validate that the favicon shows up in the bookmarks bar as well.

Step 5: Debugging

Why isn't my favicon being displayed?

The most likely scenario is that your favicon is misnamed or was installed in the wrong directory. Make sure that your favicon is accessible at yourwebsite.com/favicon.ico

Why isn't it displaying the latest version?

Web browsers cache the favicon and sometimes display older versions. You may need to clear your cache if seems like your favicon is not updating. This will force the browser to display the latest version of your favicon.