The Complete Guide to Favicons, App Icons & Social Images in Next.js (2026 Checklist)
🤖 Curious AI enthusiast and Software Engineer with 7+ years of experience. 🛠️ I enjoy getting my hands dirty with new technologies — experimenting, building side projects, and learning by doing. 🚀 Currently exploring how AI can enhance real-world web applications.
Whenever I start a new Next.js project, I always end up asking the same questions again:
What favicon sizes do I need?
What image size does Twitter use?
Where should icons go in Next.js App Router?
Do I need a maskable icon?
So I wrote this short checklist for my future self.
If I follow this post step-by-step, my app will have all required icons and social images.
This guide assumes:
Next.js App Router
icons placed in /app
metadata handled by Next.js metadata system
Next.js automatically detects files like favicon.ico, opengraph-image.png, and twitter-image.png when placed in the app folder and adds them to the page metadata automatically. (Next.js)
🖼️ 1. Start With One High-Resolution Logo
Always begin with a square PNG.
Recommended:
logo.png
1024 × 1024
transparent background
Everything else will be generated from this.
🌐 2. Favicons (Browser Tabs)
Favicons are still required for browser tabs and bookmarks.
The .ico format can contain multiple sizes inside a single file, allowing browsers to select the best resolution automatically. (Favicon.io)
Typical sizes inside favicon:
16×16
32×32
48×48
64×64
🔧 Tool I use
https://realfavicongenerator.net
Upload your logo and generate favicon.ico.
📁 Folder placement
/app
favicon.ico
Next.js automatically detects the file and adds it to <head>. (wisp.blog)
🔍 Test your favicon
Open your site in Chrome
Check the browser tab icon
Or verify using:
https://realfavicongenerator.net/favicon_checker
https://cards-dev.x.com/validator - For x.com
📱 3. PWA App Icons (Installable Apps)
These icons appear when a user installs your web app.
Minimum required sizes:
icon-192.png
icon-512.png
PWAs typically require 192×192 and 512×512 icons for installation and splash screens. (Stack Overflow)
Folder structure
/public
icon-192.png
icon-512.png
icon-maskable-512.png
Example manifest.js
export default function manifest() {
return {
name: "Your App",
short_name: "App",
start_url: "/",
display: "standalone",
icons: [
{
src: "/icon-192.png",
sizes: "192x192",
type: "image/png"
},
{
src: "/icon-512.png",
sizes: "512x512",
type: "image/png"
},
{
src: "/icon-maskable-512.png",
sizes: "512x512",
type: "image/png",
purpose: "maskable"
}
]
}
}
The manifest file defines how your web app behaves when installed and includes the icons used by devices. (MDN Web Docs)
🎨 4. Maskable Icons (Android Adaptive Icons)
Modern PWAs should also include maskable icons.
Android launchers crop icons into shapes (circle, squircle, etc.).
Maskable icons allow your icon to fill the entire shape correctly. (web.dev)
Add this icon:
/public
icon-maskable-512.png
Updated manifest entry
{
src: "/icon-maskable-512.png",
sizes: "512x512",
type: "image/png",
purpose: "maskable"
}
Recommended icon set:
icon-192.png
icon-512.png
icon-maskable-512.png
🔗 5. Social Sharing Images
These images appear when someone shares your site on:
Twitter / X
LinkedIn
Facebook
Slack
Discord
Next.js supports special file names for them.
opengraph-image.png
twitter-image.png
Next.js automatically detects these files when placed in the app folder. (Next.js)
Recommended size
This works across most social platforms.
opengraph-image.png-- 1200x630 pixelstwitter-image.png-- 1200x675 pixels
Folder structure
/app
opengraph-image.png
twitter-image.png
⚡ 6. Dynamic Social Images (My Favorite)
Instead of static images, I generate them dynamically.
Example:
/app/api/og/route.js
/app/api/twitter-card/route.js
Using:
ImageResponse from next/og
Next.js supports both static and dynamically generated OG images. (Next.js)
Benefits:
centralized branding
dynamic titles
dynamic backgrounds
easy updates
📂 Final Folder Structure
When everything is done, /app should look like this:
/app
favicon.ico
opengraph-image.png
twitter-image.png
manifest.js
✅ My Personal Icon Checklist
Whenever I launch a new project:
✔ favicon.ico
✔ icon-192.png
✔ icon-512.png
✔ icon-maskable-512.png
✔ opengraph-image.png (1200×630)
✔ twitter-image.png (1200×630)
That’s it.
No guessing.
No Googling again.
