Icon Maker: Create Custom Icons for Any Platform

Every platform demands icons — different sizes, different formats, different rules. Your website needs a favicon at 16x16. Your iOS app needs a 1024x1024 PNG with no transparency. Android wants adaptive icons with a separate foreground and background layer. Windows still expects ICO files with multiple embedded sizes.

Getting one icon right is straightforward. Getting icons right across every platform where your brand appears? That takes a system: know which sizes you need, pick the right format for each, and use tools that produce exact specifications without quality loss.

This guide covers the full icon-making workflow — what sizes every platform requires, how to create icons from scratch or from existing images, and which free tools handle which jobs best.

Types of Icons and Their Sizes

Icons are not one-size-fits-all. A browser tab favicon, a mobile app icon, and a Windows desktop shortcut each have different pixel requirements and format expectations. Using the wrong size means blurry rendering, cropped edges, or outright rejection by the platform.

A few things stand out from this table. First, PNG dominates — it is the universal format for raster icons. Second, only favicons and Windows desktop icons use ICO. Third, source artwork should always be at least 1024x1024 so you can generate every smaller size from one master file without upscaling artifacts.

For the complete breakdown of app icon dimensions, see App Icon Sizes for Every Platform. For favicon-specific sizes, see Favicon Sizes: The Complete Reference.

How to Create Custom Icons Online

There are three main approaches to icon creation, and the right one depends on what you are starting with.

Approach 1: Design From Scratch

If you have no source image and need to create an icon from nothing, a vector design tool gives you the most control. Design at a large canvas size (1024x1024 minimum), then export to the sizes you need.

Free tools for designing icons from scratch:

• Figma (free tier) — Browser-based vector editor. Create a 1024x1024 frame, design your icon, export as PNG at multiple scales. Figma's auto-layout and component system makes it easy to preview how the icon looks at small sizes while designing at large scale.
• Inkscape 1.4 (GPL-2.0) — Desktop vector editor. Full SVG support. Design your icon as an SVG, then export rasterized PNGs at every target size. Heavier learning curve than Figma, but fully offline and open source.
• GIMP 2.10.38 (GPL-3.0) — Desktop raster editor. Better for pixel-level icon work than vector tools. Start with a 1024x1024 canvas, design the icon, then use Image > Scale Image to export each size.

Approach 2: Convert an Existing Image Into an Icon

This is the most common scenario. You have a logo, photo, or graphic and need to turn it into platform-ready icons. The workflow is: crop to square, resize to target dimensions, convert to the required format.

1. Crop to square. Icons are square. If your source image is not 1:1 aspect ratio, crop the focal point to a square frame.
2. Resize to each target size. Start from the largest (1024x1024) and scale down. Never scale up — upscaling a 64x64 image to 512x512 produces blurry results.
3. Convert format. PNG for most platforms. ICO for favicons and Windows desktop icons. SVG if you have vector source artwork.

Pixotter's Resize tool handles steps 2 and 3 in the browser — drop your image, set the target dimensions, and download the result. No upload to a server, no account required.

Approach 3: Use an Icon Template or Generator

Platform-specific icon generators automate the process of producing every required size from a single source image. Upload one 1024x1024 PNG, get a ZIP with every variant.

This works well for app icons (where you need 10-20 size variants) but is overkill for simple tasks like creating a single favicon. The comparison table below covers which tools handle which icon types.

Best Free Icon Maker Tools Compared

Not every icon tool does the same thing. Some generate favicons. Some produce full app icon sets. Some are design tools. The table below compares the most useful free options as of April 2026.

Key takeaway: If you need favicons specifically, RealFaviconGenerator produces the most complete set (ICO + SVG + Apple Touch + manifest + HTML). If you need arbitrary sizes and formats with no upload required, Pixotter handles resize and format conversion entirely client-side. If you need full app icon sets for iOS or Android, appicon.co generates every required variant from one upload.

Creating Icons from Images with Pixotter

Pixotter handles the two operations that icon creation boils down to: resize and convert. Since everything runs client-side via WebAssembly, your images never leave the browser — useful when working with client logos or unreleased brand assets.

Favicon Workflow

1. Open Pixotter Resize. Drop your source image (512x512 or larger, square).
2. Set dimensions to 32x32. Download the result as PNG.
3. Repeat for 16x16 and 48x48 if you want a multi-size setup.
4. Open Pixotter Convert. Drop the 32x32 PNG and convert to ICO format for the final favicon file.

For multi-size ICO files that embed 16x16, 32x32, and 48x48 in one container, see Convert PNG to ICO. For the full favicon creation workflow including HTML and testing, see How to Make a Favicon.

App Icon Workflow

1. Start with a 1024x1024 source. This is your master file. Every platform-specific size scales down from it.
2. Open Pixotter Resize. Drop the 1024x1024 source.
3. Generate each required size. Set width and height to 192x192 for Android manifest, 180x180 for Apple Touch Icon, 512x512 for PWA/Play Store, and so on.
4. Download each variant. Rename files to match platform conventions (apple-touch-icon.png, icon-192.png, icon-512.png).

