Favicon Package
{{ primaryMetric }}
{{ summaryLine }}
{{ zipSizeLabel }} {{ sourceDimensionLabel }} {{ readinessLabel }} {{ warningCount }} note(s)
Drop, paste, or browse one square-ish PNG, JPEG, WebP, SVG, GIF, or browser-readable image.
{{ sourceName }}
{{ dropzoneTitle }}
Favicon settings continue below
Ignored {{ ignoredCount }} extra file(s). This tool processes one image at a time.
Favicon settings
Keep it short enough for mobile install prompts.
Use `/` for root deployment or a folder path ending in `/`.
Recommended baseline: 16, 32, 48, 180, 192, and 512.
Keep 16, 32, and 48 for broad favicon fallback support.
Use contain for logos; use cover only for photos or edge-to-edge marks.
{{ safePadding }}%
Use 6-12% for most logo marks; cover mode ignores this value.
Use solid when the source has a light mark that disappears on transparent browser chrome.
Pick the matte color behind every generated square icon.
{{ artifact.label }}
{{ artifact.size }} x {{ artifact.size }} · {{ artifact.byteLabel }}
Waiting for a browser-readable image.
File Size Purpose Copy
{{ row.label }} {{ row.value }} {{ row.detail }}
Check Status Detail Copy
{{ row.label }} {{ row.value }} {{ row.detail }} 

        


        

          

            

              

                
                
              

            

          

          

        


        

          

            

              

                
                
              

            

          

          

        

      

    

  

                

                

                    

                        

                            Tags: Devtools, Image
                        

                        

                            Export to PDF
                            Fullscreen
                        

                    

                

            

        

    


                    
        

        

        

            

            
        

        


                                                                                                                                                                                                                                                        
        

        

            
            

                Customize

                

                    

                        

                            
                            
                        


                        

                            
                            
                        


                        

                            
                            
                        

                    


                    

                        Advanced

                        

                            

                                
                                

                                    
                                    
                                

                            


                            

                                
                                

                                    
                                    
                                

                            


                            

                                
                                

                                    
                                    :
                                    
                                

                            


                            

                                
                                

                                    
                                    
                                

                            


                            

                                

                                    
                                    
                                

                            


                            

                                

                                    
                                    
                                

                            


                            

                                
                                
                            


                            

                                
                                
                            

                        

                    

                

            

            
        


        

            
            
            
        


        
        

    

    

        

  
  
A favicon is the small visual mark that helps a website stay recognizable in browser tabs, bookmark lists, shortcuts, and installed app surfaces. It has to work at very different sizes, from a tiny tab glyph to a larger home-screen icon, so one source logo usually needs several square outputs rather than a single resized picture.

  
Good favicon work starts with a source image that still reads when it is reduced hard. A detailed logo, thin text, or photo crop can look fine at 512 px and disappear at 16 px. A square source with enough margin gives browsers, iOS Web Clips, and progressive web app install prompts a cleaner icon to choose from.

  

    Source favicon artwork rendered into browser tab, touch icon, PWA icon, and manifest link outputs.
  

  
Favicon readiness is also a deployment check. The icon files, manifest references, and document-head links need to agree on paths and sizes. A browser can still show an old icon from cache, and a mobile device may prefer a different icon surface, so the useful handoff is a complete set with enough evidence to review before replacing production assets.






  
Technical Details:

  
Favicon packages combine several icon selection mechanisms. Standard browser tabs commonly use small PNG or ICO resources, while iOS Web Clips use apple-touch-icon links and progressive web app installs read icon entries from a web app manifest. Supplying multiple square raster sizes lets each browser or operating system choose an icon that fits its display context.

  
Raster generation begins by decoding the source image into pixels and drawing it onto square canvas outputs. That makes the result predictable for PNG favicon sizes, but it also means embedded metadata, color profiles, and extra animation frames are not carried forward as original container data. SVG sources depend on the browser image engine to rasterize them before square PNG outputs are made.

  
Transformation Core

  
The main geometry choice is whether the whole source should remain visible or whether the square should be filled edge to edge. Contain mode fits the source inside the square and applies the selected safe padding. Cover mode fills the square by cropping from whichever side exceeds the target ratio.

  

    
      
        scontain
        =
        min
        (
        
          N-2P
          Wsource
        
        ,
        
          N-2P
          Hsource
        
        )
      
    
    
      
        scover
        =
        max
        (
        NWsource
        ,
        NHsource
        )
      
    
  

  
