Learn how to create favicons in ICO, PNG, and SVG formats. Cover multi-size ICO files, modern PNG favicons, SVG favicons, manifest.json, and Apple touch icons.
Free, in your browser — no signup, files auto-delete in 2 hours.
Favicons are the smallest design asset on your website, yet they appear in more places than almost any other element: browser tabs, bookmark lists, browser history, mobile home screens, Windows taskbar pins, and Progressive Web App launchers. A missing or poorly made favicon signals an unfinished site, while a sharp, well-implemented one reinforces brand recognition at every touchpoint.
Creating a proper favicon in 2026 means delivering multiple formats and sizes to satisfy every browser and platform. This guide walks you through the entire process, from designing the source image to implementing a complete favicon setup with ICO, PNG, SVG, and Apple touch icons.
Modern favicon implementation requires understanding three formats, each serving a different purpose.
The original favicon format, created by Microsoft. ICO files are unique because they can contain multiple sizes in a single file, allowing the operating system to pick the appropriate one.
| Characteristic | Detail |
|---|---|
| Typical Sizes | 16x16, 32x32, 48x48 |
| Color Depth | Up to 32-bit (8-bit alpha) |
| Compression | Optional PNG compression |
| Browser Support | Universal (all browsers) |
| Primary Use | Browser tab, Windows taskbar |
Modern browsers accept PNG favicons referenced through <link> tags. PNG favicons are simpler to create and offer excellent quality at specific sizes.
| Characteristic | Detail |
|---|---|
| Typical Sizes | 16x16, 32x32, 192x192, 512x512 |
| Color Depth | Up to 48-bit with alpha |
| Compression | Lossless DEFLATE |
| Browser Support | All modern browsers |
| Primary Use | Android, PWA, modern browsers |
SVG favicons are the newest option, scaling perfectly to any size and even supporting dark mode adaptation through CSS media queries.
| Characteristic | Detail |
|---|---|
| Sizes | Infinite (vector scales) |
| Color Depth | Full color with alpha |
| Compression | None needed (text-based) |
| Browser Support | Chrome, Firefox, Edge, Safari 15+ |
| Primary Use | Modern browsers, dark mode support |
For a deeper comparison of SVG and PNG formats, see our guide on SVG vs PNG: vector and raster graphics.
Here is the full set of files a properly configured website needs in 2026:
| File | Size | Format | Purpose |
|---|---|---|---|
| favicon.ico | 16x16 + 32x32 + 48x48 | ICO | Legacy browsers, Windows |
| favicon.svg | Scalable | SVG | Modern browsers, dark mode |
| apple-touch-icon.png | 180x180 | PNG | iOS home screen |
| icon-192.png | 192x192 | PNG | Android, PWA |
| icon-512.png | 512x512 | PNG | PWA splash screen |
| og-image.png | 1200x630 | PNG/JPG | Social media shares |
Pro Tip: You do not need 20 different favicon sizes like some generators suggest. The set above covers every meaningful use case in 2026. Older sizes like 57x57, 76x76, and 114x114 for legacy iOS are no longer necessary since iOS 9+.
Start with a high-resolution source image (at least 512x512 pixels). This will be scaled down for smaller sizes.
Design your favicon as a vector in Figma or Illustrator if possible. This gives you a native SVG file and allows clean scaling to any PNG size.
If you designed in a vector tool, export directly to SVG. If you have a PNG source, you can convert it using the SVG converter on ConvertIntoMP4, though results are best when starting from vector art.
One of SVG's unique advantages is CSS media query support. You can create a single SVG file that adapts to the user's color scheme:
<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 32 32">
<style>
.icon { fill: #1a1a2e; }
@media (prefers-color-scheme: dark) {
.icon { fill: #e0e0e0; }
}
</style>
<rect class="icon" width="32" height="32" rx="4"/>
<text x="16" y="24" font-size="20" text-anchor="middle" fill="white" font-weight="bold">C</text>
</svg>
This SVG changes its fill color automatically when the user switches to dark mode -- something no other favicon format can do.
Optimize your SVG to minimize file size:
npx svgo favicon.svg -o favicon.svg
SVGO removes unnecessary metadata, whitespace, and redundant attributes. A typical favicon SVG should be under 1 KB.
You need PNG files at three sizes: 180x180 (Apple touch icon), 192x192 (Android/PWA), and 512x512 (PWA splash).
magick source-512.png -resize 192x192 icon-192.png
magick source-512.png -resize 180x180 apple-touch-icon.png
const sharp = require("sharp");
const sizes = [
{ width: 180, name: "apple-touch-icon.png" },
{ width: 192, name: "icon-192.png" },
{ width: 512, name: "icon-512.png" },
];
for (const { width, name } of sizes) {
await sharp("source-512.png").resize(width, width).png({ quality: 100 }).toFile(name);
}
Upload your source image to the PNG converter and set the output dimensions. For multiple sizes, use the image converter with batch processing.
Pro Tip: For the Apple touch icon (180x180), add a subtle background color if your logo is on a transparent background. iOS does not render transparency on the home screen -- it fills transparent areas with black, which can look unintended.
ICO files bundle multiple sizes into one file. You need 16x16, 32x32, and 48x48 at minimum.
magick source-512.png -define icon:auto-resize=48,32,16 favicon.ico
This single command creates an ICO file containing all three sizes, each optimally scaled from your source image.
from PIL import Image
img = Image.open('source-512.png')
img.save('favicon.ico', sizes=[(16, 16), (32, 32), (48, 48)])
ConvertIntoMP4's image converter can convert PNG to ICO format with multi-size support.
To confirm your ICO contains the right sizes:
identify favicon.ico
You should see output listing each embedded size:
favicon.ico[0] ICO 48x48
favicon.ico[1] ICO 32x32
favicon.ico[2] ICO 16x16
With all files created, add the following to the <head> of every page on your site:
<!-- Favicon ICO (legacy support) -->
<link rel="icon" href="/favicon.ico" sizes="48x48" />
<!-- Favicon SVG (modern browsers, dark mode) -->
<link rel="icon" href="/favicon.svg" type="image/svg+xml" />
<!-- Apple Touch Icon -->
<link rel="apple-touch-icon" href="/apple-touch-icon.png" />
<!-- Web App Manifest -->
<link rel="manifest" href="/manifest.json" />
Browsers read <link> tags in order and use the last compatible match. Placing the SVG after the ICO ensures modern browsers use SVG while legacy browsers fall back to ICO.
If you are using Next.js with the App Router, place favicon files in the app/ directory:
app/
favicon.ico
icon.svg
apple-icon.png
Next.js automatically generates the appropriate <link> tags. You can also use the metadata export:
import type { Metadata } from "next";
export const metadata: Metadata = {
icons: {
icon: [
{ url: "/favicon.ico", sizes: "48x48" },
{ url: "/favicon.svg", type: "image/svg+xml" },
],
apple: "/apple-touch-icon.png",
},
};
The manifest.json (or manifest.webmanifest) file tells browsers about your Progressive Web App, including which icons to use.
{
"name": "Your App Name",
"short_name": "App",
"icons": [
{
"src": "/icon-192.png",
"sizes": "192x192",
"type": "image/png"
},
{
"src": "/icon-512.png",
"sizes": "512x512",
"type": "image/png"
}
],
"theme_color": "#1a1a2e",
"background_color": "#ffffff",
"display": "standalone"
}
Android can apply different icon masks (circle, squircle, rounded square) depending on the device. To support this, create a "maskable" version of your icon with extra padding:
{
"src": "/icon-512-maskable.png",
"sizes": "512x512",
"type": "image/png",
"purpose": "maskable"
}
Maskable icons should have your design centered within the inner 80% of the canvas, with a solid background color filling the outer area.
Open your site in Chrome, Firefox, Safari, and Edge. Check that the favicon appears correctly in each browser tab.
Bookmark your page in each browser and verify the favicon appears in the bookmarks bar.
On iOS, use "Add to Home Screen" from Safari. On Android, use "Add to Home Screen" from Chrome. Verify your touch icons appear correctly.
If your site is a PWA, trigger the install prompt and verify the icon appears correctly during and after installation.
| Tool | What It Tests |
|---|---|
| realfavicongenerator.net | Comprehensive multi-platform preview |
| Chrome DevTools (Application tab) | Manifest, icons, PWA status |
| Lighthouse | PWA icon requirements |
| Favicon checker extensions | Quick tab icon verification |
<link> tag matches the actual file location.ico as image/x-icon and .svg as image/svg+xml@media (prefers-color-scheme: dark)<style> tagiOS fills transparent areas with black. Add a solid background color to your apple-touch-icon.png to avoid this.
Favicons affect SEO indirectly through brand recognition and user trust:
/favicon.ico), which can clutter analyticsGoogle's requirements for search result favicons:
For more on image optimization for search engines, see our guide on the best image format for web and SEO.
For teams that need to generate favicons as part of a build pipeline, here is a complete Node.js script:
const sharp = require("sharp");
const { execSync } = require("child_process");
const fs = require("fs");
async function generateFavicons(sourceImage) {
// Generate PNG sizes
const pngSizes = [
{ size: 180, name: "apple-touch-icon.png" },
{ size: 192, name: "icon-192.png" },
{ size: 512, name: "icon-512.png" },
{ size: 32, name: "favicon-32.png" },
{ size: 16, name: "favicon-16.png" },
];
for (const { size, name } of pngSizes) {
await sharp(sourceImage).resize(size, size).png().toFile(`public/${name}`);
console.log(`Generated ${name}`);
}
// Generate ICO (requires ImageMagick)
execSync(`magick public/favicon-16.png public/favicon-32.png public/favicon-48.png favicon.ico`);
console.log("Generated favicon.ico");
// Generate manifest.json
const manifest = {
name: "Your App",
short_name: "App",
icons: [
{ src: "/icon-192.png", sizes: "192x192", type: "image/png" },
{ src: "/icon-512.png", sizes: "512x512", type: "image/png" },
],
theme_color: "#1a1a2e",
background_color: "#ffffff",
display: "standalone",
};
fs.writeFileSync("public/manifest.json", JSON.stringify(manifest, null, 2));
console.log("Generated manifest.json");
}
generateFavicons("source-logo.png");
Keep your favicons lean:
| File | Target Size |
|---|---|
| favicon.ico | Under 15 KB |
| favicon.svg | Under 2 KB |
| apple-touch-icon.png | Under 20 KB |
| icon-192.png | Under 15 KB |
| icon-512.png | Under 50 KB |
If your files exceed these targets, run them through the image compressor to optimize without visible quality loss.
A complete favicon implementation in 2026 requires just five files: favicon.ico, favicon.svg, apple-touch-icon.png, icon-192.png, and icon-512.png. Combined with a manifest.json, this set covers every browser, operating system, and device your users might have.
Start with a clean vector design, generate all sizes from a single high-resolution source, and test across platforms before shipping. Use the PNG converter and SVG converter on ConvertIntoMP4 to prepare your source files, and refer to our SVG vs PNG guide if you are deciding between vector and raster approaches for your brand assets.
For more web image optimization techniques, check out our articles on optimizing images for websites and the best image format for web and SEO.
Alex Thompson
Software engineer and content creator focused on web technologies, image optimization, and developer tooling.