From SVG to favicon: start small
Move from an editable source to a browser tab by separating coordinates, pixels, and file formats—and testing each destination.
A PATH THROUGH THE FOLIO
Junction · Put the work into use
Turn seals, icons, and article cards into usable exports, then connect them to the next reader through clear instructions, sources, and sharing.
Read in order
01 / CHAPTERS↗
One seal, three iterations: give every change a reason
Compare shape, spacing, and accent on one canvas, turning “make it nicer” into decisions you can review.
Article share cards: give people a reason to open the page
Build a card around a clear title, a specific benefit, and an honest source, while distinguishing an image from a web preview.
A small project's README: make the result usable by someone else
Explain purpose, inputs, outputs, limits, and repeatable steps so a project remains understandable without its maker beside it.
Keep exploring
02 / REFERENCESIcons
SVG coordinates and scaling ↗
Understand how viewBox maps internal coordinates to different display sizes.
Establish coordinates before export sizes to avoid confusing geometry with resolution.
- For
- Designers and front-end developers editing SVG.
- Before use
- Public technical documentation; test the behaviour in your own graphic.
Source checked · 2026.10.13
developer.mozilla.org
Icons
Lucide icon library ↗
Browse a consistent outline icon set and learn how to use and adjust it on the web.
Useful for supplementing clearly labelled controls without redrawing basic symbols.
- For
- Small-site makers who need interface icons.
- Before use
- Check the chosen asset's license and retain required notices.
Source checked · 2026.10.13
lucide.dev
Icons
Favicons in search ↗
Read Google Search's favicon reference, fetching, and hostname rules.
Distinguish a working browser icon from an updated search result.
- For
- Maintainers launching or replacing a site icon.
- Before use
- Fetching and caching affect results; following the guidance does not promise immediate display.
Source checked · 2026.10.13
developers.google.com
Icons
Web app manifest icons ↗
Learn how a web app manifest declares icon files, sizes, types, and purposes.
Connect exported files to actual application references.
- For
- Developers adding installation and app icons.
- Before use
- Requires a manifest and browser testing; it is not an automatic publishing service.
Source checked · 2026.10.13
developer.mozilla.org
Publishing
Markdown quick reference ↗
Review headings, lists, links, quotations, and code blocks through short examples.
Give articles and project descriptions a lightweight, portable starting point.
- For
- Authors writing articles and project notes in plain text.
- Before use
- Extensions differ between platforms; inspect the rendered result before publishing.
Source checked · 2026.10.13
commonmark.org
Publishing
RSS specification ↗
Consult RSS structure for channels, items, dates, and links.
Provide an independent publishing channel that feed readers can subscribe to.
- For
- Developers and editors maintaining article feeds.
- Before use
- The specification supports feed implementation and checking, not hosting or email delivery.
Source checked · 2026.10.13
www.rssboard.org
Publishing
Sharing preview metadata ↗
Understand metadata such as title, image, and URL used in link previews.
Connect a share card to its article and distinguish image export from page configuration.
- For
- Site maintainers configuring article sharing metadata.
- Before use
- Receiving platforms have their own fetching, caching, and cropping behaviour.
Source checked · 2026.10.13
ogp.me
Publishing
Article structured data ↗
Review recommended structured data for article headlines, authors, and dates.
Keep visible content, page metadata, and machine-readable information consistent.
- For
- Developers maintaining public article pages.
- Before use
- Mark up truthful information; structured data does not guarantee enhanced search display.
Source checked · 2026.10.13
developers.google.com