Emoji, initials or logo → tab icon

Favicon Generator

Turn an emoji, your initials or an image into a crisp favicon. Style it, preview a real browser tab, then download the PNGs and copy the HTML link tags.

Icon

Preview
Your Site — Home×
HTML <link> tags

      

        
A favicon for every surface

        

          
Emoji & text
Start from any emoji or your initials — no design tool needed — with full color control.

          
From an image
Drop in a logo or PNG and it's centered, cropped and exported at every size.

          
Crisp at any size
Exports 16, 32, 48, 180 and 512 px, plus a scalable SVG for modern browsers.

          
Copy-ready tags
Get the exact <link> tags for the favicon, apple-touch-icon and SVG.

        

        
Three ways to a favicon in under a minute

        
Start from whichever asset you have. No logo yet? Pick an emoji or type your initials, choose colors and a background shape, and the canvas renders a clean icon instantly. Have brand artwork? Drop the image in and it's centered, cropped and scaled for you. Either way, the browser-tab preview shows the result at real size next to a page title — the only test that matters for a 16-pixel graphic — and the download bundle plus copy-ready <link> tags come out together, so installing it is paste-and-deploy.


        
Why so many sizes exist

        
One icon serves many surfaces: 16 and 32 px live in browser tabs and bookmark bars, 48 px appears in some desktop contexts, 180 px is the apple-touch-icon iOS places on the home screen, and 512 px covers PWA install prompts and splash screens. The SVG version scales to all of them in modern browsers, but shipping the PNG set alongside it remains the compatible choice — which is exactly what the generated tags declare, in the right order, so each platform picks its best match.


        
Design rules for a 16-pixel canvas

        
Favicons fail by being too detailed. One bold shape, two colors and generous margins beat a miniaturized logo with fine lines that turn to mush at tab size. Check the tab preview against both light and dark browser themes — a dark glyph on transparent background disappears in dark mode, which is why a filled background shape is the safer default. And keep the motif consistent with your brand color so users can find your tab among twenty others; that recognition moment is the favicon's whole job.


        
Step-by-step: building and installing a favicon

        
Under Source, choose Emoji, Text or Image. Emoji mode offers a quick-pick row plus a free field for any glyph; Text mode takes one to three characters and a font weight; Image mode opens a file picker and centres the bitmap on the canvas. Then set the Background: Solid exposes a single colour, Gradient exposes start and end colours for a diagonal blend, and None leaves the icon transparent. Corner radius shapes the tile from sharp square through rounded to a full circle, Padding controls how much breathing room the glyph gets inside it, and Text color sets the glyph colour in Text mode. Every change redraws the 512-pixel preview and the small canvas inside the mock browser tab at the same time — glance at the tab, not the big preview, to judge legibility. When it looks right, Download all PNGs saves favicon-16.png through favicon-512.png, Download SVG saves a scalable version (Emoji and Text modes only, since an uploaded bitmap cannot be vectorised), and Copy grabs the <link> block plus a matching theme-color meta tag. Drop the files at your site root, paste the tags into <head>, deploy.


        
How the generator renders under the hood

        
Each size is drawn separately on its own HTML canvas rather than scaled down from one master: the rounded-rectangle background is filled (solid or a linear gradient from the top-left to bottom-right corner), the glyph is measured so it fits within the padded area, and in Text mode it is set in IBM Plex Sans at the weight you chose. Drawing at native resolution is what keeps 16- and 32-pixel output sharp where a downscaled 512 would blur. Emoji come from the operating system's colour font — Segoe UI Emoji on Windows, Apple Color Emoji on macOS and iOS, Noto Color Emoji on Android and most Linux — so the PNGs you download look like your platform's emoji, while the SVG export uses an SVG <text> element and will render with whatever emoji font the visitor's browser has. If you need pixel-identical emoji everywhere, ship the PNGs and use the SVG only as a progressive enhancement. The PNGs are produced with canvas.toBlob and saved by the browser directly; nothing is uploaded, and the generated <link> tags reference the same filenames the downloads use, so no renaming is needed.


        
Common mistakes and how to avoid them

        
    
          
  • Transparent background with a dark glyph. It disappears against dark browser themes and in dark-mode bookmark bars. Prefer a solid or gradient tile; if you must stay transparent, use a light glyph and test the tab preview with the page's theme toggle in both modes.
    • 
          
  • Too many letters. Three initials at 16 px are illegible; one or two bold characters survive. Push Padding down and weight up when using two.
    • 
          
  • Uploading a wide logo. Horizontal wordmarks become a thin stripe inside a square; crop to the brand mark first, or use Text mode with the brand's initial on the brand colour.
    • 
          
  • Shipping only the SVG. Safari ignores SVG favicons in tabs and older Android browsers fall back to nothing; keep the PNG set and the apple-touch-icon alongside it, which the copied tags already do.
    • 
          
  • Serving the icons with a far-future cache header and then redesigning. Rename the files (or append ?v=2 to the tags) when you change the icon, or returning visitors keep the old one for months.
    • 
        


        
Further reading

        
For keeping the SVG version small and well-formed, read the SVG optimization guide; for choosing between PNG and the other raster formats for your larger icons and OG images, see WebP vs AVIF vs PNG vs JPG. Browse all guides.


        
Frequently asked questions

        

          
Which files should I actually put on my site?
Use the downloaded set as-is: the PNGs at 16/32/48/180/512 plus the SVG, referenced by the generated link tags. Serve them from your site root or any stable path — the tags the tool copies for you already point at the right names.

          
Is a .ico file still required in 2026?
Only for very old browsers. Every current browser accepts PNG and SVG favicons declared via <link> tags. If you want maximum legacy coverage, an .ico at the site root helps, but modern sites ship fine without it.

          
What is the apple-touch-icon for?
It's the 180 × 180 icon iOS and iPadOS use when someone adds your site to their home screen. Without it, Apple devices fall back to a screenshot thumbnail, which always looks broken next to real app icons.

          
Why does my favicon look blurry in the tab?
Usually a large detailed image was scaled down by the browser. Export dedicated small sizes — the 16 and 32 px renders here are drawn at those sizes — and prefer bold, simple shapes that survive the shrink.

          
My new favicon isn't showing after deployment — why?
Browsers cache favicons unusually hard. Force-refresh, or bump the filename/query string in the link tags; the icon then reloads on next visit. Give home-screen icons a day — mobile platforms refresh them on their own schedule.

          
Does my logo get uploaded when I use an image?
No. The image is read and drawn onto a canvas locally, and the ZIP of PNGs is assembled in your browser too — your artwork never touches a server.