Img Hut How to create a favicon
- Choose your logo or image, ideally a square PNG of at least 512 × 512 pixels with a transparent background.
- Decide how a non-square image should become square: Fit the whole image adds transparent padding so nothing is cut off, while Crop to a centered square fills the icon and trims the edges.
- Pick a background color for the Apple touch icon; white is the default.
- Click Generate favicons and check the previews. The small sizes are shown enlarged with visible pixels so you can judge how legible they are.
- Click Download all (.zip), or download individual files from the list.
- Upload the files to the root folder of your website and paste the HTML snippet into the
<head>of your pages.
What is in the favicon set
| File | Size | Where it is used |
|---|---|---|
favicon.ico | 16, 32 and 48 px in one file | Browser tabs, bookmarks and history. Browsers and many other programs also request /favicon.ico automatically, even without a link tag. |
favicon-16x16.png | 16 × 16 | Browser tabs on standard-resolution screens |
favicon-32x32.png | 32 × 32 | Tabs on high-resolution screens, taskbars and shortcuts |
favicon-48x48.png | 48 × 48 | Desktop shortcuts and other places that need a slightly larger icon |
apple-touch-icon.png | 180 × 180 | The icon shown when an iPhone or iPad user adds your site to the home screen |
icon-192.png, icon-512.png | 192 and 512 px | A web app manifest, used by Android home-screen shortcuts, install prompts and splash screens |
How the generator works
Each size is drawn on its own canvas in your browser. Shrinking a large logo straight down to 16 pixels in one step would skip most of its pixels and look ragged, so the generator reduces the image in halving steps with the browser’s high-quality smoothing and saves each size as a PNG.
The .ico file is assembled locally as well. An ICO file is a small directory followed by the images it contains, and every current browser, as well as Windows since Vista, accepts PNG-compressed images inside it. The 16, 32 and 48 pixel PNGs are therefore packed into favicon.ico unchanged. The ZIP download is also built in the page, storing the files without extra compression because PNG data is already compressed. At no point is your logo sent to a server.
Designing a favicon that works at 16 pixels
- Simplify. A single letter, a symbol or the logo mark without its wordmark reads far better than a full logo. Text is illegible at 16 pixels.
- Use strong contrast. Browser tab bars can be light or dark. A dark logo on a transparent background may vanish in a dark theme; a colored rounded square behind the mark works on both.
- Fill the square. Generous padding makes your icon look smaller than the icons in neighbouring tabs. For a square logo, the “crop” option or a tightly cropped source gives a bolder result.
- Start big and sharp. Export your logo at 512 pixels or more; the generator warns you when the source is smaller, because the 192 and 512 pixel icons would then be enlarged and look soft.
- Judge the 16 pixel preview. If details turn to mush, simplify the design rather than trying to sharpen it.
Adding the favicon to your website
Upload the files to the root of your site so that https://your-site/favicon.ico works, then add these lines inside <head>:
<link rel="icon" href="/favicon.ico">
<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">If your site has a web app manifest, list the two large icons in it:
"icons": [
{ "src": "/icon-192.png", "sizes": "192x192", "type": "image/png" },
{ "src": "/icon-512.png", "sizes": "512x512", "type": "image/png" }
]Browsers cache favicons aggressively, so after replacing one you may keep seeing the old icon for a while. A hard refresh, or a version parameter such as /favicon.ico?v=2 in the link tags, makes browsers fetch the new file. Search engines update the icon shown next to your results only after they recrawl your homepage, which can take days or weeks.
Limitations
- The icons are raster PNG and ICO files. The generator does not create an SVG favicon, a manifest file or the older Windows tile configuration.
- iOS rounds the corners of the Apple touch icon automatically, so do not add rounded corners yourself.
- If you declare the 192 and 512 pixel icons as “maskable” in a manifest, Android may crop them into circles or other shapes; keep the important part of the logo within the central 80% of the icon.
- One source image per set.
Frequently asked questions
What size should a favicon be?
Browsers mainly use 16 and 32 pixel icons in tabs, so a favicon.ico containing 16, 32 and 48 pixel images covers them. Add a 180 pixel Apple touch icon for iPhones and iPads, and 192 and 512 pixel icons if your site has a web app manifest. Start from a source of at least 512 x 512 pixels.
Do I still need a favicon.ico file?
Modern browsers can use PNG favicons declared with link tags, but browsers and many other programs still request /favicon.ico automatically. Keeping one in the root of your site avoids missing icons and needless 404 errors.
Why does my browser still show the old favicon?
Favicons are cached aggressively. Do a hard refresh, open the site in a private window, or add a version parameter such as ?v=2 to the favicon URLs in your HTML.
Can I make a favicon from a JPG?
Yes. Any image your browser can open works. A JPG has no transparency, though, so the icon will have the JPG's background; use a PNG with a transparent background for a cut-out look.
Why is the Apple touch icon not transparent?
iOS displays home-screen icons on an opaque tile, and transparent areas may not look the way you expect. The generator therefore fills that icon with the background color you choose.
Will my favicon appear in search results?
Search engines such as Google can show a site's favicon next to its results. Declare it on your homepage with a link tag, keep it square and crawlable, and allow time for the search engine to recrawl the page.
Is my logo uploaded to a server?
No. All icons, the ICO file and the ZIP archive are created in your browser; nothing is uploaded.
Related tools
Crop Image
Draw a selection freely or lock it to 1:1, 4:5, 16:9 and other ratios, and see its exact size in pixels.
Resize Image
Change width and height in pixels or by percentage, with an aspect-ratio lock and smooth downscaling.
Image to Base64
Encode an image as raw Base64, a data URI, a CSS background or an HTML img tag.
Related guides
- JPG vs PNG vs WebP: How to Choose the Right Image Format – How each format stores pixels, where each one wins, what transparency and browser support mean in practice, and a five-question checklist for picking the right format.