🖼️ JPG to ICO Converter: Turn a JPG Photo or Logo into a Favicon
By Shihab Mia · Updated 2026-08-03
A square JPG photo or logo of at least 48 x 48 px works best. Files stay on your device, nothing is uploaded.
Live preview
Your ICO file
Choose a JPG file to begin. All conversion happens locally in your browser, nothing is uploaded.
This JPG to ICO converter turns a JPG photo or logo into a real, working favicon.ico file, entirely in your browser. Upload a .jpg or .jpeg file, choose a size (16, 32, 48px, or a multi-size icon holding all three), pick a background fill since JPG has no transparency, and download a valid .ico you can drop straight onto your website. Nothing is uploaded to a server, so the conversion is instant and private.
What is the JPG to ICO Converter?
A favicon is the small icon a browser shows next to a page title in the tab, the bookmarks bar and browsing history. Browsers still request a file called favicon.ico from the root of every website automatically, which is why so many people search for a jpg to ico converter the moment they have a logo saved as a JPG and need it working as a site icon. The catch is that JPG and ICO are built for completely different jobs. JPG is a lossy photo format with no transparency, while ICO is a small icon container designed to hold one or more square images at fixed sizes such as 16, 32 or 48 pixels.
Under the hood, an .ico file starts with a 6-byte ICONDIR header recording a reserved field, a type flag, and how many images the file contains. Each image then gets its own 16-byte ICONDIRENTRY describing its width, height, colour depth, data size and byte offset. Historically the pixel data after that had to be an uncompressed bitmap, which made building icons by hand tedious. Modern ICO files sidestep that by allowing each entry to hold a PNG-encoded image instead, and every current browser plus Windows Vista and later reads that PNG-in-ICO structure correctly. That is exactly how this jpg to ico converter works: your JPG is drawn onto a canvas at the chosen size, exported as a PNG through canvas.toBlob, and those PNG bytes are packed after a correctly built ICONDIR and ICONDIRENTRY, producing a genuine .ico rather than a JPG with its extension renamed.
Because JPG has no alpha channel, converting one to ICO always needs a background decision that a PNG to ICO conversion does not. Any part of the source image that falls outside a cropped square, or any padding needed to make a non-square photo fit a square icon, has to be filled with a solid colour. White or black usually blend into a browser tab better than leaving a mismatched default, and matching your site header colour is a small extra touch that keeps the icon looking intentional rather than clipped. This converter lets you pick that fill before generating the icon, and shows a live preview so you can check the result before downloading.
Size choice matters just as much as the JPG to ICO conversion itself. A single 32x32 icon is enough for a working favicon in most browsers, but a favicon built only at 16px looks soft once Google Search or a bookmarks panel displays it at 32px, and an icon built only at 48px can look oversized in a compact browser tab. The multi-size option in this tool packs 16, 32 and 48 pixel versions into one .ico, the same way professional icon editors do, so the browser can pick whichever size fits the context best. That single file then covers the favicon.ico path at the site root without needing separate PNG link tags for every size.
A favicon.ico built from your JPG is only part of a complete icon set for a modern site. Apple devices ignore favicon.ico for the home screen and instead look for a 180x180 apple-touch-icon.png, while Android and installable web apps read icon sizes such as 192x192 and 512x512 from a site.webmanifest file. Those extra files are plain PNGs rather than ICO containers, so once you have a favicon.ico from this tool, export the same cropped JPG at 180, 192 and 512px as PNG (this site also has a JPG to PNG converter) if you want full coverage across iOS, Android and PWA install prompts, not just desktop browser tabs.
One detail that trips people up after converting: browsers and CDNs cache favicon.ico aggressively, sometimes for weeks, because it is fetched automatically on almost every page load. Uploading a new favicon.ico to your site root often will not show a changed icon in a tab you already have open. A hard refresh, a private or incognito window, or appending a version query string to the favicon link tag usually forces the browser to fetch the new file instead of reusing the cached one.
When to use it
- Converting a company logo saved as a JPG into a favicon.ico for a website or blog.
- Turning a JPG headshot or photo into a small square icon for an app, forum profile or internal tool.
- Building a multi-size favicon.ico (16, 32 and 48px) from a single JPG so it displays sharply everywhere.
- Replacing an old, blurry or upscaled favicon.ico with a fresh conversion from a higher-resolution JPG.
- Creating the favicon.ico piece of a full site icon set alongside apple-touch-icon and PWA manifest icons.
- Making a quick .ico for a Windows desktop shortcut or a small internal tool from an existing JPG image.
How to use the JPG to ICO Converter
- Choose a JPG file (a square photo or logo of at least 48 by 48 px converts most cleanly).
- Decide whether to crop to a centred square, and pick a background fill colour for the areas JPG cannot make transparent.
- Pick the ICO size: 16, 32, 48 px, or the multi-size option that bundles all three into one file.
- Check the live preview, then click Convert JPG to ICO and download the resulting favicon.ico.
- Upload favicon.ico to your site root and add a <link rel="icon" href="/favicon.ico"> tag if your site does not already reference it.
Formula & method
Worked examples
You have a 600 by 600 px square JPG logo and want a single favicon.ico.
- Upload the 600x600 JPG. The tool reports it is square, so cropping is not needed.
- Keep Crop to a centred square on and pick White as the background fill.
- Select 32 x 32 px as the ICO size.
- Click Convert JPG to ICO. The canvas renders the logo at 32px, exports it as a PNG, and wraps it in a 22-byte ICO header.
Result: A favicon.ico holding one 32 x 32 icon, ready to upload to your site root.
You have a 1600 by 900 px widescreen JPG photo and want a full multi-size icon set in one file.
- Upload the 1600x900 JPG. The tool notes it is not square and suggests cropping.
- Keep Crop to a centred square on, which takes the largest 900x900 area from the middle of the photo.
- Pick Multi-size (16 + 32 + 48 in one .ico) as the ICO size.
- Click Convert JPG to ICO. Three canvases are rendered, each exported as a PNG, and all three are packed into one .ico with three ICONDIRENTRY records.
Result: A single favicon.ico containing 16, 32 and 48 px versions of the cropped photo, so the browser can use whichever size fits best.
Your JPG logo sits on a white background but your site header is dark, so a plain White fill would leave a visible box around the icon.
- Upload the logo JPG and keep cropping on so the mark stays centred.
- Change the background fill from White to Black, matching the dark header colour instead of the default.
- Select 32 x 32 px, or Multi-size if the icon also needs to work well at 16 and 48px.
- Compare the live preview against the default White fill before converting, then click Convert JPG to ICO.
Result: A favicon.ico whose padding blends into a dark site theme instead of showing a mismatched white square in the browser tab.
JPG versus ICO: why the conversion needs extra steps
| Property | JPG | ICO (built here) |
|---|---|---|
| Purpose | Photographic image format | Small icon container for a browser or OS |
| Transparency | None, always opaque | Supported via the embedded PNG data |
| Typical size | Any width and height | Fixed square sizes: 16, 32, 48px and similar |
| Compression | Lossy (JPEG algorithm) | PNG data inside the ICO, lossless at the chosen size |
| Multiple images per file | No, one image only | Yes, one ICONDIRENTRY per size in the same file |
Structure of the .ico file this converter builds
| Bytes | Field | Value used |
|---|---|---|
| 0 to 5 | ICONDIR header | reserved 0, type 1, count = number of sizes chosen |
| 6 to 21 (per image) | ICONDIRENTRY | width, height, 32 bits per pixel, PNG data size and offset |
| After the entries | Image data | PNG bytes from canvas.toBlob for each selected size, in order |
Full favicon file checklist for a modern site
| File | Size(s) | Used by | Where it comes from |
|---|---|---|---|
| favicon.ico | 16, 32, 48px (multi-size) | Desktop browser tabs, bookmarks, address bar | This JPG to ICO converter |
| apple-touch-icon.png | 180 x 180px | iPhone and iPad home screen icon | Export the same crop as PNG at 180px |
| android-chrome-192x192.png | 192 x 192px | Android home screen icon | Export as PNG, referenced in site.webmanifest |
| android-chrome-512x512.png | 512 x 512px | PWA install prompt and splash screen | Export as PNG, referenced in site.webmanifest |
| site.webmanifest | Text file, not an image | Links Android and PWA icons together | Written by hand or generated alongside the icons |
Common mistakes to avoid
- Uploading a rectangular JPG and expecting a clean square icon. Icons must be square. If your JPG is not square, leave Crop to a centred square on so the tool takes the middle square. Turning cropping off instead squeezes or letterboxes the photo, which usually looks worse.
- Ignoring the background fill option. Because JPG has no transparency, any padding added during cropping or scaling has to be filled with a solid colour. Leaving the default White when your site uses a dark theme can leave a visible box around the icon in the browser tab.
- Starting from a small or blurry JPG. Converting a low-resolution JPG to ICO cannot add detail that was never there. Start from the largest, sharpest JPG you have so the tool scales down cleanly rather than upscaling a soft source image.
- Only generating one size when the site needs several. A single 32px icon works, but if your site displays favicons in different contexts (tab, bookmarks, search results), the multi-size option that bundles 16, 32 and 48px into one .ico gives a sharper result everywhere without extra files.
- Expecting a new favicon.ico to appear instantly. Browsers and CDNs cache favicon.ico aggressively. After uploading a new one, do a hard refresh or open the site in a private window before assuming the conversion failed, since the old cached icon is usually the real cause.
- Treating favicon.ico as the entire icon set. favicon.ico only covers desktop browser tabs. iOS home screens want a 180x180 apple-touch-icon.png and Android or PWA installs want 192x192 and 512x512 PNGs in a manifest, none of which favicon.ico alone provides.
Glossary
- Favicon
- The small icon a browser shows in the tab, bookmarks and history for a website.
- ICO
- A Windows icon container format that can hold one or more images at different fixed sizes inside a single file.
- ICONDIR
- The 6-byte header at the start of an .ico file recording the file type and how many images it contains.
- ICONDIRENTRY
- A 16-byte record describing one image inside an .ico: its size, colour depth, and where its data sits in the file.
- PNG-in-ICO
- The accepted practice of storing a PNG-compressed image inside an ICO entry instead of an old-style raw bitmap.
- Multi-size ICO
- A single .ico file containing several ICONDIRENTRY records (for example 16, 32 and 48px), letting the browser pick the best fit.
- Apple touch icon
- A 180x180 PNG referenced with a link tag that iOS uses for the home screen icon instead of favicon.ico.
- Web app manifest
- A site.webmanifest JSON file listing icon sizes such as 192x192 and 512x512 that Android and installable web apps use.
Frequently asked questions
How do I convert a JPG to ICO?
Upload your .jpg or .jpeg file, choose whether to crop it to a square, pick a size, then click Convert JPG to ICO. The tool draws your photo onto a canvas and packages it as a real .ico file you can download, entirely in your browser.
Can I convert a JPG to ICO without uploading it to a server?
Yes. This jpg to ico converter runs entirely in your browser using FileReader and canvas. Your JPG is read and processed on your own device and is never sent anywhere, so the conversion is completely private.
Why does the JPG need a background colour when converting to ICO?
JPG files have no transparency, so any area added during cropping or squaring a non-square photo has to be filled with a solid colour. Pick White, Black or light grey to match where the favicon will be used.
Is the resulting .ico file a real icon file?
Yes. The converter builds a proper ICONDIR header and ICONDIRENTRY records, then stores PNG image data inside, a structure the ICO format allows and that browsers and Windows read correctly, unlike simply renaming a JPG to .ico.
What is the difference between a single-size and multi-size ICO here?
A single-size ICO holds one image at the size you pick, for example 32x32. The multi-size option packs 16, 32 and 48px versions into the same .ico file, so the browser or OS can choose whichever size looks sharpest in its context.
What size JPG should I start with?
A square JPG of at least 48 by 48 px works well, and a larger source (256px or more) is even better since the tool can only scale down cleanly, not add detail when scaling a small image up.
Why is my new favicon.ico not showing up after I uploaded it?
Browsers cache favicon.ico for a long time because it is requested on almost every page load. Do a hard refresh (Ctrl or Cmd plus Shift plus R), open the site in a private window, or wait for the cache to expire before assuming the conversion is wrong.
Do I need an HTML link tag, or does favicon.ico work automatically?
Most browsers fetch /favicon.ico from the site root automatically with no HTML needed. Adding <link rel="icon" href="/favicon.ico"> is still recommended, since it works even if the file lives somewhere other than the root, and it helps browsers pick it up faster.
Do I also need apple-touch-icon and Android or PWA icons?
If you want a sharp icon on iOS and Android home screens or in PWA install prompts, yes. favicon.ico alone only covers desktop browser tabs. Export the same cropped image as PNG at 180x180 for Apple and 192x192 or 512x512 for Android, and reference them in your HTML and site.webmanifest.
Can I convert a JPG that already has a white or solid colour background?
Yes, and it is usually the easiest case. If your JPG background matches the fill colour you pick here, the padding added during cropping blends in seamlessly and the icon looks identical to the original logo at any size.