Favicon FAQ: sizes, formats and common problems
Quick, clear answers about favicons — which files and sizes you need, ICO or SVG, Apple Touch and maskable icons, dark mode, and what to do when a favicon won't show up — and about EasyFaviconGenerator.
What is a favicon?
A favicon is the small icon displayed by browsers in tabs, bookmarks and history, by search engines in result pages, and by mobile systems on the home screen. Read the guide to what a favicon is for the whole story.
How do I create a favicon from an image or logo?
Open the favicon generator, drop in your image or logo (SVG is ideal, or a square PNG of at least 512x512 pixels), and preview how it will look in browser tabs, Google results, iOS and Android. Adjust the background, margins or dark-mode variant if needed, then download the package: it contains every icon file plus the HTML code to paste into your page. No logo yet? Design one in seconds with the logo maker.
Which files do I need?
The recommended modern set is: an SVG (or a PNG) favicon for browsers, a 96x96 PNG for Google result pages, a 180x180 apple-touch-icon.png for iOS, and two PNGs (192x192 and 512x512) declared in a web app manifest for Android. A favicon.ico is kept for legacy cases. EasyFaviconGenerator generates exactly this.
Do I still need favicon.ico?
Current browsers support SVG and PNG favicons (SVG in Safari from version 26). The ICO file remains useful for very old browsers, for RSS readers and other tools which blindly request /favicon.ico, and when a browser displays a file directly (a PDF or an image). It costs nothing to include it, which is why the generator does.
Why an SVG favicon?
An SVG is sharp on every screen density, tiny, and can adapt to the visitor's theme with a prefers-color-scheme media query. The generator's dark icon option produces an SVG which switches between two designs. Safari supports SVG favicons from version 26 (September 2025) but ignores the dark-mode switch inside them for now, and Safari 18 and earlier do not support SVG favicons at all, which is why the PNG and ICO versions are still declared.
How do I have a different favicon in dark mode?
In the "Classic and SVG favicons" section, click Start from the regular icon (or Use another icon) in the Dark icon panel. The generated favicon.svg contains both designs and a prefers-color-scheme media query. Chrome, Edge and Firefox pick the matching design; Safari 26 shows the default (light) design for now because it ignores that media query inside SVG favicons. The 96×96 PNG and ICO stay theme-neutral for Google and older Safari.
What is the size of the Apple Touch icon?
180x180 pixels, in PNG. iOS scales it down for other devices. Transparent areas are filled with black by iOS, so the generator defaults to an opaque background. iOS rounds the corners itself: do not round them in your picture. See the article about sizes.
What is a maskable icon?
On Android the system may crop your web app icon to a circle, a squircle or a rounded square. A maskable icon is designed with a safe zone (about 80% of the picture) so that nothing important is cut. The generator defaults to a plain opaque background with margins that keep your logo inside this zone. You can declare the icons as maskable, any or both in the manifest options.
Why is my new favicon not showing up?
Browsers cache favicons aggressively, sometimes for weeks. Set a version in the generator options: it appends ?v=... to every URL in the HTML code, which forces browsers to download the new files. For immediate tests, open the favicon URL itself and hard-refresh it (Ctrl+F5). Google result pages update at their own pace: allow a few days.
Why does Google not show my favicon in search results?
Google requires: a square favicon of at least 8x8 pixels (larger than 48x48 is recommended) in a supported format (BMP, GIF, ICO, PNG, JPEG, PPM or TIFF; SVG is not on Google Search's list), a stable URL, a crawlable favicon (not blocked by robots.txt) and a home page which declares it with <link rel="icon">. Run the favicon checker: it verifies these points. Even when everything is right, Google can take days or weeks to refresh.
Is a transparent background OK?
For browser tabs, yes: transparent PNG and SVG are fine. For the Apple Touch icon and Android icons, a transparent picture gets a black background, which is rarely what you want — so those sections default to Add a plain background and margins.
Which picture should I start from?
An SVG is ideal. Otherwise use a square PNG of at least 512x512 pixels, with some margin around the subject. Non-square pictures are centered and not distorted. A picture with a lot of fine detail will look bad at 16 pixels: prefer a simple, bold shape.
Are my pictures uploaded?
No. The favicon generator works entirely in your browser: your picture is never sent to a server. Read the privacy policy.
What is metadata injection?
The generated PNG files and the SVG contain a small text marker saying they were created by EasyFaviconGenerator. It is invisible and harmless, like the metadata every image editor adds. You can disable it with Skip metadata injection in the generator options.
What do the compression options do?
None keeps the PNG as the browser encodes it. Lossless tries all PNG filters and a stronger compression and keeps the smallest result: same pixels, fewer bytes. Lossy reduces the picture to 256 colors with a quantizer, which gives much smaller files for flat logos, at the cost of subtle gradients.
What is the scaling algorithm?
It only matters for bitmap pictures (PNG, JPEG, WebP) which have to be reduced. Smooth uses the browser. Lanczos is a sharper resampling filter, nice for photos and detailed logos. Nearest neighbor keeps hard pixel edges, which is what pixel art needs. SVG pictures are always rendered at the exact size, so they are not affected.
What is the favicon path?
The URL path where your favicon files will be hosted, relative to the root of your website. It is used in the generated HTML code and in the manifest. Most sites keep the default /.
What about Windows tiles and Safari pinned tabs?
Both are legacy: Windows 8/10 tiles (browserconfig.xml) are not used by current Windows and Edge versions, and Safari 12 and later use the regular favicon for pinned tabs instead of the mask-icon. They are not generated by default. If you need them, tick I still need them in the generator: you get the tiles, the browserconfig.xml and a traced safari-pinned-tab.svg.
Does it work with my framework?
Yes. Use the dedicated generators: React, Next.js, Ruby on Rails, Node.js, Node CLI, Gulp, Grunt and ASP.NET Core. They name the files, place them and give the code for your stack.
Is there an API?
The favicon checker has a JSON API, documented in the developers section. The generator itself runs in the browser; the developers page explains how to automate it.
Is it free? Can I use the favicons commercially?
Yes, the service is free and the files you generate belong to you: use them in personal and commercial projects. Make sure you own the rights on the picture you start from.
How do I add a favicon to WordPress?
The quickest built-in route is Appearance → Customize → Site Identity → Site Icon: upload a square image of at least 512×512 pixels and WordPress crops and serves it. For the complete package — SVG favicon, dark-mode variant and web app manifest — upload the generated files to your site root and add the supplied <link> tags to your theme's header (ideally a child theme) or a header-code plugin you trust, then run the favicon checker. See our step-by-step WordPress favicon guide.
How do I add a favicon to Shopify, Wix or Squarespace?
Each builder has its own favicon setting (labels and plan rules change, so search settings for “favicon” if yours differ): Shopify usually in the theme editor under Theme settings → Favicon, Wix in Settings → Favicon (generally on a paid plan — check yours), and Squarespace in Settings → Website → Favicon. Upload the square PNG the builder asks for; builders that do not accept the full HTML package will not use your SVG, dark-mode variant or manifest, which is a platform limit, not a faulty file. Details and workarounds are in our guide to favicons on Shopify, Wix and Squarespace.
Can I make a favicon from text, a letter or an emoji?
Yes — and at 16 pixels a bold letter or symbol often reads better than a detailed logo. Use the logo maker: pick up to three letters, an emoji or a symbol, set the background and foreground colours, then open the result in the favicon editor to generate the full package. Prefer letters you own the font rights for in commercial use, and check the design at 16×16. Our text and emoji favicon guide explains the design choices.
Can I use only an SVG favicon and skip the other files?
Not on the public web. Chrome, Edge, Firefox, Opera and Safari 26+ use SVG favicons, but Safari 18 and earlier still use PNG/ICO in tabs, Google Search does not list SVG as a supported favicon format, iOS needs the 180×180 Apple Touch Icon, Android uses the manifest icons, and tools that never read your HTML request /favicon.ico. The extra files are only a few kilobytes — generate the complete set. Compare the formats in PNG vs ICO vs SVG.
Your question is not here? Contact us and ask it — or try the free favicon generator and see the answer in the live preview.