Favicon Generator

Create a professional favicon for your website. Type initials or paste an emoji — customize shape, colors, and font — then download PNG files at every size with ready-to-paste HTML code.

Advertisement

Content

Font

Shape

Background Color

Text / Icon Color

White Black Gold Green

Corner Radius

20%

Preview

Your Website
🔒 https://yourwebsite.com

DOWNLOAD

HTML CODE

How to use: Click Download All Files (ZIP) — extract the ZIP, upload all files to your website root, then paste the HTML code above into your <head>. The ZIP includes all 11 files: favicon.ico, favicon.svg, 7 PNGs, safari-pinned-tab.svg, and site.webmanifest.
Advertisement

Complete Favicon Package — All 11 Files

  • favicon.ico — Multi-resolution (16+32+48px). Legacy browsers, Windows taskbar. Upload to your root as /favicon.ico.
  • favicon.svg — Vector. Modern Chrome/Firefox/Edge. Scales perfectly at any size.
  • favicon-16x16.png — Browser tab fallback (standard desktop).
  • favicon-32x32.png — Browser shortcuts, bookmarks.
  • favicon-48x48.png — Windows desktop shortcuts.
  • favicon-96x96.png — Legacy compatibility, high-DPI tabs.
  • apple-touch-icon.png (180×180) — iPhone/iPad home screen bookmark.
  • android-chrome-192x192.png — Android home screen, PWA icon.
  • android-chrome-512x512.png — PWA splash screen, high-DPI Android.
  • safari-pinned-tab.svg — Safari pinned tab. Must be monochrome black on transparent background (generated automatically).
  • site.webmanifest — Progressive Web App metadata. Required for "Add to Home Screen" on Android.

Best Practices

  • Upload all files to your website root (same folder as index.html)
  • 1–2 characters max — text becomes unreadable at 16×16
  • High contrast between background and text/icon for visibility in dark browser UIs
  • Rounded square or circle shapes hold up better than complex logos at small sizes
  • Edit site.webmanifest to set your actual site name before uploading