Platform Guide

Next.js Favicon Generator

Create perfect favicon for your Next.js app with all required sizes, app icons, and manifest.json in one click.

Next.js App Router Favicon System

Next.js 13+ with App Router uses a streamlined favicon system. Instead of manually managing multiple files, Next.js automatically generates the required formats from icon files in the app/ directory.

Browser Tabs

Your favicon appears in browser tabs, helping users identify your Next.js app when browsing multiple tabs.

Mobile App-like

With apple-icon.png and manifest.json, your Next.js app behaves like a native app on mobile devices.

Automatic Generation

Next.js automatically generates icon.png and favicon.ico from your icon.png file, simplifying setup.

Generate in 3 Simple Steps

Create your Next.js favicon package in under a minute.

Step 1

Upload Your Logo

Upload your Next.js project's logo or any high-resolution image. We support PNG, JPG, SVG, and other common formats.

Step 2

Auto-Generate Icons

Favicon Tools automatically generates all required favicon sizes and formats including app icons in seconds.

Step 3

Download & Add to Next.js

Download the favicon package and add files to your Next.js project following our setup instructions.

What You Get for Next.js

Favicon Tools generates every file Next.js App Router needs, following the latest Next.js conventions.

favicon.ico

Legacy favicon support

icon.png

Next.js App Router icon (16x16, 32x32, 96x96)

apple-icon.png

iOS home screen icons

manifest.json

Next.js PWA manifest configuration

Add to Next.js Project

After generating your favicon package, add files to your Next.js App Router project:

Add icon.png

Place icon.png (recommended: 512x512) in your app/ directory

Add apple-icon.png

Place apple-icon.png in your app/ directory for iOS home screen support

Add manifest.json

Place manifest.json in your app/ directory for PWA functionality

Optional: favicon.ico

Place favicon.ico in your public/ directory for legacy browser support

Example Next.js Directory Structure

Your Next.js project structure after adding favicon files:

app/
├── layout.tsx
├── page.tsx
├── icon.png          # Main icon (Next.js generates favicon.ico from this)
├── apple-icon.png    # iOS home screen icon
└── manifest.json     # PWA manifest

public/
└── favicon.ico        # Optional: Legacy support

Next.js Favicon Best Practices

Follow these guidelines for best results:

Use Square Source Images

Start with a square image (1:1 aspect ratio) at least 512x512 pixels for best quality across all sizes.

Follow Next.js App Router Conventions

Place icon.png and apple-icon.png in the app/ directory as recommended by Next.js 13+ for automatic generation.

Test PWA Functionality

After adding manifest.json, test PWA installation on mobile devices to ensure your Next.js app can be added to home screen.

Generate Next.js Favicon