Comprehensive Guide to Adding Icons (Favicon) to a Website

The website icon (Favicon) is that small image that distinguishes your site from others in browser tabs and on smartphone screens. For the best result, we need to prepare several different dimensions.

Standard Icon Sizes

1. 16x16: For older browsers and very small tabs.
2. 32x32: Standard for most modern desktop browsers.
3. 192x192: For Android devices and display on the phone home screen (PWA).
4. 180x180: Special size for Apple devices (iPhone, iPad).

HTML Code for All Devices

Copy all the lines below into the head of your page between <head> and </head>.

<!-- Basic icon for tabs -->
<link rel="icon" type="image/png" sizes="32x32" href="icon-32.png">
<link rel="icon" type="image/png" sizes="16x16" href="icon-16.png">

<!-- Icon for Android (Chrome) -->
<link rel="icon" type="image/png" sizes="192x192" href="icon-192.png">

<!-- Icon for Apple devices (iPhone, iPad) -->
<link rel="apple-touch-icon" href="icon-180.png">

Why Does Apple Need Its Own Line?

Apple devices do not use the standard rel="icon" command; instead, they look for rel="apple-touch-icon". If this line is missing, the iPhone will display only a thumbnail of the entire webpage instead of the icon when saving the page to the home screen.