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
Why Your SVG Files Are Bigger Than They Should Be
An SVG exported straight from your design tool is carrying editor metadata, unused definitions and absurd decimal precision — none of which affects how it looks.
Box Shadow vs Drop Shadow in CSS: What Actually Differs
Both add a shadow, both accept nearly identical values, and yet they behave completely differently the moment your element isn't a plain rectangle.
What Is DNS? How Domain Name Resolution Actually Works
Typing a domain name and getting a page back looks instant and simple — underneath it, a chain of independently operated servers just resolved a name into an address, and understanding that chain explains half the confusing DNS problems people run into.