Take it step by step
- Choose a square source with generous space around the mark.
- Generate the offered icon sizes.
- Inspect the smallest versions at actual size.
- Add the generated assets and appropriate icon links to your site.
A situation to try.
A detailed logo may become unreadable at 16 × 16 pixels. Use the initial or symbol instead of squeezing the whole company name into the icon.
Use the tool’s synthetic example first where available. The example here explains a decision; it is not a reported benchmark result.
Before you call it done.
- Check light and dark browser tabs.
- Verify transparent edges.
- Confirm referenced paths exist on the deployed site.
Know the limits.
A favicon package does not automatically configure a web app manifest or installable PWA.
This tool’s current boundary: Review the output before using it. Your input remains on this device.
Evidence and scope
Technical source guidance and task-specific output checks. These do not establish that every file, browser or device passes.
Use the checks above on your own exported result. A source explains the format or mechanism; it is not proof that this export preserved every feature.
Technical reference: MDN: canvas export and format support ↗
Choose the right tool for this step.
Favicon and app icons
Generate small icon assets from one source image.
On your deviceWhy use it: Generate small icon assets from your mark.
Before you start: Check the tiny versions at actual size.
Palette and contrast studio
Explore colors and measure text/background contrast.
On your deviceWhy use it: Check foreground/background contrast.
Before you start: Test light and dark usage contexts.
Preparation tools process locally. Official service links take you to the authority’s website. Inspect any exported copy before sharing it.