מחולל Favicon

חדש

צרו ערכת favicon מלאה מתמונה או אותיות והורידו ZIP.

Drop an image, click to browse, or paste PNG, JPG, SVG or WebP — a square 512×512+ logo works best. Processed on your device.

Background Transparent

Shape

Padding 0% App name (for manifest)

Drop an image above to generate your favicon set — or switch to Text or Emoji to build one from a letter or emoji.

Live preview

Browser tab

My App

Bookmarks bar

My App

iOS home screen

My App

Android home screen

My App

Generated sizes

Apple touch (180) and Android (192/512) icons use a solid background; the 192 and 512 are maskable with a built-in safe zone.

HTML for your <head>

site.webmanifest

Runs entirely in your browser. Nothing is uploaded.

Generate a complete favicon set in your browser

This favicon generator creates every icon a modern website or web app needs — browser favicons, a multi-size favicon.ico, an Apple touch icon and maskable PWA manifest icons — from a single source. Choose an image, a typed lettermark or an emoji, tweak the background, shape and padding, and download a ready-to-ship ZIP with all the files plus the exact HTML snippet for your <head>.

Unlike tools that send your image to a server, everything here is rendered locally on an HTML canvas, so it's fast, free, needs no sign-up, and keeps your logo completely private. No account, no waiting for server processing, no ads in the way of the tool.

From an image, SVG, letter or emoji

Three input modes cover every starting point. Image accepts PNG, JPG, SVG and WebP — drop a square logo in and it's center-fit to each size; upload an SVG and it's also passed through untouched as a crisp, scalable favicon.svg. Text turns one to three letters into a clean lettermark with your own font and colors — useful when you don't have a logo yet. Emoji renders any emoji into a favicon in a click, the fastest way to brand a side project.

Whichever you pick, you get the full output set: every PNG size, a real favicon.ico, an optional favicon.svg, the web app manifest and the HTML. That covers every browser, every OS, every device size from a Chromebook tab to an Android home screen.

Every size, plus a real favicon.ico

The tool outputs 16×16, 32×32 and 48×48 PNGs for browser tabs and Windows, a 180×180 Apple touch icon, and 192×192 and 512×512 icons for Android and PWA home screens. It then encodes the 16, 32 and 48 bitmaps into a genuine multi-resolution favicon.ico — the container file browsers request by default — entirely in your browser, with no server round-trip.

The ICO format matters. Many tools generate a single 32×32 PNG and rename it favicon.ico, which works but means the browser always scales from one source. A real multi-resolution ICO lets the browser pick the sharpest size for each context. Download the whole set as a ZIP, or grab any individual size, the .ico, the .svg or the manifest on its own.

Apple touch icons and maskable PWA icons done right

