Favicon generator
Turn one image into favicon.ico, PNG icons, a manifest and HTML tags.
- Category
- Graphics
- Price
- free
The tool starts in your browser.
Everything is calculated in your browser. Nothing you type is sent to our server.
How to use it in three steps
The tool as a schematic with this page's example. Each step's number stands where you take it: in the fields, at the result or outside the tool.
Choose an image or logo.
Set the background and padding.
Download the pack and paste the tags into the head.
A site's full icon set from one logo
From one image the tool makes every size, the ICO file, the manifest and the lines for the head section. A canvas in your browser draws the images in the tool at the top of the page; here is what the tool computes before it draws. The result is computed by the same function the tool at the top of the page uses, every time the page is shown.
You set
- File
- logo.png, 512 x 512 px
- Look
- padding 10%, rounding 20%, a transparent background
- Name in the manifest
- VulCode
Sizes
- favicon.ico
- 16, 32, 48
- apple-touch-icon.png
- 180
- icon-192.png
- 192
- icon-512.png
- 512
One file gives 6 sizes. 16, 32, 48 go together into one ICO file.
The 32 px icon
- Logo
- 25.6 px from 3.2 px left and top
- Corner
- 6.4 px
A 10% padding on each side leaves the logo 80% of the side, and the 20% rounding is the corner radius.
The Apple icon
- apple-touch-icon.png
- background #ffffff, logo 144 px
Only the 180 px icon gets a white background, even when you pick a transparent one.
For the head section
<link rel="icon" href="/favicon.ico" sizes="32x32"> <link rel="apple-touch-icon" href="/apple-touch-icon.png"> <link rel="manifest" href="/site.webmanifest">{ "name": "VulCode", "short_name": "VulCode", "icons": [ { "src": "/icon-192.png", "type": "image/png", "sizes": "192x192" }, { "src": "/icon-512.png", "type": "image/png", "sizes": "512x512" } ], "theme_color": "#ffffff", "background_color": "#ffffff", "display": "standalone" }
Questions
Related tools
The tool does one job. If the same thing should happen automatically in your bot, server or system, we build it.
Missing a tool you need?
Tell us what you want to calculate or generate. We will tell you whether a tool is enough or an integration in your system fits better.