A favicon is the small picture in a browser tab, in a bookmark, and in a search result. It is also the icon that a phone shows when someone adds your site to the home screen. For years that meant a pile of twenty files in sizes that nobody could remember, and generators that made all of them and sent your logo to a server. A much smaller set is enough today: an ICO, an SVG, an icon for Apple devices, two icons for the manifest, and one for phones that cut icons to a shape.
This page makes that set. Give it an image, an SVG, or a letter or an emoji, and it draws every size in your browser, packs the ICO, writes the manifest and the tags for your head, and puts everything in one ZIP. It says what is wrong with the source, such as an image that is too small for the big icons. Everything is done on your device, and the code behind the page makes no network requests, so a logo that is not public yet stays private.
How to use the Favicon Generator: ICO, SVG, Apple Icon, and Manifest ZIP
- Choose the sourceChoose an image: a PNG, JPEG, WebP, GIF, or SVG, square and at least 512 by 512 pixels if it is not an SVG. Or choose a letter, a few letters, or an emoji, with a colour and a shape, which is a quick way to get a clean icon for a new site.
- Fill in the site and the coloursGive the name of the site, a short name, the theme colour of your design, and a background colour. The background colour is used behind the Apple icon, which should have no transparent parts, and behind the maskable icon. Give the folder where the files will be, such as / for the root.
- Make the icons and look at themPress the button. Each file is shown with its size and what it is for. If the image is small or not square, the page says so. Change the source or the colours and press the button again.
- Put the files on your siteDownload the ZIP, put the files in the folder that you chose, and copy the tags into the head of your pages. Open the site and look at the tab. Browsers keep favicons for a long time, so a change can take a while to show, and a search result may take longer.
Which files, and why these
The set is the one that Evil Martians describe in their guide to favicons: an ICO file, an SVG icon, an icon for Apple devices, two icons for the web app manifest, and one maskable icon, with the manifest itself. The tags are four lines. A link with rel=icon points to favicon.ico with sizes="32x32", a second link points to icon.svg with type="image/svg+xml", a link with rel=apple-touch-icon points to the 180 pixel icon, and a link with rel=manifest points to the manifest. Chrome only needs the manifest for its icons of 192 and 512 pixels, and the page writes both.
The ICO is the file that works everywhere, including in old browsers and at the address /favicon.ico, which many tools request by habit. The SVG is sharp at every size, and it can change with the colour scheme of the browser. The Apple icon is 180 by 180 pixels, for iOS, and the two manifest icons are what an installed web app uses. All of the sizes are drawn from your source, so you only need one good picture.
What Google says about favicons in search
Google asks for a link with rel=icon in the head of the home page, an image that is square and at least 8 by 8 pixels, and recommends one that is larger than 48 by 48 pixels. It lists BMP, GIF, ICO, PNG, JPEG, PPM, and TIFF as the formats that Google Search supports, and it says that the address of the favicon should be stable, because it does not like to see it change. SVG is not in that list. This is why the set has an ICO and PNG files next to the SVG, and why the ICO has a 48 pixel image as well as 16 and 32.
Google also says that a favicon is not guaranteed to appear in search results, even if all the guidelines are met. The page cannot do anything about that. It makes the files that meet the guidelines, and the tags for the page.
The Apple icon and the maskable icon
An iPhone or an iPad uses a 180 by 180 pixel icon when someone adds a site to the home screen, and it fills any transparent part of the picture with black. So the page draws this icon on a solid colour, the background colour that you give, and it fills the whole square. The device then rounds the corners itself, and so no rounding is drawn.
A maskable icon is for Android and other systems that cut an icon to a shape, such as a circle or a rounded square, which differs from one maker of phones to another. The part that has to be seen has to be inside a safe zone, a circle in the middle that is 80 percent of the width, which is 409 pixels in an icon of 512. The page draws the picture at 56 percent of the width on the background colour, so that even the corners of a square picture are inside the circle. The manifest marks this icon with the purpose maskable.
From a letter or an emoji
A new site often has no logo yet, and a letter or an emoji on a colour is a good favicon, because it is clear at 16 pixels. The page draws it as an SVG with one shape and one piece of text, and uses the same drawing for every size. The letters are drawn in a bold sans serif font of the system, and an emoji is drawn with the emoji font of the system, so it can look a little different on another computer. The SVG file is kept, and it uses the font of the browser that shows it.
The text is written into the SVG with the characters that XML needs escaped, so a letter such as an ampersand or an angle bracket does not break the file.
Small icons and sharp icons
An image that is much bigger than the icon is shrunk in steps of half, which gives a smoother result than one jump, and the browser's best quality for scaling is used. An image that is smaller than the biggest icons is enlarged, and looks soft, and the page says so. An SVG is drawn again at each size, so it is sharp at all of them.
A detailed logo does not look good at 16 pixels, whatever the software. A small icon needs a simple shape and few colours. If your logo has fine lines or words, make a simpler version for the favicon, and give the page that one.
How it was tested
The part that packs the ICO was tested with Pillow, the image library for Python. 40 sets of PNG images, in 1 to 4 sizes from 16 to 256 pixels, with transparent edges and half transparent pixels, were packed by the page, and Pillow opened every ICO, found every size, and read pixels that were the same as the PNG that went in. The ZIP was read by Python's zipfile, which found no fault and the same files with the same contents. The manifests were read by Python's json module and the tags by html5lib, and the 72 icons from letters and emoji were read by lxml as well formed SVG with the right text and shape.
The drawing of the sizes from your image uses the canvas of your browser, and it was tried in Chrome with real files, and the ZIP that it gave was opened with Pillow. It was not tried on an iPhone or an Android phone, in Safari or Firefox, or in the Windows shell, and how each of them shows an icon was not tested.
Limits and accuracy
- The icons are drawn by the canvas of your browser. The result can differ a little between browsers, and the page does not check how a phone or a search engine shows them.
- Browsers keep favicons for a long time. A change may not show until the cache is cleared, and a search result can take days or weeks to change, if it changes at all.
- The 16 pixel icon is the full picture made small, and nothing is done to improve it. A logo that is not clear at that size needs a simpler version.
- An SVG that depends on fonts, scripts, or other files is not drawn the same everywhere. Use an SVG that has its shapes inside it. If it has a media query for dark mode, it is kept as it is, and the PNG and ICO files are drawn in the light colours.
- The manifest is a basic one: the names, the colours, the icons, the display mode, and the start address. A web app that works offline needs more, and a service worker.
- Nothing you choose is saved, so download the files before you close the page.
Frequently asked questions
How do I make a favicon?
Choose a square image, an SVG, or a letter or an emoji on this page, fill in the name and colours, and press the button. Download the ZIP, put the files in your site, and copy the four tags into the head of your pages.
What size should a favicon be?
Google says at least 8 by 8 pixels and recommends larger than 48 by 48. The ICO that the page makes has images of 16, 32, and 48 pixels. Start from an image of at least 512 by 512 pixels, or an SVG, so that all of the sizes are sharp.
Do I need an SVG favicon?
It is not needed, but it is sharp at any size and can change for dark mode. Google Search lists BMP, GIF, ICO, PNG, JPEG, PPM, and TIFF, and not SVG, so keep the ICO as well. The page makes both.
What is a maskable icon?
An icon for systems that cut the icon to a shape, such as a circle. The part that matters has to be inside a safe zone, a circle of 80 percent of the width. The page draws your picture at 56 percent of the width on your background colour, and marks the icon as maskable in the manifest.
Why does the Apple icon have a background colour?
Because iOS fills the transparent parts of that icon with black. A solid background gives it the look that you chose. The device rounds the corners itself.
Why does my new favicon not show?
Browsers keep favicons for a long time, so the old one can stay. Open the address of the icon directly and reload it, or clear the cache. A search result can take much longer to change, and Google does not promise that a favicon appears.
Can I use an emoji as a favicon?
Yes. Choose it as the source. The page draws it as an SVG and makes the other files from it. It uses the emoji font of the system, so another computer can show it a little differently.
Is my logo uploaded?
No. The icons are drawn and packed in your browser, and the code behind the page makes no network requests. Nothing is saved.
Research and references
This page was written and checked against the sources below.
