Tinker Tools

Icon Converter Instantly

Convert PNG images to favicon-ready icons at multiple sizes. All processing is done locally in your browser—your images never leave your device.

Preview

Drop your PNG image here or click to browse

Recommended: Square PNG image, 256x256 or larger

How it works

1. Upload PNG

Drag and drop or click to upload a PNG image. For best results, use a square image that is at least 256x256 pixels.

Local Processing

2. Select Sizes

Choose which icon sizes to generate. Standard favicon sizes include 16x16, 32x32, and 48x48. Larger sizes are useful for app icons and high-DPI displays.

Multiple Sizes

3. Download Icons

Preview each generated icon at its actual size. Download individual sizes or all at once with a single click.

High Quality

Frequently Asked Questions

What is Icon Conversion?

Icon conversion transforms a source image into the specialized formats and sizes that browsers, operating systems, and app stores require for favicons, home screen icons, and app icons. A favicon — short for favorite icon — is the small image that appears in browser tabs, bookmark lists, and history entries. The classic format is ICO, a Microsoft container that can hold multiple resolutions inside a single file. Modern browsers also accept PNG and SVG favicons, each with different advantages. PNG gives you sharp rasterized output at specific sizes. SVG scales to any resolution without losing quality because it is a vector format described by mathematical paths rather than a fixed pixel grid.

The landscape gets more complex when you account for mobile platforms. Apple requires a 180x180 PNG file — called an Apple touch icon — that iOS displays when a user adds your site to their home screen. Android uses a 192x192 PNG for the home screen shortcut and a 512x512 PNG for the splash screen. Android also supports adaptive icons, which separate the foreground graphic from a background layer so the operating system can apply device-specific masks — circles on Pixel phones, squircles on Samsung devices, rounded squares on others. Your foreground content needs to fit within a 66% safe zone (roughly the inner 336x336 pixels of a 512x512 canvas) to avoid clipping under any mask shape.

This tool takes a single source image and generates every icon variant you need in one pass. Upload a high-resolution square image — at least 512x512 pixels — and the tool produces ICO files with embedded 16x16, 32x32, and 48x48 bitmaps, standalone PNG files at 180x180 and 192x192 and 512x512, and an SVG version if your source is vector-compatible. Everything runs in your browser. No file ever leaves your machine, which matters when you are working with a client's unreleased logo or a proprietary brand mark.

Key Features and Benefits

  • Multi-resolution ICO generation The ICO format is a container that holds multiple bitmap images at different resolutions. This tool packs 16x16, 32x32, and 48x48 bitmaps into a single .ico file. The 16x16 version appears in browser tabs. The 32x32 version shows up in Windows taskbar shortcuts. The 48x48 version is used by Windows Explorer for desktop icons. By embedding all three sizes, you ensure the operating system always picks the sharpest version available rather than scaling a single size up or down.
  • Apple touch icon output iOS looks for a 180x180 PNG file referenced by a link tag with rel="apple-touch-icon". The tool generates this exact file, properly scaled and cropped from your source image. iOS applies its own rounded-corner mask and optional gloss effect — you do not need to add rounded corners yourself. The output is a plain square PNG at 180x180 pixels with no transparency, as Apple recommends against transparent touch icons because the transparent areas render as black on the home screen.
  • Android adaptive icon support Android 8.0 (API level 26) introduced adaptive icons with separate foreground and background layers. The tool generates a 512x512 foreground PNG with your icon centered in the safe zone — the inner 66% of the canvas — and a separate solid-color or gradient background layer. You can preview how the icon looks under circle, squircle, rounded-square, and teardrop masks before downloading.
  • SVG favicon generation SVG favicons work in Chrome 80+, Firefox 41+, and Safari 15+. Because SVG is resolution-independent, a single file looks crisp on any display density. The tool converts your source into an optimized SVG — removing unnecessary metadata, collapsing groups, and minifying path data — or passes through your SVG source directly if you uploaded one. SVG favicons also support the prefers-color-scheme media query, letting you show a light icon on dark browser chrome and a dark icon on light chrome.
  • Web manifest snippet After generating your icons, the tool provides a ready-to-paste JSON snippet for your site.webmanifest file. It includes the icons array with src, sizes, type, and purpose fields correctly populated. It also gives you the HTML link tags for the ICO favicon, the Apple touch icon, and the SVG favicon — everything you need to wire up the icons in your site's head section.
  • Safe zone preview A visual overlay shows the Android adaptive icon safe zone on your source image. Anything outside the inner 66% circle is at risk of being clipped by the device mask. You can reposition and scale your artwork within the safe zone before exporting, ensuring no important detail gets cut off on any Android device.

