Every icon your site needs, in one go
A favicon is the little icon in browser tabs, bookmarks and history – and the same artwork is needed in more sizes for iPhone home screens, Android, installed web apps and Google search results. Making each size by hand is tedious. This favicon generator creates the complete set from one image and gives you the HTML to install it.
What you get
The ZIP contains 9 files:
| File | Size | Used by |
|---|---|---|
favicon.ico | 16, 32, 48 px | All browsers, legacy fallback, Windows |
favicon-16x16.png | 16 px | Browser tabs |
favicon-32x32.png | 32 px | Browser tabs on high-density screens, taskbar |
apple-touch-icon.png | 180 px | iPhone and iPad home screens |
android-chrome-192x192.png | 192 px | Android home screen |
android-chrome-512x512.png | 512 px | Splash screens, installed apps |
maskable-icon-512x512.png | 512 px | Android adaptive icon shapes |
site.webmanifest | – | Web app name and icons |
favicon-html.txt | – | The HTML tags to paste into your head |
Preparing your logo
Favicons are tiny, so simplicity wins. A detailed logo with fine text becomes an unreadable smudge at 16 pixels. Good favicons are usually:
- A symbol or initial, not the full wordmark.
- High contrast, with bold shapes.
- Square, or close to it.
Start with an SVG or a PNG of at least 512 × 512 px. If your source is smaller, the tool shows a tip that a larger source gives sharper icons. If you only have a photo or a low-quality logo, try Logo to Vector first.
Options
- Fit whole image (pad) – the whole logo fits inside the square, with space around it. Best for wide or tall logos.
- Fill square (crop edges) – the logo fills the square and edges may be cut off. Best for square artwork.
- Padding (%) – breathing space around the logo. A little padding makes icons look balanced on home screens.
- Corner rounding (%) – round the corners of the background for a modern app-icon look. iOS rounds icons itself, so keep this low if you are mainly targeting iPhones.
- Background – a Background colour behind the logo, or Transparent. Transparent works well in browser tabs; a solid colour is better for home-screen icons, which otherwise get a black or white background.
- Site name (for the manifest) – the name shown under your icon when someone adds your site to their home screen.
Installing on your website
- Unzip the pack and upload the files to your site root, so
https://yoursite.com/favicon.icoworks. - Paste the HTML snippet into the
<head>of your pages (in WordPress, use your theme’s header settings or a header plugin; in website builders, look for “custom code”). - Visit your site in a private window to check the icon.
The tool reminds you: “Upload the files to your site root and paste this into ”.
Favicons and Google
Google shows favicons next to search results on mobile and desktop. Google’s guidelines ask for a square icon of at least 48 × 48 px that represents your brand and is linked from your home page – this pack covers that. Updates can take a while to appear in search results.
Troubleshooting
- Old icon still showing: browsers cache favicons for a long time. Hard-refresh (Ctrl+Shift+R or Cmd+Shift+R) or test in a private window.
- Blurry icon: use a bigger or vector source, and simplify the design.
- Black background on iPhone: choose a background colour instead of Transparent.
Related tools
Make your logo transparent with Remove Background, convert SVG to PNG with SVG Converter, or recolour an SVG logo with Recolor SVG.
Privacy
Your logo is processed in your browser and never uploaded.
Frequently asked questions
What files are in the favicon pack?
favicon.ico with 16, 32 and 48 px sizes, 16 × 16 and 32 × 32 PNGs, a 180 × 180 apple-touch-icon, 192 and 512 px Android icons, a 512 px maskable icon, site.webmanifest and the HTML snippet – 9 files in all.
What size should my source image be?
At least 512 × 512 pixels, or an SVG. Smaller images still work, but the tool warns you that icons will be less sharp.
Where do I put the files?
Upload them to the root of your website (the same folder as your home page) and paste the HTML snippet inside the head element of every page.
What is a maskable icon?
An Android icon with extra safe padding, so the system can crop it into circles, squircles or other shapes without cutting off your logo.
Why doesn't my new favicon show?
Browsers cache favicons aggressively. Hard-refresh, open the site in a private window or wait a day. Google search results can take weeks to update.
Is my logo uploaded?
No. All icons are generated in your browser.