Favicon Generator — All Sizes from One Image or Emoji
Generate browser tab icons, Apple touch icons, and PWA icons in seconds
A complete favicon setup requires five different image sizes — from the tiny 16x16 pixel tab icon to the 512x512 pixel PWA icon — plus the correct HTML link tags to reference them. Getting all of this right manually involves multiple image editing steps, canvas scaling, and HTML boilerplate research. This generator handles the entire process in your browser: upload a PNG or SVG (or simply type an emoji), preview all five sizes side by side, download each as a PNG, and copy the ready-to-use HTML link tag snippet. Because everything renders via the HTML Canvas API, nothing is uploaded and no account is required.
How to Create a Favicon for Your Website
Upload an image or type an emoji and download all favicon sizes in under a minute.
Choose your source
Switch between Emoji mode and Image mode using the tabs at the top. In Emoji mode, type or paste any emoji character into the input field — it will be rendered as a colorful icon on the canvas. In Image mode, drag and drop or click to upload a PNG, SVG, or JPG file. For best results use a square image of at least 512x512 pixels.
Preview all sizes
The preview panel shows your icon rendered at all five standard sizes: 16x16 (browser tab), 32x32 (retina browser tab), 48x48 (Windows taskbar), 180x180 (iOS home screen / Apple touch icon), and 512x512 (PWA manifest icon). Verify that your icon is readable at the small sizes — detail that looks fine at 512px can become an indistinct blur at 16px.
Download and add to your site
Click the Download button under any size preview to save that PNG to your computer. Place the downloaded files in your site root or an assets folder. Copy the HTML link tag snippet and paste it inside the head element of your HTML or into your CMS head section. The snippet includes the correct rel and sizes attributes for each file.
Features
Generates all 5 standard favicon sizes: 16, 32, 48, 180, and 512 px
Emoji mode — any emoji becomes a full-color browser icon
Image mode — upload PNG, SVG, or JPG
Individual PNG download for each size
HTML link tag snippet with correct rel and sizes attributes
Apple touch icon (180px) and PWA manifest icon (512px) included
Canvas rendering — runs locally, zero server upload
No account or software installation required
Related Tools
Frequently Asked Questions
What favicon sizes does a modern website need?
A complete favicon setup needs: 16x16 and 32x32 PNG for browser tabs (with a link rel=icon tag), 180x180 PNG for Apple devices (link rel=apple-touch-icon), and 512x512 PNG for Progressive Web App manifests. Legacy .ico files are only needed for Internet Explorer compatibility, which most sites no longer require.
Can I really use an emoji as a favicon?
Yes, and it has become a popular choice for developer tools and personal sites. Emoji favicons render as full-color icons in browser tabs on Chrome, Firefox, Safari, and Edge. The emoji is drawn onto an HTML canvas at each target size, so it produces a proper raster PNG rather than a character glyph.
What format should a favicon be — .ico or .png?
Modern browsers fully support PNG favicons with the link rel=icon tag. ICO files bundle multiple sizes in one file and are supported by older IE versions. For new sites targeting modern browsers, PNG is simpler and sufficient. This generator produces PNG files, which work on all current browsers.
Where do I put the favicon files?
The traditional location is the site root (e.g. /favicon.png) so browsers can find it automatically at the well-known path. However, you can place them in any folder as long as your HTML link tags reference the correct path. The HTML snippet this tool generates uses relative paths that you can adjust to match your file structure.
Why does my favicon look blurry in the browser tab?
Blurriness at 16x16 usually means the source image has too much fine detail that disappears when scaled down. Design your favicon with simplicity in mind — bold shapes and high contrast work best at small sizes. If you used an emoji, try a different one with a simpler silhouette. Complex logos often need a simplified icon version specifically for favicon use.