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
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.