AI agents for SMEs - now running in production. See how the pilot works →

Favicon Generator & Image to Base64 Converter

Turn any image into a favicon.ico plus 16, 32, 180, 192 and 512 px PNGs with the HTML tags to paste, or convert it to a Base64 data URI for CSS and HTML — processed on your device.

🔒 Private. The image is resized and encoded on your device with the HTML canvas. Nothing is uploaded.

Paste into your <head> after uploading the files to your site root:

In short

A complete favicon set is a multi-size favicon.ico (16, 32, 48 px) in the site root, 32 and 16 px PNGs, a 180 px apple-touch-icon.png, and 192 and 512 px PNGs referenced from site.webmanifest. Google requires a square icon that is a multiple of 48 px. Base64 data URIs are 33% larger than the file and only worth inlining below about 5 KB.

Who this is for: Web developers and site owners who need a complete favicon set or an inline Base64 image without installing anything.

Not tax or legal advice. Browser and platform icon requirements change; check the current guidance from Google, Apple and the web manifest specification for edge cases.
Ad space — insert AdSense unit here after approval

Which favicon files you actually need in 2026

  • favicon.ico in the site root — still requested by every browser and by Google for search results. This tool packs 16, 32 and 48 px PNGs into one .ico.
  • favicon-32x32.png / 16x16.png — crisp versions for modern browser tabs.
  • apple-touch-icon.png (180 × 180) — the icon iOS uses when someone adds your site to the home screen. No rounded corners needed; iOS masks it.
  • icon-192.png and icon-512.png with a site.webmanifest — required for Android "Add to home screen" and for a Progressive Web App.

Google shows the favicon next to your site name in mobile search results and requires it to be a multiple of 48 px, square, and reachable at a stable URL — the 48 px entry in the .ico and the 192 px PNG both satisfy that.

Base64 data URIs embed the image inside HTML or CSS, saving an HTTP request. They are 33% larger than the file and are not cached separately, so they only pay off for tiny images — icons, tracking pixels, small logos under about 5 KB.

See also: Resize & Compress Image to an Exact KB Size, QR Code Generator — WiFi, WhatsApp, vCard, URL.

Assumptions

  • The image is centre-cropped to a square and resized with the canvas at high smoothing quality to 512, 192, 180, 48, 32 and 16 px.
  • favicon.ico is built as an ICO directory containing the 16, 32 and 48 px PNGs.
  • Base64 output is the browser's own data URL of the original file (or the generated PNG in letter mode).

Worked example

A 1024 × 1024 PNG logo

The image is centre-cropped to a square and scaled to 512, 192, 180, 48, 32 and 16 px with high-quality smoothing. The three smallest are wrapped into a 1-file favicon.ico (ICO directory + PNG payloads, the format every modern browser reads). Upload all files to the site root and paste the five <link> tags into the <head>.

Frequently asked questions

My favicon looks blurry at 16 px — what can I do?

Detailed logos never survive 16 px. Use the 'letter' mode, or a simplified mark with one bold shape and high contrast; check the 16 × 16 preview before downloading.

Can I use an SVG favicon instead?

Yes — modern browsers accept , but Safari and Google search still need the .ico and PNG versions, so ship both.

Why does Google not show my new favicon?

Google re-crawls favicons slowly. Make sure /favicon.ico returns 200, the link tag points to a square image that is a multiple of 48 px, and request indexing of the homepage in Search Console.

Is the image uploaded anywhere?

No. Resizing, ICO packing and Base64 encoding all happen in your browser; the page makes no network request with your file.

What size should a favicon be?

Ship a favicon.ico containing 16, 32 and 48 px, plus PNGs at 32, 180 (Apple), 192 and 512 px (Android/PWA). Google needs a square icon that is a multiple of 48 px.

When should I use Base64 images?

Only for tiny images — icons and logos under about 5 KB — where saving one HTTP request is worth the 33% size increase and loss of caching.

Ad space — insert AdSense unit here after approval

Related calculators

Other free tools

Resize & Compress Image to an Exact KB SizeShrink a photo or scanned signature to an exact file size in KB for exam forms, job portals and visa applications — processed on your device, never uploaded.Compress PDF to an Exact KB SizeShrink a PDF to a target file size in KB for online forms and portals with strict upload limits — processed on your device, never uploaded.HEIC to JPG ConverterConvert iPhone HEIC/HEIF photos to JPG in your browser — free, no sign-up, files never leave your device.

See all free tools →

Written by the Swift IT Sols editorial team · SWIFT SOLSRules sourced from the official authorities named on this page and last checked How we source and check calculators

Found an error? Report it — tell us the inputs, the result you got, what you expected and the rule or source. Confirmed corrections are published within a week.

Start here

Ready to build your next digital solution?

Send the brief and you get a scoped response with approach, milestones and a fixed price range. Not a sales call.

Book consultation Request proposal Or see one running first
1

A 30-minute call with the engineer who would run your project

Within 2 business days
2

A written scope: approach, module breakdown, milestones, fixed price range

Within 5 business days
3

You decide. No retainer, no obligation, and the scope document is yours to keep either way

Your timeline

Send your brief

Three fields to start. Add project details if you have them.

A real person replies, usually within one business day. Your details are stored on this site only and are never sold or shared.

Book a consultation