A website icon (Favicon) is the small image that distinguishes your site in browser tabs and on smartphone home screens. For the best results, we need to prepare several different dimensions.
1. Standard Icon Sizes
- 16x16: For older browsers and very small tabs.
- 32x32: The standard for most modern desktop browsers.
- 192x192: For Android devices and display on mobile home screens (PWA).
- 180x180: Specific size for Apple devices (iPhone, iPad).
2. 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 a tiny screenshot of the entire website instead of your icon when saving the page to the home screen.