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.