Pixel Art in Krita: Editing a Favicon Pixel by Pixel

The short answer

Krita works well for pixel art once you remove its smoothing. Create a canvas at the exact final icon size. Paint with a hard-edged brush one pixel wide. Turn off anti-aliasing in the selection and fill tools. Show the pixel grid. Use nearest-neighbor interpolation whenever you scale or transform. For a favicon, this lets you take a downscaled logo and fix each pixel so the mark stays sharp at tiny sizes, instead of accepting the blur that automatic resizing produces.

A few terms are needed to follow this guide. A vector logo is built from mathematical paths, so it can scale to any size. A raster image, such as a favicon, is a fixed grid of colored pixels. Anti-aliasing blends edge pixels with partial color or transparency so curves look smooth. At large sizes this helps. At icon sizes it often turns into a soft, muddy outline. Nearest-neighbor interpolation is a resizing method that copies existing pixel colors without blending them, so hard edges stay hard. Pixel grid refinement means adjusting individual pixels so the logo's strokes and shapes line up with whole pixels.

Why a vector logo needs manual pixel work at favicon size

When a vector logo is exported at a very small size, its paths rarely land exactly on pixel boundaries. A stroke that falls between two pixel columns gets rendered as two half-tone columns instead of one solid column. Thin details may vanish, and counters (the enclosed spaces inside letters such as o or e) may fill in. Krita is a raster editor, so it is the stage where you correct these problems by hand. Your master logo stays in vector form, and Krita produces the small raster output.

Krita also has vector layers, but they render with smoothing. Do the final favicon pixel work on ordinary paint layers.

Step 1: Prepare the source artwork

• Start from the master vector logo, not from a screenshot or a previously compressed image.
• Decide which version of the mark suits a tiny square. That is often the symbol alone, without a wordmark or tagline.
• In your vector editor, simplify where needed: thicken thin strokes, remove fine detail, and widen tight gaps.
• Export a PNG with a transparent background at the target pixel size, or at an exact whole-number multiple of it, so it can be scaled down cleanly later.
• Confirm that you have the right to use and modify the logo. A file's format or extension does not prove it is editable vector artwork, and it does not grant permission to reuse it.

Step 2: Create the canvas at the final size

In File > New, enter a custom width and height that match the icon size you need. Square sizes such as 16×16 and 32×32 pixels are common favicon sizes. The sizes you actually need depend on the browsers, platforms and HTML setup you are targeting, so check those current requirements; this guide does not specify them. Use 8-bit RGB/Alpha in the sRGB color space for screen output, and set the background content to transparent.

Make a separate canvas for each size rather than shrinking one design. A 16-pixel icon usually needs different pixel decisions than a 32-pixel one.

Step 3: Turn on the pixel grid

Zoom in a long way. Krita can display a pixel grid once you pass a set zoom level, and that threshold is adjustable in the display settings under Settings > Configure Krita. You can also use View > Show Grid with the grid spacing set to 1 pixel in the Grid and Guides docker. Turning on snapping to the grid keeps shapes and selections on whole pixels.

Step 4: Configure tools for hard edges

Tool | Setting to check | Why it matters

Brush | 1 px size, fully hard edge, no softness or texture | Each dab colors whole pixels at full strength

Selection tools | Anti-aliasing turned off in Tool Options | Selection edges stay on pixel boundaries

Fill tool | Anti-aliasing and edge growing or feathering turned off, where offered | Fills stop cleanly at outlines without halos

Transform tool | Filter set to nearest neighbor | Moving or rotating content does not blur pixels

Image > Scale Image | Filter set to nearest neighbor | Resizing keeps edges hard

Recent Krita versions ship brush presets meant for pixel work, which you can find by tag in the Brush Presets docker. If your version has none, make your own: use the Pixel brush engine with an auto brush tip, size 1, and full hardness, and save it as a preset. Brush option names differ between Krita versions, so the exact checkbox labels may not match this description. The test in Step 7 is what confirms the setup is correct.

Step 5: Bring in the logo and lock it to the grid

• Import the exported PNG as a new layer, for example with File > Import Paint Layer or by dragging it onto the canvas.
• If the import is a whole-number multiple of the canvas size, scale it down with nearest neighbor. Otherwise, use it as a reference layer at reduced opacity and redraw over it.
• Keep the reference on its own layer and paint the final pixels on a new layer above it.
• Lock or hide the reference layer before you export.

Step 6: Refine pixel by pixel

• Make each main stroke a whole number of pixels wide, for example one or two solid columns rather than one solid column next to a half-tone one.
• Align straight vertical and horizontal edges with pixel boundaries first, because the eye notices them most.
• Build curves and diagonals from even pixel steps, such as 1-1-1 or 2-2-2. Uneven runs make jagged-looking bumps.
• Open up counters and gaps until at least one clear pixel separates the shapes.
• If a softened edge reads better at actual size, add a few partial-tone pixels by hand. Use this sparingly and deliberately rather than relying on automatic smoothing.
• Use the eyedropper to sample only the logo's defined brand colors, so stray in-between colors do not build up.

Step 7: Verify the result

• Reset the zoom to 100% and judge the icon at its true size. Zoomed-in views make detail look clearer than it will appear in a browser tab.
• Place temporary solid layers in light and dark colors under the icon to check its edges on both backgrounds, then delete or hide them.
• Sample the edge pixels with the color picker. Opacity should be either full or zero unless you added partial pixels on purpose.
• Compare the icon with the vector master to make sure the mark is still recognizable and on-brand.
• Check that every required size has its own refined canvas.

Step 8: Export

Export each size as a PNG with File > Export and keep the alpha channel. Save the layered working file in Krita's native format so you can edit it later. ICO support depends on your Krita version and installed image plugins, and the supplied material does not confirm it. Check the export list in your version. If ICO is not offered, combine the PNGs with a dedicated favicon or ICO conversion tool.

Gaps in this guide

No version-specific documentation, measurements or platform specifications were supplied for this article. Menu paths and option names above describe Krita's general workflow and may differ in your release. Required favicon sizes and file formats should be confirmed against the current documentation for the platforms you deliver to.