How to Convert Images to Icons

  1. 1

    Upload a square source image

    Drag and drop a PNG, JPEG, SVG, or WebP file onto the upload area. The image should be square — ideally 512x512 pixels or larger. If your image is not square, the tool offers a crop interface so you can select the square region you want. Using a source smaller than 512x512 will result in blurry output at larger sizes because the tool has to upscale rather than downscale.

  2. 2

    Preview the generated sizes

    The tool displays previews of every output size: 16x16, 32x32, 48x48, 180x180, 192x192, and 512x512. Examine each one carefully. Tiny icons often need simplified artwork — a detailed logo that looks great at 512px may become an unreadable smear at 16px. If the smallest sizes look poor, consider uploading a simplified version of your icon specifically for the 16x16 and 32x32 outputs.

  3. 3

    Configure the adaptive icon

    Choose a background color or gradient for the Android adaptive icon background layer. The tool defaults to white, but you should match your brand's background color. Toggle between mask shapes — circle, squircle, rounded square, teardrop — to verify that your foreground stays within the safe zone under all masks. Adjust positioning if any important element gets clipped.

  4. 4

    Generate and download

    Click the generate button. The tool produces all icon files in a single zip archive. Inside, you find favicon.ico with embedded 16x16, 32x32, and 48x48 bitmaps; apple-touch-icon.png at 180x180; android-chrome-192x192.png and android-chrome-512x512.png for the web manifest; and favicon.svg if your source supported vector conversion. The zip also includes a snippet.txt file with the HTML and manifest JSON you need.

  5. 5

    Add the icons to your site

    Copy favicon.ico to your site's root directory — browsers look for /favicon.ico automatically, even without a link tag. Add the HTML link tags from the snippet to your document head. Place the manifest icons in your public or static assets folder and update the paths in site.webmanifest. Deploy, then test by visiting your site in Chrome, Firefox, Safari, and on an iOS and Android device to confirm every icon renders correctly.

Expert Tips for Favicon and Icon Management

Keep your favicon simple. At 16x16 pixels, you have exactly 256 pixels to work with. A detailed company logo with thin lines and small text will collapse into an unrecognizable blob. The most effective favicons use bold, simple shapes with high contrast — think of Twitter's bird silhouette or GitHub's octocat outline. If your brand logo is complex, create a simplified monogram or abstract mark specifically for favicon use. Many design systems maintain a separate favicon asset distinct from the full logo for this exact reason.

Understand browser favicon caching behavior. Browsers cache favicons aggressively — Chrome stores them in a dedicated Favicon database separate from the regular HTTP cache. Changing your favicon in the HTML will not always force an update. Users may see the old icon for days or weeks. To force a refresh during development, append a version query string to the favicon URL: /favicon.ico?v=2. In production, use content-hashed filenames — favicon-a3b9c1.ico — and update the link tag reference. This approach bypasses the cache reliably while still allowing long-term caching for unchanged icons.

Provide both ICO and SVG favicons for maximum compatibility. ICO is the legacy standard supported by every browser since Internet Explorer 5. SVG is the modern option that scales perfectly on any display. Use a link tag with rel="icon" and type="image/svg+xml" for the SVG, and a separate link tag with rel="icon" and sizes="any" for the ICO fallback. Browsers that support SVG will prefer it; older browsers will fall back to the ICO. Safari on macOS has a separate rel="mask-icon" attribute for pinned tab icons, though this is being deprecated in favor of the standard SVG favicon approach starting with Safari 15.

Test your icons on actual devices. Emulators and browser DevTools can approximate how an icon renders, but they do not replicate the exact pixel density, color profile, and mask shape of a physical device. An Android phone with a 440 DPI screen renders your 192x192 icon differently than a 160 DPI tablet. An iPhone 15 Pro with a Super Retina XDR display has a wider color gamut than an iPhone SE. Save your generated icons to a test page, deploy it to a staging URL, and open it on at least three devices — one iOS, one Android, and one desktop browser. Check the browser tab, the bookmark list, the home screen shortcut, and the app switcher. Five minutes of device testing prevents icon issues that you would otherwise discover only after launch, from angry user reports.

Related Tools

Favicons and app icons are the smallest assets on your site, but they appear in some of the most visible places — browser tabs, bookmark bars, home screens, and app switchers. A missing or blurry icon looks unprofessional and erodes trust before a visitor even loads your page. This tool generates every size and format you need from a single source image, gives you the HTML and manifest code to wire them up, and previews adaptive icon masks so nothing important gets clipped. Pair it with an image resizer to prepare your source artwork, a format converter to handle edge cases, and a thumbnail calculator to verify dimensions for platforms this tool does not cover. The entire workflow runs locally in your browser, keeping your brand assets private and your process efficient.

Recommended Tools