How to Create a Favicon for Your Website (Free Generator)
TL;DR
Learn what a favicon is, what sizes you need, and how to create one for free. Generate all favicon sizes from one image with Morphkit's free favicon generator.
That tiny icon next to your website's name in the browser tab? It's called a favicon. Short for "favorite icon," it's one of the smallest design elements on your site and one of the most visible. It shows up in browser tabs, bookmark lists, mobile home screens, and even Google search results on mobile.
If your site doesn't have one, visitors see a generic globe or blank square instead.
This guide covers what sizes to create, which file formats to use, and how to add favicons to your site. If you want to skip the reading and just make one, Morphkit's Favicon Generator creates all the sizes you need from a single image.
What Is a Favicon?
A favicon is a small square icon that represents your website. Browsers first supported them in 1999. Today they appear in:
- Browser tabs
- Bookmark bars and reading lists
- Mobile home screens
- Google search results on mobile
- PWA install screens
Why Favicons Matter
Branding. Your favicon is your logo at thumbnail scale. When someone has a dozen tabs open, it's the only thing identifying your site.
Trust. A polished icon signals that someone cares about the details.
PWA and mobile. When someone adds your site to their phone home screen, the icon comes from your favicon files.
Favicon Sizes You Need
| Size | Format | Used By |
|---|---|---|
| 16x16 | .ico or .png | Browser tabs |
| 32x32 | .ico or .png | High-DPI screens, taskbar |
| 180x180 | .png | Apple Touch icon |
| 192x192 | .png | Android Chrome, PWA |
| 512x512 | .png | PWA splash screen |
Start with one 512x512 image and generate all smaller sizes from it.
File Formats: ICO vs. PNG vs. SVG
ICO is the original format, holds multiple sizes. Keep one at your root for compatibility. PNG is the modern standard with transparency support. SVG scales to any size and can respond to dark mode via CSS media queries.
How to Create a Favicon with Morphkit
- Prepare a square source image (512x512+)
- Upload to the Favicon Generator
- Preview at each size
- Download the ZIP with all sizes and HTML code
The whole process takes about 30 seconds. No account needed.
How to Add a Favicon to Your Website
Add these inside your HTML <head> section:
<link rel="icon" type="image/x-icon" href="/favicon.ico">
<link rel="icon" type="image/png" sizes="32x32" href="/favicon-32x32.png">
<link rel="apple-touch-icon" sizes="180x180" href="/apple-touch-icon.png">
<link rel="manifest" href="/site.webmanifest">
While editing your <head>, check your other meta tags with the Meta Tag Generator and Open Graph Tag Generator.
Tips for Designing a Good Favicon
- Keep it simple (one shape or letter)
- Use strong contrast for both light and dark themes
- Test at actual 16x16 size
- Consider transparent backgrounds
- Use your brand color
Common Mistakes
- Using your full logo with wordmark (unreadable at 16px)
- Forgetting the Apple Touch Icon
- Using only one size
- Ignoring dark mode
- Skipping the webmanifest
Open the Morphkit Favicon Generator, upload your image, and download the complete package. Everything runs in your browser.