Favicon Generator | ConvertMM

How to Use Generated Icons

Follow this step-by-step guide to link the generated icons and manifest files to your website for maximum compatibility across platforms and devices.

Add the following code to the <head> section of your HTML file to set the favicon:

<link rel="icon" type="image/png"
                                sizes="16x16"
                                href="favicon-16x16.png">

<link rel="icon" type="image/png"
                                sizes="32x32"
                                href="favicon-32x32.png">

<link rel="icon" type="image/x-icon"
                                href="favicon.ico">

To display the icon on iOS devices, add the following code to your <head> section:

<link rel="apple-touch-icon"
                                sizes="180x180"
                                href="apple-touch-icon.png">

To support Android devices, add the following lines for the larger app 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">

The site.webmanifest file contains metadata for your website, including app icons and theme color. Add this code to your <head> section:

<link rel="manifest"
                                href="site.webmanifest">

Add the following meta tags to your <head> section to define the theme and background colors for your web app:

<meta name="theme-color"
                                content="#ffffff">

<meta name="background-color"
                                content="#ffffff">

Questions related to Favicon Usage