✓
Cover browser tabs
Website Favicon
Complete Website Favicon Guide
A professional website needs more than favicon.ico: mobile, PWA, and system shortcuts all use different icon assets.
✓
Cover iOS Home Screen icons
✓
Cover Android/PWA install entry points
✓
Cover Windows Tiles
HTML Code example
<!-- Favicon -->
<link rel="icon" href="/favicon.ico" sizes="any">
<link rel="shortcut icon" href="/favicon.ico">
<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">
<link rel="icon" type="image/png" sizes="96x96" href="/favicon-96x96.png">
<!-- Apple Touch Icon -->
<link rel="apple-touch-icon" sizes="120x120" href="/apple-touch-icon-120x120.png">
<link rel="apple-touch-icon" sizes="152x152" href="/apple-touch-icon-152x152.png">
<link rel="apple-touch-icon" sizes="167x167" href="/apple-touch-icon-167x167.png">
<link rel="apple-touch-icon" sizes="180x180" href="/apple-touch-icon.png">
<!-- Android / PWA -->
<link rel="manifest" href="/site.webmanifest">
<meta name="theme-color" content="#ffffff">
<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">
<!-- Windows Tiles -->
<meta name="msapplication-TileColor" content="#ffffff">
<meta name="msapplication-TileImage" content="/mstile-150x150.png">
<meta name="msapplication-config" content="/browserconfig.xml">FAQ
What should I check before launch?
Check favicon.ico, 16x16, 32x32, Apple Touch Icon, manifest, and HTML Code paths.
Do I need favicon code on every page?
Usually no. Put it in a global layout or template.
Related reading
Favicon Sizes
Favicon Sizes Guide
Different platforms read different icon sizes. FaviconPack generates the common sizes in one pass.
Apple Touch Icon
Apple Touch Icon Generator
Apple Touch Icon is shown on iPhone and iPad when someone adds your website to the Home Screen.
PWA Icons
PWA Icon Generator
PWA icons are usually declared in site.webmanifest for install prompts, launch screens, and device shortcuts.
HTML Code
Favicon HTML Code Example
Copy the generated HTML Code into your website head to connect favicons and app icons.
How To
How to Add a Favicon
Adding a favicon comes down to uploading the icon files and placing the correct link tags in the head.