Favicon and PWA icon package builder
Turn the logo you already have into everything a website needs for its icon: a multi size favicon.ico, PNG sizes, an Apple touch icon, a maskable icon and a web manifest. Check the result at the real 16 pixel size before you ship it, then download one ZIP with install instructions.
The tool does not design a logo. It takes your file, fits it into square icons with the padding and background you choose, and shows how it will look in a browser tab. The files are made in your browser from your own image, so there is no upload, no account and nothing is stored once you leave the page.
Build your icon package
Free to use, no account needed. Your logo is read and drawn in this tab only. Nothing is uploaded or saved, and everything disappears when you reload. An SVG is drawn as a picture, so scripts in it do not run and outside files it points to are not fetched.
PNG, JPEG, WebP or SVG, up to 10 MB and 8192 pixels on a side. A square logo with a simple shape works best.
Enter the app name.
For tight spaces. Left empty, the app name is used.
Empty space on each side, from 0 to 40.
Applies to the favicon and the 192 and 512 pixel icons.
Always solid, because the system crops it. Hex color.
Hex color, for example #1a2b3c.
Also fills the Apple touch icon when the icon background is transparent.
Only used in the preview below.
No logo yet
Choose a logo file above to see the real 16, 32 and 48 pixel icons.
How to use the favicon package builder
- Choose your logo. PNG, JPEG, WebP and SVG files work, up to 10 MB and 8192 pixels on a side. A square image with a simple mark gives the best result, because a favicon is tiny.
- Enter the app name and, if you like, a short name. Pick the theme color and the manifest background color as hex values. These go into the web manifest.
- Set the padding and the icon background. Padding is the empty space on each side as a percent of the icon, from 0 to 40. Choose a transparent background or a solid color. The maskable icon always gets its own solid color.
- Look at the 16, 32 and 48 pixel previews. The small square in each pair is drawn at the true pixel size. Type your page title to see the tab in a light and a dark browser theme.
- Download the ZIP, unpack it and follow INSTALL.txt. It contains the exact link tags for your page head and the place to put each file.
What is in the ZIP
- favicon.ico. One ICO file holding 16, 32 and 48 pixel images.
- icon-16.png, icon-32.png, icon-48.png. The same three sizes as separate PNG files.
- apple-touch-icon.png. 180 by 180 pixels, for adding the site to an iOS home screen.
- icon-192.png, icon-512.png. Listed in the manifest with the purpose any.
- icon-maskable-512.png. 512 by 512 pixels with the logo kept inside the safe zone.
- site.webmanifest. Name, short name, colors, display mode standalone and the icon list.
- INSTALL.txt. The head snippet and where to put the files.
The ICO file is written directly by this tool. It has a six byte header, a 16 byte directory entry for each image and then the PNG data of the 16, 32 and 48 pixel icons.
Where to put the files
In a plain HTML site, upload the files to the root of the domain and paste the link tags from INSTALL.txt into the head of each page. The tags look like this.
<link rel="icon" href="/favicon.ico" sizes="16x16 32x32 48x48"> <link rel="icon" href="/icon-32.png" type="image/png" sizes="32x32"> <link rel="apple-touch-icon" href="/apple-touch-icon.png"> <link rel="manifest" href="/site.webmanifest"> <meta name="theme-color" content="#ffffff">
The manifest paths start with a slash, so the files must be served from the root. If your site lives in a subfolder, change the paths in the tags and in site.webmanifest.
In the Next.js app router, the documentation says to place favicon.ico in the root of the app directory, and to add icon and apple-icon image files inside app, which makes Next.js write the link tags for you. It also accepts a manifest.json or manifest.webmanifest file in the root of app. Files in the public folder are served from the base URL. For that setup, rename icon-32.png to icon.png and apple-touch-icon.png to apple-icon.png, and keep the 192 and 512 pixel icons in public. Skip the snippet then, to avoid duplicate tags. Other frameworks differ, so check where your framework serves static files from.
Practical tips for a readable icon
Use a symbol, not the whole logo. A wordmark with a tagline is unreadable at 16 pixels, while a single letter or a bold shape survives. If your logo is a wide horizontal lockup, crop it to its mark before you upload it.
Check contrast on both tab colors. Some people use a dark browser theme, and a dark logo on a transparent background can disappear there. A solid background color, or a mark with a light outline, keeps the shape visible in both previews above.
Keep the padding small for the favicon and larger for the maskable icon. The tool already keeps the maskable logo inside the safe zone, but the padding setting still applies, whichever is stricter wins. After you ship, open the live site in a fresh private window, because browsers cache favicons for a long time.
Need screenshots as well? Compress them with the batch image optimizer or frame them with the screenshot mockup tool. For the rest of your preparation, use the product launch checklist.
Frequently asked questions
Why does the package include an ICO file and PNG files?
An ICO file can hold several sizes in one file, and browsers look for /favicon.ico by default. The PNG files cover the manifest and the Apple touch icon. The ICO built here stores PNG images inside it, a form that was added with Windows Vista. If you must support software older than that, test the file there.
What is a maskable icon and what is the safe zone?
A maskable icon is drawn to be cropped by the system into a circle, a rounded square or another shape. The W3C manifest specification defines the safe zone as a circle around the center with a radius of 40 percent of the icon size. Anything outside that circle may be cut off. This tool shrinks your logo until its whole rectangle fits inside that circle and fills the rest with your chosen color.
Is my logo uploaded anywhere?
No. The file is opened in your browser tab, drawn on a canvas and packed into a ZIP in memory. Nothing is sent to a server, saved in browser storage or kept after you reload the page.
Is it safe to use an SVG logo?
The SVG is loaded as an image from a temporary local address, never inserted into the page as markup. In that mode browsers do not run scripts in the file and do not fetch outside files it refers to, so linked images or fonts will be missing from the result. Embed what you need inside the SVG, or export a PNG instead.
Why does my 16 pixel icon look blurry or unreadable?
At 16 pixels there are only 256 pixels to work with, so fine lines and small text disappear. Use only the central mark of the logo, make it bold, lower the padding and check the preview in both the light and the dark tab. A transparent background that works on a light tab can vanish on a dark one, so a solid color is sometimes the better choice.
Do I need all of these files?
A site needs at least one working icon, usually favicon.ico. The Apple touch icon and the manifest with the 192 and 512 pixel icons matter if people add your site to a home screen or install it as an app. The package gives you all of them, so you can drop what you do not need.
Ready to share your product?
Your product now has a full set of icons, so add the same logo when you submit it to RadarMakers.
RadarMakers is a free directory for indie projects and SaaS. Prepare a clear tagline, explain who your product helps and include real screenshots when you submit.