Next.js Favicon Setup: Generate favicon.ico from SVG

A single favicon.ico is enough for a basic launch. But if you want stable rendering across browser tabs, iOS home screen, PWA installs, and Google Search results, you should ship a complete icon set.

This guide follows a practical workflow: define required icon assets, generate them from SVG, and integrate them in Next.js.

What icon files do you actually need

A solid minimum setup includes these assets:

favicon.ico (compatibility fallback)
icon.svg or icon.png (modern browsers)
apple-icon.png (iOS home screen icon)
manifest (PWA metadata)
icon-192.png (manifest size)
icon-512.png (manifest size)

Practical workflow: from SVG to favicon set

1. Start with an SVG that stays readable at tiny sizes

Favicons are often rendered at 16x16 and 32x32. Optimize your source accordingly:

Keep the primary shape, remove tiny details.
Use high contrast.
Avoid ultra-thin strokes.

Preview quickly in SVG Viewer.

2. Generate `favicon.ico`

Use SVG to ICO:

Upload SVG
Select common sizes (16/32/48/64)
Export a single .ico file

This is the key capability of an SVG tool site: fast SVG-to-favicon production.

3. Generate `icon-192.png` and `icon-512.png`

Use SVG to PNG and export:

icon-192.png
icon-512.png

If needed, also export a dedicated apple-icon.png (commonly 180x180).

4. Optional: optimize before shipping

Run source assets through SVG Optimizer or SVG Minify for cleaner and lighter files.

Next.js App Router integration

Recommended structure:

app/
  favicon.ico
  icon.svg
  apple-icon.png
  manifest.ts
public/
  icon-192.png
  icon-512.png

app/manifest.ts example:

import type { MetadataRoute } from "next";

export default function manifest(): MetadataRoute.Manifest {
  return {
    name: "SVGView",
    short_name: "SVGView",
    description: "Online SVG tools for viewing, optimizing, and converting SVG files.",
    start_url: "/",
    display: "standalone",
    background_color: "#ffffff",
    theme_color: "#ffffff",
    icons: [
      {
        src: "/icon-192.png",
        sizes: "192x192",
        type: "image/png",
      },
      {
        src: "/icon-512.png",
        sizes: "512x512",
        type: "image/png",
      },
    ],
  };
}

Google favicon checks you should run before launch

This is implementation validation, not copywriting:

https://your-domain.com/favicon.ico returns 200
Icon paths are not blocked by robots.txt
Favicon is square and at least 8x8
Prefer sizes that are multiples of 48
Homepage HTML includes icon declaration (rel="icon")

With these in place, Google Search favicon updates usually appear after recrawl.

If your app is TanStack Start (like this project)

Use the same assets and declare links in root <head>:

<head>
  <link rel="icon" href="/favicon.ico" sizes="any" />
  <link rel="apple-touch-icon" href="/apple-icon.png" />
  <link rel="manifest" href="/manifest.webmanifest" />
</head>

FAQ

Is `favicon.ico` alone enough?

It is enough for a basic launch, but not for full platform coverage.

Why is Google still showing my old favicon?

Usually crawl/cache lag. Validate URL accessibility first, then wait for recrawl.

Should I pick `icon.svg` or `favicon.ico`?

You usually keep both: .ico fallback plus modern svg/png.

Next.js Favicon Setup: Generate favicon.ico from SVG