How to Create a Favicon From Any Image
Every website needs a favicon — that tiny icon in the browser tab. Here's how to make one from any image in seconds.
Quick Answer
Upload any image to the free favicon generator at dotsapps.com. It creates favicons in all required sizes (16×16, 32×32, 48×48, and more). Download and add them to your website.
What Is a Favicon and Why Does It Matter?
A favicon is the small icon shown in browser tabs, bookmarks, and search results next to your website name. It is usually 16×16 or 32×32 pixels.
Favicons matter because they help users recognize your site in crowded tab bars and bookmark lists. A missing favicon makes your site look unfinished or untrustworthy.
Modern browsers and devices use multiple favicon sizes. You need 16×16 for tabs, 32×32 for retina tabs, 180×180 for Apple devices, and 192×192 for Android devices.
How to Make a Favicon From a Logo or Image
Open the favicon generator at dotsapps.com. Upload your source image — it can be a logo, icon, or any square image.
The tool automatically creates all the sizes you need. Preview how each size looks. Small favicons (16×16) need simple designs — complex logos become unreadable at that size.
Tips for good favicons:
- Start with a square image (1:1 ratio).
- Use a simple design — one letter, one shape, or a simplified logo mark.
- Use bold colors that stand out against both light and dark browser themes.
- Avoid tiny text — it will not be readable at 16 pixels.
How to Add a Favicon to Your Website
After downloading your favicon files, add them to your website's root directory. Then add these lines to the <head> section of your HTML:
<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">
If you have an ICO file, you can also use:
<link rel="icon" href="/favicon.ico">
ICO files can contain multiple sizes in one file, making them convenient for simple setups.
Favicon Sizes You Need for 2024
Here are all the favicon sizes modern browsers and devices expect:
- 16×16 — Standard browser tab icon
- 32×32 — Retina browser tab, taskbar
- 48×48 — Windows desktop shortcut
- 180×180 — Apple Touch icon (iPhone/iPad home screen)
- 192×192 — Android Chrome home screen
- 512×512 — Progressive Web App (PWA) splash screen
The favicon generator creates all of these from your single source image.
How to Do It: Step-by-Step
- 1
Open the free Favicon Generator at dotsapps.com.
- 2
Upload a square image or logo (PNG or SVG works best).
- 3
Preview the generated favicons at different sizes.
- 4
Download the favicon files (ICO, PNG, or all sizes).
- 5
Add the favicon link tags to your website's HTML head section.
Frequently Asked Questions
What is the best image format for a favicon?
PNG for modern browsers, ICO for maximum compatibility (including older browsers). SVG favicons are also supported in modern browsers and scale perfectly.
What size should my source image be?
At least 512×512 pixels and square (1:1 ratio). The tool will scale it down to all needed sizes. Starting larger gives sharper results.
Why is my favicon not showing up?
Common causes: wrong file path in the link tag, browser cache (try hard refresh with Ctrl+Shift+R), or the favicon file is not in the website's root directory.
Can I use a JPEG as a favicon?
It is possible but not recommended. JPEG does not support transparency. Convert to PNG first for best results.
Ready to Try It?
Favicon Generator is free, private, and works right in your browser. No sign-up needed.
Open Favicon Generator