MyCalcBuddy

Favicon Generator

Generate favicons for your website in multiple sizes from text or emoji.

Favicon Settings

Preview

16x16 preview

16px

32x32 preview

32px

64x64 preview

64px

128x128 preview

128px

Download Favicons

HTML Code

<!-- Favicon -->
<link rel="icon" type="image/png"
  sizes="16x16" href="/favicon-16x16.png">
<link rel="icon" type="image/png"
  sizes="32x32" href="/favicon-32x32.png">
<link rel="apple-touch-icon"
  sizes="180x180" href="/apple-touch-icon.png">
<link rel="icon" type="image/png"
  sizes="192x192" href="/android-chrome-192x192.png">

Size Guide

16x16, 32x32Browser tabs
48x48Windows site icons
180x180Apple touch icon
192x192, 512x512Android/PWA

What Is a Favicon and Why Does Every Website Need One?

A favicon (short for favorite icon) is the small image that browsers display in the tab bar, bookmark lists, browser history, and on mobile home screens when a user saves your website as a shortcut. At its smallest size — 16×16 pixels — a favicon must instantly communicate your brand identity in a space barely larger than a capital letter. Yet that tiny icon plays an outsized role in recognition: studies of browser interaction consistently show that users identify familiar tabs by their favicons before they read the page title.

Modern browsers and operating systems request favicons at multiple resolutions. A desktop browser tab typically loads a 16×16 or 32×32 PNG, while a bookmarks toolbar may request 48×48. iOS devices request a 180×180 Apple Touch Icon when a user saves your site to the home screen, and Android and progressive web apps (PWAs) need 192×192 and 512×512 icons for the app launcher and splash screen. If any of these sizes are missing, the browser either scales up a smaller image (producing a blurry result) or falls back to a generic default icon.

This favicon generator creates all eight standard sizes — 16, 32, 48, 64, 128, 180, 192, and 512 pixels — from a short text string or emoji that you customize with background color, text color, font family, font size, and shape (square, rounded, or circle). The entire generation process runs in your browser using the HTML5 Canvas API, so no image is ever uploaded to a server. You can download individual sizes or all sizes at once, then drop the PNG files into your project's public folder and paste the ready-made HTML link tags into your <head>.

How the Favicon Generator Works

Each favicon is drawn on an off-screen HTML5 Canvas element sized to the target resolution. The generator accepts up to two characters of text (or a single emoji) and renders them centered on the canvas at a font size that scales proportionally with the canvas size. The exact font-size formula used is:

The generator loops through the sizes array [16, 32, 48, 64, 128, 180, 192, 512] and calls the same rendering function for each size. For each canvas:

  1. The canvas dimensions are set to size × size pixels.
  2. The background is filled using the chosen color and shape (square uses fillRect, circle uses an arc path, rounded uses roundRect).
  3. The font is set and the text is drawn centered both horizontally and vertically, offset by 2 px downward to correct for optical baseline alignment.
  4. The canvas is exported as a PNG data URL via canvas.toDataURL('image/png') and offered for download.

Because the font size and corner radius are both expressed as fractions of the canvas size, the visual proportions remain perfectly consistent across all eight output sizes. A 32 px favicon will look identical to the 512 px version when scaled, just at lower resolution.

Font Size and Corner Radius Scaling Formulas

renderedFontSize = (fontSize / 64) × size cornerRadius = size × (borderRadius / 100)

Where:

  • fontSize= The font size slider value in the UI (range: 16–56 px, representing the text size at 64 px reference canvas)
  • 64= Reference canvas size used to normalize the font size slider so proportions stay consistent at all output resolutions
  • size= The target output canvas size in pixels (one of: 16, 32, 48, 64, 128, 180, 192, 512)
  • borderRadius= The border-radius slider value as a percentage (range: 0–50, only active when shape is 'rounded')
  • cornerRadius= The computed corner radius in pixels passed to canvas.roundRect() for the rounded square shape

Favicon Sizes and Where Each Is Used

Different platforms and contexts request favicons at different sizes. Providing the full set ensures your brand looks crisp everywhere your site appears. The table below maps each generated size to its primary use case:

