Favicon Generator

Generate favicon set from uploaded image

PWA STANDALONE READY

5 Target Resolutions

App Branding & Monogram Specifications

Full Application Name:

Short Name (Home Screen):

Monogram (1-2 chars):

Theme Color:

Background Color:

Icon Geometry Shape:

Browser & OS Real-Time Preview

Desktop Browser Tab:

Next DevUtilities

Mobile App Launcher:

DevUtils

PWA Web App

HTML5 Standard Favicon & Apple Touch Link Tags

<!-- Standard Favicons -->
<link rel="icon" type="image/x-icon" href="/favicon.ico" />
<link rel="icon" type="image/png" sizes="32x32" href="/favicon-32x32.png" />
<link rel="icon" type="image/png" sizes="16x16" href="/favicon-16x16.png" />

<!-- Apple Touch Icon (iOS) -->
<link rel="apple-touch-icon" sizes="180x180" href="/apple-touch-icon.png" />

<!-- Web App Manifest (Android PWA) -->
<link rel="manifest" href="/site.webmanifest" />
<meta name="theme-color" content="#10b981" />

Next.js 16 App Router Metadata Definition

// Next.js 16 App Router Metadata
export const metadata = {
  title: "Next DevUtilities",
  icons: {
    icon: [
      { url: '/favicon.ico' },
      { url: '/favicon-16x16.png', sizes: '16x16', type: 'image/png' },
      { url: '/favicon-32x32.png', sizes: '32x32', type: 'image/png' },
    ],
    apple: [
      { url: '/apple-touch-icon.png', sizes: '180x180', type: 'image/png' },
    ],
  },
  manifest: '/manifest.webmanifest',
};

Web App Manifest (manifest.webmanifest / site.webmanifest)

{
  "name": "Next DevUtilities",
  "short_name": "DevUtils",
  "icons": [
    {
      "src": "/android-chrome-192x192.png",
      "sizes": "192x192",
      "type": "image/png"
    },
    {
      "src": "/android-chrome-512x512.png",
      "sizes": "512x512",
      "type": "image/png"
    }
  ],
  "theme_color": "#10b981",
  "background_color": "#0f172a",
  "display": "standalone"
}