Starlight Tools

Free Favicon Generator

Create favicon.ico, PNG, SVG, Apple Touch Icon, Android icons, and a web manifest for all major browsers and platforms. Upload an image or create a text/emoji favicon, then download the complete package.

Source & Options

Keep the important part inside the safe zone. Detailed logos can disappear at 16x16, and Android or iOS can clip edges when icons are rounded or maskable.

Private, standard output

Runs in your browser
No upload or server processing.
Inputs
PNG, JPG, WebP, GIF, SVG, text, emoji.
Outputs
ICO, PNG, SVG, Apple, Android, manifest.
Package
Generate previews to see file count.
PlatformBest files
Chrome / Edge / Firefoxfavicon.ico, PNG, SVG
Safari / iOSapple-touch-icon.png, PNG fallback
Android / PWAandroid-chrome-192x192.png, 512x512, site.webmanifest
Windows tilesmstile-150x150.png, browserconfig.xml

Previews & Export

Generated files


          

            

              
Install checklist

              
    
                
  1. Download ZIP.
    2. 
                
  2. Upload files to the chosen folder.
    3. 
                
  3. Paste the tags into <head>.
    4. 
                
  4. Clear browser, CDN, and platform cache.
    5. 
                
  5. Test the live URL.
    6. 
              

              

                
WordPress
Use theme header, child theme, or a header-code plugin.

                
Shopify/static HTML
Upload assets and paste tags in the theme or page head.

                
React/Next.js
Place files in public and use root-relative paths.

                
Static generators
Copy files to the static/public folder before build.

              

            

            

              
Test live favicon

              
              
              

                
              

              

            

          

        

      


      
      




      
Create a complete favicon pack in one step

        

          This favicon pack generator helps you create all the icon sizes and files a modern website needs, without complex
          setup or external uploads. Favicons are the small brand icons that appear in browser tabs, bookmarks, mobile home
          screens, and search results. A complete set makes your site look polished across Chrome, Safari, Firefox, Edge,
          Android, iOS, and Windows tiles.
        

        

          The idea is simple: start with one high-quality source image, then generate many optimized sizes. Different
          platforms expect different formats, so this tool outputs standard filenames such as
          favicon.ico, favicon-16x16.png, favicon-32x32.png,
          apple-touch-icon.png, android-chrome-192x192.png,
          android-chrome-512x512.png, favicon.svg, and
          site.webmanifest. It also produces ready-to-paste HTML tags so you can install the
          pack quickly in your site’s <head>.
        


        
How to use the generator

        
    
          
  1. Upload a clean SVG or a large PNG (512×512 or bigger for best clarity).
    2. 
          
  2. Adjust crop, zoom, padding, background, and safe-zone placement before export.
    3. 
          
  3. Use text/emoji mode for initials, letter icons, or emoji favicons with custom fonts and contrast feedback.
    4. 
          
  4. Click Generate to create the full favicon pack and download the files.
    5. 
          
  5. Place the files in a stable folder like /icons and paste the HTML tags into your page.
    6. 
        

        

          If your site uses a custom path, you can update the generated tags to match. The output works with common static
          site generators and CMS platforms, so you can drop it into WordPress, Next.js, Hugo, or plain HTML.
        


        
What’s included

        

          The presets cover a simple favicon.ico, a website favicon set with browser PNGs and Apple Touch Icon,
          or a full app/PWA pack with Android icons, site.webmanifest, Microsoft tile files, and optional
          favicon.svg when the source is SVG or text/emoji.
        


        
Practical tips

        
    
          
  • Use a transparent background if your logo has rounded edges or needs to blend with themes.
    • 
          
  • Keep details bold and simple so the icon reads well at 16×16 pixels.
    • 
          
  • Keep the important mark inside the maskable safe zone so Android, iOS, and launcher shapes do not clip it.
    • 
          
  • After deployment, clear cache and test the live URL because favicons are cached aggressively.
    • 
        

        

          Common use cases include launching a new website, refreshing a brand identity, or packaging icons for a web app or
          PWA. Whether you search for a favicon generator, a favicon pack creator, or an icon set for web browsers, this tool
          gives you a fast, privacy-friendly way to generate the files you need.
        

      





      


      

        
Favicon Generator: FAQs

        
What is the best favicon size?

        
Start with a 512×512 PNG or SVG. Export 16×16 and 32×32 browser icons, a 180×180 Apple Touch Icon, and 192×192 plus 512×512 Android icons.

        
Do I still need favicon.ico?

        
Yes. Modern browsers understand PNG and SVG, but favicon.ico is still a reliable fallback for browsers, bookmarks, crawlers, and older integrations.

        
Should I use PNG, SVG, or ICO?

        
Use all three when possible: ICO for fallback, PNG for platform icons and predictable rendering, and SVG for sharp modern browser tabs.

        
What does Apple Touch Icon require?

        
Apple Touch Icon should be a square PNG, commonly 180×180, linked with rel="apple-touch-icon". A solid background is usually safer than transparency.

        
What is a maskable icon safe area?

        
Maskable icons can be clipped by Android launchers. Keep the important logo inside the central safe zone and add padding so circles or squircles do not cut off edges.

        
Why is my favicon not updating?

        
Browsers cache favicons aggressively. Clear the browser cache, test in a private window, verify paths, and add a version query string such as ?v=2 when replacing files.

        
Where do favicon files go in WordPress, Next.js, or static HTML?

        
For static HTML, upload the files to your chosen folder and paste the tags in <head>. For Next.js or React apps, place them in public. In WordPress, use the theme header or a header-injection/plugin option if the theme does not expose head tags.

        
How do I make a transparent favicon?

        
Enable transparent background when generating the icon, or upload a transparent PNG/SVG. Check the dark and light previews to make sure the edges stay readable.

      


      

        

           5 Fun Facts about Favicons
        

        

          

            
            
ICO is a stack

            
A single favicon.ico can hold multiple sizes (16, 32, 48…) in one file. Browsers pick the closest fit automatically.

            
Multi-resolution

          

          

            
            
Safari loves its own

            
Apple Touch icons ignore favicon.ico; they want a square PNG (usually 180×180) and prefer a colored background over transparency.

            
iOS pickiness

          

          

            
            
Maskable for circles

            
PWA “maskable” icons add safe padding so Android launchers can clip to circles or squircles without chopping your logo.

            
PWA safe zone

          

          

            
            
Cache is stubborn

            
Browsers aggressively cache /favicon.ico. Bump the filename or query string (favicon-2.ico?v=2) when updating.

            
Hard refresh trick

          

          

            
            
SVG isn’t universal

            
Firefox and Chrome support SVG favicons, but Safari and many platforms still expect PNG/ICO. Ship a PNG alongside for safety.

            
Format fallback

          

        

      


      

  

      

        
Explore more tools