Size (px) Platform / Context HTML Tag
16×16 Browser tab, address bar <link rel="icon" sizes="16x16">
32×32 Browser tab (Retina / HiDPI), Windows taskbar shortcut <link rel="icon" sizes="32x32">
48×48 Windows site icons, desktop shortcut overlay <link rel="icon" sizes="48x48">
64×64 Windows site list, high-DPI tab bars <link rel="icon" sizes="64x64">
128×128 Chrome Web Store, some browser extensions <link rel="icon" sizes="128x128">
180×180 iOS home screen (Apple Touch Icon) <link rel="apple-touch-icon" sizes="180x180">
192×192 Android Chrome home screen, PWA launcher icon <link rel="icon" sizes="192x192"> / web manifest
512×512 PWA splash screen, Android app launcher Web app manifest "icons" array

For a complete modern favicon setup, you also need to reference these icons in your HTML <head> using the provided link tags. The generator's "Copy HTML" button outputs the full set of link tags — paste them directly into your <head> after uploading the PNG files to your web root.

Shapes, Colors, and Design Best Practices

The favicon generator offers three shape options that reflect real-world platform conventions and branding preferences.

Square: The classic favicon shape used by most desktop websites. A square background with a centered initial or emoji is highly readable even at 16×16 px. This shape is the safest choice for maximum browser compatibility since it does not require CSS clipping.

Circle: Rendered using the Canvas 2D arc() method with a radius equal to half the canvas width. Circular favicons resemble the style used by many social and messaging apps. Note that at 16×16 px the circle is only 8 px in radius, so very thin letterforms may lose detail — bold, simple characters work best.

Rounded: Uses the Canvas 2D roundRect() method with a corner radius computed as size × (borderRadius / 100). The border-radius slider (0–50%) lets you dial in anything from a barely-rounded corner at 5% to a pill shape at 50%. At 50% with a square canvas, the result is visually identical to a circle. Many modern app icons — including those in the iOS and Android ecosystems — use a rounded rectangle as the standard shape.

