How-To
Beginner
1 min read
165 words
How to Create a Favicon from an Image
Convert any image into a proper favicon for your website. Learn the required sizes, formats, and HTML markup for modern favicon implementation across browsers and devices.
Key Takeaways
- A complete favicon setup requires multiple sizes and formats to support browser tabs, bookmarks, home screen icons, and PWA installations.
- <link rel="icon" href="/favicon.ico" sizes="32x32">
- Simplify the design — favicons must be readable at 16x16 pixels 3.
Featured Tool
Изменение размера изображения
Изменение размера изображений.
Modern Favicon Requirements
A complete favicon setup requires multiple sizes and formats to support browser tabs, bookmarks, home screen icons, and PWA installations. The minimum set includes ICO, SVG, and PNG files.
Required Files
| File | Size | Purpose |
|---|---|---|
| favicon.ico | 32x32 | Browser tabs, legacy |
| icon.svg | Any | Modern browsers (scalable) |
| apple-touch-icon.png | 180x180 | iOS home screen |
| icon-192.png | 192x192 | Android, PWA |
| icon-512.png | 512x512 | PWA splash screen |
Step-by-Step Process
- Start with a square source image (512x512 minimum)
- Simplify the design — favicons must be readable at 16x16 pixels
- Generate PNG versions at 192x192 and 512x512
- Convert the 32x32 version to ICO format
- Create an SVG version for crisp rendering at any size
- Add the HTML link tags to your page head
HTML Markup