About Favicon Generator
Favicon generator that creates all required sizes from one image or text. Download ICO, PNG, and SVG favicons ready for any website. Free, instant, no signup required.
How to use
- Upload a square source image (PNG, JPG, or SVG, ideally 512x512 or larger) or switch to text mode and type a letter, number, or emoji. For uploads, SVG is best because it downscales without aliasing — a 1024x1024 PNG is the next-best option. Non-square images get center-cropped to a square. The text mode is a 30-second favicon for an MVP and is what Notion, Linear, and Vercel ship to production.
- Adjust styling before generating. In text mode, set the background color, font weight (700+ reads better at 16x16 than 400), and border radius (24% creates the iOS-style superellipse, 50% gives a circle, 0% is a hard square). Use the Color Picker to lock in your exact brand color first; favicons are tiny and a 5% saturation difference matters at this size.
- Inspect every preview, especially 16x16. A favicon that looks great at 192x192 but blurs to mush at 16x16 is a failed favicon — that is the size users actually see in their tab strip and bookmark bar. Bold shapes survive; thin strokes (1-2px in the source), gradient text, and small typography do not. If you cannot identify your logo at 16x16, design a simplified glyph specifically for that size and only use the full logo from 32x32 up.
- Verify the contrast holds against both light and dark browser chrome. Chrome on macOS dark mode shows favicons against #292a2d; Chrome light mode against white. A pure-black logo disappears against dark chrome, a pure-white logo disappears against light. Add a colored background, or design two versions and serve a dark-mode SVG via
@media (prefers-color-scheme: dark) in the SVG file itself.
- Generate the full size matrix: 16x16, 32x32, 48x48 (Windows desktop shortcut), 180x180 (Apple Touch Icon for iOS home screen), 192x192 (Android Chrome), and 512x512 (PWA splash screen and Android app drawer). The bundled
favicon.ico contains 16x16 + 32x32 + 48x48 multi-resolution layers — IE/Edge legacy still requests this from the web root.
- Drop the generated HTML link tags into your
<head>. Minimum viable set: <link rel="icon" href="/favicon.ico" sizes="48x48">, <link rel="icon" type="image/svg+xml" href="/icon.svg">, <link rel="apple-touch-icon" href="/apple-touch-icon.png">. Reference the 192 and 512 PNGs from your manifest.json for PWA install prompts.
- Force a refresh after deploy. Browsers cache favicons aggressively (often for the full session, sometimes for days). Hit
https://yoursite.com/favicon.ico directly in a tab, hard-refresh with Ctrl+Shift+R (Cmd+Shift+R on Mac), and check DevTools Network tab to confirm the request returns 200 with the new bytes — not a cached 304. Mobile devices need a manual home-screen re-add to pick up updated apple-touch-icons.
Frequently asked questions
What sizes do I need for a favicon?
Modern websites need multiple favicon sizes to cover all platforms: 16x16 and 32x32 for browser tabs and bookmarks, 48x48 for Windows desktop shortcuts, 180x180 for Apple Touch Icons (the icon shown when someone adds your site to their iPhone home screen), and 192x192 plus 512x512 for Android devices and Progressive Web App (PWA) manifests. This tool generates all of these from a single source image so you do not have to resize manually.
ICO, PNG, or SVG?
Use all three for maximum compatibility. The ICO format bundles multiple sizes into one file and is required for Internet Explorer and some older browsers. PNG is the standard for modern browsers, Apple devices (via <link rel="apple-touch-icon">), and Android. SVG favicons are the newest format — they scale perfectly to any size and can include CSS media queries to adapt to dark mode. Add your SVG favicon with <link rel="icon" type="image/svg+xml" href="/icon.svg">.
Can I create a favicon from text?
Yes. Type any single letter, number, or emoji into the text input, choose a background color and font weight, and the tool renders it as a sharp favicon at every required size. This approach is popular for MVPs, developer blogs, and SaaS products — services like Notion, Linear, and Vercel all use simple letter-based favicons. Emoji favicons also work and are a creative way to make your site stand out in browser tabs.
Best source image size?
Start with a square image at least 512x512 pixels. The tool will downscale it to all smaller sizes using high-quality resampling. Starting from a larger image (1024x1024 or even vector SVG) gives better results at small sizes because more pixel data is available for the downscaling algorithm. Avoid images with fine text, thin lines, or subtle gradients — at 16x16 pixels, only bold shapes and high-contrast elements remain recognizable.
What HTML tags do I need for favicons?
At minimum, add these to your <head>: <link rel="icon" href="/favicon.ico" sizes="48x48"> for legacy support, <link rel="icon" type="image/svg+xml" href="/icon.svg"> for modern browsers, and <link rel="apple-touch-icon" href="/apple-touch-icon-180x180.png"> for iOS. For PWAs, reference 192x192 and 512x512 icons in your manifest.json file. This tool generates the exact HTML snippet you need alongside the image files.
How do I add a dark mode favicon?
SVG favicons can include a CSS @media (prefers-color-scheme: dark) query that changes colors when the user's operating system is in dark mode. For example, your favicon could display a dark logo on a light background by default, then switch to a light logo on a dark background in dark mode. This requires an SVG favicon — PNG and ICO formats cannot adapt dynamically. Upload an SVG source or design one using a vector editor like Figma or Inkscape.
Why does my favicon not show up?
The most common reasons are: the file is not in the web root directory (browsers look for /favicon.ico by default), the HTML link tags are missing or have incorrect paths, the server is returning a 404 for the favicon URL, or the browser has cached an old favicon. To force a refresh, open your favicon URL directly (e.g., yoursite.com/favicon.ico) and hard-refresh with Ctrl+Shift+R. Browsers aggressively cache favicons, so changes can take time to appear.
Part of ToolFluency’s library of free online tools for Developer Tools. No account needed, no data leaves your device.