How to Add a Favicon to a Website
Last updated: 21.02.2026
Views: 198
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 16×16 pixels in the root of the site. Or set a path by writing one line in a section <head>
HTML
<link rel="shortcut icon" href="/images/favicon.ico">
In today’s realities, one icon is not enough. But setting all possible parameters for the favicon, I think, is also too much. Several options are enough
- usual .ico 16×16
- for modern browsers .png 32×32
- for apple .png 180×180
HTML
<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.
I usually add a favicon as written above. To generate icons I use the service: https://realfavicongenerator.net/
Author: Igor Rybalko
I have been working as a front-end developer since 2014. My main technology stack is Vue.js and WordPress.
Similar posts:
-
How to Center an Element Vertically Using CSS (Vertical Alignment)
There are several ways of vertical alignment. In different situations, different ways are suitable. Consider some of them. 1. Using Flexbox The easiest and most widely ...
-
Infinite Rotation with CSS Animation
An infinitely rotating element on a website is an interesting way to attract the user's attention. It is quite easy to implement such an element using CSS. Here is an exa...
-
Image Scaling Problem in Outlook
When I was composing HTML emails, I encountered the fact that in desktop Outlook (it turns out that someone else uses it) the images were displayed at a strange scale. Al...
Leave a Reply