Favicon Generator
This free favicon generator turns a logo, a few letters or an emoji into the full icon set a site needs today: favicon.ico, a 96 px PNG for Google, an SVG, the Apple touch icon and the Android icons, with the HTML or a Next.js layout. It also checks the result on Google, dark tabs and phones.
Shape and color
Will it work?
Which favicon files does a website need in 2026?
Fewer than most generators give you. From a logo, a few letters or an emoji, this one builds the lean set and then tells you whether it will actually work where people see it.
- The lean set that matters in 2026:
favicon.ico(16, 32 and 48 px), a 96 px PNG for Google, an SVG, the 180 px Apple touch icon, the 192 and 512 px Android icons, a maskable icon and the web app manifest. - A "Will it work?" checklist: Google's rules, visibility on light and dark tabs, detail that survives at 16 px, the iPhone's black-corner trap and Android's safe zone.
- Previews where the icon lives: a light and a dark browser tab at real size, a Google result, an iPhone and an Android home screen.
- An SVG that follows dark mode for text icons, swapping colors when the browser is dark.
- HTML to paste, or a Next.js App Router layout that needs no HTML at all.
- Sharper small sizes. Every size is averaged down from a 512 px master with premultiplied transparency, so transparent logos don't get a dark halo.
How do you make a favicon from text, an emoji or a logo?
- Pick Text, Image or Emoji. Text favicons are the quickest route when you have no logo yet: one or two letters on a solid shape stay readable at 16 px, which a full word never does. For a logo, drop a PNG or SVG, ideally square and 512 px or larger. No logo at hand? Try a sample logo.
- Choose the shape (square, rounded or circle), the background and the margin. For text, choose the font and colors, and tick Swap colors in dark mode if you want an adaptive SVG.
- Read the previews and the checklist. A warning comes with the fix, such as adding a background so a dark logo survives dark tabs.
- Choose Any website or Next.js, then Download all (.zip), right under the text or image you entered. For a normal site, upload the files to the root and paste the HTML tags into the
<head>of your home page. Files, HTML tags and app name shows exactly what goes where.
What does Google require for a favicon?
Google's favicon guidelines, last updated on 28 August 2026, set fewer and different rules than most tutorials still repeat.
| Rule | What Google says now |
|---|---|
| Shape | Square, 1:1 |
| Size | At least 8 × 8 px; larger than 48 × 48 px recommended |
| "Multiple of 48 px" | No longer in the guidelines |
| Formats | BMP, GIF, ICO, PNG, JPEG, PPM and TIFF. SVG is not listed |
| Where | A <link rel="icon"> on the home page, crawlable by Googlebot |
| How many | One favicon per hostname |
| How long | Several days to several weeks to update |
The SVG point is the one that catches modern sites out: an SVG-only favicon looks perfect in the browser and never appears in search. This package always ships an ICO and a 96 px PNG next to the SVG.
Why not twenty files?
Older generators still produce Windows tile images, a browserconfig.xml and a Safari pinned-tab mask-icon. Recent versions of Windows no longer need Microsoft's special tile icons, and since Safari 12 pinned tabs use the regular favicon, so those files add weight and maintenance for nothing. The manifest and the Apple touch icon cover phones and tablets.
What can't a favicon generator fix?
- It doesn't install anything. You upload the files and paste the tags; the tool never touches your site.
- It doesn't check a live website by address. That needs a server to fetch another site, which this page does not have.
- It doesn't turn a PNG or photo into a true vector. An uploaded SVG is kept as your
icon.svgonly when you leave its shape, background and margin unchanged. - It can't make emoji look the same everywhere. The PNG and ICO keep your device's emoji design; the SVG shows each visitor their own.
- It can't speed up Google. A new favicon appears in search results when Google recrawls the home page.
Your logo stays on your device the whole time: the icons are drawn, resized and zipped in your browser, and nothing is uploaded or stored.
Frequently asked questions
Which favicon files does a website need?
Five cover almost everything: favicon.ico with 16, 32 and 48 pixel images, a 96 pixel PNG, a 180 pixel apple-touch-icon for iPhones, 192 and 512 pixel PNGs listed in a web app manifest for Android, and optionally an SVG for sharp tabs. Windows tiles and Safari pinned tab icons are no longer needed.
Why is my favicon not showing in Google Search?
The usual causes are a missing icon link on the home page, where Google looks, an image that is not square, a file blocked by robots.txt, or an SVG-only favicon, since SVG is not in the list of formats Google Search supports. After fixing it, recrawling can take from several days to several weeks.
What size does Google want for a favicon?
Google's favicon guidelines, updated on 28 August 2026, require a square image of at least 8 by 8 pixels and recommend one larger than 48 by 48. The older rule about multiples of 48 pixels no longer appears. This package includes a 96 pixel PNG and a 48 pixel ICO, which meet both.
Does Google show SVG favicons?
Google Search lists BMP, GIF, ICO, PNG, JPEG, PPM and TIFF as supported favicon formats, and SVG is not among them. Browsers do support SVG favicons, which stay sharp and can follow dark mode. That is why this package always pairs the SVG with an ICO and a PNG instead of shipping SVG alone.
Why does my favicon disappear in dark mode?
A dark logo on a transparent background vanishes on dark browser tabs, because there is nothing behind it. The checker measures how much of your icon stands out on a light and a dark tab. The fix is a background color, or, for text icons, an SVG that swaps colors when the browser is in dark mode.
Why is my apple-touch-icon black around the edges?
iOS shows transparent areas of a home screen icon as black. The generator fills the 180 pixel apple-touch-icon with your background color, or white if you chose none, and keeps it square, because iOS rounds the corners itself. Pre-rounded corners on a transparent icon end up as black corners on an iPhone.
What is a maskable icon?
Android cuts home screen icons into the shape of the device, such as a circle, squircle or teardrop. A maskable icon keeps the important part inside the central circle covering 80 percent of the width, so nothing is cut off. The generator adds that margin automatically to the icon marked maskable in the manifest.
How do I add a favicon in Next.js?
Choose Next.js before downloading. The zip puts favicon.ico, icon1.png, icon2.svg, apple-icon.png and manifest.webmanifest in the app folder, where the App Router reads them by file name and writes the head tags itself. The Android PNGs go in public, and there is no HTML to paste.
Can I make a favicon from text or an emoji?
Yes. Type up to three letters and pick a font, colors and shape, or choose an emoji. Letters are centered on their real outline rather than the text baseline. Emoji are drawn in your device emoji style in the PNG and ICO files, while the SVG shows each visitor their own system emoji.
Is my logo uploaded anywhere?
No. The icons are drawn, resized and zipped in your browser, and nothing is sent to a server or stored. Small sizes are made by averaging pixels with premultiplied transparency, which avoids the dark halo that simple resizing leaves around transparent logos. Closing the tab clears everything.
Related tools
Rate Favicon Generator & help shape it
This tool is free and still growing. Tell us what works, what you would change, and what is missing. Your feedback is what decides what we build next.
Built and tested by the ÆON Toolhub team. Last updated: October 19, 2026. How we test our tools