๐Ÿ–ผ๏ธ

Drop an image here or click to upload

PNG, JPG, SVG, WebP โ€” square image recommended

5% padding

What is a Favicon?

A favicon (short for "favorite icon") is the small icon that appears in browser tabs, bookmarks, browser history, and on mobile home screens when someone saves your website. While a single 16ร—16 pixel favicon used to be enough, modern web design requires multiple sizes to look great across all devices and contexts.

Favicon Sizes You Need

  • favicon.ico โ€” multi-size ICO containing 16ร—16, 32ร—32, 48ร—48 (legacy compatibility)
  • favicon-16x16.png โ€” browser tab (classic)
  • favicon-32x32.png โ€” taskbar and shortcuts
  • favicon-48x48.png โ€” Windows site icon
  • apple-touch-icon.png โ€” 180ร—180 for iOS home screen
  • android-chrome-192x192.png โ€” Android Chrome icon
  • android-chrome-512x512.png โ€” PWA splash screen
  • manifest.json โ€” web app manifest for Android/PWA

Emoji Favicons

Emoji favicons are trendy for indie projects, SaaS tools, and personal sites. They render clearly at all sizes, require no design work, and can be updated instantly. Switch to Text/Emoji mode and try โšก, ๐Ÿš€, โค๏ธ, or any emoji that represents your brand.

How to Install the Favicon

  1. Download the favicon package and extract all files
  2. Upload all files to your website root folder (e.g. /public/ or /static/)
  3. Copy the generated HTML code and paste it inside the <head> tag of your HTML
  4. For WordPress: use Appearance โ†’ Customize โ†’ Site Identity to upload the 512ร—512 PNG

Frequently Asked Questions

Modern websites should provide 16ร—16, 32ร—32, 48ร—48, 180ร—180 (Apple Touch Icon), 192ร—192 (Android Chrome), and 512ร—512 (PWA). This generator creates all these sizes plus manifest.json and the HTML link tags automatically.

Yes. Switch to Text/Emoji mode, type or paste an emoji, choose a background color, and generate. Emoji favicons are trendy, render clearly at small sizes, and require no design skills.

Download the favicon package, extract all files to your website root folder, then paste the provided HTML link tags into the <head> section of every page. For WordPress, use Appearance โ†’ Customize โ†’ Site Identity.

Related Tools