How to use Faviqon

Start on the homepage by dragging an image into the dropzone, selecting an image file, or choosing to create with text. Image uploads open the image editor. Text pages and the text button open the text editor directly.

Upload SVG, PNG, JPG/JPEG or WebP artwork up to 5MB. Once loaded, drag inside the large preview to reposition the artwork. Use the image controls to replace or remove the uploaded file.

Image uploads start with a transparent background by default, which is usually best for logos and existing icon artwork. You can still add a background color or gradient if the icon needs more contrast.

Text mode is for initials, letters or compact marks. Type up to four characters, choose a font, and set the text color. One or two characters usually read best at 16x16.

You can drag the text in the large preview to adjust its position. Use reset position if you want it centered again.

Use zoom to change how much space the icon fills. Background can be set to none, a flat color, or a gradient. Roundness controls the icon container, from square through rounded corners toward a circle.

When background is set to none, Faviqon shows a checkerboard preview so transparent areas are easier to see.

Shadow and outline can help a simple icon stand out, especially when the source is text. Keep these subtle; heavy effects can make the 16x16 favicon harder to read.

The browser mockup shows how the favicon appears in an active tab and another tab. The smaller previews show 64x64, 32x32 and 16x16 sizes, which are the most important checks for browser tabs and bookmarks.

The badges inside the preview summarize readability and contrast. They are practical checks, not a formal accessibility certification.

Click Download favicons to create a ZIP package. The export includes favicon.ico, 16x16 and 32x32 PNG favicons, Apple Touch icon, Android Chrome icons, a web manifest and a README with install notes.

These short guides cover common favicon questions and link back into the creator when you are ready to try it.

• What favicon sizes do you need?
• How to make a favicon
• How to generate a favicon
• How to add a favicon to Next.js
• Why your favicon looks blurry
• Text favicon best practices
• Why AAA contrast matters for favicons
• How to add a favicon with Claude
• How to add a favicon with Codex
• How to add a favicon with ChatGPT

• Use simple shapes and strong contrast.
• Prefer initials over full words.
• Check 16x16 before downloading.
• A transparent background works well for logos, but a color background can help text icons stand out.
• If the icon feels cramped, zoom out slightly or reduce effects.