How to use the favicon generator
- 1Under Make the favicon from, choose An image and press Choose image, or choose Text or emoji and type one to three characters.
- 2Set the Shape, Padding and Background, and check the icons at real size under Preview.
- 3Optionally fill in Site name (for the manifest), Theme color and Folder on your site.
- 4Press Download all (ZIP), upload the files to your site, and paste the tags from Copy HTML into the page's
<head>.
Which favicon files you need
| File | Size | Used by |
|---|---|---|
| favicon.ico | 16, 32 and 48 px inside | Browsers, bookmarks, older software that looks for /favicon.ico |
| favicon-16x16.png, favicon-32x32.png | 16 and 32 px | Browser tabs |
| favicon-48x48.png | 48 px | Larger tab and taskbar icons |
| apple-touch-icon.png | 180 px | iPhone and iPad home-screen shortcuts |
| android-chrome-192x192.png, -512x512.png | 192 and 512 px | Android home screen and installed web apps, via site.webmanifest |
The ZIP contains all of these, the manifest and a small HTML file with the tags. If you only need a single .ico, the PNG to ICO converter is quicker.
Designing for 16x16
At 16 × 16 px a favicon has 256 pixels in total. Detailed logos, thin lines and words turn into a smudge. What works:
- one bold shape or one to three letters, not a full wordmark
- strong contrast against both light and dark browser themes (the preview shows both)
- little padding, so the shape uses the whole square
- a solid background if your mark is thin or light-colored
If your logo has a symbol and a name, use the symbol only. Crop it to a square first with the crop tool so it isn't shrunk to fit a wide image.
The HTML to add
Upload the files to the folder you entered under Folder on your site (the site root, /, is usual), then paste the tags from the HTML panel inside <head> on every page, or in your theme or template's head section. The tags point browsers to the .ico, the 16 and 32 px PNGs, the Apple touch icon and the manifest, and set a theme color.
After uploading, open a file's address directly, such as /favicon.ico, to check it loads. Browsers cache favicons aggressively, so a changed icon may take a while to appear; a private window shows the new one sooner.
Favicons in Google search results
Google shows your favicon next to results when it can find and crawl it. Its guidelines ask for a square image (at least 8 × 8 px, with larger than 48 × 48 px recommended) declared with a <link rel="icon"> tag on the home page, a stable URL that Googlebot is allowed to crawl, and an image that represents your brand. The 48 px and larger files in this set meet the size advice. Updates aren't instant: Google picks up a new favicon when it recrawls your home page, which can take days or weeks.
Is anything I enter stored?
This tool runs entirely in your browser. Your text is not uploaded to our servers.