Skip to content
SVG Generators

SVG Favicon Generator

Make a modern SVG favicon that changes colours in dark mode. Start from a letter or your own SVG logo. Get favicon.ico, PNGs and the HTML tags.

Start from

Paste SVG code, or open or drop an .svg file. It stays on your device.

Tab icon
Dark mode
Live preview of your SVG

Your picture shows here.

Light tab

My website
32 pixel favicon16 pixel favicon

Dark tab

My website
32 pixel favicon in dark mode16 pixel favicon in dark mode

Paste this in your page <head>


        

                    

                See the SVG code 
  

                

            

            



                

                

                    Something not working?
                    Report a problem
                

            

        

    


    
    
    

        
        

            

                
What is the SVG Favicon Generator?

                                    
Modern browsers support a favicon in SVG, and an SVG favicon can change its colours when the visitor uses dark mode. This tool builds that for you from a letter or from your own SVG logo.

                                    
See how your icon looks in a light tab and a dark tab. Then download the SVG, a favicon.ico, or a full pack with PNG icons, a web manifest and the HTML tags to paste in your page head.

                
                
                                    
How to use it

                    
    
                                                    
  1. Type a letter, or paste your SVG logo.
    2. 
                                                    
  2. Pick the shape and colours, and set dark mode colours.
    3. 
                                                    
  3. Press Download SVG, or get the full pack.
    4. 
                                            

                
                                    
Why people like this tool

                    

                                                    

                                

                                    
  

                                    Dark mode support
                                

                                
Colours change with the visitor theme.

                            

                                                    

                                

                                    
  

                                    Letter or logo
                                

                                
Start from text or your own SVG.

                            

                                                    

                                

                                    
  

                                    Full pack
                                

                                
SVG, ICO, PNGs and manifest.

                            

                                                    

                                

                                    
  

                                    HTML ready
                                

                                
Copy the tags for your head.

                            

                                            

                
                            


                        
            
        


                    

                
How it works, in one picture

                

    Infographic: how to use the SVG Favicon Generator in 3 easy steps: Add your text, Choose your options and Save your file. You get: Dark mode support, Letter or logo, Full pack and HTML ready.
    

            

        
        
        

        
Frequently asked questions

        

                            

                    
                        How do I make an SVG favicon?
                        
                            
  
  

                        
                    
                    
Type a letter or paste your SVG logo, then press Download SVG. Upload it to your site and add the link tags we show.

                

                            

                    
                        How does the dark mode favicon work?
                        
                            
  
  

                        
                    
                    
The SVG holds a small style rule for prefers-color-scheme: dark. Browsers that support it switch colours when the visitor uses dark mode.

                

                            

                    
                        Do all browsers support SVG favicons?
                        
                            
  
  

                        
                    
                    
Chrome, Edge and Firefox do. Safari support is still limited, so also add favicon.ico and the Apple touch icon, which are in the pack.

                

                            

                    
                        What size should a favicon be?
                        
                            
  
  

                        
                    
                    
An SVG has no fixed size. For PNG and ICO we give you 16, 32, 48, 180, 192 and 512 pixels.

                

                    

    


                    

                
You may also like

                

                                            
    

                    
                
  
  
  
  

            
                

            
SVG to ICO Converter

                    

    

    
Convert SVG to an ICO file with many sizes inside (16, 32, 48, 64 and more). Or get a full favicon pack as a ZIP. Free and private.

    
        Open tool 
  
  

    

                                            
    

                    
                
  
  
  

            
                

            
SVG Monogram Logo Generator

                    

    

    
Make a simple logo from your initials in SVG. Pick a shape, a font style and colours, then download. Free logo maker for small brands.

    
        Open tool 
  
  

    

                                            
    

                    
                
  
  
  
  

            
                

            
SVG to PNG Converter

                    

    

    
Convert SVG to PNG with a see-through background. Pick 1x, 2x, 4x or any size in pixels. Many files at once, and nothing is uploaded.

    
        Open tool 
  
  

    

                                            
    

                    
                
  
  
  
  
  
  
  
  
  
  
  
  

            
                

            
SVG QR Code Generator

                    

    

    
Make a sharp SVG QR code for a link, text, Wi-Fi, UPI payment, WhatsApp, contact card or location. Pick colours and dot style. Free, no sign up.

    
        Open tool 
  
  

    

                                            
    

                    
                
  
  
  
  
  

            
                

            
SVG Barcode Generator

                    

    

    
Make crisp SVG barcodes: Code 128, EAN-13, UPC-A, EAN-8 and Code 39. Adds the check digit for you. Download as SVG or PNG for free.

    
        Open tool 
  
  

    

                                            
    

                    
                
  
  

            
                

            
SVG Donut Chart Generator

                    

    

    
Make a donut chart as SVG from your numbers. Pick colours, ring thickness, gaps and centre text. Download SVG or PNG. Free, no sign up.

    
        Open tool