favicon.maker

Make your site's icon from a letter, an emoji or an image. Sharp at 16 px, with every file and the code to paste.

Made by musaabk.devالعربية

1Design it

Shape
Colours
Font

Shown under the icon when someone adds your site to their phone's home screen.

2Check it

Every pixel at

Your icon as a browser tab shows it, enlarged: one square is one pixel.

My site×
My site×
Browser tab · 16 px
My site
iPhone · 180 px

3Download it

Six files: the tab icon (favicon.ico), the iPhone and Android icons, a small file that names your site for phones (site.webmanifest), and the code below. Put them in your site's main folder, next to index.html.

iPhone rounds the corners itself and turns see-through parts black, so its icon is saved as a full square.

Paste into <head>

In the HTML of every page, between <head> and </head>.


      

    

  

  

  

  

    
Questions

    

      

        
Which files does my site need for its icon?

        
In the setup Evil Martians recommend: favicon.ico for browser tabs, a 180 × 180 apple-touch-icon.png for iPhone and iPad, and two PNGs, 192 and 512, listed in site.webmanifest for Android. The zip has all of them and the code to paste. Their setup also adds an SVG icon, which this tool doesn't make.

      

      

        
Why is every size drawn on its own?

        
A tab shows the icon 16 pixels wide, or 32 on sharp screens. A 512 picture shrunk that small comes out blurred, so each size here is drawn from the letter's outline at its real size. The enlarged grid shows exactly those pixels.

      

      

        
Why is the iPhone icon a full square?

        
iPhone rounds the corners itself, and it can't show see-through icons: transparent parts turn black. So apple-touch-icon.png is always filled edge to edge. With No background, the tool fills it with white or black, whichever the letter stands out on more.

      

      

        
What's inside favicon.ico?

        
Three PNG pictures, 16, 32 and 48 pixels wide, in one file. ICO files have been able to hold PNGs since Windows Vista, and the browser picks the size it needs.

      

      

        
Why does it say my icon is hard to see?

        
When the icon's edge is almost the colour of the tab bar, it melts into it. The tool measures the WCAG contrast between the edge and a white bar and a dark one, and warns below 1.5.

      

      

        
Is my image uploaded?

        
No. Everything is drawn in this browser tab. The image you pick is never sent anywhere and isn't saved; only your settings, like the letter and colours, are remembered on this device.

      

      

        
Do you track what I make?

        
No. Your icon is drawn and zipped inside this browser tab, and nothing you type or pick is sent anywhere.