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 image (PNG, JPG, or SVG) or type a letter, number, or emoji to use as your favicon source. For image uploads, square aspect ratios work best — non-square images will be cropped to a square. If you are starting a new project and do not have a logo yet, the text/emoji mode is a fast way to create a recognizable favicon in seconds.
- Preview how your favicon looks at all standard sizes, from 16x16 pixels (browser tab icon) up to 512x512 pixels (PWA splash screen). Pay close attention to the 16x16 preview — this is where most users will see your favicon, and fine details disappear at this size. Bold, simple shapes with high contrast work best. If your logo has thin lines or small text, consider a simplified version specifically for the favicon.
- Adjust the background color, border radius, and font styling if you are using text mode. A colored background with a white letter is a common pattern used by companies like Facebook (white F on blue), YouTube (white play button on red), and Gmail (multicolor M on white). Use the Color Picker to find the exact brand color you need.
- Download the complete favicon package containing all required formats and sizes. The package includes favicon.ico (16x16 and 32x32 bundled for legacy browser support), PNG files at 16, 32, 48, 180, 192, and 512 pixels, and the HTML link tags you need to paste into your site's
<head> section. Drop these files into your web root and your favicon will work across every browser and platform.
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.