DEV Community

Cover image for How to set up a favicon
Brett Anda πŸ”₯🧠 for Developer Bacon πŸ₯“πŸ₯“

Posted on • Updated on • Originally published at developerbacon.ca

How to set up a favicon

The short answer

The easiest way to set up a favicon (assuming that a web-sized image is already made) if by using the following code, and placing it in the <head> tag.

<link rel="icon" type="image/png" href="http://example.com/favicon.png" />
Enter fullscreen mode Exit fullscreen mode

The long answer

Setting up a favicon can be super easy once you get the hang of it. The simplest and quickest way is listed above, but what if you want to have different sizes of favicons for different devices and browsers?

PNG Sizes

To add different sizes to a favicon link you can just add a sizes attribute to the link tag. The typical sizes for favicons on most browsers are 16x16, 32x32 and higher. For some other browsers like Google Tv and Chrome on Android, the recommended sizes are 96x96 and 192x192 respectively. An example of these sizes would look like this.

<link rel="icon" type="image/png" sizes="16x16" href="http://example.com/favicon-16.png" />
<link rel="icon" type="image/png" sizes="32x32" href="http://example.com/favicon-32.png" />
<link rel="icon" type="image/png" sizes="96x96" href="http://example.com/favicon-96.png" />
<link rel="icon" type="image/png" sizes="192x192" href="http://example.com/favicon-192.png" />
Enter fullscreen mode Exit fullscreen mode

ico file type

The primary way to set an icon would be to use a .ico file. While all modern browsers can read the png format, this is primarily used for older versions of IE. You can find plenty of favicons.ico generators online to build a properly formated ico file. The use of a favicon.ico file would look like this.

<link rel="icon" href="favicon.ico" />
Enter fullscreen mode Exit fullscreen mode

Browsers will also be able to find the ico file if it is just left on the root of the site and not declared in a meta tag.

Top comments (0)