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
Steps
2 steps
Guide
With screenshots
Content
Notes and FAQ

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

Steps

Steps

The order of operations and checkpoints are listed so you can proceed while looking at the screen.

STEP 1

Choose a base and adjust the preview

Choose whether to start from an image or text, then adjust the background, corner radius, text size, and colors while checking the square preview.

favicon生成ツールの入力と調整エリアを示すキャプチャfavicon生成ツールの入力と調整エリアを示す SP 向けキャプチャ

Checkpoints

  • Choose image or text as the base
  • Confirm that the square preview follows the current settings
  • Make the design recognizable at small favicon sizes

Actions on this screen

01
Choose the base

Add an image file or enter short text depending on the favicon you want to create.

Base selector in Favicon GeneratorMobile view of the base selector in Favicon Generator
02
Adjust the text logo

Choose the font, weight, text size, and text color while checking contrast against the background.

Text logo settings in Favicon GeneratorMobile view of text logo settings in Favicon Generator
03
Square preview

Check the background, corner radius, and mark appearance before generating files.

Square preview in Favicon GeneratorMobile view of the square preview in Favicon Generator

STEP 2

Generate and save the favicon files

Generate the favicon set, then check the size previews, output file list, HTML snippet, and manifest before saving.

favicon生成ツールの出力確認エリアを示すキャプチャfavicon生成ツールの出力確認エリアを示す SP 向けキャプチャ

Checkpoints

  • Check the 16x16 and 32x32 previews
  • Confirm favicon.ico, PNG, SVG, and manifest output
  • Save the ZIP or copy the HTML snippet

Actions on this screen

01
Generate favicon

Generate the favicon set from the current settings. The preview and file list update after generation.

Generate button in Favicon GeneratorMobile view of the generate button in Favicon Generator
02
Size previews

Review 16x16, 32x32, 180x180, and 192x192 sizes to make sure the mark is not crushed.

Size previews in Favicon GeneratorMobile view of size previews in Favicon Generator
03
Save files and copy snippets

Download individual files or a ZIP, then copy the HTML snippet and manifest for your site.

Output file list in Favicon GeneratorMobile view of the output file list 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

Learn how to create a QR code from a URL or text, adjust the size and colors, and save it as PNG or SVG.

View guide
How to generate a QR code

How to use Image Format Conversion

This guide explains how to choose an image, select the output format, and download the result after checking the preview.

View guide
How to use Image Format Conversion

How to use Image Crop & Resize

This guide explains how to choose an image, adjust the crop area and output size, and save the result.

View guide
How to use Image Crop & Resize
Image ToolsVideo ToolsText ToolsDeveloper ToolsDesign ToolsGenerator Tools