---
name: code-an-svg-favicon
description: "Draw the strongest mark as a clean 64x64 SVG that stays sharp at 16px."
---

# Code an SVG favicon

Purpose:: Code the favicon as an SVG, drawn from the strongest mark you picked.

Rules::
- Simple shapes, readable at 16px and 32px
- Palette colors only; transparent background
- Square viewBox 0 0 64 64, no text, no external files

Inventory::
- Your picked mark
- A browser to render a check page

Steps::
1. Pick the mark that stays clear when tiny
2. Write it as favicon.svg
3. Write a check page: the svg at 16, 32, 64 and 256px on light and dark
4. Screenshot the check page and look at it
5. Fix what blurs at 16px (align gaps to the pixel grid, thicken strokes); check again
6. Reply with the svg and what you fixed

Metrics::
- Recognisable at 16px in a browser tab, light and dark
- One clean SVG file

Source:: https://isklls.com/skills/code-an-svg-favicon (iSklls, free skill library)