Create a Favicon for your website with maximum device support
Step 1: Upload PNG to generate favicon images
(Download will start automatically once favicon has finished generating):
Step 2: Add this code to your html <head> tag:
<!-- Backwards compatability -->
<link rel="icon" sizes="16x16 24x24 32x32 64x64" href="favicon.ico">
<!-- All other browsers -->
<link rel="icon" type="image/png" sizes="32x32" href="favicon-32x32.png">
<link rel="icon" type="image/png" sizes="16x16" href="favicon-16x16.png">
<!-- Google Search and Android Chrome -->
<link rel="icon" type="image/png" sizes="48x48" href="favicon-48x48.png">
<link rel="icon" type="image/png" sizes="192x192" href="favicon-192x192.png">
<!-- iPhone -->
<link rel="apple-touch-icon" type="image/png" sizes="180x180" href="favicon-180x180.png">
<!-- iPad Retina -->
<link rel="apple-touch-icon" type="image/png" sizes="167x167" href="favicon-167x167.png">
<!-- Other iPads -->
<link rel="apple-touch-icon" type="image/png" sizes="152x152" href="favicon-152x152.png">
<!-- Web application manifest -->
<link rel="manifest" href="manifest.json">What are the recommended formats and resolutions for favicons in 2024?
Is .ico still recommended?
According to a 2005 post on www.w3.org: "the format for the image you have chosen must be 16x16 pixels or 32x32 pixels, using either 8-bit or 24-bit colors." (although 32-bit color support has been added since). The .ico format, supporting multiple resolutions in a single file, has become a standard for favicons. Modern react sample apps typically still include a sample .ico file with resolutions of 16x16, 24x24, 32x32, and 64x64 pixels. Although .png format support is widespread in modern browsers (for instance, Firefox has supported it since 2003), many websites continue to use .ico for legacy support, and it is still used in Google's example of a favicon.
Google search and Android Chrome install as app support
For your favicon to display in Google searches, your favicon must also have resolutions which are multiples of 48x48 pixels typically in PNG or any other supported format. Google's material design guidelines suggest designing icons at 192x192 pixels. Consequently, many websites include 48x48 and 192x192 pixel PNG favicons to cover a wide range of support for Google search and Android Chrome app installation. It is important to note that even when following Google's guidelines exactly they might still not display your favicon in Google searches.
Apple support
To add support for Apple devices you need to add a link for favicons with rel=”apple-touch-icon” instead of rel="icon". The recommended sizes for Apple devices are 152x152 pixels for iPad (Non-retina), 180x180 pixels for iPhone and 167x167 pixels for iPad (Retina).
Web app manifest
A web app manifest allows web apps to be installed on devices as applications. The icons specified in a manifest usually have higher resolutions, sometimes up to 512x512 pixels to accommodate for higher resolutions required by app icons. The manifest, a JSON file, can include various other parameters like background color, name, and description. You can see browser compatibility for icons specified via the web app manifest here. *Remember to include a reference to your manifest in the HTML head!
What about SVGs?
Not all browsers (Such as Apple's Safari browser) support using SVGs for favicons. It is therefore recommended to use PNGs, ICOs and web manifests instead.
