How do I add the favicon to my website?

Download the generated favicon files and place them in your website's root directory. Then add the provided HTML link tags to the section of your HTML pages. The tool generates the exact HTML code you need to copy and paste.

Web

ico

Favicon Generator

Generate favicons from text, emoji, or images for your website

Input Mode

Text (1-2 characters)

Font Weight

Shape

Background ColorTransparent

Text Color

Font Size64%

Live Preview

Browser Tab Preview

My Website

https://mywebsite.com

Generated Sizes

16x16favicon-16x16

32x32favicon-32x32

48x48favicon-48x48

64x64favicon-64x64

96x96favicon-96x96

128x128favicon-128x128

180x180apple-touch-icon

192x192android-chrome

512x512PWA icon (512)

Download

ZIP includes all PNG sizes, favicon.ico, site.webmanifest, and HTML snippet

HTML Snippet

<link rel="icon" type="image/x-icon" href="/favicon.ico">
<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="apple-touch-icon" sizes="180x180" href="/apple-touch-icon.png">
<link rel="manifest" href="/site.webmanifest">

Web App Manifest

{
  "name": "",
  "short_name": "",
  "icons": [
    {
      "src": "/favicon-192x192.png",
      "sizes": "192x192",
      "type": "image/png"
    },
    {
      "src": "/favicon-512x512.png",
      "sizes": "512x512",
      "type": "image/png"
    }
  ],
  "theme_color": "#6366f1",
  "background_color": "#6366f1",
  "display": "standalone"
}

Share to Community

Was this tool helpful?

What is Favicon Generator?

Free online favicon generator to create favicons for your website from text, emoji, or uploaded images.

Generate all the icon sizes you need including 16x16, 32x32, 48x48, 180x180 (Apple Touch), and 192x192 (Android). Customize background color, border radius, font size, and padding for text-based favicons. Convert a PNG or SVG logo to a favicon, make a favicon from a single letter, or turn an emoji into a site icon in seconds. Download individual sizes or a complete favicon package with the HTML link tags and a site.webmanifest for PWA support. All generation happens client-side - no uploads to external servers. No signup required.

How to Use Favicon Generator

1Choose your favicon source: type text/emoji or upload an image
2Customize the background color, border radius, and other styling options
3Preview the generated favicon at all standard sizes
4Download individual sizes or the complete favicon package with HTML markup

Frequently Asked Questions

Modern websites need multiple favicon sizes: 16x16 (browser tab), 32x32 (browser tab retina), 48x48 (Windows taskbar), 180x180 (Apple Touch icon for iOS), and 192x192 (Android home screen). This tool generates all required sizes at once.

Yes. Type any emoji in the text input and it will be rendered as a favicon. The emoji is drawn on a customizable background using the Canvas API, giving you a sharp icon at every size. This is a quick way to get a distinctive favicon without any design work.

You can upload PNG, JPG, SVG, or GIF images. The tool will resize your image to all required favicon dimensions. For best results, use a square image with a minimum resolution of 192x192 pixels.

Download the generated favicon files and place them in your website's root directory. Then add the provided HTML link tags to the <head> section of your HTML pages. The tool generates the exact HTML code you need to copy and paste.

Yes. Upload a PNG, SVG, or JPG and the tool renders it at every favicon size. A square source image works best. For a logo with fine detail, check the 16x16 preview, since small details can become hard to read at that size.

The package includes the 192x192 and 512x512 icons that a Progressive Web App needs, along with the HTML link tags. You can reference these icons in your site.webmanifest so the app shows a proper icon when added to a home screen.

Share this tool

Related Tools

QR Code Generator

QR code generator free - create QR codes from URLs or text with no watermark, no signup required

IMG

Image to Base64

Free online image to base64 - convert images to Base64 encoded strings for embedding in code

|||

Barcode Generator

Free online barcode generator - generate Code 128 barcodes from any text instantly

█

Text to ASCII Art

Free online text to ascii art - convert text into ASCII art with multiple font styles

🗺️

XML Sitemap Generator

Free online XML sitemap generator - generate XML sitemaps from a list of URLs

SEO

Meta Tag Generator

Free online meta tag generator - generate SEO meta tags, Open Graph, and Twitter Card markup for your website

{ "name": "", "short_name": "", "icons": [ { "src": "/favicon-192x192.png", "sizes": "192x192", "type": "image/png" }, { "src": "/favicon-512x512.png", "sizes": "512x512", "type": "image/png" } ], "theme_color": "#6366f1", "background_color": "#6366f1", "display": "standalone" }

What is Favicon Generator?

Free online favicon generator to create favicons for your website from text, emoji, or uploaded images.

Frequently Asked Questions

You can upload PNG, JPG, SVG, or GIF images. The tool will resize your image to all required favicon dimensions. For best results, use a square image with a minimum resolution of 192x192 pixels.