Quick Start with iConvert Icons — From PNG to Multi-Size Icon SetsIcons are the visual shorthand of apps, websites, and desktop experiences. A high-quality icon set communicates brand, improves recognition, and makes interfaces feel polished. iConvert Icons is a tool designed to simplify the process of taking a single PNG (or other raster/vector file) and producing the multiple sizes and formats required by modern platforms — from macOS and Windows to iOS, Android, and favicons for the web.
This guide walks you through a practical quick start workflow: preparing source artwork, converting to required sizes and formats, organizing output into platform-ready bundles, and tips to avoid common pitfalls.
Why multi-size icon sets matter
Different platforms and display contexts require icons at specific pixel dimensions and sometimes in different formats (ICO, ICNS, PNG, SVG). Reasons to produce multi-size sets:
- Clarity at small sizes — Details that look fine at 512×512 can become cluttered at 16×16.
- Performance and file size — Serving appropriately sized assets to devices speeds load times and reduces memory usage.
- Platform compliance — App stores and OS guidelines often require exact sizes and formats.
- Scalability and future-proofing — Including vector sources (SVG) or a range of sizes helps support new devices and resolutions.
Preparing your source artwork
Good results start with good source files. Follow these recommendations:
- Use a high-resolution source, ideally 1024×1024 or larger for raster PNGs. Larger sources downscale more cleanly.
- Prefer vector formats (SVG, AI) when possible — vectors scale without loss of quality.
- Keep shapes simple and avoid tiny strokes or fine text that will vanish at small sizes.
- Consider separate artwork for very small sizes — simplify or remove details for 16–32px versions.
- Use proper padding and alignment so icons center correctly within their canvases.
Common target sizes and formats
Below is a practical list of common target sizes by platform. Adjust depending on your app’s needs.
- Windows (.ico): 16×16, 32×32, 48×48, 256×256 (PNG inside ICO)
- macOS (.icns): 16×16, 32×32, 64×64, 128×128, 256×256, 512×512, 1024×1024
- iOS: App Store (1024×1024), app icons for devices (various sizes down to 20×20)
- Android: Launcher icons in multiple densities (mdpi, hdpi, xhdpi, xxhdpi, xxxhdpi), often 48–192dp equivalents
- Web favicons: 16×16, 32×32, 48×48, 96×96; also site manifests use 192×192 and 512×512
- SVG: single scalable source for web and some platforms
Using iConvert Icons: step-by-step
- Open iConvert Icons and create a new conversion project.
- Import your source PNG or SVG. If you have multiple source variants (full detail and simplified small-size version), import both.
- Select target platforms/formats you need (ICO, ICNS, PNG sets, SVG export).
- Configure size presets. Most tools provide presets for Windows, macOS, iOS, Android, and web — use those as a starting point.
- For each size, set scaling/interpolation options (bicubic is typical for downscaling). If available, enable optical size hints or sharpening for small outputs.
- If you included separate small-size artwork, map that source to the smallest output sizes so that simplified graphics are used where needed.
- Export to a structured folder — e.g., /output/windows/, /output/macos/, /output/android/, /output/web/.
- Test the generated icons in a local build or by applying them in the OS to verify alignment and clarity.
Organizing output for developers
A clear folder structure makes integration painless:
/icons /source
icon.svg icon-1024.png /macos
AppIcon.icns icon-512.png /windows
app.ico /android
mipmap-mdpi/icon.png mipmap-hdpi/icon.png ... /web
favicon-16.png favicon-32.png site-192.png site-512.png Include a README describing which file maps to which platform target and any special notes (e.g., “use icon-1024.png for App Store submission”).
Optimization tips
- Use PNG compression (pngcrush, zopflipng) to reduce file sizes without visual loss.
- For web usage, consider also providing an SVG and WebP versions where supported.
- Remove unnecessary metadata from PNGs to save bytes.
- When creating ICO files, include a 256×256 PNG inside the ICO for Windows to use on high-DPI displays.
Troubleshooting common issues
- Blurry icons at small sizes: simplify artwork, adjust hinting, or supply a custom small-size version.
- Cropping or misalignment: check canvas size and padding; ensure export tool preserves center alignment.
- Transparent edges showing halo: ensure proper alpha-premultiplication handling or re-export with pre-multiplied alpha if needed.
- Platform rejects upload (e.g., App Store): verify exact size and format requirements (App Store requires a 1024×1024 PNG for app listing).
Example workflow: PNG 2048×2048 to multi-platform set
- Start with icon-2048.png (or icon.svg).
- In iConvert Icons, import icon-2048.png and set targets: ICNS, ICO, Android mipmaps, iOS app sizes, web favicons.
- Map icon-2048 to all sizes >128px; map icon-small.svg (simplified) to ≤32px outputs.
- Choose bicubic downsampling and mild sharpening for outputs ≤48px.
- Export and run pngquant/pngcrush over PNG outputs, generate an ICO with included 256×256 PNG, and build a .icns with all required sizes.
- Place files into the folder structure and test in a sample app.
Quick checklist before distribution
- Include a 1024×1024 PNG for iOS App Store.
- Provide 256×256 (or 512×512+) for Windows/ICNS high-DPI support.
- Validate that small sizes remain legible (20–32px).
- Remove metadata and compress PNGs.
- Keep original SVG or high-res PNG in /source for future updates.
Final notes
Producing quality multi-size icon sets is mostly about planning: start with good source art, be intentional about simplifying at small sizes, and use tools like iConvert Icons to automate format conversions. A consistent workflow and clear output structure dramatically reduce integration friction for developers and designers alike.
Leave a Reply