feat(website): enhance web app support and icon metadata

- Add PWA-compatible icons in multiple sizes:
  - android-chrome-192x192.png
  - android-chrome-512x512.png
  - apple-touch-icon.png
  - favicon-16x16.png
  - favicon-32x32.png
- Modernize favicon handling:
  - Update favicon.ico
  - Remove deprecated favicon.png and favicon.svg
- Add site.webmanifest for better PWA integration
- Update metadata to reflect total icon count across pages

web/src/app/icons/[icon]/page.tsx

@@ -30,16 +30,26 @@ export async function generateMetadata({ params, searchParams }: Props, parent:
 	const authorData = await getAuthorData(iconsData[icon].update.author.id)
 	const authorName = authorData.name || authorData.login
 	const updateDate = new Date(iconsData[icon].update.timestamp)
+	const totalIcons = Object.keys(iconsData).length
 
 	console.debug(`Generated metadata for ${icon} by ${authorName} (${authorData.html_url}) updated at ${updateDate.toLocaleString()}`)
 
 	const iconImageUrl = `${BASE_URL}/png/${icon}.png`
 	const pageUrl = `${BASE_URL}/icons/${icon}`
+	const formattedIconName = icon.split('-').map(word => word.charAt(0).toUpperCase() + word.slice(1)).join(' ')
 
 	return {
-		title: `${icon} icon · Dashboard Icons`,
-		description: `Download and use the ${icon} icon from Dashboard Icons for your applications`,
-		keywords: [`${icon} icon`, "dashboard icon", "free icon", "open source icon", "application icon"],
+		title: `${formattedIconName} Icon | Dashboard Icons`,
+		description: `Download the ${formattedIconName} icon in SVG, PNG, and WEBP formats. Part of a collection of ${totalIcons} curated icons for services, applications and tools, designed specifically for dashboards and app directories.`,
+		keywords: [
+			`${formattedIconName} icon`,
+			"dashboard icon",
+			"service icon",
+			"application icon",
+			"tool icon",
+			"web dashboard",
+			"app directory",
+		],
 		authors: [
 			{
 				name: "homarr",
@@ -51,8 +61,8 @@ export async function generateMetadata({ params, searchParams }: Props, parent:
 			},
 		],
 		openGraph: {
-			title: `${icon} icon · Dashboard Icons`,
-			description: `Download and use the ${icon} icon from Dashboard Icons for your applications`,
+			title: `${formattedIconName} Icon | Dashboard Icons`,
+			description: `Download the ${formattedIconName} icon in SVG, PNG, and WEBP formats. Part of a collection of ${totalIcons} curated icons for services, applications and tools, designed specifically for dashboards and app directories.`,
 			type: "article",
 			url: pageUrl,
 			images: [
@@ -60,7 +70,7 @@ export async function generateMetadata({ params, searchParams }: Props, parent:
 					url: iconImageUrl,
 					width: 512,
 					height: 512,
-					alt: `${icon} icon`,
+					alt: `${formattedIconName} Icon`,
 					type: "image/png",
 				},
 				...previousImages,
@@ -71,10 +81,10 @@ export async function generateMetadata({ params, searchParams }: Props, parent:
 		},
 		twitter: {
 			card: "summary_large_image",
-			title: `${icon} icon · Dashboard Icons`,
-			description: `Download and use the ${icon} icon from Dashboard Icons for your applications`,
+			title: `${formattedIconName} Icon | Dashboard Icons`,
+			description: `Download the ${formattedIconName} icon in SVG, PNG, and WEBP formats. Part of a collection of ${totalIcons} curated icons for services, applications and tools, designed specifically for dashboards and app directories.`,
 			images: [iconImageUrl],
-			creator: "@ajnavocado",
+			creator: "@homarr_app",
 		},
 		alternates: {
 			canonical: pageUrl,

web/src/app/icons/page.tsx

@@ -3,34 +3,48 @@ import { getIconsArray } from "@/lib/api"
 import type { Metadata } from "next"
 import { IconSearch } from "./components/icon-search"
 
-export const metadata: Metadata = {
-	title: "Browse icons | Dashboard Icons",
-	description: "Search and browse through our collection of beautiful dashboard icons for your applications",
-	keywords: ["dashboard icons", "browse icons", "icon search", "free icons", "open source icons"],
-	openGraph: {
-		title: "Browse Dashboard Icons Collection",
-		description: "Search and browse through our collection of beautiful dashboard icons for your applications",
-		type: "website",
-		url: `${BASE_URL}/icons`,
-		images: [
-			{
-				url: "/og-image-browse.png",
-				width: 1200,
-				height: 630,
-				alt: "Browse Dashboard Icons",
-				type: "image/png",
-			},
+export async function generateMetadata(): Promise<Metadata> {
+	const icons = await getIconsArray()
+	const totalIcons = icons.length
+
+	return {
+		title: "Browse Icons | Dashboard Icons",
+		description: `Search and browse through our collection of ${totalIcons} curated icons for services, applications and tools, designed specifically for dashboards and app directories.`,
+		keywords: [
+			"browse icons",
+			"dashboard icons",
+			"icon search",
+			"service icons",
+			"application icons",
+			"tool icons",
+			"web dashboard",
+			"app directory",
 		],
-	},
-	twitter: {
-		card: "summary_large_image",
-		title: "Browse Dashboard Icons Collection",
-		description: "Search and browse through our collection of beautiful dashboard icons for your applications",
-		images: ["/og-image-browse.png"],
-	},
-	alternates: {
-		canonical: `${BASE_URL}/icons`,
-	},
+		openGraph: {
+			title: "Browse Dashboard Icons Collection",
+			description: `Search and browse through our collection of ${totalIcons} curated icons for services, applications and tools, designed specifically for dashboards and app directories.`,
+			type: "website",
+			url: `${BASE_URL}/icons`,
+			images: [
+				{
+					url: "/og-image-browse.png",
+					width: 1200,
+					height: 630,
+					alt: "Browse Dashboard Icons Collection",
+					type: "image/png",
+				},
+			],
+		},
+		twitter: {
+			card: "summary_large_image",
+			title: "Browse Dashboard Icons Collection",
+			description: `Search and browse through our collection of ${totalIcons} curated icons for services, applications and tools, designed specifically for dashboards and app directories.`,
+			images: ["/og-image-browse.png"],
+		},
+		alternates: {
+			canonical: `${BASE_URL}/icons`,
+		},
+	}
 }
 
 export const dynamic = "force-static"