Favicon generator for text and logos
Make a text favicon from one or two letters, or upload a logo. Preview it at real size, then download every icon file your site needs.
Loading font…
The exported favicon.svg carries both and follows the visitor’s system theme.
Live preview
Actual sizes · this tab updates as you editBrowser & search
Both color schemes at onceIllustrative. Browsers and search engines each present the icon a little differently.
Install it, and get it indexed
Pick where it is going. Every framework wants the files in a different folder and the tags in a different file, and that — not the markup — is what usually goes wrong.
- 1
Download the icon package.
- 2
Extract the icon files so they are served from
/— openinghttps://example.com/favicon.icoshould return the file. - 3
Add this to the
<head>of every page, or to your shared header include:<link rel="icon" href="/favicon.ico" sizes="16x16 32x32 48x48"> <link rel="icon" type="image/svg+xml" href="/favicon.svg"> <link rel="icon" type="image/png" sizes="96x96" href="/favicon-96x96.png"> <link rel="apple-touch-icon" sizes="180x180" href="/apple-touch-icon.png"> <link rel="manifest" href="/site.webmanifest">
- Serve it from a stable HTTPS URL
- Google reads the tags on your home page and fetches the file itself. A path behind a redirect, or one that changes with every build, gets skipped.
- Leave it crawlable in robots.txt
- Googlebot has to reach the home page and Googlebot-Image the icon file. A disallow on either is the most common cause of a blank square.
- Keep it square, 48 px or larger
- Search wants a square source it can resize; the 192 px PNG in the package covers it. Transparent backgrounds get flattened, so pick a solid one.
- Expect the tab to update first
- A hard refresh swaps the icon in your browser. Search can take weeks and only after a recrawl — request indexing for the home page to start the clock.
What you download
Twelve files, drawn from one design
A favicon looks like a single 16 pixel image, until Safari asks for a 180 px touch icon, Android asks for a maskable one, old browsers ask for a real .ico and the manifest asks for two more. This favicon generator renders every file below from the same design, at the exact pixel size of its output, so none of them can drift apart.
Open the favicon generator
In the tab, bookmarks and search
- favicon.ico
- A real multi-frame ICO with 16, 32 and 48 px inside, not a renamed PNG. Safari falls back to it and older browsers read it first.
- favicon.svg
- The modern one. Sharp at any size, and the only file that can carry the dark version.
- favicon-96x96.png
- The raster fallback for anything that will not take an SVG.
- favicon-16x16.png
- Drawn at 16 px rather than shrunk to it, which is why the strokes stay even.
- favicon-32x32.png
- The retina tab size, and what most bookmark bars ask for.
On a home screen
- apple-touch-icon.png
- 180 px on an opaque background, because iOS will not honour transparency.
- web-app-manifest-192x192.png
- The Android home screen and the task switcher.
- web-app-manifest-512x512.png
- The splash screen, and the large tile in an install prompt.
- maskable-icon-512x512.png
- The same mark inset into Android’s safe zone, so a circular crop cannot clip it.
Wiring, and a copy to keep
- site.webmanifest
- Site name, theme colour and the icon list that makes a site installable.
- README.txt
- The install steps for the target you picked, so whoever deploys next need not come back here.
- source/logo-1024.png
- A 1024 px master to reuse for an app store, an OG image or a press kit.
Pick Next.js App Router instead and the same artwork arrives as app/icon0.svg, app/favicon.ico, app/icon1.png, app/apple-icon.png and app/manifest.json — the names its file convention looks for.
Why more than one
Every surface crops it differently
Sixteen pixels beside a truncated tab title. A circular chip in a search result. A round mask on an Android home screen. One mark has to survive all of them, and each one reaches for a different file — which is the whole reason the package has twelve.
Browser tabs
Sixteen pixels wide, beside a truncated title and twenty other tabs.
favicon.svg, then favicon.ico
Search results
A circular chip beside the site name. A blank one makes the result look abandoned.
favicon-96x96.png
Bookmarks and history
Once a page is saved, the icon is often the only thing anyone scans for.
favicon-32x32.png
iOS home screens
Add to Home Screen crops to a rounded square and drops any transparency.
apple-touch-icon.png
Android and installed apps
The launcher may mask to a circle; the task switcher and splash screen use the large sizes.
maskable-icon-512x512.png
Feed readers and chat apps
RSS readers, Slack unfurls and link savers all reach for the same files.
site.webmanifest
What the tool does
Six things this favicon generator does beyond resizing
Most favicon generators scale one square and hand you a ZIP. These are the parts that decide whether the icon actually works.
- Real type, not a letter in a box
- The whole Google Fonts library, plus bold, italic, optical centering and a vertical nudge for fonts that sit high.
- A dark icon that switches itself
- Draw a second version and the SVG carries both, with a prefers-color-scheme rule doing the switching.
- A genuine .ico, not a renamed PNG
- favicon.ico is written as a real multi-frame ICO with 16, 32 and 48 px inside, which is what old browsers and PDF viewers read.
- Your tab is the preview
- The icon in this browser tab updates as you type, next to the real 16 and 32 px samples and a search result mock-up.
- Install steps for wherever it is going
- Nineteen targets, from plain HTML to Next.js, Astro, Nuxt, SvelteKit, Hugo, WordPress, Rails, Django and Shopify — each with its own numbered steps naming the folder and the file, not one generic snippet.
- Nothing leaves the browser
- Canvas draws the icons and JavaScript zips them. No upload, no account, no watermark.
Dark mode
One file carries both versions
A dark navy mark vanishes against a dark tab strip. The fix is not a second tag or a script: the favicon generator exports one SVG holding both artworks, and a media query inside the file decides which one paints.
Inside favicon.svg
Both artworks travel in the one file; the style block hides one of them. The two data URIs are the same 1024 px rendering you see in the preview, abridged here.
<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 1024 1024">
<style>
.dark { display: none }
@media (prefers-color-scheme: dark) {
.light { display: none }
.dark { display: inline }
}
</style>
<image class="light" width="1024" height="1024"
href="data:image/png;base64,…"/>
<image class="dark" width="1024" height="1024"
href="data:image/png;base64,…"/>
</svg>- Chrome, Edge and Firefox swap it live
- They re-read the style block the moment the system theme changes — no reload, and it applies to bookmarks and history too.
- Safari ignores SVG favicons
- It falls back to favicon.ico, which is why the package still ships a real multi-frame .ico carrying the light artwork.
- Keep both tags, do not choose
- Browsers that understand SVG take it; the rest take the .ico. Nothing needs feature detection.
- It is artwork, not a filter
- The dark version is a second drawing with its own colours, so you decide what reads on a dark tab.
How to make a favicon that still reads at 16 pixels
A tab icon is about the size of a lowercase letter in this paragraph. Design for that first and scaling up takes care of itself. The order below is the order the favicon generator is laid out in.
- 1
Start from something small
One or two letters, or a logo simple enough to still read at the size of a full stop. Anything with fine strokes or a tagline turns to mush in a tab.
- 2
Push the contrast
Pick a solid background and a foreground that clearly separates from it. The color presets are all high-contrast pairs if you want a starting point.
- 3
Check the 16 px sample, not the big one
The large icon always looks fine. Read the 16 px sample and the browser tab mock-up instead, in both the light and dark preview.
- 4
Leave room at the edges
Outer margin keeps the mark off the tab edge. The safe zone Android’s circular crop needs is applied to the home-screen icons for you.
- 5
Download and paste the tags
Pick your framework or platform from the list, download the ZIP, drop the files where it tells you and paste the generated code into the file it names.
Who it is for
Where this usually starts
Shipping a side project. One pass through the favicon generator gives you every file and the exact tags, instead of four visits to four converters.
Working inside a framework. Nineteen targets each know where their own files belong, so nothing has to be guessed from a generic README.
Testing a mark. Put a wordmark against initials at 16 px before the brand is committed to either one.
Chasing a blank square in search. A missing favicon is a visible hole beside your result on a phone, and it is usually a delivery problem, not a design one.
When to redo it
Signs the old one has to go
The brand changed. New colours or a new wordmark, and the tab is the last place still showing the old identity.
The site got a dark theme. A dark navy mark disappears against a dark tab strip. Draw the second version and the SVG carries both.
Search shows a blank square. Usually a missing file, a blocked path, or a mark too faint to survive being shrunk.
The stack changed. Frameworks expect icons in particular places under particular names. Regenerate for the new one.
Favicon generator FAQ
Formats, dark mode, Google results, privacy and Next.js.
What is a favicon?
A favicon is the small icon a browser shows next to your page title: in the tab, in the bookmark list, in history, and next to your result on Google. Because every surface asks for a different size and format, a finished favicon is really a small set of files rather than a single image.
How do I use this favicon generator to make a favicon from text?
Type one or two letters into the favicon generator, pick a Google Font, then set the size, the colors and the background shape. Short, high-contrast initials survive 16 pixels far better than a full wordmark, and the 16 px sample in the preview tells you immediately whether yours does.
Which files does the favicon generator create?
favicon.ico with 16, 32 and 48 px frames, an SVG favicon, PNG favicons at 16, 32 and 96 px, a 180 px Apple touch icon, 192 and 512 px Android icons plus a maskable version, a web manifest, a 1024 px source image, and a README with your install tags.
Does the favicon switch automatically in dark mode?
Yes, if you turn on the dark icon. The generated favicon.svg contains both versions and a prefers-color-scheme rule, so browsers that read SVG favicons swap artwork the moment a visitor changes their system theme. The .ico and .png fallbacks keep the light artwork, which is what older browsers expect.
Will the favicon work with Next.js App Router?
Choose Next.js App Router before you download. The ZIP arrives as app/ and public/ folders using the filenames the Next.js metadata convention looks for, so you copy the folders in and delete any manual icon tags you had before.
Can I use a logo image I already have?
Yes. Upload a PNG, JPG, WebP or SVG up to 5 MB. The image is read by your own browser, resized against the same background and margin controls, and packaged with the rest of the icons.
Is my image uploaded to a server?
No. Every icon is drawn with Canvas on your device and the ZIP is assembled in the page, so an unreleased logo never leaves your machine.
Why does my favicon look blurry or invisible in Google results?
Blurry is a design problem: too much detail, too little contrast, or the mark sitting hard against the edges. Missing is usually a delivery problem: the icon has to sit on a stable HTTPS URL, be declared in the head of your home page, and stay crawlable, because Googlebot reads the home page and Googlebot-Image fetches the file itself. A disallow on either leaves an empty square. Keep the source square and at least 48 px, then request indexing for the home page, since the new icon only appears after Google recrawls, which can take weeks.
Is this favicon generator free?
Yes. There is no account, no watermark and no limit on how many icon sets you make.
Two letters now, a full icon set in a minute
The favicon generator is at the top of this page. Type your initials, pick a color pair, check the 16 px sample and download the package.
ICO, SVG, PNG, Apple, Android and manifest · free, no account