In those formulas, N is the requested square favicon size and P is padding in pixels. A 1024 by 1024 source rendered at 32 px with 8 percent padding leaves about 26 px for the mark in contain mode. The same source in cover mode fills all 32 px, which can look stronger for photo-like art but gives logos less breathing room.

  

    

      
      
        

          Output surface
          Typical size or rule
          What it supports
          Review cue
        

      
      
        

          Browser favicon PNG
          16, 32, and 48 px
          Tabs, bookmarks, shortcuts, and high-DPI fallbacks
          Small previews should still read as the same mark
        

        

          ICO fallback
          16, 32, and 48 px entries
          Legacy favicon lookup and browser fallback behavior
          Missing entries appear as Review in ICO fallback
        

        

          Apple touch icon
          180 px baseline
          iOS and iPadOS home-screen Web Clips
          Check that a solid or transparent background keeps the mark visible
        

        

          Manifest app icons
          192 and 512 px pair
          Android and progressive web app install contexts
          Manifest icons should report Ready for the normal pair
        

        

          Link and manifest references
          Asset path plus generated icon names
          Document-head links and web app manifest icon entries
          Path prefixes should match the folder used during deployment
        

      
    

  

  
The readiness checks are practical rather than decorative. Browser runtime confirms that the current browser can use canvas, Blob downloads, object URLs, and text encoding. Source shape favors square sources at least 512 px on the shorter side. PNG size set, ICO fallback, and Manifest icons compare the selected size lists with the common baseline.

  
The ZIP is assembled in the browser from generated binary entries. The ICO container stores PNG-compressed icon entries rather than bitmap-only legacy payloads, which is suitable for modern browser favicon fallback but still worth checking if a very old desktop application is the target consumer.






  
Everyday Use & Decision Guide:

  
Start with a square logo source if you have one. A 1024 by 1024 PNG with transparent edges gives the 16 px and 32 px previews more room to survive downscaling. If the source is a rectangle, a photo, or a mark with text, use the preview grid before trusting the package because the smallest favicon may lose the subject.

  
For a first production pass, keep PNG sizes at 16,32,48,180,192,512 and ICO sizes at 16,32,48. Set Site name to the label users should see in install prompts, then set Asset path to the folder where the files will be served. Use / for root placement or a folder path ending in / when icons live under a static asset directory.

  
    
    
  • Choose Contain with padding for most logos, badges, and wordless brand marks.
    • 
    
  • Use Safe padding around 6 to 12 percent when the mark touches the edge or has a circular background.
    • 
    
  • Choose Cover square only when a crop is acceptable, such as a photo texture or edge-to-edge symbol.
    • 
    
  • Use Solid color when a white or pale mark disappears against transparent browser chrome.
    • 
    
  • Open Readiness Ledger before deployment; rows marked Review are usually missing sizes, source-shape concerns, or manifest coverage gaps.
    • 
  

  
The main wrong assumption is that a package with a ZIP is automatically ready to publish. The package proves that the browser generated files and link text. It does not prove that the asset path is correct on the site, that caches have expired, or that every visual size is legible. Check Favicon Package for the actual previews, then compare HTML Links and Manifest JSON with the folder where the assets will be uploaded.

  
When rough artwork is all you have, create the package anyway and use the warnings as a design checklist. A Source shape review can mean the icon source needs a larger square canvas, more padding, or a simplified mark before the final handoff.






  
Step-by-Step Guide:

  
Use the package preview, readiness rows, and generated references together so visual output and deployment markup stay aligned.

  
    
    
  1. Drop, paste, or browse one file in Source image. The dropzone should change to Image ready; if several files are selected, the note about ignored extra files confirms that only the first image was processed.
    2. 
    
  2. Enter Site name. The value is used for the manifest name fields and should be short enough for an install prompt.
    3. 
    
  3. Set Asset path. If the path field is left blank or set to /, generated references point to the web root; folder paths are normalized with leading and trailing slashes.
    4. 
    
  4. Review PNG sizes and ICO sizes. Keep the baseline sizes unless the destination has a specific reason to omit one. Invalid, duplicate, tiny, or very large size tokens are filtered before generation.
    5. 
    
  5. Choose Image fit, Safe padding, and Background. Contain mode uses the padding slider; cover mode ignores it and fills the square.
    6. 
    
  6. Read the summary badges and open Readiness Ledger. If Browser runtime is Blocked, use a browser with canvas, Blob, URL, and text-encoding support. If the image is rejected, choose a browser-readable image under 40 MB.
    7. 
    
  7. Inspect Favicon Package and Icon File Ledger. The previews should include the small browser sizes and larger app-icon sizes, while the ledger explains the purpose and byte size of each generated entry.
    8. 
    
  8. Use HTML Links, Manifest JSON, Icon Byte Profile, and JSON as the deployment and review record after the previews and readiness checks look right.
    9. 
  

  
