Favicon PNG Generator
Build a full favicon bundle: ICO, PNG sizes, Apple touch and maskable icons, manifest and head tags, from an image, SVG or text. Your files are never uploaded to our servers. ToolkitPoint processes them on your own computer, so confidential documents stay with you.
How to use Favicon PNG Generator
- Choose a logo or SVG under "Choose an image", or open "Full favicon bundle" and switch the icon source to text, an emoji or initials.
- Set padding, background colour and shape. The previews update at once: light and dark browser tabs, an iOS tile, and Android circle and squircle masks with a dashed safe-zone circle.
- Read the safe-zone line. It measures how much of your artwork would be cropped by a circular Android mask, and auto-pads the maskable icon until it fits (or only warns, if you prefer).
- Fill in the site name and theme colour, choose the sizes for favicon.ico, then press "Build full bundle".
- Download the ZIP, upload the files to your site root and paste the head snippet shown under the button.
Worked example
Pick the text source, type "Tk", set a red background and build. The ZIP holds favicon.ico with 16, 32 and 48 px images, a 512 px maskable PNG filled edge to edge with the red, and favicon.svg whose dark-mode rule swaps to your dark colours.
When to use this tool
- Getting a complete, correctly sized icon set for a new site in one ZIP.
- Checking that a wide logo will not be clipped on Android home screens before you ship it.
- Making a quick letter or emoji favicon with a matching dark-mode SVG.
Important limitations
Detailed artwork scaled to 16 x 16 pixels loses clarity; bold, simple symbols work best. The dark-mode SVG is generated only for text icons; uploaded SVGs are passed through unchanged and raster logos get no SVG.
Frequently asked questions
What is in the bundle?
A multi-size favicon.ico, favicon-16/32/48 PNGs, an opaque 180 px apple-touch-icon, 192 and 512 px icons, a maskable 512 px icon, site.webmanifest and favicon-links.html with the tags to paste. Text icons and uploaded SVGs also get favicon.svg.
Is there a dark-mode favicon?
For text, emoji and initial icons the SVG favicon carries a prefers-color-scheme dark rule with the colours you pick. An uploaded SVG is passed through unchanged, and a raster logo gets no SVG because a dark variant cannot be invented for a bitmap.
What is the safe zone?
Android can crop a maskable icon to a circle, so only the central circle (radius 40 percent of the icon) is guaranteed visible. The tool counts artwork pixels outside that circle and shows the result.
What happens to a wide or tall logo?
Choose "Fit whole image" to keep all of it with empty space around, or "Fill square" to crop the long side. The basic "Build favicon package" button above always fills the square.
Do previews match every browser?
They are drawn by your browser from the same code that builds the files, so they are reliable for shape and colour. Tab rendering, fonts for text icons and OS masks still vary slightly between platforms.