One or two letters, or an emoji
Used in the web manifest and the theme-color tag.
The ZIP holds every size below, favicon.ico (16, 32 and 48 pixels), site.webmanifest and the head tags.
16×16
Browser tab
32×32
Browser tab, high density
48×48
Windows site icon
180×180
iPhone and iPad home screen
192×192
Android home screen
512×512
Install and splash screens
512×512
Android adaptive icon
Put the files at your site’s root, then paste these into the page’s head.
<link rel="icon" href="/favicon.ico" sizes="48x48"> <link rel="icon" type="image/png" sizes="32x32" href="/favicon-32x32.png"> <link rel="icon" type="image/png" sizes="16x16" href="/favicon-16x16.png"> <link rel="apple-touch-icon" sizes="180x180" href="/apple-touch-icon.png"> <link rel="manifest" href="/site.webmanifest"> <meta name="theme-color" content="#2563eb">
{
"background_color": "#2563eb",
"display": "standalone",
"icons": [
{
"sizes": "192x192",
"src": "/android-chrome-192x192.png",
"type": "image/png"
},
{
"sizes": "512x512",
"src": "/android-chrome-512x512.png",
"type": "image/png"
},
{
"purpose": "maskable",
"sizes": "512x512",
"src": "/maskable-icon-512x512.png",
"type": "image/png"
}
],
"name": "My site",
"short_name": "My site",
"theme_color": "#2563eb"
}