↑↓ to move ↵ to open Esc to close Browse all tools

Favicon Generator

Turn a logo, one to three letters or an emoji into a complete favicon set: favicon.ico, PNG sizes, an Apple touch icon, a web manifest and the HTML to paste.

Make your favicon

Start from
1 to 3 characters, like an initial or a short brand mark.
In a browser tab
On a phone home screen
Every size16 to 48 at actual size
16 pxBrowser tab
32 pxTab, high-res screen
48 pxInside the ICO
180 pxApple touch icon
192 pxAndroid
512 pxAndroid, install
16 px zoomedEvery pixel

Make it square
0%
Background
0%
50% makes a circle.
Weight
Shape
56%
Also fills the Apple touch icon, which should not be transparent.
Your site
Shown under the icon on Android, where space is limited.
Suggests a color for the address bar, for example in Chrome on Android. Follows the background until you change it.
Where you upload the files. / is the root, which is best.
Adds ?v=2 to every link so browsers fetch a new icon.
Sharp at any size. Uses each visitor's own fonts, so it can differ a little from the PNG files.
HTML code for your <head>
 
   
 
In the ZIP
 
     
     
     
       
    Your favicon is made by your own browser. Nothing is uploaded.
       
       
     
      
    Which favicon files a website really needs
     
    A favicon used to be one tiny file. Today the same icon shows up in browser tabs, bookmarks, phone home screens, the Android app switcher and search results, and each place asks for its own size or format. You do not need dozens of files, though. This set covers every current browser and device:
     
     
     
    FileSizeWhat uses it
      
    favicon.ico16x16, 32x32, 48x48Older browsers and any program that asks for /favicon.ico without reading your HTML
     
    favicon.svgAny sizeCurrent Chrome, Edge and Firefox, and Safari 26 or later. Stays sharp on every screen. Made for text and emoji icons.
     
    favicon-16x16.png
    favicon-32x32.png    		16x16, 32x32Browser tabs and bookmarks when there is no SVG
     
    apple-touch-icon.png180x180iPhone and iPad home screens. Give it a solid background, not a transparent one.
     
    android-chrome-192x192.png
    android-chrome-512x512.png    		192, 512Android home screen and the install prompt, through the manifest
     
    site.webmanifestTextTells Android and installable web apps the name, colors and icons of your site
          
     
     
    If you add only one thing, make it favicon.ico in the root folder of your site. Browsers may look for /favicon.ico on their own when a page has no icon link tag. Everything else is linked from the HTML code below.
     
    The HTML code, line by line
     
    Paste the code from the generator into the <head> of every page, usually in a shared header template, and upload the files to the folder you entered. Here is what each line does:
     
       
    • rel="icon" with favicon.ico: the classic browser tab icon. The sizes="32x32" value tells browsers how big the bitmap is.
      •  
    • rel="icon" with favicon.svg (text and emoji icons): a vector icon that stays crisp at any zoom level. Without an SVG, the code links the 16x16 and 32x32 PNG files instead.
      •  
    • rel="apple-touch-icon": the 180x180 icon an iPhone uses when someone adds your site to the home screen.
      •  
    • rel="manifest": points to site.webmanifest, which lists the 192 and 512 px Android icons, your site name and colors.
      •  
    • meta name="theme-color": suggests a color for the browser around your page, such as the address bar in Chrome on Android.
      •  
     
    Paths in the manifest are relative to the manifest file itself, so the icons keep working wherever you put the folder. The manifest sets "display" to "standalone", which opens an installed site without the browser address bar. Change it to "browser" if you would rather keep the normal browser look.
     
    Tips for an icon that works at 16x16
     
    At 16 × 16 pixels, a favicon has 256 pixels in total and takes up about as much room as one capital letter in this paragraph. What reads well in a logo file often turns into a smudge in a tab.
     
       
    • Use one shape or one letter. Drop the tagline and the wordmark and keep only the symbol. For a text favicon, one letter is clearest; three is the limit.
      •  
    • Go bold. Thin lines disappear. Anything thinner than one pixel at 16 px turns into a faint gray line, so pick Bold or Black for letters.
      •  
    • Fill the space. Your icon sits next to other tabs. A little padding is fine, but a small logo in a large empty square looks lost.
      •  
    • Check light and dark tabs. A dark logo on a transparent background vanishes in dark mode. A colored shape behind it fixes that, which is why the preview shows both.
      •  
    • Start big and square. A square source of at least 512 px gives the larger icons room. For a wide logo, choose Fit inside instead of cropping, and add padding if it feels cramped.
      •  
     
    The generator draws text and emoji fresh at every size instead of shrinking one big image, and it scales uploaded images down in halving steps with high-quality smoothing. That keeps the 16 px version as crisp as the format allows. Use the zoomed 16 px tile to judge each pixel before you download.
     
    How to test your favicon
     
       
    • Open your site in a private window, so no old icon comes from the cache.
      •  
    • Open yoursite.com/favicon.ico and the other files directly. Each should load, not show a 404 page.
      •  
    • In Chrome, open DevTools, go to Application and then Manifest. It lists your icons, name and colors, and shows errors if a file is missing.
      •  
    • On an iPhone, tap Share and then Add to Home Screen to see the Apple touch icon. On Android, use Add to Home screen in the Chrome menu.
      •  
    • Search results update last. Google has to crawl your home page again, which can take days or weeks.
      •  
     
    Cache busting: why the old icon keeps showing
     
    If a normal reload keeps showing the old icon, change the address of the file. Type a version, like 2, in the Version field and the generator adds ?v=2 to every link in the HTML code. Next time you change the icon, use 3. Old visitors then fetch the new file because, to the browser, it is a different address.
     
    Keep the file names themselves the same. Browsers may still ask for /favicon.ico by that exact name, and the query string does not get in their way.
     
    How to use the favicon generator
     
       
    1. 1Choose a source: upload your logo, type 1 to 3 letters, or pick an emoji.
      2.  
    2. 2Adjust the shape, colors, size and padding while you watch the browser tab, home screen and size previews.
      3.  
    3. 3Enter your site name and, if needed, the folder and a version, then press Download ZIP.
      4.  
    4. 4Upload the files to your site and paste the HTML code into the <head> of your pages.
      5.  
       
    Frequently asked questions
     
     
     What size should a favicon be? 
    This generator makes 16 × 16 and 32 × 32 pixel icons for browser tabs, a 48 px size inside the ICO file, a 180 px Apple touch icon for iPhone and iPad home screens, and 192 and 512 px icons for Android, the two sizes Chrome asks for in a web app manifest. All of them come from one design, so you only design once.
     
     Do I still need a favicon.ico file? 
    Yes, keep one. When a page has no icon link, browsers may request /favicon.ico from the root of your site on their own. It is a small file, and without it those requests end up as 404 errors in your logs.
     
     Why is my new favicon not showing? 
    Start with the browser cache. Open the site in a private window, or open yoursite.com/favicon.ico directly. If the file loads, add a version like ?v=2 in the generator and paste the new HTML. If it does not load, the files are in a different folder than the HTML points to.
     
     How do I get my favicon into Google search results? 
    Google reads the icon from the link tags on your home page, including rel="icon" and rel="apple-touch-icon". The icon must be square, and Google recommends one larger than 48 × 48 pixels. Google Search reads ICO and PNG but not SVG, so the 180 px Apple touch icon from this set works well. Google has to crawl your home page again before the change shows, which can take days or weeks.
     
     Can I use an emoji as a favicon? 
    Yes. The PNG and ICO files show the emoji exactly as your device draws it. The optional SVG uses the emoji font of each visitor, so it looks like the Apple, Google or Microsoft version depending on the device. The emoji artwork comes from the font on each device, under that font’s license. For a commercial brand, your own artwork or an openly licensed set like Twemoji or Noto Emoji is the safer choice.
     
     How do I add a favicon in WordPress? 
    WordPress has its own Site Icon setting, under Settings, General since WordPress 6.5 (in older versions under Appearance, Customize, Site Identity). It asks for a square image of at least 512 × 512 pixels, so upload android-chrome-512x512.png from this set and WordPress creates the other sizes itself. You do not need the HTML code in that case.
     
     Is my logo uploaded anywhere? 
    No. Your image is opened, resized and packed into the ZIP by your own browser. Nothing is sent to a server, so unreleased logos and client work stay private.