The advantage over dedicated icon generators is flexibility. You control the exact dimensions, the output format, and the compression quality — no mystery settings or forced watermarks.

Tips for Clean Icon Output

• Start big. Always resize down, never up. A 1024x1024 source scaled to 16x16 looks crisp. A 64x64 source scaled to 512x512 looks blurry.
• Keep it simple. Icons at 16x16 have 256 total pixels. Fine details, gradients, and thin strokes disappear. Bold shapes and high-contrast colors survive.
• Test at actual size. Your icon looks great at 1024x1024 in the editor. Open the 16x16 export and check if it still reads clearly.
• Use transparency. PNG supports alpha channels. A transparent background lets the icon sit cleanly on any surface — browser tabs, home screens, dark mode, light mode.

Icon File Formats Explained

Three formats handle the vast majority of icon use cases. Choosing the right one depends on where the icon appears and whether you need vector scalability, multi-size bundling, or universal compatibility.

ICO — The Legacy Standard

ICO files are containers that bundle multiple PNG or BMP images at different resolutions. A single favicon.ico can hold 16x16, 32x32, 48x48, and 256x256 variants. Browsers and Windows select the appropriate size automatically.

Use ICO when: You need favicons that work in every browser including older ones, or Windows desktop shortcuts. For a deep dive, see What Is an ICO File?.

SVG — The Modern Choice

SVG icons are described as vector paths — mathematical instructions rather than pixel grids. They scale to any size without quality loss, support CSS styling (including dark mode adaptation), and are typically smaller than equivalent multi-size ICO files.

Use SVG when: You need resolution-independent icons for web UI, modern favicons, or any context where the icon may render at unpredictable sizes. For the full SVG vs PNG comparison, see SVG vs PNG.

PNG — The Universal Raster Format

PNG is the required format for iOS App Store icons, Android launcher icons, PWA manifest icons, Apple Touch Icons, and social media Open Graph images. It supports full alpha transparency and lossless compression.

Use PNG when: App stores, mobile platforms, or web manifests require it — which is most of the time. PNG is the safe default for any icon that is not a favicon or a web UI element.

Converting between these formats is straightforward. To go from PNG to ICO for favicons, see Convert PNG to ICO or Convert JPG to ICO. Use Pixotter Convert to handle PNG, WebP, AVIF, ICO, and other format conversions directly in the browser.

FAQ

What size should my icon source file be? Start with 1024x1024 pixels. This is the largest size any platform currently requires (iOS App Store), and every smaller size can be generated from it by downscaling. Going higher than 1024x1024 offers no benefit since no platform requests icons larger than that.

Can I use a photo as an icon? You can, but it rarely works well. Photos have too much detail to be legible at 16x16 or even 48x48. If you must use a photo, crop tightly to a single recognizable element, increase the contrast, and simplify the background. Test the result at 16x16 before committing to it.

What is the difference between a favicon and an app icon? A favicon is the icon associated with a website — it appears in browser tabs, bookmarks, and search results. An app icon is the icon for a native or PWA application — it appears on home screens, app launchers, and app stores. Favicons use ICO or SVG format. App icons use PNG. The sizes, format requirements, and submission processes are different for each. See App Icon Sizes and Favicon Sizes for the complete reference tables.

Do I need separate icons for light mode and dark mode? For most platforms, no — you provide one icon and the platform handles it. The exception is SVG favicons, which can include a CSS prefers-color-scheme media query to switch colors automatically. If your icon uses very dark colors, test it against dark browser chrome to make sure it remains visible.

How do I make a transparent icon? Use PNG format with an alpha channel. Design your icon on a transparent background (represented as a checkerboard pattern in most editors). When you export as PNG, the transparency is preserved. ICO files also support transparency (they embed PNGs internally). Note that iOS app icons must not have transparency — Apple fills transparent areas with black.

Why does my icon look blurry? Almost always because the source image is too small. If you are generating a 512x512 icon from a 100x100 source, the result will be blurry regardless of the resize algorithm. Start with a 1024x1024 source and only scale down. If your only source is low resolution, consider recreating the icon as an SVG or redesigning it at a higher resolution.

What tools can convert PNG to ICO? Pixotter Convert handles it in the browser with no upload required. ImageMagick 7.1 (Apache-2.0 license) does it from the command line: magick input.png -resize 32x32 output.ico. See Convert PNG to ICO for the full walkthrough including multi-size ICO creation.

Should I use ICO or SVG for my website favicon? Use both. SVG for modern browsers (Chrome 80+, Firefox 41+, Edge 80+) and ICO as a fallback for older browsers and edge cases. The HTML is two <link> tags. See How to Make a Favicon for the complete setup including HTML, manifest, and testing.