Designing your perfect icon is completely seamless with this generator because you can simply follow these four quick steps to get your custom favicon ready without any hassle.
Drop in your logo or artwork as SVG, PNG, JPEG or WebP, up to 4 MB. A 512px image is recommended. Start with an SVG to keep the SVG export sharp at any size.
Customize your own artwork by scaling, flipping, rounding corners, and choosing brand colors with live previews across the browser, iOS, macOS, and Windows.
Enable Dark Variant to automatically adapt your SVG background between light and dark modes.
Get an awesome, curated set of icons, crafted with care and high quality, ready to use across your websites and web applications.
Unzip the files into your public site folder, choose your framework from the download drawer, and copy the provided install code directly into your layout file to apply it across every page.
Give your site a instantly recognisable identity with your own custom artwork, name, and brand colours.
Upload your artwork, fine-tune its appearance, and instantly generate all the icon files and installation code you need for your website. Here's everything included in the generator.
Start with an SVG, PNG, JPEG or WebP image up to 4 MB. Raster images need a longest side of at least 180px, 512 px is recommended.
Scale artwork from 0.5x to 2x, adjust corner radius, flip horizontally or vertically, and set icon backgrounds and a theme colour.
See edits across illustrative browser, iOS, macOS, and Windows scenes, with dark and light modes available for browsers.
Enable Dark Variant to give the SVG icon a background that switches according to the viewer's device colour scheme.
Download a ZIP file containing the complete icon package, including ICO, SVG, Apple Touch, 192 px, 512 px, and maskable icons.
Choose from 8 installation framework snippets for HTML, Next.js, Astro, Nuxt, SvelteKit, Symfony, Laravel, and WordPress.
Explore this section to find answers to common questions about favicons, suppoted file types, and more. Get most of the information you need conveniently in one place.
favicon.ico Browser tabs and bookmarks. Holds 16, 32 and 48 px.icon.svg Modern browsers. Scales to any size.apple-touch-icon.png iOS home screen and macOS dock, 512x512, opaque.icon-192.png Android home screen.icon-512.png PWA splash screen.icon-maskable-512.png Android adaptive icon, artwork inside the safe zone.manifest.webmanifest Web app manifest. Edit name and colours as you like.rel="mask-icon", the msapplication-* metas and browserconfig.xml.favicon.zip file containing all the necessary files. Alongside, you'll receive on-screen instructions guiding you through the process of integrating them seamlessly into your website.