How to add a favicon to your website

22.03.20

A favicon is a website icon. The easiest way to add it to the page is to put an icon with the name favicon.ico 16x16 pixels in the root of the site. Or set a path by writing one line in a section <head>

<link rel="shortcut icon" href="/images/favicon.ico">

One icon is not enough in modern realities. But to set all the possible options for the favicon, I think, is also not clever. There are three icon options on this site.

usual .ico 16x16
for modern browsers .png 32x32
for apple .png 180x180

<link rel="apple-touch-icon" sizes="180x180" href="/images/favicons/apple-touch-icon-180x180.png">
<link rel="icon" type="image/png" sizes="32x32" href="/images/favicons/favicon-32x32.png">
<link rel="shortcut icon" href="/images/favicons/favicon.ico">

The code must be added between <head> tags.

A service for a favicon generation: https://realfavicongenerator.net/

How to add a favicon to your website

Categories