How to Make a Favicon From Your Logo
Favicons are one of the smallest applications of your logo, but they appear constantly. Every time someone has your website open in a browser tab, your favicon is visible. Every bookmark, every home screen shortcut, every browser history entry displays this tiny icon. Getting it right reinforces your brand at a touchpoint most businesses overlook.
Simplify Your Logo for Small Sizes
Most logos are too detailed for favicon use at 16x16 or 32x32 pixels. At these sizes, fine lines disappear, text becomes illegible smudges, and complex shapes merge into unrecognizable blobs. The first step is to identify the simplest recognizable element of your logo.
For logos with a distinct icon or symbol (like Apple, Nike, or Target), the icon alone is the obvious favicon. For logos that are primarily text, the first letter or a monogram of the initials works well. For abstract logos, the most distinctive shape or element should be isolated.
Test your chosen element at small sizes before investing in the full favicon creation process. Create a rough 32x32 pixel version and squint at it or view it at arm length. If you can still identify the brand, the simplification works. If it looks like a generic blob, simplify further.
Some brands create a dedicated favicon version of their logo that is distinct from the full logo. This is perfectly acceptable and often preferable to cramming too much detail into a tiny space. The favicon needs to be recognizable, not identical to the full logo.
Create an SVG Favicon
SVG is the modern primary favicon format, supported by Chrome, Firefox, Edge, Safari, and all other current browsers. An SVG favicon scales perfectly to any size the browser renders, from 16-pixel tab icons to larger bookmark panels and browser new-tab displays.
Open your simplified logo mark in a vector editor (Illustrator, Figma, Inkscape, or similar). Set the artboard to a square, with the logo centered and appropriately padded. Export as SVG with text converted to outlines. Minimize the file by removing unnecessary metadata, comments, and editor-specific attributes. The resulting file should be well under 5 kilobytes.
One advantage of SVG favicons is that they can respond to CSS media queries, including prefers-color-scheme. This means your favicon can automatically switch between light and dark versions based on the user operating system theme. To implement this, include a style element inside the SVG that uses the prefers-color-scheme media query to change fill colors.
Generate PNG Versions at Required Sizes
While SVG is the primary favicon for modern browsers, PNG versions are needed for specific device and platform requirements.
A 32x32 pixel PNG serves as the fallback favicon for any context that does not support SVG. This is the baseline size that all browsers can use.
A 180x180 pixel PNG is the Apple Touch Icon, used when iOS users save your site to their home screen. Without this, Apple devices generate a screenshot thumbnail instead of your logo, which looks unprofessional.
192x192 and 512x512 pixel PNGs are specified in the web app manifest for Android devices and Progressive Web Apps (PWAs). The 192-pixel version appears on Android home screens, while the 512-pixel version is used for splash screens and app install prompts.
Export all PNGs from your vector source at exactly the required dimensions. Use a transparent background for maximum flexibility, though some contexts (like the Apple Touch Icon) will display on a colored background that you may want to account for in your design.
Add Favicon Tags to Your HTML
Place the following tags in the head section of your HTML. The SVG favicon is declared with type="image/svg+xml" and serves as the primary icon for modern browsers. The ICO or PNG fallback covers older contexts. The Apple Touch Icon and manifest file handle mobile devices.
The link tag with rel="icon" and type="image/svg+xml" points to your SVG file. A second link tag with rel="icon" and type="image/png" pointing to the 32x32 PNG provides the fallback. A link tag with rel="apple-touch-icon" points to the 180x180 PNG. A link tag with rel="manifest" points to your site.webmanifest file, which references the 192 and 512 pixel PNGs.
The traditional favicon.ico file placed in the site root is still recognized by all browsers as a fallback. If you want to maintain maximum backward compatibility, include an ICO file containing 16x16 and 32x32 pixel versions. Free online tools like RealFaviconGenerator and Favicon.io can generate ICO files from your PNG source.
Testing Your Favicon
After implementation, test across multiple browsers and devices. Open your site in Chrome, Firefox, Safari, and Edge on desktop. Check the tab icon, bookmark the page and check the bookmark icon, and pin the tab if the browser supports it. On mobile, save the page to your home screen on both iOS and Android and verify the icon displays correctly.
Common issues include the favicon not updating due to aggressive browser caching (try clearing the cache or appending a query string to the favicon URL), the Apple Touch Icon appearing with the wrong background color (add a background-color meta tag or design the icon with appropriate padding), and the SVG favicon appearing too small within the browser tab space (ensure your SVG viewBox uses the full available area without excessive padding).
Another frequent problem is favicon inconsistency across platforms. Your favicon may look sharp in a Chrome tab on desktop but appear blurry on an Android home screen because the manifest PNG was exported at the wrong dimensions or with incorrect compression. Test each specific file at its intended use, not just the SVG version in one browser. Open your site on a physical phone, add it to the home screen, and compare the result to your expectations. Simulators and emulators do not always render icons the same way real devices do.
If your favicon looks correct on light backgrounds but disappears on dark ones, you likely need a separate dark mode variant. The SVG approach handles this automatically through embedded CSS media queries, but PNG fallbacks cannot adapt. For PNG favicons used on platforms that support dark mode, consider adding a thin contrasting border or a subtle background shape behind the logo mark to ensure visibility in both themes.
RealFaviconGenerator.net provides a comprehensive testing tool that checks your favicon implementation across all platforms and identifies any missing or incorrectly configured elements.
A complete favicon implementation uses an SVG as the primary icon (scalable, dark mode capable), a 32x32 PNG fallback, a 180x180 Apple Touch Icon, and 192 and 512 pixel PNGs in the web manifest. Start by simplifying your logo to its most recognizable element, because even the best logo becomes unrecognizable if too much detail is crammed into 16 pixels.