Specify Favicon.png In Html


Favicons are the tiny icons that usually appear next to the url in your browser. Favicons add a nice flair to your site and they are typically easy to implement.

specify favicon.png in html

Image showing an example of a favicon in showing in google chrome


For compatibility with all browsers stick with .ico is the way to go, however png favicons are support by most modern browsers. You can also specify both a favicon.png and favicon.ico in your html code to ensure complete compatibility.

Specify Favicon.png In Html

To specify favicon.png in html all you need to do is include the following line in the head of your html.

<!DOCTYPE html>
<html lang="en">
    <meta charset="utf-8">
    <link rel="icon" type="image/png" href="http://www.thecave.info/favicon.png" />

Why use favicon.png

I have found that is it usually easier to save an image as a png as opposed to ico. Additionally, a png can be smaller than ico. There are other websites that will allow you to upload an image and convert it to an ico should you wish to have both a ico and png version of your favion.