What files do I need for a favicon in 2026?

A modern favicon set includes favicon.ico (for legacy support), PNG icons at 16x16 and 32x32, an apple-touch-icon at 180x180 for iOS home screens, and 192x192 plus 512x512 PNGs referenced in a web app manifest for Android and PWA installs. This generator produces all of them in one ZIP.

Do I still need favicon.ico?

Yes, it's still good practice. Browsers and crawlers often request /favicon.ico by default, and the ICO format can bundle multiple sizes. Modern browsers also accept PNG and SVG icons, but including favicon.ico ensures the widest compatibility.

What size should an Apple touch icon be?

180x180 pixels. iOS uses apple-touch-icon when a user adds your site to their home screen. Provide a single 180x180 PNG and iOS will scale it as needed.

Can I make a favicon from text or an emoji?

Yes. Enter one to three characters (initials or an emoji), pick colors and a shape, and the generator renders crisp icons at every size. This is the fastest way to ship a real favicon before you have a finished logo.

Is my image uploaded anywhere?

No. The favicon is generated entirely in your browser using HTML Canvas. Your image never leaves your device, and nothing is sent to a server.

Free Tools

Favicon & app icon generator

Create a complete favicon package - ICO, PNGs, Apple touch icon, web manifest, and HTML snippet - from text, an emoji, or an image. All in your browser.

No signup requiredRuns in your browserComplete package

Design your favicon

Text or emoji (1-3 chars)

Background

Text color

Shape

Preview

64px

32px

Your Site

Includes favicon.ico, PNGs (16-512px), apple-touch-icon, web manifest, and an HTML snippet. Generated in your browser - your image never leaves your device.

HTML snippet

<link rel="icon" href="/favicon.ico" sizes="any" />
<link rel="icon" type="image/png" sizes="32x32" href="/favicon-32x32.png" />
<link rel="icon" type="image/png" sizes="16x16" href="/favicon-16x16.png" />
<link rel="apple-touch-icon" sizes="180x180" href="/apple-touch-icon.png" />
<link rel="manifest" href="/site.webmanifest" />

Launching a new site?

A favicon is one box on the launch checklist. We build complete, production-ready websites - fast. Bring us your idea.

Talk to an engineer

See the full launch checklist →

Quick answer: A favicon is the small icon shown in browser tabs, bookmarks, and home-screen shortcuts. A complete set needs favicon.ico, 16x16 and 32x32 PNGs, a 180x180 Apple touch icon, and 192x192 plus 512x512 PNGs in a web manifest. This generator creates all of them from text, an emoji, or an image and bundles them in a ZIP with a copy-ready HTML snippet.

Favicon files and where each is used

File	Size	Used by
favicon.ico	16/32/48	Legacy browsers, default /favicon.ico requests
favicon-32x32.png	32x32	Modern browser tabs
apple-touch-icon.png	180x180	iOS home screen
favicon-192x192.png	192x192	Android / PWA
favicon-512x512.png	512x512	PWA splash / install

How to add a favicon to your website

Adding a favicon is a five-minute job once you have the files. Use the generator above for the icons, then follow these steps:

Create the icons. Enter text, an emoji, or upload a logo, pick your colors and shape, and generate the full set.
Download the package. You get favicon.ico, PNGs from 16x16 to 512x512, an Apple touch icon, and a web manifest in one ZIP.
Upload the files to your site's root or public/ folder so they're served from the domain root.
Add the HTML snippet (below) to the <head> of every page.
Hard-refresh and verify the icon shows in the tab and on a mobile home-screen shortcut.

The HTML snippet

A modern, complete favicon reference looks like this (the generator gives you a copy-ready version):

<link rel="icon" href="/favicon.ico" sizes="any">
<link rel="icon" type="image/png" sizes="32x32" href="/favicon-32x32.png">
<link rel="icon" type="image/png" sizes="16x16" href="/favicon-16x16.png">
<link rel="apple-touch-icon" sizes="180x180" href="/apple-touch-icon.png">
<link rel="manifest" href="/site.webmanifest">

Why favicons matter

A favicon is a small file with an outsized impact. It's the icon a visitor sees in their browser tab, their bookmarks bar, their history, and on their phone's home screen if they save your site. When someone has a dozen tabs open, a distinctive favicon is how they find yours - missing one leaves a generic globe or blank page that reads as unfinished or untrustworthy.

Favicons also feed search and AI: Google shows favicons next to results on mobile, so a clean icon improves your visual presence in the SERP. And for any site that wants to be installable as a Progressive Web App, the 192px and 512px manifest icons are required - they become the app icon and splash screen. In short, the favicon is a tiny, cheap branding and trust signal that's surprisingly easy to get wrong or skip entirely.

ICO vs PNG vs SVG favicons

ICO is the legacy format requested by default at /favicon.ico. It can bundle multiple sizes and guarantees the widest compatibility, so it's still worth including.
PNG is what modern browsers use for crisp tab icons (16/32px) and for the Apple touch and manifest icons (180/192/512px).
SVG favicons scale perfectly and can adapt to dark mode, but support isn't universal - use SVG as a progressive enhancement on top of ICO/PNG, not a replacement.

The practical answer in 2026: ship ICO + PNG (and optionally SVG). This generator handles the ICO and PNG set for you.

Common favicon mistakes

Only a 16x16 icon. It looks blurry on retina displays and home screens. Ship the full size range.
Too much detail. A full logo with text turns to mush at 16px. Use a simple mark, initials, or a single glyph.
Missing Apple touch icon. iOS shows a zoomed-in screenshot instead of your brand when users save your site.
Wrong location or caching. Files must be reachable from the root; browsers cache favicons hard, so hard-refresh when testing.

Frequently asked questions

What files do I need for a favicon in 2026?: favicon.ico, 16x16 and 32x32 PNGs, a 180x180 Apple touch icon, and 192/512px PNGs in a web manifest. This tool generates all of them.
Do I still need favicon.ico?: Yes - browsers and crawlers request /favicon.ico by default, and ICO bundles multiple sizes. Modern browsers also accept PNG/SVG.
What size is an Apple touch icon?: 180x180px. iOS uses it for home-screen shortcuts.
Can I make one from text or emoji?: Yes - enter 1-3 characters, pick colors and a shape, and download crisp icons at every size.
Is my image uploaded anywhere?: No - everything is generated in your browser with Canvas. Your image never leaves your device.

Related free tools

Keep going with these tools

Browse all design tools

Business Name Generator

Generate brandable name ideas instantly

Business Name & Domain Checker

Check if your business name is available

Website Launch Checklist

Score your launch readiness in minutes

Privacy Policy & Terms Generator

Generate launch-ready legal docs in minutes

CSS Gradient Generator

Linear, radial & conic gradients

Color Palette Generator

Build a palette from any image

Web app development for portals, internal tools, workflows, data products, and SaaS surfaces.

Explore Web app development services

Related guides

Go deeper with our guides

Current, practical guides on the strategy, costs, and hands-on work behind this tool.

Small Business Website Guide 2026: Plan, Build, Launch

How SMBs can plan, build, and launch a professional website: scope, realistic costs, features, and maintenance.

UX Design Principles for Small Business Websites

UX principles that drive revenue: navigation, forms, mobile patterns, accessibility, and a full audit checklist.

Launch Faster

Ready to build your next product?

Tell us what you're building. A senior engineer will help you scope it, plan it, and get it built fast, on a foundation that's ready for real users.

Book a free call

Talk to real engineers

A clear plan after one call

No obligation