How to use the icon maker
- Choose a background shape and two background colors.
- Enter the text or emoji for the center of the icon and adjust color, size and tilt.
- Choose the size you want and save as PNG or SVG.
How the icon maker works
The icon is drawn on your browser's canvas by layering a background shape, a gradient and text (or an emoji). The gradient angle sets the direction in which the two background colors blend, and corner roundness sets how much the corners of the square are cut. PNG is saved straight away as an image of the chosen size, and SVG is saved as a vector format that stays sharp at any size. Emojis look different on different devices, so the same emoji may appear differently depending on what you use. Everything happens on your device and the image you make is never sent to a server.
Tips
- Save a site favicon at 64px or 128px and an app icon at 512px.
- One or two characters keep the icon readable at small sizes.
- A large contrast between background and text color makes it stand out.
- Saving as SVG keeps it sharp at any size, which is convenient for design work.
Tips for a good-looking icon
To stay recognizable at small sizes, keep the elements simple. Two background colors from similar families with only a slight difference look natural, and the text should contrast clearly with the background. Rounded squares suit app icons and circles suit profile images. A large tilt makes small icons harder to read.
Notes & limitations
Emojis look different depending on the device and font, and some have separate terms of use. For a commercial logo, make it mostly from text and check the terms of use.
FAQ
Can it save ICO files?
Not yet; only PNG and SVG are supported. PNG works as a favicon in most cases.
Is the saved image background transparent?
The area outside the shape is saved as transparent. For a circle or rounded square, the area outside the corners is transparent.
The emoji looks different in the SVG.
An emoji in an SVG is drawn with the viewer's font, so it can look different from the PNG. Use PNG to lock the emoji's look.