Color contrast: At tiny sizes, contrast is everything. The WCAG 2.1 guidelines recommend a contrast ratio of at least 4.5:1 for normal text. For favicon text at 16 px, aim for the highest contrast you can achieve. Classic high-contrast combinations include white text on a saturated color background (blue #3b82f6, red, green, purple) or black text on yellow or white. Avoid light-on-light or dark-on-dark combinations — the text will vanish at small sizes.

Keep it simple: A single uppercase letter or a simple emoji is almost always more readable at 16 px than a two-character abbreviation. If you do use two characters, set the font size slider toward the middle of its range (around 28–36 px on the 64 px reference scale) so both characters fit within the safe area with visible margins on all sides.

Font choice: Sans-serif fonts such as Arial, Helvetica, and Verdana remain crisp at small sizes because their strokes are more uniform. Serif fonts like Times New Roman or Georgia can look elegant at large sizes (128+ px) but their serifs may bleed together at 16–32 px. Impact is useful when you need maximum visual weight in a small space.

How to Install Your Favicon in a Website

Once you have downloaded your favicon files, follow these steps to install them correctly across all browsers and platforms.

  1. Rename and place the files: Copy each PNG into your website's public root directory (for Next.js this is the /public folder; for a static site it is the folder your server serves as /). Use the conventional filenames: favicon-16x16.png, favicon-32x32.png, favicon-48x48.png, apple-touch-icon.png (180×180), android-chrome-192x192.png, and android-chrome-512x512.png.
  2. Add the HTML link tags: Paste the link tags from the generator's "Copy HTML" button into the <head> of every page (or your layout component). The essential tags are the 16×16 and 32×32 standard icons plus the 180×180 Apple Touch Icon.
  3. Create a web app manifest: For PWA support, create a site.webmanifest (or manifest.json) file that references the 192×192 and 512×512 icons. Add <link rel="manifest" href="/site.webmanifest"> to your <head>.
  4. Clear browser cache: Favicons are aggressively cached. After deploying, force a hard reload (Ctrl+Shift+R on Windows, Cmd+Shift+R on Mac) or open a new incognito window to see the updated icon in the tab bar.
  5. Test on mobile: On an iPhone, open Safari, navigate to your site, tap the Share button, and choose "Add to Home Screen" to verify the 180×180 Apple Touch Icon appears correctly. On Android, open Chrome, tap the three-dot menu, and choose "Add to Home Screen."

For Next.js 13+ App Router projects, place favicon files directly in the app/ directory. Next.js automatically picks up app/favicon.ico and app/icon.png without any manual link tags. For the Pages Router (Next.js 12 and earlier), use the /public folder and add the link tags to your _document.js or shared layout.

Worked Examples

Letter "A" at 32 px canvas, font size slider 32

Problem:

Calculate the rendered font size for the letter "A" at a 32×32 px favicon with the font size slider set to 32.

Solution Steps:

  1. 1Apply the font size formula: renderedFontSize = (fontSize / 64) × size = (32 / 64) × 32.
  2. 2Compute the fraction: 32 / 64 = 0.5.
  3. 3Multiply by the canvas size: 0.5 × 32 = 16 px.
  4. 4The text "A" is drawn at bold 16 px in the chosen font, centered on a 32×32 canvas with a 2 px baseline offset.

Result:

Rendered font size: 16 px on a 32×32 canvas.

Emoji at 180 px canvas (Apple Touch Icon), font size slider 48

Problem:

Determine the rendered font size for a single emoji at 180×180 px (Apple Touch Icon) with the font size slider set to 48.

Solution Steps:

  1. 1Apply the font size formula: renderedFontSize = (fontSize / 64) × size = (48 / 64) × 180.
  2. 2Compute the fraction: 48 / 64 = 0.75.
  3. 3Multiply by the canvas size: 0.75 × 180 = 135 px.
  4. 4The emoji is drawn at bold 135 px, nearly filling the 180×180 canvas — ideal for a large, recognizable home-screen icon.

Result:

Rendered font size: 135 px on a 180×180 canvas.

Rounded shape at 512 px, border-radius slider 20%

Problem:

Find the corner radius in pixels for a 512×512 favicon with the border-radius slider set to 20%.

Solution Steps:

  1. 1Apply the corner radius formula: cornerRadius = size × (borderRadius / 100) = 512 × (20 / 100).
  2. 2Compute the fraction: 20 / 100 = 0.20.
  3. 3Multiply by canvas size: 512 × 0.20 = 102.4 px.
  4. 4The roundRect() call uses a corner radius of 102.4 px, creating a noticeably rounded square — consistent with modern app icon standards.

Result:

Corner radius: 102.4 px on a 512×512 canvas.

Two characters "MC" at 64 px canvas, font size slider 40

Problem:

Calculate the rendered font size for the two-character text "MC" at 64×64 px with the font size slider at 40.

Solution Steps:

  1. 1The text input is sliced to 2 chars: "MC".slice(0, 2) = "MC".
  2. 2Apply the font size formula: renderedFontSize = (40 / 64) × 64.
  3. 3Compute the fraction: 40 / 64 = 0.625.
  4. 4Multiply by canvas size: 0.625 × 64 = 40 px. Both characters are drawn at bold 40 px in the selected font, centered on the 64×64 canvas.

Result:

Rendered font size: 40 px on a 64×64 canvas. The two-character monogram "MC" is drawn bold and centered.

Tips & Best Practices

  • ✓Use a single uppercase initial letter for the clearest favicon at 16×16 px — two characters become difficult to read at tab bar size.
  • ✓Set the font size slider to 32–40 for single characters and 24–30 for two-character monograms to keep comfortable padding inside the icon boundary.
  • ✓High-contrast color pairs (white text on a deep blue, green, or purple background) produce the most recognizable tab icons across both light and dark browser themes.
  • ✓Choose a background color that matches your brand's primary color so the favicon reinforces visual identity across every browser tab.
  • ✓After downloading, clear your browser cache with Ctrl+Shift+R (Cmd+Shift+R on Mac) before testing the new favicon — browsers cache favicons aggressively.
  • ✓For PWA support, always include both the 192×192 and 512×512 PNG files in your web app manifest icons array.
  • ✓Use the Circle or Rounded shape to match the icon style of iOS and Android app icons, especially if you are building a PWA that users will add to their home screens.
  • ✓Test your favicon on a dark browser theme as well as a light theme — a dark background color that looks great in light mode may disappear against a dark tab bar.

Related Calculators

Color Contrast Checker

Verify that your favicon's text and background colors meet WCAG 2.1 contrast ratio requirements for accessibility.

Color Picker

Explore and select exact hex color values for your favicon background and text colors.

Image Size Calculator

Calculate file size and dimensions for images at different resolutions — useful when planning favicon storage budgets.

QR Code Generator

Generate scannable QR codes for URLs — a complementary branding asset for printed materials alongside your favicon.

Placeholder Image Generator

Create placeholder images at any dimension for mockups and wireframes during web design workflows.

Flexbox Generator

Generate CSS flexbox layouts visually — a companion tool for front-end developers customizing their site's UI.

Frequently Asked Questions

The classic <code>favicon.ico</code> is a multi-resolution container format that can hold 16×16, 32×32, and 48×48 images inside a single file — older versions of Internet Explorer required this format. Modern browsers fully support PNG favicons with explicit size declarations in the link tag, which is why this generator produces individual PNG files per size. You can create a <code>favicon.ico</code> by combining your 16×16 and 32×32 PNGs using a dedicated ICO converter tool if you need backward compatibility with very old browsers.
Blurry favicons are almost always caused by the browser scaling up a low-resolution image rather than loading the appropriately sized PNG. Make sure you have both the 16×16 and 32×32 PNG files uploaded to your server and that the corresponding link tags are present in your HTML head with the correct <code>sizes</code> attribute. High-DPI (Retina) displays request the 32×32 image for a tab that appears 16×16 logical pixels, so the 32×32 file must be present and correctly referenced.
The generator accepts up to two characters, which is the practical maximum for readability at small sizes. The input is automatically sliced using <code>text.slice(0, 2)</code> before rendering, so any characters beyond the second are silently ignored. A single capital letter or a single emoji is usually the most readable option at 16–32 px. Two-character monograms work well at 64 px and above but can become indistinct at tab size.
Yes. The generator produces both the 192×192 and 512×512 PNGs that the Web App Manifest specification requires for PWA launcher icons and splash screens. Download those two sizes, add them to your <code>public</code> directory, and reference them in your <code>site.webmanifest</code> file under the <code>icons</code> array with their respective sizes and <code>type: image/png</code>. The 512×512 icon is also used by some browsers as the PWA install prompt image.
Apple's iOS automatically applies a rounded corner mask (and optionally a gloss effect on older iOS versions) to any image provided as an Apple Touch Icon — you do not need to pre-round the corners yourself. The 180×180 px dimension is the required source resolution for modern Retina iPhones; iOS then scales it to fit the actual home-screen grid on the device. Providing a square 180×180 PNG is the correct approach; iOS handles all the visual rounding.
Yes, and emoji favicons have become a popular minimalist choice for blogs and side projects. Enter a single emoji character in the text field — the generator treats it as a one-character string and renders it centered on the canvas at the scaled font size. Emoji rendering depends on the operating system's emoji font, so the visual appearance may differ slightly between Windows, macOS, and Android. Test at 16×32 px sizes to make sure the emoji is still recognizable at tab bar resolution.
For a basic static website without PWA support, the minimum recommended set is 16×16, 32×32, and 180×180 (Apple Touch Icon). The 16×16 and 32×32 cover all desktop browsers and Windows; the 180×180 covers iOS home-screen bookmarks. The 192×192 and 512×512 sizes are only needed if you are building a PWA with a web app manifest. The 48×64 and 128 px sizes are convenience extras that improve appearance in specific Windows and Chrome contexts.

Sources & References

Last updated: 2026-06-05

💡

Help us improve!

How would you rate the Favicon Generator?

<>

Editorial Note

MyCalcBuddy Editorial Team

This page is maintained as an educational calculator reference.

Source

Formula Source: Standard Mathematical References

by Various

UpdatedLast reviewed: May 2026
CheckedFormula checks are based on standard references and internal QA review.