What is a favicon?
A favicon (short for "favourite icon") is the small icon displayed in a browser tab, bookmark bar, browser history, and search results alongside your site's name. It is typically a square image, 16×16 or 32×32 pixels in its original form, though modern browsers and devices require larger versions — Apple touch icons need 180×180, Android PWA icons need 192×192 and 512×512, and modern favicon.svg files scale to any size.
A well-designed favicon reinforces brand recognition, helps users identify your tab among many open tabs, and is required for Progressive Web Apps. A missing or generic favicon is one of the most common signs of an unpolished website.
Three ways to create a favicon
The emoji tab is the fastest route — pick any emoji and the generator renders it on a coloured background with your chosen corner radius. Emoji favicons are increasingly common for small tools and developer projects because they are immediately recognisable, look great at small sizes, and require no design skill. Tools like Linear, Vercel's projects, and thousands of open-source libraries use emoji favicons.
The text/letter tab is ideal for brand initials. Enter 1–3 characters (single letter for maximum legibility at small sizes, two letters for monogram-style), choose the font, text colour, and background. This produces a clean, professional favicon similar to those used by Google (G), Amazon (a), Netflix (N), and virtually every major brand.
The SVG paste tab accepts any valid SVG code — paste your logo or icon in SVG format and the generator rasterises it to PNG at all required sizes while also exporting a clean SVG version. This is the professional route for established brands with existing vector assets.
Corner radius and the squircle
The corner radius slider controls how rounded the background square is. At 0%, you get a sharp square — fine for some brands. At 50%, you get a perfect circle. The sweet spot for most modern brand icons is around 20–25%, which produces a "squircle" — the shape used by iOS app icons and many modern design systems. It feels softer than a sharp square but more distinctive than a circle.
The HTML snippet
After generating your favicon, the HTML snippet panel shows the exact tags to add to your website's <head> section. The four-line snippet covers: the standard 32×32 PNG favicon, the SVG favicon (used by modern browsers and scales infinitely), the Apple touch icon for iOS home screen bookmarks, and the web manifest reference for PWA support.
File naming and placement
Place favicon.ico or favicon.svg at the root of your domain (https://yourdomain.com/favicon.svg) — browsers look there by default without needing HTML tags. The PNG files can go anywhere but are typically in the root. Download all sizes, place them in your project, update the paths in the HTML snippet, and you are done.