Getting mobile icons right is where most favicons fall down. The apple-touch-icon is rendered at 180×180 with a solid background (iOS doesn't support transparency and rounds the corners itself). The 192 and 512 manifest icons are generated as maskable icons — their content is kept inside the ~80% safe zone so Android can crop them into a circle, squircle or rounded square without clipping your logo.

Live preview mockups show your icon in a browser tab, the bookmarks bar, and on iOS and Android home screens, so you can see exactly how it will look before you ship. This saves the back-and-forth of deploying, checking on your phone, adjusting, and deploying again.

How UtiloKit compares to favicon.io and RealFaviconGenerator.net

favicon.io is the most popular favicon tool and genuinely good — but it uploads your image to their servers, which means your unreleased logo or client asset leaves your device. RealFaviconGenerator.net is the most feature-complete option, but the multi-step wizard is intimidating for quick projects, and it also processes images server-side. favicon-generator.org is dated: it produces only basic PNG sizes with no maskable manifest icon and no SVG.

UtiloKit does everything locally. Your image never leaves your browser. The output includes a real multi-resolution ICO, correct maskable manifest icons with safe-zone padding, a scalable SVG, and a ready-to-paste <head> snippet — the same complete set you'd get from RealFaviconGenerator, without the upload and the wizard. Works on iPhone and Android too: the canvas API runs fine in mobile browsers, so you can generate and download a favicon directly from your phone.

Manifest and the HTML snippet, ready to paste

Alongside the icons you get a complete site.webmanifest — with your app name, theme color and the maskable icon entries — and a copy-ready <head> snippet that links the .ico, the .svg, the Apple touch icon and the manifest, plus a matching theme-color meta tag. Paste it into your HTML, upload the files to your site root, and you're done.

The snippet works with any stack: plain HTML, Next.js, Astro, Nuxt, SvelteKit, Remix. If your framework has a dedicated favicon config (Next.js app/icon.png, Astro's head config), the PNG files still drop straight in.

The complete modern favicon stack, explained

A production-ready favicon setup has four distinct layers. First, favicon.ico at the root — browsers, RSS readers, email clients and the Windows address bar all issue a bare GET /favicon.ico request without looking at your HTML at all. Serving a real multi-resolution ICO here (16, 32 and 48 bitmaps packed into one file) is the only way to guarantee an icon appears everywhere. Second, <link rel="icon" type="image/svg+xml" href="/favicon.svg"> — all modern browsers (Chrome 80+, Firefox 41+, Safari 14.1+, Edge) will prefer this over the ICO when the tag is present. Because it's an SVG, it scales perfectly at any DPI, renders crisply on 3× Retina screens, and can even adapt to dark mode via a @media (prefers-color-scheme: dark) block inside the SVG file itself — something no PNG can do.

Third, <link rel="apple-touch-icon" href="/apple-touch-icon.png" sizes="180x180"> — iOS and iPadOS use this 180×180 PNG when a user adds your site to their home screen via Safari's Share menu. Without it, iOS falls back to a screenshot of your page, which looks amateurish on the home screen. Fourth, <link rel="manifest" href="/site.webmanifest"> — the icons array inside this JSON file tells Android and Chrome desktop which PNGs to use for PWA install prompts, the app switcher and the splash screen. The SVG favicon is now the primary recommendation for modern browsers, but the ICO fallback remains essential: without it, a significant share of non-browser contexts (feed readers, email clients, third-party bookmarking tools) display nothing.

A minimal but complete <head> snippet therefore looks like this: the .ico link (with an explicit sizes="32x32" so browsers that support both formats prefer the SVG), the image/svg+xml link, the apple-touch-icon link, and the manifest link. Anything less risks a broken icon on at least one platform; anything more is usually redundant.

A brief history of the favicon

The favicon was invented by Microsoft for Internet Explorer 5, released in March 1999. The original motivation was mundane: IE5 introduced a Favorites (bookmarks) sidebar, and to make entries visually distinct it fetched a small icon from each saved site. Because these bookmarks were called 'Favorites', the icon was naturally named the 'favorite icon' — favicon for short. IE fetched it from /favicon.ico unconditionally, with no HTML link required. This created an immediate problem: every web server that didn't have a /favicon.ico file logged a 404 for every visitor who bookmarked the page, polluting error logs across the internet.

The behaviour was standardised in the HTML 4.01 specification later that same year (1999), which introduced the <link rel="shortcut icon"> element — allowing webmasters to point browsers at any URL rather than relying on the implicit root request. HTML5 dropped the 'shortcut' keyword in favour of the cleaner rel="icon" and added the sizes attribute so multiple resolutions could be declared. At launch, favicons were constrained to 16×16 pixels and the ICO format — a Microsoft Windows format capable of storing multiple bitmaps at different colour depths inside a single file. As display resolutions improved, tooling conventions evolved toward multi-resolution ICOs containing 16, 32 and 48px variants, then toward PNG fallbacks for higher-DPI screens, and finally toward SVG favicons (first supported in Firefox 41 in 2015, Chrome 80 in 2020, Safari 14.1 in 2021). The journey from a single 16×16 bitmap in a Windows-proprietary container to a resolution-independent, dark-mode-aware SVG took just over two decades.

Favicon design principles for small sizes

The harshest constraint in favicon design is 16×16 pixels — 256 pixels in total. At that scale, a wordmark becomes an unreadable blur, a detailed illustration collapses into noise, and thin lines vanish entirely because they fall between pixel boundaries. Effective favicon design at 16px typically relies on one of three approaches: a single bold initial letter (the most common — think Notion's 'N', Figma's 'F', GitHub's GitHub mark), a simplified logomark that keeps only the most recognisable geometric element of the full logo, or a standalone geometric symbol — a shape, icon or color block that has no typographic connection to the brand but is visually immediate at tiny sizes.

Two technical rules matter more than anything else at small sizes. First, avoid thin strokes: a 1px line in a 512×512 source becomes a fraction of a pixel at 16px and either vanishes or turns into an ugly anti-aliased smear. Keep stroke widths at a minimum of 2–3px relative to the 512px canvas, which maps to at least 0.06px at 16px — thick enough to survive downscaling. Second, maximise contrast: browser tabs vary from white to near-black depending on the OS theme and browser, and the favicon must remain legible against both. A design that works on a white background but disappears on a dark tab has failed half its users. The SVG favicon's @media (prefers-color-scheme: dark) support allows serving a light-background version for light mode and a dark-background version for dark mode in a single file — the only format that solves this problem elegantly.

Testing context matters as much as the design itself. A favicon looks different in a Chrome tab (16px on 1× screen, 32px on 2×), a Safari pinned tab (which historically used a monochrome SVG at 18×18), a Windows taskbar (where Windows may pick 48px from the ICO), and an Android home screen (where the system applies its own shape mask). Always test by actually placing the icon in these contexts — the difference between what looks sharp in a design tool at 100% zoom and what survives real rendering at 16px is frequently larger than expected.

PWA icons and the web app manifest

The Web App Manifest (site.webmanifest) is a JSON file that turns a website into an installable Progressive Web App. Its core fields are name (the full app name shown on splash screens), short_name (the name truncated to fit under a home screen icon — keep it under 12 characters), start_url (which URL opens when the icon is tapped), display (standalone hides the browser chrome so the app feels native), theme_color (the taskbar or status-bar colour on Android) and background_color (the splash screen background before the app loads). The icons array is what tells the system which PNG files to use at which sizes.

Chrome on Android requires at least a 192×192 icon to offer 'Add to Home Screen', and a 512×512 icon for the install splash screen. The purpose field on each icon entry controls how the system uses it: "purpose": "any" means display the icon as-is, preserving transparency and shape; "purpose": "maskable" means the icon is designed for adaptive icons — Android (8.0+), ChromeOS and some Samsung launchers crop it to their preferred shape (circle, squircle, rounded square) by discarding everything outside a circle inscribed in the icon. The logo must sit entirely within the central 80% safe zone — a circle with a radius of 40% of the icon's width centred in the canvas — or it will be clipped. Many developers provide both entries for the same PNG: "purpose": "any maskable" as a shorthand, though this is only safe if the logo truly fits the safe zone. The gold standard is two separate files: one transparent-background icon for any and one with a padded, filled background for maskable.

Chrome on Windows and macOS desktop also reads the manifest when installing a PWA: it picks the largest available icon (ideally 256×256 or higher) for the taskbar, Start menu and dock. Without a large manifest icon, installed desktop PWAs fall back to the generic browser globe icon — an obvious sign of an unpolished app. Providing a 512×512 icon in the manifest covers both Android splash screens and desktop app icons in a single file.

Frequently asked questions

What is a favicon?

A favicon (short for 'favorite icon') is the small square icon a browser shows next to a page's title — in the browser tab, the bookmarks bar, history and sometimes search results. It's usually shown at 16×16 or 32×32 pixels and lives at your site's root as favicon.ico, while modern sites also add a favicon.svg, an Apple touch icon and PWA manifest icons for home screens. A recognizable favicon improves click-through rates in bookmarks and search results.

What size should a favicon be?

Start with 16×16 and 32×32 — the two sizes browsers show in tabs and bookmarks — bundled together inside a single favicon.ico. For full coverage also add 48×48 (used by Windows), a 180×180 apple-touch-icon for iOS, and 192×192 and 512×512 PNGs for Android and PWA home screens. This generator outputs every one of those at once from a single source, so you never need to resize manually or run multiple tools.

How do I create a favicon?

Pick a source — upload an image (PNG, JPG, SVG or WebP), type one to three letters, or drop in an emoji — then choose a background color, shape (square, rounded or circle) and padding. The tool renders all the favicon sizes on a canvas, packs 16/32/48 into a favicon.ico, and hands you a ZIP with every file plus the HTML snippet to paste into your <head>. The whole process takes under a minute and requires no design software.

How do I make a favicon from an image, SVG, text, or emoji?

Use the three input tabs. Image accepts PNG, JPG, SVG and WebP and center-fits your logo; if you upload an SVG it's also passed through unchanged as a crisp, scalable favicon.svg. Text turns one to three letters into a lettermark with your chosen font and colors (e.g. 'U' on an indigo rounded square). Emoji renders any emoji — 🚀, ⭐, 🐙 — into a favicon. All three produce the full size set, .ico and manifest, in one download.

What favicon sizes do I need in 2026?

The practical modern set is: 16×16, 32×32 and 48×48 inside favicon.ico; an optional scalable favicon.svg; a 180×180 apple-touch-icon.png; and 192×192 plus 512×512 maskable PNGs referenced from site.webmanifest. That covers desktop tabs, iOS home screens and Android/PWA installs without bloating your <head>. This tool generates all of them in one click — no need to run separate size exports in Photoshop, Figma, or any other app.

What is favicon.ico and do I still need it?

favicon.ico is a single container file that holds several bitmap sizes (typically 16, 32 and 48). Browsers automatically request /favicon.ico even when there's no HTML link, so it remains the most reliable fallback — keep it. Modern browsers will prefer a favicon.svg or a PNG link when you provide one, but the .ico guarantees an icon everywhere, including older browsers and feed readers. This generator creates a real multi-resolution .ico, not a renamed PNG.

How do I add a favicon to my website?

Drop the generated files into your site root and add these tags inside the <head>: <link rel="icon" href="/favicon.ico" sizes="32x32">, <link rel="icon" href="/favicon.svg" type="image/svg+xml">, <link rel="apple-touch-icon" href="/apple-touch-icon.png"> and <link rel="manifest" href="/site.webmanifest">. The tool generates this exact snippet, with a matching theme-color meta tag, for you to copy. Works for any framework — Next.js, Astro, React, plain HTML.

What format should a favicon be — PNG, SVG, or ICO?

Use all three together for the best result. ICO (favicon.ico) is the universal fallback every browser requests. SVG gives a razor-sharp, infinitely scalable icon and can even adapt to dark mode, but isn't supported in every context. PNG is what Apple touch icons and Android manifest icons use. Providing favicon.ico + favicon.svg + PNG apple/manifest icons covers every device — which is exactly the set this tool produces in one ZIP download.

What is an Apple touch icon?

The apple-touch-icon is a 180×180 PNG that iOS and iPadOS use when someone adds your site to their home screen. It should have a solid (non-transparent) background and square corners — iOS rounds them automatically — so this tool fills transparent backgrounds with a solid color for that file. Add it with <link rel="apple-touch-icon" href="/apple-touch-icon.png">. Without it, iOS uses a screenshot of your page as the home screen icon, which looks unprofessional.

What is a maskable icon / web app manifest icon?

Manifest icons (192×192 and 512×512 PNGs listed in site.webmanifest) are what Android and installed PWAs use. A 'maskable' icon keeps its important content inside a central safe zone — about 80% of the icon — so it still looks right when the system crops it into a circle, squircle or rounded square. This tool automatically adds that safe-zone padding to the 192 and 512 icons and marks them with purpose: maskable. You don't need to manually calculate the safe area.

Why isn't my favicon showing up?

Almost always browser caching. Browsers cache favicons aggressively, so do a hard refresh (Ctrl+F5), open the icon URL directly (yoursite.com/favicon.ico) to confirm it loads, or try a private window. Also check the files are in your site root, the paths in your <link> tags are correct (a leading slash matters), and that you actually uploaded every size. New favicons can take a while to refresh in bookmarks and search results — give it a few hours after deploying.

Is it safe to upload my logo?

Yes — because nothing is actually uploaded. Every step runs in your browser using an HTML <canvas> and JavaScript: your image is read locally, resized, encoded into PNG and ICO, and zipped on your device. No file is ever sent to a server, unlike tools such as favicon.io and RealFaviconGenerator.net which process your image in the cloud. Your logo never leaves your computer — important if you're working on a client project or an unreleased product.

How does UtiloKit compare to favicon.io and RealFaviconGenerator.net?

favicon.io is fast and popular, but it uploads your image to their server to process it. RealFaviconGenerator.net has more options but a complex multi-step UI and also requires a server upload. favicon-generator.org is dated and produces only basic PNG sizes without a proper maskable manifest icon. UtiloKit generates everything locally in your browser — your logo never leaves your device — produces a real multi-resolution ICO (not a renamed PNG), generates maskable manifest icons with correct safe-zone padding, and gives you a copy-ready <head> snippet. No account, no upload, no wait for server processing.

Does the favicon generator work on iPhone and Android?

Yes — the canvas API and file download work in iOS Safari, Chrome for Android, and Samsung Internet. You can upload a photo from your camera roll, type a letter, or paste an emoji, then download the full ZIP directly to your phone. It's useful for quickly prototyping a favicon when you're away from your desk. The layout adapts to small screens so the tool is comfortable to use at 375px.

המירו תמונות בין PNG, JPG ו-WebP עם בקרת איכות.

תמונה ומדיה