Favycons Docs

Getting Started

Create a design, preview it at small sizes, and export icons.

Getting Started

This guide walks you through the fastest path: design an icon, sanity-check it at small sizes, then export.

1. Pick a Motif

In the editor, choose one of:

  • An icon (SVG)
  • A character (letter)

If the icon looks cramped, increase padding or scale down the motif.

2. Set Background and Colors

Start simple:

  • Solid background color
  • One foreground color

Then add effects (stroke/outline/glow/shadow) only if they still read at 16–32px.

3. Check Small Sizes

Before exporting, check the preview at small sizes:

  • 16px and 32px are the most important for favicons.
  • Watch for thin strokes, low contrast, and too-tight padding.

4. Export

Open Export and choose a target:

Short example: open Export, pick a target, and download.

Session Persistence

Your current design is saved automatically in your browser (so a refresh usually won’t wipe it).

To save multiple named designs you can load later, use Designs.

Introduction

Learn the basics, export icons, and share designs.

Editor Guide

Understand the main controls and how to make icons that read well.

On this page

Getting Started1. Pick a Motif2. Set Background and Colors3. Check Small Sizes4. ExportSession PersistenceRelated