Mr. Tools

How to

How to create a favicon

Favicon Generator lets you create a complete favicon set in the browser from an image or short text logo. Use the square preview to adjust the background, corner radius, text size, and colors, then check the generated sizes and output files before saving.

Use Favicon Generator
Favicon Generator thumbnailFavicon Generator thumbnail

Use Cases

When to use it

  • Prepare a favicon set before launching a site
  • Create favicon files without image-editing software
  • Generate PWA icons and a manifest together
  • Turn a logo image into favicon.ico quickly
  • Copy an install-ready HTML snippet into your site
  • Make a simple text-based favicon in a few steps

Capabilities

What this tool can do

  • Generate favicon.ico and multiple PNG sizes together
  • Create an SVG favicon and site.webmanifest
  • Adjust background, padding, and corner radius
  • Download as ZIP and copy an HTML snippet
  • Support both image input and text-logo input
  • Create a favicon set entirely in the browser

Guide

How to use each screen area

Learn how to use each screen area, including settings, input, previews, results, and saving.

01 HOWTO

Source material area

Detailed reference by screen area for choosing favicon source material, adjusting a text logo, reviewing square and size previews, and saving ICO, PNG, SVG, manifest, and HTML examples.

Screen showing Source material area in Favicon GeneratorScreen showing Source material area in Favicon Generator

What this area does

  • Choose or review the generation source in this area.
  • Adjust the settings that affect the generated result.
  • Review the preview, strength, or output information before saving.
  • Save, copy, regenerate, or return to related settings.

Where to use it

01
Choose base

Choose or review this input before generating.

Screen showing where to use Choose base in Favicon GeneratorScreen showing where to use Choose base in Favicon Generator
02
Text logo settings

Adjust this setting for the intended result.

Screen showing where to use Text logo settings in Favicon GeneratorScreen showing where to use Text logo settings in Favicon Generator
03
Square preview

Use this preview or information to verify the result.

Screen showing where to use Square preview in Favicon GeneratorScreen showing where to use Square preview in Favicon Generator
04
Go to generate

Save, copy, regenerate, or return to the related area.

Screen showing where to use Go to generate in Favicon GeneratorScreen showing where to use Go to generate in Favicon Generator

02 HOWTO

Appearance adjustment area

Detailed reference by screen area for choosing favicon source material, adjusting a text logo, reviewing square and size previews, and saving ICO, PNG, SVG, manifest, and HTML examples.

Screen showing Appearance adjustment area in Favicon GeneratorScreen showing Appearance adjustment area in Favicon Generator

What this area does

  • Choose or review the generation source in this area.
  • Adjust the settings that affect the generated result.
  • Review the preview, strength, or output information before saving.
  • Save, copy, regenerate, or return to related settings.

Where to use it

01
Text and color adjustment

Choose or review this input before generating.

Screen showing where to use Text and color adjustment in Favicon GeneratorScreen showing where to use Text and color adjustment in Favicon Generator
02
Review preview

Adjust this setting for the intended result.

Screen showing where to use Review preview in Favicon GeneratorScreen showing where to use Review preview in Favicon Generator
03
Review base

Use this preview or information to verify the result.

Screen showing where to use Review base in Favicon GeneratorScreen showing where to use Review base in Favicon Generator
04
Prepare generation

Save, copy, regenerate, or return to the related area.

Screen showing where to use Prepare generation in Favicon GeneratorScreen showing where to use Prepare generation in Favicon Generator

03 HOWTO

Size preview area

Detailed reference by screen area for choosing favicon source material, adjusting a text logo, reviewing square and size previews, and saving ICO, PNG, SVG, manifest, and HTML examples.

Screen showing Size preview area in Favicon GeneratorScreen showing Size preview area in Favicon Generator

What this area does

  • Choose or review the generation source in this area.
  • Adjust the settings that affect the generated result.
  • Review the preview, strength, or output information before saving.
  • Save, copy, regenerate, or return to related settings.

Where to use it

01
Generate favicon

Choose or review this input before generating.

Screen showing where to use Generate favicon in Favicon GeneratorScreen showing where to use Generate favicon in Favicon Generator
02
Size previews

Adjust this setting for the intended result.

Screen showing where to use Size previews in Favicon GeneratorScreen showing where to use Size previews in Favicon Generator
03
Review square preview

Use this preview or information to verify the result.

Screen showing where to use Review square preview in Favicon GeneratorScreen showing where to use Review square preview in Favicon Generator
04
Go to save

Save, copy, regenerate, or return to the related area.

Screen showing where to use Go to save in Favicon GeneratorScreen showing where to use Go to save in Favicon Generator

04 HOWTO

Output files area

Detailed reference by screen area for choosing favicon source material, adjusting a text logo, reviewing square and size previews, and saving ICO, PNG, SVG, manifest, and HTML examples.

Screen showing Output files area in Favicon GeneratorScreen showing Output files area in Favicon Generator

What this area does

  • Choose or review the generation source in this area.
  • Adjust the settings that affect the generated result.
  • Review the preview, strength, or output information before saving.
  • Save, copy, regenerate, or return to related settings.

Where to use it

01
Save files and copy

Choose or review this input before generating.

Screen showing where to use Save files and copy in Favicon GeneratorScreen showing where to use Save files and copy in Favicon Generator
02
Review sizes

Adjust this setting for the intended result.

Screen showing where to use Review sizes in Favicon GeneratorScreen showing where to use Review sizes in Favicon Generator
03
Generate again

Use this preview or information to verify the result.

Screen showing where to use Generate again in Favicon GeneratorScreen showing where to use Generate again in Favicon Generator
04
Return to base

Save, copy, regenerate, or return to the related area.

Screen showing where to use Return to base in Favicon GeneratorScreen showing where to use Return to base in Favicon Generator

Notes

Notes

Important points are grouped with reasons so you can make decisions before using the tool.

Check

Keep the mark readable at small sizes

Favicons appear at 16x16 and 32x32. Short text and simple marks stay easier to recognize than detailed images.

Check

Confirm contrast between the background and mark

When using a solid or gradient background, make sure the text or mark does not blend into the background.

Check

Apply the HTML snippet and manifest

Use the generated files together with the HTML snippet and manifest so browsers and home-screen icons can pick them up correctly.

FAQ

Questions about Favicon Generator

Questions that make decisions easier before use are summarized first.

Are images uploaded to an external server?

No. Favicon generation runs entirely in the browser and image files are not sent externally.

Which files can it generate?

It can generate favicon.ico, multiple PNG sizes, an SVG favicon, site.webmanifest, and an HTML snippet.

Can I use it without an image?

Yes. The text-logo mode lets you create a simple favicon from a short text string.

Can I download everything as a ZIP file?

Yes. The generated favicon set can be saved as a ZIP file.

Does it generate a manifest for PWA use?

Yes. Depending on the selected preset, it can generate a site.webmanifest file.

Can I check how it looks at small sizes?

Yes. You can compare the appearance at sizes such as 16x16 and 32x32 in the preview area.

Next guides

Related guides

Related guides are listed next so you can continue without getting lost.

How to generate a QR code

Detailed reference by screen area for QR content input, size, margin, error correction, color, transparency, output information, and PNG/SVG saving.

View guide
How to generate a QR code

How to use the Password Generator

Detailed reference by screen area for presets, length, count, character rules, minimum counts, excluded characters, strength, compliance checks, and copying.

View guide
How to use the Password Generator

How to Use Image Compression

Compress multiple images in their original format, compare size changes, and save the results.

View guide
How to Use Image Compression
Image ToolsVideo ToolsText ToolsDeveloper ToolsDesign ToolsGenerator Tools