Skip to content

Image tools

Favicon Generator

Turn one logo into every icon a website needs: favicon.ico, 16 to 512 px PNGs, the Apple touch icon, a web manifest and the HTML to paste into your page.

HTML for your <head>


                

            

        

        

            

                
            

            
Your icons appear here.

            
            
favicon.ico, 6 PNG sizes, site.webmanifest and the HTML snippet

        

    



    


    

        

                            

                    
How to use the Favicon Generator

                    
    
                                                    
  1. 
                                1
                                
    Choose a square logo or image, ideally 512×512 px or larger.
    
                            
    2. 
                                                    
  2. 
                                2
                                
    Pick a background colour (used for the Apple icon, and for all icons if you turn transparency off) and optional padding.
    
                            
    3. 
                                                    
  3. 
                                3
                                
    Download the ZIP, upload the files to your site's root folder and paste the HTML into your <head>.
    
                            
    4. 
                                            

                

            
                            

                    
Frequently asked questions

                    

                                                    

                                
                                    Which files does a website need?
                                    
                                
                                
favicon.ico for browsers and bookmarks, PNG icons for modern browsers, apple-touch-icon.png for iPhones and iPads, and the manifest with 192/512 px icons for Android home screens.

                            

                                                    

                                
                                    Why does the Apple icon have a background?
                                    
                                
                                
iOS shows transparent touch icons on a black background, so the Apple icon always uses your background colour.

                            

                                                    

                                
                                    How do I add it to Laravel?
                                    
                                
                                
Put the files in the public/ folder and the HTML in your main layout's <head>.

                            

                                            

                

            
            
            
                                


        
    


            

            
            

                                    
                                    
                                    
                            

        

            

    
    
    
    

    

    

                                                
Popular tags

                

                                            
                            #API
                        
                                            
                            #awk
                        
                                            
                            #Database
                        
                                            
                            #DevOps
                        
                                            
                            #Eloquent
                        
                                            
                            #Laravel
                        
                                            
                            #Linux
                        
                                            
                            #MySQL
                        
                                            
                            #Performance
                        
                                            
                            #PHP
                        
                                    

                        
Type to search. Press Enter for all results.

            




    
        

            
                
            
            
Get new articles in your inbox

            
Practical tutorials and deep dives, about once a week. No spam, unsubscribe anytime.


            

                

            
        

            
            

                
                
            

                
        

            

            


            

                
                Privacy policy
            

            
        

        
        
    
        
        

            

                
Add DEV Talk to your Home Screen

                
            

            
    
                
  1. 1
                    Tap the Share button 
 in Safari's toolbar.
    2. 
                
  2. 2
                    Scroll down and tap Add to Home Screen.
    3. 
                
  3. 3
                    Tap Add. Open it from the Home Screen to read like an app and to turn on notifications with the bell.
    4. 
            

            
        

    
    

        

            

                We use cookies to improve your experience and analyze traffic. By continuing, you agree to our
                Privacy Policy.