Favicon Generator
Generate favicon files in multiple sizes from text or an uploaded image using Canvas API. Download individual PNGs or a ZIP with all sizes and ready-to-use HTML link tags.
Sobre esta ferramenta
Create professional favicons for your website without Photoshop or an online service that uploads your files. The generator works entirely in the browser using the Canvas API. Two creation modes give you flexibility. Text favicon mode lets you type 1–2 characters (initials, an icon glyph, or a symbol), choose from several font families, set the foreground color, background color, and optionally enable rounded corners or a circular shape — perfect for quickly generating a branded icon for a project. Image favicon mode lets you upload any image (PNG, JPG, SVG, WebP) and crops it to a square by letting you pan and scale the crop window, then downsizes it to each target resolution. The tool generates all standard sizes: 16×16 (browser tab), 32×32 (taskbar), 48×48 (Windows), 64×64, 128×128, and 180×180 (Apple Touch Icon for iOS bookmarks). A browser tab mockup shows a realistic preview of how the favicon looks at 16×16 next to a sample page title. Each size is available for individual PNG download. Clicking Download All as ZIP packages every size plus a snippet of the recommended HTML link tags ready to paste into your document head.
Como usar
- 1 Choose 'Text' or 'Image' mode.
- 2 For Text mode: type 1–2 characters, pick a font, foreground color, and background color, then adjust the shape (square, rounded, circle).
- 3 For Image mode: upload an image, use the crop tool to select the square region you want, then click Apply Crop.
- 4 Preview the favicon at 16×16 in the browser tab mockup.
- 5 Click the download icon next to any individual size to save that PNG.
- 6 Click 'Download All as ZIP' to get all six sizes plus the ready-to-use HTML snippet.
What a favicon is and why one size is never enough
A favicon is the tiny icon a browser shows in the tab, the bookmarks bar, the history list, and — on mobile — the home-screen shortcut. It is the smallest piece of branding a website has, and it works hardest precisely because it is so small. The catch is that "favicon" is not a single image: different surfaces request different resolutions. The browser tab uses 16×16, high-DPI tabs and the taskbar use 32×32, Windows shortcuts reach for 48×48, and iOS home-screen bookmarks want a 180×180 Apple Touch Icon. Ship only one size and the browser will downscale or upscale it, usually producing a blurry or aliased mess at the sizes you didn't provide. This generator produces all the common sizes at once — 16, 32, 48, 64, 128, and 180 — drawing each one fresh rather than scaling a single source, and it runs entirely in your browser using the Canvas API, so nothing you upload is sent anywhere.
Two ways to make one
Text mode builds an icon from one or two characters — initials, a monogram, or a symbol. You choose a font, a text colour, a background colour, and a shape (square, rounded, or circle). The tool computes a font size relative to the canvas — larger for a single character, smaller for two — and centres the glyph, so a one-letter mark fills the icon boldly while a two-letter mark still fits. This is the fastest route to a clean, recognizable icon for a side project or internal tool, with no design software involved.
Image mode takes an uploaded picture (PNG, JPG, SVG, or WebP) and lets you crop it to a square. Because favicons must be square, the crop step is not optional polish — it decides what survives the downscale. You drag to pan and scroll to zoom, framing the square region that best represents the brand, then apply the crop. The tool then redraws that square at each target resolution.
A worked example with the Apple Touch Icon
Say you make a text favicon: the letters Hi, white on a blue rounded square. Click Generate and the tool renders six canvases. A browser-tab mockup shows the 16×16 version next to a sample page title, so you can judge legibility at the size that matters most — if your two letters are unreadable at 16 pixels, you'll see it immediately and can switch to a single bolder character. The 180×180 output is labelled "Apple Touch." That one is special: when someone adds your site to their iOS home screen, Safari looks for a 180×180 PNG linked as apple-touch-icon. If it can't find one, Safari screenshots your page instead, which looks terrible as an app icon. Providing it is the difference between a polished home-screen bookmark and a thumbnail of your header.
Wiring it into your site
Download individual PNGs, or use Download All as ZIP to get every size plus a ready-to-paste HTML snippet. The snippet links the standard sizes and the Apple Touch Icon:
| Size | Purpose | Link tag |
|---|---|---|
| 16×16 | Standard browser tab | rel="icon" |
| 32×32 | High-DPI tab, taskbar | rel="icon" |
| 48×48 | Windows shortcut | rel="icon" |
| 180×180 | iOS home screen | rel="apple-touch-icon" |
Paste those tags into your document's <head> and place the PNG files at the referenced paths. The ZIP is assembled in browser memory; the only external request the tool ever makes is loading the JSZip library from a CDN the moment you ask for the archive.
Design tips for icons that read at 16 pixels
- Simplify ruthlessly. At 16×16 you have 256 pixels to work with. A detailed logo turns to mush; a single letter, a bold mark, or a simple silhouette survives. Many famous favicons are just a monogram.
- Maximize contrast. The icon competes with tab text and a busy browser chrome. High contrast between glyph and background is what makes it findable in a row of twenty tabs.
- Avoid thin lines and small text. Hairlines disappear at small sizes and fine type becomes unreadable. Prefer thick strokes and large shapes.
- Test on a real tab, light and dark. The mockup helps, but open the generated icon in an actual browser tab against both light and dark browser themes — a dark icon can vanish on a dark tab bar.
Common mistakes
- Shipping only 16×16. Modern displays and Retina screens look soft without a 32×32, and you'll miss the home-screen icon entirely without the 180×180.
- Forgetting transparency in image mode. If your source has a transparent background, it stays transparent in the PNG output — good for layering on any tab colour. Add a background in text mode if you want a solid tile instead.
- Complex SVGs at tiny sizes. Browsers can rasterize an SVG onto canvas, but intricate vectors may render slightly differently across browsers at 16 pixels. Preview before relying on it.
- Non-square source art. Skipping a deliberate crop lets the tool grab a default centre square that may chop off the important part of your logo. Use the crop tool to frame the icon yourself.
Perguntas frequentes
Corte, gire e inverta imagens interativamente no navegador com proporções de aspecto predefinidas.
Converta cores entre HEX, RGB, HSL, HSV e CMYK — com prévia em tempo real.
Resize and compress images in the browser using Canvas API — by percentage, exact dimensions, or max dimension — with batch processing and ZIP download.
Converta marcação SVG em uma URI de dados CSS background-image — codificada por URL ou base64.