ico

Favicon Generator

LOCAL · Browser-Only

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 recipe

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

What sizes do I need for a favicon?

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.

Can I create a favicon from an emoji?

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.

What image formats can I upload?

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.

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 <head> section of your HTML pages. The tool generates the exact HTML code you need to copy and paste.

Can I convert a PNG or SVG logo into a favicon?

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.

Does it generate a web app manifest for PWAs?

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

IMG

Png to base64

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

█

Ascii art generator

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

🔷

SVG to PNG Converter

Free online SVG to png converter - convert SVG images to PNG or JPEG format

🛡️

Free privacy policy

Free online privacy policy generator - generate GDPR-compliant privacy policies for websites

🌍

Multilingual seo

Generate hreflang tags for multilingual SEO - HTML, HTTP headers, and XML sitemap formats

💧

Watermark image online

Free online watermark generator - add text or image watermarks to photos

📱

Iphone mockup

Free online device mockup generator - wrap screenshots in device frames (iPhone, laptop, etc.)

Hash Generator

Free online hash generator - generate MD5, SHA-1, SHA-256 hashes from any input text

Keep reading: Markdown Cheat Sheet and html entities reference. Doing this in code instead? See the tool chain endpoints.

{ "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" }