How to Create a Favicon for Your Website (All Sizes, Free)
The small icon in a browser tab still matters for brand recognition and trust — here's how to generate every size you need, from a 16px tab icon to an Apple touch icon.
TCTechToolsCenter TeamA favicon is the small icon that shows up in a browser tab, in bookmarks, and next to your site in a Google search result. It's easy to forget, but a missing or generic favicon quietly signals an unfinished site — while a clean, on-brand one makes a page feel trustworthy at a glance, especially with a dozen tabs open.
Why one file isn't enough
Unlike most images, a favicon actually needs several different sizes and formats — a 16×16 or 32×32 PNG for browser tabs, a 180×180 Apple touch icon for iOS home screens, larger 192×192 and 512×512 versions for Android/PWA install icons, and a legacy .ico file some older browsers still expect. Getting this wrong doesn't break your site, but it means your icon looks blurry or missing in some of these spots.
Sponsored
Step-by-step: generate a full favicon set
- Open the Favicon Generator and choose your source — type initials or a letter, pick an emoji, or upload your logo image.
- Choose a shape (rounded, circle, or square) and set your background/foreground colours to match your brand.
- Preview it live at actual browser-tab size (16px and 32px) to make sure it's still legible that small — a detailed logo often needs simplifying at this scale.
- Download the full ZIP, which includes every required size, the legacy .ico, a site.webmanifest, and the exact HTML snippet to paste into your site's <head>.
Adding it to your site
Drop the downloaded files into your site's public/root folder, then paste the provided HTML snippet into your page's <head> — it links each size to the browser context that needs it. Most frameworks (including static HTML, Next.js, and WordPress) just need the files served from the root and the link tags present; no build step is required.
Tools used in this article
Sponsored
Frequently asked questions
A single 32×32 PNG will display in most modern browser tabs, but you'll get a blurry or missing icon on iOS home screens, Android app icons, and some older browsers without the fuller set.
TechToolsCenter Team
Product & Tools
The team behind TechToolsCenter — building fast, private, browser-based tools and writing practical guides on how to get the most out of them.
Related articles
How to Convert Markdown Notes to PDF (Free)
Turn a README, meeting notes, or documentation written in Markdown into a clean, shareable, printable PDF — right in your browser.
HTTP vs HTTPS: Why That One Letter Matters
The 's' in HTTPS stands for a real, meaningful difference in how your data travels across the internet — here's what it actually protects.
What Is Base64 Encoding? A Plain-English Explanation
Base64 turns binary data into plain text so it can safely travel through systems built for text — here's what it actually does and when you'd use it.