Using PNG images as Favicon

less than 1 minute read

HTML5 logo

By far, nowadays, PNG is a more common image format and got more and more support over time. It wasn’t rare some years ago to have issues editing or just visualising a PNG, but that’s long gone. In addition, it is easier to create using multiple programs.

The classic ‘favicon.ico‘ has passed away a long time ago, but many webs actually uses this format.

The Favicon can be a GIF, SVG or an ICO image, but the PNG is the recommended one by W3C and recognised as standard. Here is an example of how to tag each format.

Another cool format gaining traction is SVG, but is not yet fully supported. This would be the best format to use when fully supported.

Using ICO

<link rel="icon" href="favicon.ICO" type="image/x-icon">

Using SVG

<link rel="icon" href="favicon.SVG" type="image/svg+xml">

Using GIF

<link rel="icon" href="favicon.GIF" type="image/gif">

Using PNG

<link rel="icon" href="favicon.PNG" type="image/png">