Which sizes does the favicon generator make?
A favicon is the small icon in a browser tab, a bookmark list and the search results next to your site name. Browsers pick the size that fits their slot, so you provide a few. This favicon generator makes the four that cover nearly every case:
Android and Chrome's "install app" prompts use larger 192 and 512 px icons from a web app manifest. If you're building an installable web app, export those sizes separately with the Image Resizer.
| File | Size | Where it shows |
|---|---|---|
| favicon-16x16.png | 16 × 16 px | Browser tabs on standard screens |
| favicon-32x32.png | 32 × 32 px | Tabs and bookmarks on high-density screens |
| favicon-48x48.png | 48 × 48 px | Google search results and site shortcuts |
| favicon-180x180.png | 180 × 180 px | Apple touch icon on iPhone and iPad home screens |
How to add the favicon to your site
Upload the PNG files to your site's root folder and add these lines inside the <head> of every page. Rename the 180 px file to apple-touch-icon.png, the name iOS looks for by default:
Site builders make this easier. In WordPress, go to Appearance → Customize → Site Identity and upload the 180 px PNG as the Site Icon. Shopify, Squarespace, Wix and Webflow each have a favicon field in their site settings. After you publish, open your site in a private window to check the new icon, since browsers cache favicons aggressively.
- <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="icon" type="image/png" sizes="48x48" href="/favicon-48x48.png">
- <link rel="apple-touch-icon" href="/apple-touch-icon.png">
Tips for a favicon people recognize
At 16 pixels there's no room for a full logo with a tagline. Use your logomark, a single letter or a simple shape, with strong contrast against both light and dark browser tabs. Start from a square image at least 180 px wide so the large icon stays sharp; the generator crops anything else to a centered square.
Google shows favicons in mobile and desktop search results. Its guidelines ask for a square icon and recommend one larger than 48 × 48 px, so make sure the 48 or 180 px file is linked and crawlable. Changes can take a while to appear in search, so don't worry if the old icon lingers for a few days.
