FaviCraft

How to create favicon?

Everything you need to know about creating a favicon with FaviCraft's favicon creator tool

What is a favicon?

A favicon (short for "favorite icon") is a small website identifier used in:

Browser tabs

Appears next to page titles

Bookmarks

Helps users recognize saved pages

Search results

Displayed in Google's search results

Technical note: Designers create favicons in formats like ICO, PNG or SVG, ensuring they're visible even at 16×16 pixels.

How should a favicon look?

An effective favicon serves as your website's visual identity across the web. It should be:

Simple & Clean

Avoid complex details that disappear at small sizes

Scalable

Should look good from 16px to 64px and beyond

Recognizable

Instantly identifiable as your brand

Brand tip: Your favicon is essentially your logo for the web. Many companies use a simplified version of their logo or a distinctive element from it. For example: YouTube's play button, Instagram's gradient camera, Facebook's 'f' - all instantly recognizable at any size.

Creating with FaviCraft

Our favicon creator tool makes it easy to design favicons in three simple parts:

Toolbar

The toolbar allows you to add shapes to the canvas

Canvas

The canvas displays the shapes that you have added

Editor

The editor allows you to modify the shapes when they are added to the canvas

Pro tip: The canvas by default displays a background rectangle with a corner radius and gradient, so you can start adding your favicon design on top of the rectangle.

The Toolbar

From left to right, the toolbar contains these essential tools:

FaviCraft toolbar

1. Export Button

The first tool exports your design as either a standalone logo image or a complete favicon package with all required sizes (ICO, PNG, SVG formats).

2. Favicon Preview

Shows a real-time small preview of your design, helping you ensure it remains clear and recognizable at small sizes.

3. Rectangle

The rectangle tool creates a rectangle on the canvas

4. Ellipse

The ellipse tool creates an ellipse on the canvas

5. Line

The line tool creates a line on the canvas

6. Polygon

The polygon tool creates a triangle on the canvas that can be modified into different shapes with more sides by the editor

The Canvas

The canvas is your design workspace where all elements come together:

FaviCraft canvas

Live Design Display

Shows all shapes added from the toolbar in real-time, with your complete favicon composition

Interactive Editing

Click/tap to select shapes, then modify them using the editor panel

Drag & Drop

Move shapes freely with mouse (desktop) or finger (mobile) for perfect positioning

Editor

When you select any shape, the editor automatically scans its properties and creates a customized control panel:

Rectangle editor controls
Ellipse editor controls
Line editor controls
Polygon editor controls

Shared Properties

Transformation

  • Rotate with the angle control
  • Scale larger/smaller uniformly

Color & Style

  • Solid colors or smooth gradients
  • Adjust transparency (opacity)
  • Border thickness and style

Layer Order

  • Bring forward/send backward
  • Move to very front/back
  • Visual stacking in the canvas

Actions

  • Delete shapes completely

Special Properties by Shape

Rectangle

  • Corner Radius - Make sharp or rounded corners:

Ellipse

  • Radius X/Y - Create perfect circles or oval shapes

Line Points

A line is defined by four coordinates:

  • x1,y1 - Starting point (red handle)
  • x2,y2 - Ending point (green handle)

Lower x values move left, higher x values move right. Lower y values move up, higher y values move down.

Start: x1=20, y1=80

End: x2=80, y2=20

Polygon

  • Sides - Change the number of sides (3-12)
    Minimum 3 sides (triangle), maximum 12 sides (dodecagon)