IconEditor

Workflow · 9 min read

How to create a great Windows app icon: a step-by-step guide

An application icon is seen dozens of times a day at 16 pixels and once in a while at 256. Designing for both is the whole craft. Here is a workflow that works, using IconEditor.

The workflow

Six steps from idea to app.ico

  1. 01

    Start with one strong shape

    The Icon sizes panel: 256 down to 16 px, each with a thumbnail, a drawn status and where Windows uses it
    The size list shows every entry side by side — a good shape still reads in the 16 px thumbnail.

    Pick a single silhouette that reads at a glance — a letter, a simple object, a geometric mark. Avoid photographic detail, thin outlines and text longer than two characters. Ask: would I recognise this as a 16×16 blob on a dark taskbar?

  2. 02

    Draw the 256×256 first

    Open the editor, select 256×256 and draw the master version. Use the Line, Rectangle and Ellipse tools with a large diameter for clean geometry, the Brush with hardness below 100 for soft shading, and Fill for flat areas. Hold Shift while dragging a rectangle or ellipse to keep it square.

    Keep about 8–10 % padding around the artwork. Windows never adds its own margin, and a shape that touches the edge looks cramped next to system icons.

    Editing the 256×256 canvas with the Text tool selected: the tool list and text options on the left, a live preview of the text on the canvas
    The 256×256 master. The tool list on the left has a keyboard shortcut per tool; the options panel changes with the tool.
  3. 03

    Scale down, then fix by hand

    The Scale from menu above the canvas, listing the drawn sizes that can be used as the source
    Scale from lists every drawn size as a possible source.

    Select 48×48 and click Scale from 256×256 above the canvas. The editor resamples with a Lanczos filter, which is as good as automatic scaling gets — but at 32, 24 and especially 16 pixels, automatic scaling always leaves blurry edges. Turn on the grid, zoom in, and:

    • Snap important edges to whole pixels with the Pencil; a 1-px line that straddles two pixels looks grey and soft.
    • Simplify: drop inner details, thicken strokes to at least 2 px at 32 and 1–2 px at 16.
    • Increase contrast slightly at small sizes; tiny icons lose saturation visually.
    • Use the Eyedropper to pick colours from the large version so the set stays consistent.
  4. 04

    Check every context

    Click Preview on Windows. The dialog shows the icon in a dark taskbar, on a desktop wallpaper, in Explorer's list and large-icon views, in a window title bar and in a browser tab. Common problems this catches:

    • Dark artwork disappearing on the dark taskbar — add a light outline or a lighter base shape.
    • Semi-transparent edges going muddy on the wallpaper — tighten the alpha of edge pixels at 16 and 24 px.
    • Text becoming unreadable — replace it with a shape below 32 px.
    The Preview on Windows dialog: the icon on the taskbar, as a desktop shortcut, and in Explorer's list and large-icon views
    Each mock-up uses the entry Windows would pick — 24 px on the taskbar, 16 px in the list view, 48 px on the desktop.
  5. 05

    Export

    Export writes a single .ico containing every size you selected. The 256 entry is PNG-compressed (as Windows expects since Vista), the smaller ones are 32-bit BMPs with alpha. Sizes you did not draw are filled automatically from the nearest larger one, so the file is always complete. You can also download the current size as PNG, or a ZIP of all sizes for a store listing or an installer.

    The Export dialog: seven size checkboxes, a file name field and the Download .ICO, PNG and ZIP buttons
  6. 06

    Wire it into your application

    The export dialog includes copy-ready snippets:

    Snippet tabs in the Export dialog — C/C++ .rc, .NET .csproj, Electron, Tauri, Web favicon — with the .rc example shown
    • C / C++ — an ICON statement in your .rc file; the lowest-numbered icon resource becomes the executable's icon.
    • .NET — <ApplicationIcon> in the .csproj, plus Icon="…" on a WPF window.
    • Electron — build.win.icon for electron-builder and the icon option of BrowserWindow.
    • Tauri — bundle.icon in tauri.conf.json.

    After replacing an icon, Windows may keep showing the old one from its icon cache. Rebuilding the executable with a different file size, or clearing the cache (ie4uinit.exe -show), fixes that.

Avoid

Common mistakes

Four things that make an otherwise good icon look wrong somewhere in Windows.

  • A PNG renamed to .ico

    Shipping a single 256 px PNG renamed to .ico. It works in some places and looks blurry everywhere else.

  • No 16 and 24 px

    Explorer list view and the taskbar’s small mode use them constantly — forgetting them means a blurry downscale where people look most.

  • Full-icon gradients

    They turn into a smear at 16 px. Use gradients on large areas only, and flatten them in the small sizes.

  • Baked-in drop shadows

    Windows composites icons over many backgrounds; a baked shadow looks wrong on most of them.

Keep reading

More on Windows icons

Reference · 6 min Windows icon sizes cheat sheet Every context Windows draws an icon in, and which entry it picks. Support Frequently asked questions Transparency, ICO internals, browser support, privacy.

Try it as you read

The editor is free, needs no account, and exports a Windows-ready .ico with all seven sizes.

Open the editor