A finished run should leave a consistent icon set, matching path references, and no unresolved readiness row that affects the destination you care about.






  
Interpreting Results:

  
Read the top summary first. files ready tells you how many package entries were created, the ZIP badge shows the assembled size, and Deployable set means the current checks found no blocked runtime or baseline-size review notes. Review notes is not a failure by itself; it tells you which assumption needs a closer look.

  
Readiness Ledger carries the deployment judgment. A square source larger than 512 px, the common PNG size set, the 16/32/48 ICO entries, and the 192/512 manifest pair all push the result toward a practical favicon package. If one row is marked Review, decide whether the omitted size or source shape matters for your site before publishing.

  
Icon Byte Profile is a size comparison, not a visual-quality score. A larger 512 px icon will usually dominate the chart, while a tiny 16 px icon can still be the file that users notice most often in a browser tab. Use the chart to spot unexpected bloat, then use the preview grid to catch blur, cropping, and poor contrast.

  
Do not treat a successful run as proof that the new favicon is live. The result confirms local generation and consistent references. After deployment, open the site in a fresh browser context, check the document head references, and clear any CDN or browser cache that still serves an older icon.






  
Worked Examples:

  
Square Logo For A New Site

  
A 1024 by 1024 transparent PNG logo is loaded, Site name is set to Example Studio, Asset path stays at /, and the default PNG and ICO size lists are kept. Readiness Ledger should show Ready for Source shape, PNG size set, ICO fallback, and Manifest icons. The interpretation is simple: the baseline package is complete, so the remaining review is visual legibility in Favicon Package and correct root-path deployment.

  
Pale Mark On Transparent Background

  
A white monogram source looks clean at 512 px but almost disappears in the 16 px and 32 px previews. Switching Background to Solid color and choosing a dark matte color should update the preview grid and manifest color values. Icon File Ledger still reports the same purposes, but the visible result is safer because the mark no longer depends on the browser chrome behind it.

  
Manifest Pair Missing

  
A user changes PNG sizes to 16,32,48,180 because only tab and touch icons seem important. Readiness Ledger should mark Manifest icons as Review and explain that 192 and 512 px PNG sizes are the normal progressive web app pair. Restoring 192,512 makes the manifest row ready again and gives Manifest JSON larger icon entries for install contexts.

  
Non-Square Source Review

  
A 1200 by 630 social-card image is loaded with Image fit set to Contain with padding. Source shape should ask for review because the source is not close to square, and the small previews may show wide letterboxing. If the same image is switched to Cover square, the preview fills each square but crops left and right. The better fix is usually a dedicated square favicon source.






  
FAQ:

  

    Does my image get uploaded?
    
No upload is part of the favicon generation flow. The source image is decoded, rasterized, zipped, and prepared for download in the browser tab.

  

  

    What image types can I use?
    
Use one browser-readable image such as PNG, JPEG, WebP, SVG, GIF, or another image type the current browser can decode. Non-image files are rejected, and source files larger than 40 MB are blocked.

  

  

    Why does Source shape say Review?
    
Source shape moves to review when the source is not close to square or is smaller than 512 px on the shorter side. The package can still render, but tiny favicons may look soft, cramped, or cropped.

  

  

    Why are 192 and 512 px called out?
    
Manifest icons checks for the common 192 px and 512 px app-icon pair. If those sizes are missing from PNG sizes, the generated manifest has less coverage for install surfaces.

  

  

    Will animated images stay animated?
    
No. Animated or multi-frame sources are decoded as one browser image frame for canvas rendering, so the generated favicon package is a still-image set.

  






  
Glossary:

  

    
Favicon

    
A small site icon used by browsers, bookmarks, shortcuts, and similar surfaces.

    
ICO container

    
A favicon fallback file that can hold multiple square icon entries for different sizes.

    
Web app manifest

    
A JSON document that lets browsers identify app names, icons, colors, and install behavior.

    
Apple touch icon

    
A PNG icon referenced for iOS and iPadOS home-screen Web Clips.

    
Alpha

    
Transparency information in decoded image pixels.

    
Safe padding

    
Extra space around the source mark when contain mode draws it inside each square icon.

    
Canvas rasterization

    
The browser step that draws decoded pixels into square PNG outputs.

  






  
References: