Create favicons from text, emoji, or an uploaded image. Generate all standard sizes (16×16 to 512×512) and get the HTML code to add them to your site.
Works great with a single letter, number, or emoji
📂 Click to upload or drag & drop
PNG, JPG, SVG, WebP
About Favicon Generator
Create a complete favicon set for your website from text, emoji, or a custom image. Generates all standard sizes used by browsers, mobile home screens, and PWA manifests. Copy the HTML <link> tags to add the favicon to your site.
A favicon (favorite icon) is the small icon shown in browser tabs, bookmarks, history, and search results. It helps users identify your site at a glance. Modern sites need multiple favicon sizes for different devices and contexts.
Copy the HTML code generated by this tool and paste it inside the <head> section of your HTML. Upload the PNG files to your website root or a /images/ folder and update the href paths accordingly.
Emojis make eye-catching favicons that are instantly recognizable and require no design work. They render well at small sizes because the emoji is already optimized for pixel display. Many popular tools and developer sites use emoji favicons.
For best results, use a square image (1:1 ratio) at least 512×512 pixels. The tool will scale it down to all required sizes. Non-square images will be letterboxed to fit the square canvas.
About Favicon Generator — Favicon Generator Online
The Oneyfy favicon generator online creates a complete favicon set for your website from three source types: text or emoji (with customisable background colour, gradient, and border radius), or an uploaded image (PNG, JPG, SVG, or WebP). The tool generates all six standard favicon sizes — 16×16, 32×32, 48×48, 180×180, 192×192, and 512×512 pixels — and provides the complete HTML <link> tags to paste into your site's <head>. Download each size individually or all sizes at once.
Web developers, designers, and anyone launching a website use a favicon generator online to produce the icon files required by browsers, iOS (Apple Touch Icon), Android home screens, and Progressive Web App manifests. Without a favicon, browsers show a generic globe icon in the tab bar, which looks unfinished and makes your site harder to identify in a crowded set of open tabs. A custom favicon takes minutes to create with this tool and immediately elevates the perceived quality of your site.
How to Use the Favicon Generator
Choose your source mode using the tabs: Text / Emoji to create a favicon from a letter, number, or emoji character, or Upload Image to use an existing logo or icon graphic.
In Text / Emoji mode: enter up to 4 characters in the text field (a single emoji or letter works best), choose a Background colour and Text Color, adjust the Border Radius slider to control corner rounding (0 for square, 50% for circle), and optionally select Gradient as the background style for a two-colour gradient effect.
In Upload Image mode: click the upload zone or drag and drop a PNG, JPG, SVG, or WebP file. Use the Padding slider to add space around the image, and optionally set a background colour or enable Transparent BG.
The live preview on the right shows your favicon rendered at all six sizes simultaneously — zoom in to check how it looks at the tiny 16×16 browser tab size.
Copy the HTML Code from the output box and paste it into your website's <head> section.
Click Download 512×512 PNG for a single high-resolution file, or Download All Sizes (ZIP) to download all six sizes as individually named PNG files.
Favicon Sizes — What Each Is Used For
Modern websites need multiple favicon sizes because different platforms and devices use different sizes for different contexts.
16×16 px: The standard browser tab favicon, shown in the tab bar and address bar of all desktop browsers. This is the smallest size and must remain recognisable as a tiny icon.
32×32 px: Used by browsers on HiDPI (Retina) displays to show a sharper tab icon, and by Windows for taskbar pinning shortcuts.
48×48 px: Used by Windows for desktop shortcut icons and by some browser bookmark displays.
180×180 px (Apple Touch Icon): Used by Safari on iOS when a user adds your site to their iPhone or iPad home screen. Linked in HTML using rel="apple-touch-icon".
192×192 px: The standard size for Android home screen icons and required by PWA (Progressive Web App) web manifests.
512×512 px: Used for PWA splash screens and high-resolution icon contexts. Also serves as the source for any additional sizes your platform may require.
Tips for Getting the Best Results
A few design decisions significantly affect how well your favicon looks at the critical 16×16 and 32×32 sizes.
Keep it simple at small sizes: Complex logos with fine detail become unreadable at 16×16 pixels. A single letter, number, or emoji is almost always more effective at the small sizes than a detailed wordmark or multi-element logo. Preview the 16×16 canvas closely before downloading.
Use high contrast between background and icon: Low-contrast combinations (light text on a light background, or complex gradient backgrounds behind dark text) become illegible at small sizes. High contrast — white on a solid colour, or dark text on white — reads clearly even at 16×16.
For uploaded images, use a square source: The canvas is square, so non-square images are letterboxed with the chosen background colour filling the empty space. Start with a 1:1 ratio crop of your logo before uploading for the cleanest result. Transparent-background PNGs on a white or coloured background work particularly well.
Use the gradient background for a modern look: The Gradient background style creates a diagonal linear gradient between the two selected colours. This adds visual interest at larger sizes (180×180 and 512×512) while still rendering as a solid-ish colour at the tiny 16×16 size.
Check the HTML output paths before going live: The generated HTML code uses placeholder paths like /favicon-32.png. Update these paths to match where you actually upload the favicon files on your server. If you put them in an /images/ folder, update the paths accordingly before pasting the HTML into your site.
Why Use a Favicon Generator Online
A browser-based favicon generator requires no Photoshop, no Illustrator, no image editing software, and no command-line tools. Everything happens in your browser using the HTML canvas API — your image or design is never uploaded to any server. It works on any operating system and any device. For developers setting up a new site, it eliminates a step that would otherwise require either a design tool or a server-side favicon conversion service.
Frontend developers use it to quickly generate favicon sets for client projects without involving a designer. Indie makers and bootstrappers building MVPs use the emoji mode to get a distinctive, recognisable favicon in under a minute. Bloggers and content creators who lack design skills use it to add a personal touch to their site's browser identity. Anyone who has launched a website and noticed the blank tab icon can use this tool to fix it immediately without technical expertise.
Frequently Asked Questions about Favicon Generator
Use a square image of at least 512×512 pixels for the best results. Larger source images downscale more cleanly to smaller sizes — downscaling is always higher quality than upscaling. A 512×512 or 1024×1024 PNG with a transparent background gives the cleanest results at all generated sizes. Non-square images are letterboxed to fill the square canvas, so cropping to 1:1 before uploading produces a better result.
Modern browsers (Chrome, Firefox, Safari, Edge) all support PNG favicons natively, so a .ico file is not strictly required for most modern sites. However, a favicon.ico (which can contain multiple sizes embedded in one file) is still recommended for maximum compatibility with older browsers, Windows Explorer previews, email clients that render linked page favicons, and any tool that looks specifically for /favicon.ico at your domain root. This generator produces PNG files; you can convert the 32×32 PNG to .ico using an ICO converter if needed.
The HTML Code box below the preview shows the complete set of link tags to paste into your site's <head> section. The essential tags are: <link rel="icon" type="image/png" sizes="32x32" href="/favicon-32.png"> for desktop browsers, and <link rel="apple-touch-icon" sizes="180x180" href="/apple-touch-icon.png"> for iOS home screen icons. For PWA support, also include the 192×192 and 512×512 sizes in your web app manifest.json file.
No. Everything happens in your browser using the HTML Canvas API. Your uploaded image is read by the browser's FileReader API directly into memory, rendered onto canvas elements for each size, then exported as PNG data URLs. Nothing is sent to any server at any point. You can verify this by loading the page, disconnecting from the internet, uploading an image, and confirming the preview and download still work fully offline.
Yes, completely free. No account, no sign-up, and no limits on how many favicon sets you generate. All processing happens in the browser with no server infrastructure, so there are no costs to pass on. You can generate favicons for as many websites as you need without any restrictions.
Yes. The image upload mode accepts SVG files alongside PNG, JPG, and WebP. SVG files are vector-based and scale perfectly to any size, making them ideal source material for favicons since they downscale to 16×16 without any pixelation artifacts. The browser renders the SVG onto the canvas at each target size, producing sharp pixel-perfect rasterised output at all six standard favicon dimensions.
Emoji rendering at 16×16 depends on the operating system's font rendering — the same emoji can look slightly different on Windows, macOS, iOS, and Android because each platform has its own emoji font (Segoe UI Emoji on Windows, Apple Color Emoji on macOS/iOS, Noto Color Emoji on Android). The preview reflects how it will look in your current browser and OS. If you need cross-platform consistency, consider using a letter or simple symbol instead of an emoji, as these render more uniformly across platforms.
Yes. The favicon generator works on mobile browsers. In Text / Emoji mode, you can type or paste an emoji and adjust colours and border radius by touch. In Image mode, you can upload a photo from your phone's camera roll. The Download buttons save files to your device's Downloads folder. The layout adapts for mobile screens with the controls and preview stacking vertically for readability.