How to Create a Favicon: ICO, PNG, and SVG Guide for 2026

The Tiny Image That Shapes Your Brand

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.

Favicon Formats Explained

Modern favicon implementation requires understanding three formats, each serving a different purpose.

ICO (Windows Icon)

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.

PNG (Portable Network Graphics)

Modern browsers accept PNG favicons referenced through <link> tags. PNG favicons are simpler to create and offer excellent quality at specific sizes.

SVG (Scalable Vector Graphics)

SVG favicons are the newest option, scaling perfectly to any size and even supporting dark mode adaptation through CSS media queries.

For a deeper comparison of SVG and PNG formats, see our guide on SVG vs PNG: vector and raster graphics.

What You Need: The Complete Favicon Set

Here is the full set of files a properly configured website needs in 2026:

Step 1: Design Your Source Image

Start with a high-resolution source image (at least 512x512 pixels). This will be scaled down for smaller sizes.

Design Guidelines

• Keep it simple -- At 16x16 pixels, details disappear. Favor bold shapes and high contrast.
• Use a square canvas -- Favicons are always square (browsers may round the corners).
• Test at small sizes -- Preview your design at 16x16 and 32x32 before finalizing.
• Avoid text -- Letters become unreadable below 32x32 unless it is a single character.
• Use your brand color -- The favicon should be instantly recognizable as your brand.
• Leave minimal padding -- The image should fill most of the square to maximize visibility.

Recommended Design Tools

• Figma -- Free, vector-based, exports to SVG and PNG
• Adobe Illustrator -- Vector design with precise control
• Inkscape -- Free, open-source vector editor
• GIMP -- Free raster editor for PNG creation
• Canva -- Simple drag-and-drop for non-designers

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.

Step 2: Create the SVG Favicon

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.

SVG Favicon with Dark Mode Support

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.

SVG Optimization

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.

Step 3: Create PNG Favicons

You need PNG files at three sizes: 180x180 (Apple touch icon), 192x192 (Android/PWA), and 512x512 (PWA splash).

Using ImageMagick

magick source-512.png -resize 192x192 icon-192.png
magick source-512.png -resize 180x180 apple-touch-icon.png

Using Sharp (Node.js)

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);
}

Using ConvertIntoMP4

Upload your source image to the PNG converter and set the output dimensions. For multiple sizes, use the image converter with batch processing.

Step 4: Create the ICO File

ICO files bundle multiple sizes into one file. You need 16x16, 32x32, and 48x48 at minimum.

Using ImageMagick

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.

Using Python (Pillow)

from PIL import Image

img = Image.open('source-512.png')
img.save('favicon.ico', sizes=[(16, 16), (32, 32), (48, 48)])

Using an Online Tool

ConvertIntoMP4's image converter can convert PNG to ICO format with multi-size support.

Verifying Your ICO File

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

Step 5: Implement in HTML

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" />

Order Matters

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.

In Next.js (App Router)

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",
  },
};

Step 6: Create the Web App Manifest

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"
}

Maskable Icons

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.

Testing Your Favicons

Browser Tab Test

Open your site in Chrome, Firefox, Safari, and Edge. Check that the favicon appears correctly in each browser tab.

Bookmark Test

Bookmark your page in each browser and verify the favicon appears in the bookmarks bar.

Mobile Home Screen Test

On iOS, use "Add to Home Screen" from Safari. On Android, use "Add to Home Screen" from Chrome. Verify your touch icons appear correctly.

PWA Install Test

If your site is a PWA, trigger the install prompt and verify the icon appears correctly during and after installation.

Common Testing Tools

Common Mistakes and How to Fix Them

Favicon Not Showing Up

1. Wrong file path -- Verify the path in your <link> tag matches the actual file location
2. Caching -- Hard refresh (Ctrl+Shift+R) or clear the browser cache
3. Missing MIME type -- Ensure your server serves .ico as image/x-icon and .svg as image/svg+xml

Blurry Favicon

1. Scaling issues -- Always start from a high-resolution source and scale down
2. Wrong format -- Use vector (SVG) where possible to avoid scaling blur
3. Anti-aliasing -- At 16x16, even slight anti-aliasing can look blurry. Consider pixel-snapping your design.

Dark Mode Not Working

1. Not using SVG -- Only SVG favicons support @media (prefers-color-scheme: dark)
2. Missing CSS -- The media query must be inside the SVG's <style> tag
3. Browser support -- Verify the target browser supports SVG favicons

Apple Touch Icon Has Black Background

iOS fills transparent areas with black. Add a solid background color to your apple-touch-icon.png to avoid this.

Favicon SEO Impact

Favicons affect SEO indirectly through brand recognition and user trust:

• Google displays favicons in mobile search results next to your site name
• A professional favicon increases click-through rates in search results
• Missing favicons generate 404 errors in server logs (from browsers requesting /favicon.ico), which can clutter analytics

Google's requirements for search result favicons:

• Must be a multiple of 48x48 pixels
• Must be square
• Should not contain inappropriate content
• Must be representative of the website

For more on image optimization for search engines, see our guide on the best image format for web and SEO.

Automated Favicon Generation

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");

Favicon File Sizes to Target

Keep your favicons lean:

If your files exceed these targets, run them through the image compressor to optimize without visible quality loss.

Wrapping Up

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.