Favicon Generator
Create professional multi-resolution .ico files, PNG favicons, Apple Touch Icons, and web manifests from uploaded images, text monograms, or emojis with custom backgrounds, shapes, and gradients.
Create professional multi-resolution .ico files, PNG favicons, Apple Touch Icons, and web manifests from uploaded images, text monograms, or emojis with custom backgrounds, shapes, and gradients.
This tool is designed to provide a seamless experience for developers by handling complex operations directly in your browser with maximum speed and security.
A favicon — short for favorite icon — is the small square image that appears in browser tabs, bookmarks bars, browser history, and search engine results next to your site's title. It is one of the most visible brand elements on a website precisely because it appears in contexts where the full website design is absent — just the tiny icon representing your site in a row of open browser tabs or a bookmark folder.
The favicon specification has evolved significantly since the original 16x16 pixel ICO file. Modern browsers and devices expect several different sizes for different contexts. The classic 16x16 pixel favicon appears in browser tabs and the address bar on most desktop browsers. A 32x32 pixel version is used by many browsers for higher-resolution displays, taskbar icons, and bookmark menus. A 48x48 version covers Windows site shortcuts and some browser preferences pages. The 180x180 Apple Touch Icon is required for iOS and iPadOS — when a user adds your website to their home screen on an iPhone or iPad, this is the icon that appears on their home screen like a native app icon. Without it, iOS uses a screenshot of your page which looks poor.
Beyond these core sizes, Progressive Web Apps (PWAs) require additional icon sizes in the web app manifest — typically 192x192 and 512x512 — for the home screen icon and app splash screen on Android. Safari on macOS uses SVG favicons since Safari 12, which scale perfectly at any resolution. Modern favicon implementation best practice is to serve a 32x32 PNG as the primary favicon.ico (which the browser still checks for by convention), a set of PNG sizes for different contexts, and an Apple Touch Icon — all referenced by specific link tags in your HTML head element.
This tool takes any uploaded PNG, JPG, or SVG image and generates favicon files at the standard sizes browsers and devices expect: 16x16, 32x32, 48x48, and 180x180 pixels. The source image is scaled down using a high-quality resizing algorithm that preserves edges and detail at small sizes — important because a favicon that looks sharp at 512x512 can become an unrecognizable blur at 16x16 if not processed correctly. The tool applies the scaling to produce each size independently rather than applying one scale factor and copying the result, which gives better quality at each size. The generated favicon images are available for download individually or as a package. Along with the image files, the tool generates the exact HTML link tags you need to paste into your site's head element to reference the favicon files correctly — including the type attribute, the sizes attribute, and the rel attribute value (icon for standard favicons and apple-touch-icon for the 180x180 Apple Touch Icon). Getting these link tags right is where most self-generated favicon implementations fail — a 32x32 favicon declared with the wrong sizes attribute or wrong rel value will be ignored by some browsers. All image processing runs locally in your browser using the Canvas API. Your source image — whether it is your company logo, a custom icon, or any other image — never leaves your machine and is never uploaded to any server. This is the privacy-safe approach for businesses that handle their brand assets carefully and would not want their uncompressed logo processed by a third-party service.
1. Upload your source image using the Source Image upload area — click to browse or drag and drop a PNG, JPG, or SVG file. For best results, use a square image with a simple, high-contrast design that is still recognizable at 16x16 pixels. A logo with complex text or fine detail will become illegible at small favicon sizes — if your full logo is complex, use a simplified version or just the icon mark portion of your brand identity.
2. Click Generate Favicon (32x32) — the tool processes your uploaded image using the browser's Canvas API, scales it to each required size (16x16, 32x32, 48x48, and 180x180), and displays previews of the generated favicon at each size in the output panel so you can see how the icon looks at each dimension before downloading.
3. Review the generated favicon previews — specifically check the 16x16 preview, which is the most critical size. A favicon that looks great at 180x180 may need design adjustments to look good at 16x16. Common issues at small sizes include: text becoming illegible, fine lines disappearing, and the icon losing its recognizable shape. If the 16x16 preview does not look good, use a simplified version of your image with bolder, thicker shapes and higher contrast.
4. Download the favicon files — click the download button to save the favicon images. Place the downloaded files in the root directory of your website (the same level as your index.html) or in a dedicated /favicons or /images directory, adjusting the link tag paths accordingly.
5. Copy the generated HTML link tags and paste them into the head section of your HTML — the tool generates the complete, correct link tags for each favicon size including the Apple Touch Icon. Paste all of them between the opening and closing head tags in your HTML template, index.html, or base layout file. Test by opening your site in a browser and checking that the favicon appears in the browser tab.
The favicon is almost always the last thing developers think about when launching a new website or web application, and the first thing that makes the site look unfinished. A browser tab showing the browser's default favicon placeholder, or an iPhone home screen showing a blurry screenshot instead of a proper icon — these are small details that immediately signal to users that the site is not fully polished. They take about five minutes to fix correctly. This tool is that five-minute fix. The part that takes most of those five minutes is not generating the image — it is figuring out the correct HTML link tags. The favicon specification is scattered across browser documentation, W3C standards, and Apple developer documentation, and different sources give different and sometimes contradictory guidance on which link tags are required and what the correct attribute values are. A link tag with rel="shortcut icon" is a legacy approach that still works in some browsers but is no longer recommended. The sizes attribute must match the actual pixel dimensions of the referenced file or some browsers ignore it. The Apple Touch Icon must use rel="apple-touch-icon" specifically, not rel="icon". This tool generates the correct, current HTML link tags automatically so you do not need to research the favicon specification to get it right. For developers launching internal tools, prototypes, side projects, or client sites, the workflow is: take the logo or icon image, upload it here, download the generated favicon files, copy the generated HTML link tags into the head of your HTML template or base layout file, put the favicon files in the correct directory, done. The entire process takes less time than finding a browser-compatible favicon tutorial online.
All required sizes generated — produces 16x16 32x32 48x48 and 180x180 Apple Touch Icon covering browser tabs bookmarks iOS home screen and Windows shortcuts in one step
Correct HTML link tags included — generates the exact link tags with correct rel type and sizes attributes to paste into your HTML head so you do not need to research the favicon specification
High-quality scaling — scales each size independently using a quality-preserving algorithm rather than applying one scale factor and copying the result giving better edge clarity at small sizes
Preview at each size — shows the favicon at 16x16 32x32 and other sizes before download so you can check whether the design remains recognizable at small dimensions
Multiple input formats — accepts PNG JPG and SVG source images so you can use your logo in whatever format you have available
100% browser-based — your logo and brand images are processed locally using the Canvas API and never uploaded to any server
No account or watermark — download the generated favicon files immediately with no sign-up required and no watermark added to the output
Works for all website types — HTML sites React Vue Angular apps static sites PWAs and any other web project that needs favicon support
Generating favicons for a new website or web application before launch
Creating Apple Touch Icons for websites that users may add to their iOS home screen
Generating favicon files from a company logo PNG for a new internal tool or client project
Creating favicons for a Progressive Web App alongside the larger PWA manifest icons
Updating existing site favicons from a legacy ICO file to modern multi-size PNG favicons
Generating favicons quickly for prototypes and side projects without purchasing commercial favicon tools
Creating browser-tab icons for web dashboards admin panels and developer tools
Generating correctly-sized favicon files to replace the default browser placeholder on a newly deployed site
Example Input
Source image: logo.png (512x512 pixels, square, PNG with transparent background) Format: PNG Recommended minimum source size: 512x512 pixels for best quality at all output sizes
Example Output
Generated favicon files: favicon-16x16.png (16 x 16 pixels) favicon-32x32.png (32 x 32 pixels) favicon-48x48.png (48 x 48 pixels) apple-touch-icon.png (180 x 180 pixels) HTML link tags to paste into your HTML head:
Invalid Image: The tool requires a valid image file to generate a favicon. If you click Generate without uploading an image, or if the uploaded file is not a recognized image format, the tool will prompt you to upload a valid image. Supported formats are PNG, JPG, and SVG. WebP, AVIF, HEIC, and other newer formats may not be supported — convert them to PNG first using an image converter tool.
Unsupported Format: While PNG and JPG are supported for all favicon sizes, SVG files may have limitations depending on the browser's SVG rendering support. If your SVG contains external resources, fonts, or complex filters that do not render correctly in the browser Canvas, the generated favicon may look different from the original SVG. For SVG source images, check the 16x16 and 32x32 previews carefully before downloading.
Size Limits — Very Large Source Images Take Longer: Extremely large source images (above 4000x4000 pixels or larger than 10MB) may take a moment longer to process because the browser's Canvas API processes them in memory. For most logo and icon files this is not an issue — typical logo PNG files are well under 1MB. If processing appears to stall, try reducing your source image to 1024x1024 pixels first and regenerating.
Non-Square Source Image Produces Distorted Favicon: Favicons must be square. If you upload a wide logo (for example a 600x200 horizontal wordmark) and generate a favicon, the tool will scale it to fit a square canvas which will distort the proportions or add padding. For non-square logos, crop out just the icon mark or symbol portion of the logo — the part that works as a standalone square icon — before uploading. Most brand guidelines include a standalone icon or logomark intended for square use cases like favicons and app icons.
Favicon Not Appearing in Browser After Adding Link Tags: Browser favicon caching is aggressive. After adding the correct favicon link tags and uploading the favicon files to your server, the new favicon may not appear in your browser tab because the browser cached the previous favicon (or the absence of one). To force a refresh: open the favicon URL directly in a browser tab (https://yoursite.com/favicon-32x32.png), then hard-refresh your main page with Ctrl+Shift+R or Cmd+Shift+R. Alternatively, open the page in a private/incognito window which bypasses the cache.
Using the full horizontal logo wordmark as the favicon source instead of the icon mark
Fix: Most company logos are designed as wide horizontal layouts — an icon or symbol on the left with the company name as text on the right. At 16x16 pixels, any text in the logo becomes completely unreadable and the whole thing becomes an unrecognizable blur. The favicon should use only the icon, symbol, or logomark portion of the brand — the part that works as a standalone square icon. If your brand does not have a standalone icon mark, use the first letter of the company name in your brand font at high contrast, or commission a simple icon mark for this use case. The horizontal logo wordmark is for letterheads and website headers, not for browser tabs.
Only adding the 16x16 favicon link tag and ignoring all other sizes
Fix: Many tutorials and favicon implementations only add a single link rel='icon' tag pointing to a 16x16 favicon. This works but misses several important contexts: Safari on macOS prefers SVG or higher-resolution PNGs, iOS requires the apple-touch-icon link tag pointing to a 180x180 image, Windows shortcuts look better with a 48x48 icon, and high-resolution monitors display the 32x32 version more crisply. The correct implementation includes link tags for all sizes: 16x16, 32x32, and 180x180 Apple Touch Icon at minimum. This tool generates all of them and the correct link tags in one step.
Placing favicon files in a subdirectory without updating the link tag paths
Fix: If you place your favicon files in a /images or /assets/icons subdirectory rather than in the root of your site, the link tag href paths must reflect the subdirectory. A link tag with href='/favicon-32x32.png' looks for the file at the root of your domain. If the file is at /images/favicon-32x32.png, the href must be /images/favicon-32x32.png. The most common place to put favicon files is the site root (the same directory as index.html) because browsers also check for /favicon.ico by default without any link tag — putting favicons in the root ensures both the explicit link tags and the implicit browser request work correctly.
Using rel='shortcut icon' instead of rel='icon' in the link tag
Fix: The rel='shortcut icon' value is a legacy syntax from Internet Explorer that was never part of the HTML specification. Modern browsers support it for backward compatibility but the correct and standards-compliant value is simply rel='icon'. The 'shortcut' keyword has no defined meaning in the HTML link relationship specification and is treated as a no-op by parsers. For new implementations, always use rel='icon' for standard favicon link tags and rel='apple-touch-icon' for the Apple Touch Icon. This tool generates the correct rel values automatically.
Not testing the favicon on iOS by adding the site to the home screen
Fix: The Apple Touch Icon (180x180 pixels, rel='apple-touch-icon') is only visible when a user adds your website to their iPhone or iPad home screen — it does not appear in Safari browser tabs. To test it, open your site in Safari on an iPhone, tap the Share button, tap 'Add to Home Screen', and check that the icon that appears is your favicon rather than a blurry screenshot. If you see a screenshot instead of your icon, the apple-touch-icon link tag is missing or the path to the 180x180 image file is incorrect. This is the most commonly skipped favicon test because developers do not think to add their own sites to their phone home screen during testing.
Git Cheatsheet
Quick reference guide for essential Git commands, branching workflows, remote repositories, stashing, and rollbacks.
Regex Cheatsheet
Interactive guide to Regex anchors, character classes, quantifiers, lookarounds, capturing groups, and search flags.
HTTP Headers Cheatsheet
Complete guide to standard and security HTTP headers including Authorization, CORS control, caching policies, and CSP directives.
SQL Cheatsheet
Complete guide to SQL statements including SELECT queries, WHERE filters, aggregate functions, JOIN types, and DDL commands.
Does it support multiple favicon sizes?
Yes. The tool generates favicons at 16x16, 32x32, 48x48, and 180x180 pixels from a single source image. Each size is generated independently to preserve quality at each dimension. The 16x16 is the standard browser tab favicon. The 32x32 is used by high-resolution displays and some bookmark interfaces. The 48x48 covers Windows site shortcuts. The 180x180 is the Apple Touch Icon required for iOS and iPadOS home screen icons.
Can I generate other icon formats like ICO?
The tool currently generates PNG files which is the modern recommended format for favicons. The legacy .ico format — which browsers check for at /favicon.ico by default — can contain multiple sizes embedded in a single file and was the original favicon format. Most modern browsers handle PNG favicons correctly when referenced with explicit link tags. If you specifically need a .ico file for legacy browser support or server-side favicon serving without link tags, you can convert the generated 32x32 PNG to ICO using an ICO converter tool after downloading. For new website implementations, PNG favicons with correct link tags are preferred over ICO files.
Is it safe for private images and logos?
Yes. All image processing runs in your browser using the HTML5 Canvas API. Your source image — including company logos, unreleased brand assets, client logos, and any other images — never leaves your machine and is never uploaded to any server. No image data is transmitted during the generation or download process. This is important for design agencies, startups with unreleased brand identities, or any situation where the source image is confidential.
What is the best source image size to use?
Use a square image of at least 512x512 pixels for the best quality at all output sizes. A larger source gives the scaling algorithm more data to work with when creating the smaller sizes, which produces crisper results at 16x16 and 32x32. The source image should be square — a non-square source will be distorted or padded when scaled to square favicon sizes. PNG with a transparent background is ideal for logos with transparent areas. If your only available source is smaller than 512x512, the tool will still generate favicons, but the small sizes may appear less crisp.
What HTML link tags do I need in my site head for favicons?
The minimum correct favicon implementation requires three link tags in your HTML head element: a 16x16 icon (link rel='icon' type='image/png' sizes='16x16' href='/favicon-16x16.png'), a 32x32 icon (link rel='icon' type='image/png' sizes='32x32' href='/favicon-32x32.png'), and the Apple Touch Icon (link rel='apple-touch-icon' sizes='180x180' href='/apple-touch-icon.png'). This tool generates these exact link tags for you with the correct attribute values so you can paste them directly into your HTML head without needing to look up the specification.
Why does my favicon not appear after uploading it?
Favicon caching is the most common cause. Browsers cache favicons aggressively and may show the old favicon (or no favicon) for hours after you have updated the files and link tags. To force the browser to reload: open the favicon URL directly (https://yoursite.com/favicon-32x32.png), verify the correct image appears, then hard-refresh the main page with Ctrl+Shift+R on Windows or Cmd+Shift+R on Mac. Alternatively, open your site in a private or incognito browser window which bypasses the favicon cache. If the favicon URL returns a 404, the file is not in the correct location — check the file path and the href values in your link tags.
Does it work for React, Vue, Angular, and Next.js projects?
Yes. The generated favicon PNG files and HTML link tags work with any web project regardless of framework. For Create React App projects, place favicons in the public directory and add the link tags to public/index.html. For Next.js, place favicons in the public directory and add link tags to the custom _document.js or use the built-in next/head component. For Vue CLI projects, use the public directory and index.html. For Angular, use the src directory and index.html. For Vite projects, use the public directory and index.html. The favicon files and link tags are framework-agnostic — only the file location and where the link tags live varies by framework.
What is the Apple Touch Icon and do I need it?
The Apple Touch Icon is a 180x180 pixel PNG image used by iOS and iPadOS when a user adds your website to their home screen using Safari's Add to Home Screen option. Without it, iOS uses a low-quality screenshot of your page as the home screen icon, which looks unprofessional. With it, your website has a proper icon that looks like a native app on the user's home screen. If your website is or could be used as a web app or Progressive Web App, the Apple Touch Icon is essential. Even for standard websites, it is worth including since some users prefer to add frequently visited sites to their home screen. The link tag required is link rel='apple-touch-icon' sizes='180x180' href='/apple-touch-icon.png'.
Recent Activity
No recent activity