Add Favicon and Web App Manifest

[ghanshyam2005singh]

📌 Description

The project currently lacks a favicon, app icons, and a web app manifest. This results in poor branding visibility in browser tabs, missing icons on mobile devices, and no Progressive Web App (PWA) metadata.

This issue aims to add complete favicon support, device-specific app icons, and a web app manifest to improve branding consistency and future PWA readiness.

---

⚠️ Current State

• No favicon visible in browser tabs
• No app icons for mobile or desktop devices
• No manifest.json file
• Missing metadata in application layout

---

✅ Required Changes

1️⃣ Add Favicon & App Icon Assets

Generate and add the following files to the public/ directory:

public/
├── favicon.ico
├── favicon-16x16.png
├── favicon-32x32.png
├── apple-touch-icon.png
├── android-chrome-192x192.png
├── android-chrome-512x512.png
├── manifest.json

Icon sizes required:

• favicon.ico → 16x16, 32x32
• apple-touch-icon.png → 180x180
• android-chrome-192x192.png
• android-chrome-512x512.png

---

2️⃣ Create Web App Manifest

File: public/manifest.json

---

3️⃣ Update Application Metadata

Update layout.tsx (Next.js App Router) to include favicon and manifest links.

File: app/layout.tsx

---

🎯 Acceptance Criteria

• Favicon visible in browser tabs
• App icons appear correctly on mobile devices
• Web app manifest loads without errors
• Icons follow DevRhylme branding guidelines
• No console or Lighthouse warnings related to icons or manifest

---

🔗 Resources

• Use devrhylme.org favicon

---

📎 Additional Notes

• This issue lays groundwork for future PWA support
• Improves brand recognition and professionalism
• Should be verified on both desktop and mobile browsers

---