How to generate the favicon?

Configure Text

Text Options

Configure the favicon text, font, and colors.

TextThe text to display on the favicon.
FontThe font used to render the text. Add more fonts with the "Add Google Font..." option.
Font SizeThe size of the font in pixels.
BackgroundThe color of the favicon background in HTML/CSS format.
Text ColorThe text color in HTML/CSS format.
Select color from the sampler.
Text
Font Size
Background
    Opacity
Text Color

Rounded Corners

Use the slider located below the favicon preview to adjust the rounded corners.

Square Circle

Select Image

  • Browse and select the image you want to use as a favicon.
  • Drag-and-drop the image file.
  • Paste the image from the clipboard (Ctrl-V or ⌘V).
Browse...

Select an image in one of the supported formats.

PNGPortable Network Graphics
JPGJPEG Image
WEBPWebP Image
HEICHigh-Efficiency Image Container
SVGScalable Vector Graphics
GIFGIF Image (non-animated)
ICOWindows Icon Image
BMPBitmap Image
TIFFTagged Image File Format

Customize Favicon

Rounded Corners & Background

Use the slider located below the favicon preview to adjust the rounded corners.

When the favicon has transparent areas, fill its background with a color in HTML/CSS format. Transparent by default.

Select color from the sampler.

Square Circle
Background
    Opacity

Small Image Warning

The image is smaller than the recommendation of 192x192 px, the favicon may not be optimal.

Upscale Mode

When the favicon is larger than the image source, how to upscale the image.

SmoothenBlend the pixels to create a smoother favicon.
PixelateEnlarge the pixels to create a pixelated effect.
Upscale Mode

Generate Favicon

HTML Code

The HTML snippet that goes into the <head> section of the website code.

<link rel="apple-touch-icon" sizes="180x180" href="/apple-touch-icon.png">
<link rel="icon" type="image/png" sizes="32x32" href="/favicon-32x32.png">
<link rel="icon" type="image/png" sizes="16x16" href="/favicon-16x16.png">
<link rel="manifest" href="/site.webmanifest">
Generate Favicon

FAQ

How to generate the favicon from text?

  • Set 1 or 2 characters in the Text field.
  • Select a font from the curated list, or add a font from Google Fonts.
  • Customize the favicon colors with the Background and Text Color fields. Adjust its rounded corners with the slider.
  • Click the Generate Favicon button to download the favicon package.

How to generate the favicon from an image?

  • Click the Browse... button to select the image.
  • Crop the image to a square aspect ratio if required (recommended).
  • Customize the background and the rounded corners of the favicon.
  • Click the Generate Favicon button to download the favicon package.

How to install the favicon?

To install the favicon, extract the downloaded files into the root directory of the website and copy the generated HTML snippet into the <head> section of the code.

What are the files included in the favicon package?

The generated favicon package contains the following files.

apple-touch-icon.pngThe image used by Apple devices (iPad, iPhone, etc.) with a size of 180x180 px.
android-chrome-192x192.png
android-chrome-512x512.png
site.webmanifest		The favicon image with a size of 192x192, or 512x512 px, and the required configuration manifest. Used when the website is installed on a device home screen. More information available in the Web manifests guide.
favicon-16x16.png
favicon-32x32.png		The favicon image with a size of 16x16, or 32x32 px. It is displayed on browser tabs, bookmarks, history, search results, etc.
favicon.icoThe image in the .ico format. Includes 16x16, 24x24, 32x32, 48x48 and 64x64 px icons.
Image Resizer Bulk Image Resizer Image Compressor Image Converter GIF Resizer GIF Converter Icon Editor Icon Converter Favicon Generator Color Picker Twitter Downloader
© 2018 - 2025, redketchup.io Privacy & Cookies Terms