Favicon Generator

Five things cover every browser and device: a favicon.ico (the one browsers and tools ask for by default), an SVG icon for modern browsers, a 180 by 180 apple-touch-icon.png for the iPhone and iPad home screen, 192 and 512 pixel PNGs for Android, and a web manifest that points at those two. This generator makes all of them, plus 16 and 32 pixel PNGs for places that want a PNG, and gives you the HTML to link them.

Browser tabs show it at 16 by 16 pixels, or 32 by 32 on sharp screens, which is why the favicon.ico here holds 16, 32 and 48 pixel pictures. Google Search asks for a square image of at least 8 by 8 pixels and recommends one larger than 48 by 48, and its guidelines list ICO and PNG among the formats it reads. The pack covers that with the 48 pixel picture in the .ico.

Upload them to the root folder of your site, so that yoursite.com/favicon.ico opens, and paste the HTML lines into the head of your pages. In a Next.js app you can skip the HTML: put favicon.ico, an icon.svg or icon.png, and apple-icon.png in the app folder, and Next.js adds the tags for you. In WordPress, use Appearance, Customize, Site Identity and upload icon-512.png as the site icon.

Yes. Type one or pick one, and it is drawn on the shape you choose or by itself with no background. The .ico and the PNG files are drawn in your browser with your device's emoji font, so they look exactly like the preview. The .svg keeps the emoji as text, so a visitor's device draws it in its own emoji style. If you want it identical everywhere, leave the SVG line out of the HTML.

iOS rounds the corners of the home screen icon itself, and it fills any see-through part with black. So the apple-touch-icon is always drawn full square with a solid background, whatever shape you chose for the other icons. If you pick no background, it gets a white one.

Browsers keep favicons for a long time. Hard refresh the page, close the tab and open it again, or test in a private window. In Google Search results it can take anywhere from several days to several weeks to change, because Google has to crawl the page again. Google also needs to be able to fetch the favicon file, so do not block it in robots.txt, and keep its address the same once it is set.

It can be. A dark icon with no background disappears on a dark browser tab, and a light one disappears on a light tab. The preview shows your icon in both a light and a dark browser, and the tool warns you when the letters would be hard to see. A solid background, even a small rounded one, works everywhere.

No. A letter, an emoji or a logo you choose is drawn in your browser, the files are made there, and nothing is sent to us or stored.