Search for a command to run...
No comments yet. Be the first to comment.
While building My Project, one of the biggest challenges wasn't building the UI—it was deciding how to cache data correctly. I wanted my application to: ⚡ Feel instant while navigating 🔍 Remain SEO
Large AI coding assistants are impressive—but once your project grows, they start spending a lot of time searching files, consuming tokens, and sometimes missing important context. I recently started
When developers hear "Cloudflare," they often think of a CDN or image hosting. That's exactly what I thought at first. But after digging deeper while building my own project, I realized Cloudflare is
Why I Chose Cloudflare R2 Recently, I was building a simple e-commerce application called ShopSphere. The application needed to store: Product images Category banners User-uploaded documents Init
How to Connect Neon Database to pgAdmin 4 (Quick Reminder) I always forget the exact steps when connecting my Neon Postgres database to pgAdmin, so I'm writing this as a personal reminder. Step-by-Ste
Akash Blog
15 posts
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)
Always begin with a square PNG.
Recommended:
logo.png
1024 × 1024
transparent background
Everything else will be generated from this.
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
https://realfavicongenerator.net
Upload your logo and generate favicon.ico.
/app
favicon.ico
Next.js automatically detects the file and adds it to <head>. (wisp.blog)
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
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)
/public
icon-192.png
icon-512.png
icon-maskable-512.png
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)
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
{
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
These images appear when someone shares your site on:
Twitter / X
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)
This works across most social platforms.
opengraph-image.png -- 1200x630 pixels
twitter-image.png -- 1200x675 pixels
/app
opengraph-image.png
twitter-image.png
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
When everything is done, /app should look like this:
/app
favicon.ico
opengraph-image.png
twitter-image.png
manifest.js
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.