AM A favicon is the small square icon that shows in browser tabs, bookmarks, history, phone home screens and next to your site name in Google results. A missing one leaves a gray globe in the tab and makes your store look unfinished. This generator builds a full favicon set from a few letters, an emoji or your own logo, in your browser, with nothing uploaded.
You get every file current browsers and phones ask for, plus the HTML to connect them, in one ZIP.
How to make a favicon
- Choose a tab. Text suits brands with a short name or monogram, Emoji is the quickest option for a side project, and Image takes an existing PNG, JPG, SVG or WebP logo.
- For text, type one to three characters, pick a font, weight and size, then set the text color, background color and shape (square, rounded or circle).
- For an image, upload a logo. It is cropped to a square from the center. Add padding if the edges touch the frame, and a background color if the logo is dark on a transparent background.
- Check the previews at 16, 32, 48, 180 and 512 px and the mock browser tab. The 16 px version is the honest test: if you cannot read it there, simplify.
- Enter your site name and theme color, then click Download favicon ZIP.
- Upload the files to your site root and add the link tags shown under the preview.
The files you get and what each is for
| File | Size | Used by |
|---|---|---|
| favicon.ico | 16, 32 and 48 px in one file | Browsers that request /favicon.ico by default, older browsers, some crawlers and feed readers |
| favicon-16x16.png | 16 x 16 | Browser tabs on standard screens |
| favicon-32x32.png | 32 x 32 | Tabs on high density screens, bookmarks, taskbar shortcuts |
| apple-touch-icon.png | 180 x 180 | iPhone and iPad when someone adds your site to the home screen |
| android-chrome-192x192.png | 192 x 192 | Android home screen shortcuts, listed in the manifest |
| android-chrome-512x512.png | 512 x 512 | Install prompts and splash screens, listed in the manifest |
| site.webmanifest | Text (JSON) | Name, icons, theme color and background color for installable web apps |
| README.txt | Text | The HTML link tags and upload notes |
The Apple touch icon always gets a solid background, even when you choose a transparent one, because iOS fills transparent areas with black. The other PNGs keep transparency if you chose it.
How to add a favicon to Shopify
- In Shopify admin, go to Online Store > Themes and click Customize on your live theme.
- Open Theme settings (the gear icon in the left sidebar).
- Open the Logo section (called Favicon in some themes) and click Select image under Favicon image.
- Upload android-chrome-512x512.png or favicon-32x32.png, click Done, then Save.
Shopify resizes the image and writes the link tags for you, so you do not upload the ICO or the manifest. The favicon does not show inside the theme editor preview, so check it on your live storefront in a new tab. Shopify's own instructions are in the Shopify Help Center. For the rest of your store's search setup, see the Shopify SEO guide.
How to add a favicon to WordPress
WordPress calls the favicon a Site Icon and asks for a square image of at least 512 x 512 px, so use android-chrome-512x512.png.
- WordPress 6.5 and later: go to Settings > General, click Choose a Site Icon, pick the image and save. This works with block themes too.
- Classic themes: Appearance > Customize > Site Identity, then Select site icon and Publish.
- Block themes in the Site Editor: select the Site Logo block and turn on Use as site icon in the block settings.
WordPress generates the smaller sizes and the link tags itself. See the WordPress documentation for details.
How to add a favicon to a plain HTML site
Upload every file from the ZIP to the root folder of your site, next to your home page, so /favicon.ico loads in a browser. Then paste these tags inside the <head> of every page:
<link rel="icon" href="/favicon.ico" sizes="48x48"><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="apple-touch-icon" sizes="180x180" href="/apple-touch-icon.png"><link rel="manifest" href="/site.webmanifest">
If the files live in a subfolder, change the paths in the tags and in site.webmanifest to match. After uploading, run the website SEO checker or the meta tag analyzer on your home page to confirm the tags are in the head.
Google's favicon rules for search results
Google shows a favicon next to your site name in search results when it can find and crawl one. Its favicon guidelines say:
- The favicon must be square (1:1). Google accepts any size from 8 x 8 px but recommends larger than 48 x 48 px. The 512 px PNG or the ICO from this tool both qualify.
- Put the link tag on your home page. Google supports one favicon per domain or subdomain, not per subfolder.
- Googlebot must be able to crawl the home page and Googlebot-Image must be able to crawl the favicon file, so do not block either in robots.txt.
- Keep the favicon URL stable, and use an image that represents your brand. Google replaces inappropriate icons with a default one.
Note: After a change, Google can take several days to several weeks to show the new icon. You can speed it up by requesting indexing of the home page with the URL Inspection tool in Search Console, but a favicon is never guaranteed to appear.
Common favicon mistakes
- Shrinking a wide logo. A full wordmark turns into a thin unreadable line at 16 px. Use the first letter, a monogram or the brand mark.
- Too much detail. Thin lines and small text disappear. Bold shapes and two strong colors work best.
- Low contrast. Check the icon on both light and dark browser tabs. A colored background with a rounded or circle shape helps.
- Renaming the file without updating the tags. Broken paths leave the default globe.
- Judging by your own browser. Browsers cache favicons hard. Test in a private window or another device.
If you start from a large logo file, the image resizer and image converter help you prepare a clean square PNG first. Building several niche sites at once? The AM Jarvis AI Site Builder creates the full site structure, and this tool gives each one its own icon.