✓
Crop from the centered source image
ICO Generator
favicon.ico Generator
favicon.ico can bundle multiple sizes in one file for browser and system compatibility.
✓
Generate a multi-size ICO file
✓
Package it together with PNG icons
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
How many sizes should an ICO include?
A complete package should include 16x16, 32x32, and 48x48. The free ICO can include 16x16 and 32x32.
Are ICO and PNG redundant?
No. ICO helps compatibility, while PNG works well for modern browsers and high-density screens.
Related reading
Favicon Sizes
Favicon Sizes Guide
Different platforms read different icon sizes. FaviconPack generates the common sizes in one pass.
Favicon Generator
Favicon Generator
Generate the essential favicon files and integration code your website needs from one source image.
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.