Favicon Sizes for All Platforms — Complete 2024 Guide

Everything you need to set up favicons correctly for browsers, iOS, Android, and PWAs — with copy-ready HTML tags.

Jump to HTML Code See All Sizes

Complete favicon sizes reference chart — all required dimensions for browsers, iOS, Android and PWA

How to Create and Add Favicons

1
Choose the right favicon sizes
Different devices and browsers need different icon dimensions — from 16×16 for browser tabs to 512×512 for PWA splash screens.
2
Export your logo in all required dimensions
Use a design tool or favicon generator to export PNGs at 16, 32, 48, 180, 192, and 512 pixels. Always export from a vector source.
3
Add favicon tags to your HTML <head>
Place your favicon files in the root of your project, then paste the HTML snippet below into every page's <head> tag.

Favicons by Platform

Desktop Browsers

Tab icons, bookmarks, and Windows shortcuts

16×1632×3248×48.ico

Apple iOS

Home screen icons for iPhone and iPad

180×180

Android & PWA

Home screen icons and PWA splash screens

192×192512×512

All Required Favicon Sizes

Size	File name	Platform	Use
16×16	`favicon-16x16.png`	Browser	Tab icon
32×32	`favicon-32x32.png`	Browser	Bookmark, taskbar
48×48	`favicon-48x48.png`	Browser	Windows shortcut
180×180	`apple-touch-icon.png`	Apple	iOS home screen
192×192	`android-chrome-192x192.png`	Android	Home screen
512×512	`android-chrome-512x512.png`	PWA	Splash screen
any	`favicon.ico`	Browser	Fallback (old browsers)

HTML Code — Copy & Paste

html

<!-- Desktop Browsers -->
<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/png" sizes="48x48" href="/favicon-48x48.png">

<!-- Apple Touch Icon -->
<link rel="apple-touch-icon" sizes="180x180" href="/apple-touch-icon.png">

<!-- Android & PWA -->
<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">

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

Why Multiple Favicon Sizes Matter for SEO

Using all favicon sizes ensures your site icon appears correctly in browser tabs, bookmarks, Windows shortcuts, iOS and Android home screens, and Google search results. A missing or blurry favicon reduces user trust, increases bounce rate, and indirectly harms SEO performance.

Google does not use favicons as a direct ranking factor, but they appear next to your site name in mobile search results. A clear, recognizable favicon improves brand recall and click-through rates.