# The Complete Guide to Favicons, App Icons & Social Images in Next.js (2026 Checklist) 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](https://nextjs.org/docs/app/api-reference/file-conventions/metadata/opengraph-image?utm_source=chatgpt.com)) * * * ## πŸ–ΌοΈ 1. Start With One High-Resolution Logo Always begin with a square PNG. Recommended: ```plaintext 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](http://Favicon.io)) Typical sizes inside favicon: ```plaintext 16Γ—16 32Γ—32 48Γ—48 64Γ—64 ``` ### πŸ”§ Tool I use [https://realfavicongenerator.net](https://realfavicongenerator.net) [https://www.png2ico.com/](https://www.png2ico.com/) Upload your logo and generate `favicon.ico`. * * * ### πŸ“ Folder placement ```plaintext /app favicon.ico ``` Next.js automatically detects the file and adds it to ``. ([wisp.blog](http://wisp.blog)) * * * ### πŸ” Test your favicon 1. Open your site in Chrome 2. Check the browser tab icon Or verify using: [https://realfavicongenerator.net/favicon\_checker](https://realfavicongenerator.net/favicon_checker) [https://cards-dev.x.com/validator](https://cards-dev.x.com/validator) - For [x.com](https://x.com) * * * ## πŸ“± 3. PWA App Icons (Installable Apps) These icons appear when a user **installs your web app**. Minimum required sizes: ```plaintext icon-192.png icon-512.png ``` PWAs typically require **192Γ—192 and 512Γ—512 icons** for installation and splash screens. ([Stack Overflow](https://stackoverflow.com/questions/57662418/adaptive-icons-on-android-9-with-web-app-manifest?utm_source=chatgpt.com)) ### Folder structure ```plaintext /public icon-192.png icon-512.png icon-maskable-512.png ``` ### Example manifest.js ```plaintext 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](https://developer.mozilla.org/en-US/docs/Web/Progressive_web_apps/Manifest/Reference/icons?utm_source=chatgpt.com)) * * * ## 🎨 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](http://web.dev)) Add this icon: ```plaintext /public icon-maskable-512.png ``` ### Updated manifest entry ```plaintext { src: "/icon-maskable-512.png", sizes: "512x512", type: "image/png", purpose: "maskable" } ``` Recommended icon set: ```plaintext 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. ```plaintext opengraph-image.png twitter-image.png ``` Next.js automatically detects these files when placed in the `app` folder. ([Next.js](https://nextjs.org/docs/app/api-reference/file-conventions/metadata/opengraph-image?utm_source=chatgpt.com)) ### Recommended size This works across most social platforms. 1. `opengraph-image.png` -- **1200x630** pixels 2. `twitter-image.png` -- **1200x675** pixels * * * ### Folder structure ```plaintext /app opengraph-image.png twitter-image.png ``` * * * ## ⚑ 6. Dynamic Social Images (My Favorite) Instead of static images, I generate them dynamically. Example: ```plaintext /app/api/og/route.js /app/api/twitter-card/route.js ``` Using: ```plaintext ImageResponse from next/og ``` Next.js supports **both static and dynamically generated OG images**. ([Next.js](https://nextjs.org/docs/app/api-reference/file-conventions/metadata?utm_source=chatgpt.com)) Benefits: * centralized branding * dynamic titles * dynamic backgrounds * easy updates * * * ## πŸ“‚ Final Folder Structure When everything is done, `/app` should look like this: ```plaintext /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.