Code and data

Favicon generator

Turn letters, an emoji or your logo into a complete favicon set with dark mode, a touch icon, PWA icons, the web manifest and the tags for your page's head.

Icons are drawn and zipped in this tab. Your image and settings are not uploaded.

Your site
Light tab, 16 px
Your site
Dark tab, 16 px
32 px
iPhone home screen
Android, circle mask
    Web app manifest

    Paste into <head>

    site.webmanifest
    favicon.svg
    Files in the ZIP
    Runs in your browser. Nothing you type or open is uploaded. Free to use, no account. More code and data tools 
    How to make a favicon
    1. Choose letters, an emoji or your own image. An SVG logo gives the sharpest result and an extra favicon.svg.
    2. Pick a shape and colours, and dark-mode colours for the SVG version. The previews show a light and a dark browser tab at the real 16-pixel size, an iPhone home screen and an Android circle mask.
    3. Fill in the manifest: the name shown when someone installs your site, a short name for the home screen, and the theme colour for the browser bar.
    4. Download the ZIP, upload the files to your site's root (or the folder you entered), and paste the snippet into every page's <head>.
    The files and why each one is there
    • favicon.ico: 16, 32 and 48 pixel images in one file. Browsers, search engines and feed readers still request /favicon.ico even without a link tag, so keep it at the root.
    • favicon.svg: one small vector file that stays sharp at any size and can switch colours in dark mode. Chromium browsers and Firefox use it; Safari uses the ICO or PNG instead.
    • apple-touch-icon.png: 180 by 180 pixels for iPhone and iPad home screens. It has a solid background because iOS fills transparent areas with black and rounds the corners itself.
    • icon-192.png and icon-512.png: the sizes Chrome asks for to install a site as an app and for its splash screen.
    • icon-maskable-512.png: the same artwork inside the central safe circle (80 percent of the width), so Android can cut it to a circle, squircle or teardrop without clipping it.
    • site.webmanifest and head-snippet.html: the manifest that lists the icons, and the tags that point browsers to everything.
    Dark mode in an SVG favicon
    An SVG favicon can carry its own @media (prefers-color-scheme: dark) rule, so a dark logo turns light when the browser or system uses a dark theme. For letters and emoji the tool writes two colour sets into the file. For an uploaded SVG you can keep its colours, invert them, or draw it in white in dark mode.
    The ICO and PNG files can't change with the theme, so pick a background shape with strong contrast if your icon must work on both. The tab previews show both cases.
    Favicons and search results
    Google shows a site's favicon next to its pages in search results. Its guidelines ask for a square icon of at least 8 by 8 pixels (48 or more is better), on a stable URL, that Googlebot is allowed to crawl, and for the favicon link to be on the home page. A new favicon can take days or weeks to appear in results, because it is picked up when Google recrawls the home page.
    Pair the favicon with good page metadata: the meta tag generator writes the title, description and robots tags, and the Open Graph preview shows how links to your pages look when shared.
    Favicon or app icon?
    A favicon is for browsers: tabs, bookmarks, history and the home screen shortcut of a website. If you are shipping an iOS, macOS, watchOS or Android app, use the app icon generator instead: it makes Xcode asset catalogs, Android adaptive layers and store icons from one image.
    Private by design
    Privacy
    Everything happens in this browser tab: the image you choose is read and drawn on a canvas here, and the ZIP is built here. This tool doesn't upload your image, text or manifest. The letters, emoji and manifest text are kept in this tab's session storage so a reload doesn't lose them, and the colour and shape choices are saved as settings.
    This page also shows Google ads, which can use cookies. Privacy and cookies explains how.
    Link to this tool
    Found it useful? You're welcome to link to it from your README, docs or blog.
    Questions
    What size should a favicon be?
    Ship several: a favicon.ico with 16, 32 and 48 pixel images for tabs and legacy requests, a scalable favicon.svg, a 180 pixel apple-touch-icon for iPhones, and 192 and 512 pixel PNGs for installable web apps. This generator makes all of them from one source.
    Do I still need favicon.ico in 2026?
    Yes. Browsers and many other tools request /favicon.ico automatically, even when your page links an SVG or PNG. A small ICO at the root avoids 404s and covers them all.
    How do I make a favicon that works in dark mode?
    Use an SVG favicon with a prefers-color-scheme media query inside it. Turn on dark-mode colours here (or invert an uploaded SVG) and link favicon.svg with type image/svg+xml. Safari ignores SVG favicons, so the ICO or PNG should read well on both light and dark tabs.
    Why isn't my new favicon showing?
    Browsers cache favicons hard. Open the icon's URL directly, reload it, then reload the page, or try a private window. Check that the link tags are in the head of the page and that the files are served with a 200 response. Search engines update the icon only when they recrawl your home page.
    Can I use an emoji as a favicon?
    Yes. Choose An emoji: the ICO and PNG files are drawn with this device's emoji style, and favicon.svg uses each visitor's own emoji font, so it can look slightly different on Windows, Android and Apple devices.
    From the same developer
    More code and data tools
    All 30 code and data tools 
    Also try: Open Graph preview