Favicon Sizes Guide
All favicon sizes you need for browsers, iOS, Android, and PWA. Copy the HTML tags directly.
16x16Browser tab favicon (standard)
<link rel="icon" type="image/png" sizes="16x16" href="/favicon-16x16.png">
32x32Browser tab (high DPI)
<link rel="icon" type="image/png" sizes="32x32" href="/favicon-32x32.png">
48x48Windows taskbar shortcut
<link rel="icon" type="image/png" sizes="48x48" href="/favicon-48x48.png">
180x180Apple Touch Icon (iOS home screen)
<link rel="apple-touch-icon" sizes="180x180" href="/apple-touch-icon.png">
192x192Android Chrome home screen
{ "src": "/android-chrome-192x192.png", "sizes": "192x192", "type": "image/png" }512x512PWA splash screen
{ "src": "/android-chrome-512x512.png", "sizes": "512x512", "type": "image/png" }FAQ
Which favicon sizes should I include?
At a minimum, include 16x16, 32x32, 180x180 for Apple Touch Icon, and 192x192 and 512x512 for Android and PWA support.
Do I need separate PNG files for every size?
It depends on your stack, but many sites generate a set of PNG assets from one master image and then reference them in HTML and manifest tags.
Why are there multiple icon sizes?
Different devices and contexts render icons at different resolutions, so multiple sizes help ensure crisp display across tabs, bookmarks, home screens, and app launchers.
Can I copy these tags into my site?
Yes. The code samples are meant to be copied into your HTML head or manifest file as starting points for production use.