Modern Favicon

Text Favicon Generator

No logo yet? Turn your initials into a sharp, professional favicon — pick a font, colours and background, and download the complete bundle including a dark‑mode SVG favicon. Free, instant, in your browser.

1 · Design your icon

Uploaded image preview

Drop an image here, click to browse, or paste

PNG, JPG, SVG, WebP or GIF · square works best

8%
18%
App name & PWA options (optional)

These fill in the site.webmanifest, which Android and other platforms read when someone installs your site to their home screen. Safe to skip for a normal website — you can edit the file later.

Your site or product's full name — shown on the install prompt and splash screen.

Shown under the home-screen icon — aim for 12 characters or fewer.

Tints the browser and app chrome around your site — usually your brand colour.

2 · Preview & download

Upload an image or type some text to see live previews of your favicon in a browser tab, Google search results, and on iOS & Android home screens.

3 · Install on your site
  1. Download the bundle above and unzip it.
  2. Copy every file into your website's root folder — the same folder as your homepage (public/ in most frameworks) — so they load from /favicon.ico.
  3. Paste these tags into the <head> of every page:

Using an AI coding assistant? and paste it into Claude Code, Cursor or Copilot after unzipping into your project — it places the files and adds the tags for you. The same steps ship in the ZIP as AI-INSTRUCTIONS.txt.

View the complete installation guide →

Tips for a sharp letter favicon

  • 1–3 characters, bold weight. At 16×16 pixels there's no room for subtlety — Bold or Black weights survive; Light weights vanish.
  • High contrast. White text on a saturated background (or the reverse) reads best in a crowded tab bar.
  • Check the tab preview. The light and dark tab mockups above render your favicon at true tab size — if it's legible there, it's legible everywhere.
  • Let the SVG do the heavy lifting. Modern browsers prefer the SVG favicon, which stays razor sharp at any resolution and adapts to dark mode.

What you get

One ZIP containing favicon.ico (16/32/48), an SVG favicon with a prefers-color-scheme dark-mode variant, a 180×180 apple-touch-icon.png, Android/PWA icons (192, 512, and a maskable 512), site.webmanifest, and the exact HTML to paste into your <head> — the full modern set from the 2026 favicon size guide, nothing obsolete.

FAQ

How do I make a favicon from my initials?

Type 1–4 characters in the generator above, choose a font, weight, text colour and background, and click Download. You get favicon.ico, PNG app icons and an SVG favicon, plus the HTML code to paste into your site.

Why does my text favicon look blurry at 16 pixels?

Sixteen pixels is tiny: more than three characters, thin font weights, or intricate fonts turn to mush. Use 1–3 characters in Bold or Black weight, keep high contrast between text and background, and check the true-size browser-tab preview before downloading.

What is a dark-mode SVG favicon?

An SVG favicon can include a prefers-color-scheme media query so its colours adapt when the visitor's browser uses a dark theme. This generator writes that variant automatically — the icon swaps its text and background colours in dark mode so it stays legible.

Which fonts can I use for a text favicon?

The generator offers popular fonts including Inter, Roboto, Lato, Montserrat, Poppins, Oswald, Playfair Display, Bebas Neue, Pacifico, Lobster and Source Code Pro, in regular, bold and black weights.

More tools: favicon generator · PNG to ICO · emoji favicon · Apple Touch Icon · transparent favicon