Skip to main content

Common Favicon Sizes and Usage


sizes attribute in the HTML <link rel="icon"> tag is used to specify the dimensions of the linked favicon image. This helps browsers and devices select the most appropriate icon file for a given context, ensuring optimal display quality across various resolutions and use cases (e.g., browser tabs, desktop shortcuts, mobile home screens)

 

Different platforms and browsers require different favicon sizes for optimal display. The most common size is 16x16 pixels for standard browser tabs, but modern high-resolution screens and mobile devices require much larger sizes. 



Size (Pixels) 
  Usage Context
16x16 Standard browser tabs, address bar, and bookmarks menu (the default size).
32x32 High-resolution screens, desktop shortcuts, Windows taskbar buttons.
96x96 Google TV and desktop shortcuts for high-resolution displays.
180x180 Apple Touch Icon (iOS home screens for iPhone and iPad).
192x192 Android Chrome home screen icon and Progressive Web Apps (PWAs).
512x512 PWA splash screens and higher-resolution icon needs.

HTML Implementation Example

To ensure compatibility across all devices and browsers, it is recommended to provide multiple sizes in the <head> section of your HTML document. 


html
<head>
    <!-- Standard favicon (most compatible, often .ico can contain multiple sizes) -->
    <link rel="icon" type="image/x-icon" href="/favicon.ico">
    
    <!-- Modern browsers, various sizes -->
    <link rel="icon" type="image/png" sizes="16x16" href="/favicon-16x16.png">
    <link rel="icon" type="image/png" sizes="32x32" href="/favicon-32x32.png">
    
    <!-- Apple Touch Icon (iOS devices) -->
    <link rel="apple-touch-icon" sizes="180x180" href="/apple-touch-icon.png">
    
    <!-- Android Chrome / PWA icons -->
    <link rel="icon" type="image/png" sizes="192x192" href="/android-chrome-192x192.png">
    <link rel="icon" type="image/png" sizes="512x512" href="/android-chrome-512x512.png">
</head>
Most developers use a favicon generator tool to create all the necessary image files and the corresponding HTML code automatically

 

 

Back to top