Enhancement: Update default favicon with project logo

[Shubham-Rajpoot]

Description:

The current favicon displayed in the app is the default Next.js (or Vercel) favicon and name also . To make the project look more branded and professional, it should be replaced with a custom project logo favicon.

Image :

Labels:
enhancement UI/UX good first issue hacktoberfest

[Shubham-Rajpoot]

Message:
Hey @kris70lesgo , I noticed the project still uses the default Next.js favicon. I’d like to update it with our custom logo for better branding. Please assign this issue to me.

[kris70lesgo]

@Shubham-Rajpoot can u resolve this issue with #36 ?

[Shubham-Rajpoot]

Yes, Will resolve both the issues #36 and #37.

[durdana3105]

Hi team! 👋

I'd like to contribute to this enhancement and replace the default Next.js favicon with the custom AsHelp project logo. I'm interested in being assigned to this issue!

🎯 What I'll Do:

Replace Default Favicon

Remove the default Next.js/Vercel favicon

Replace with custom AsHelp logo in multiple formats

Ensure favicon displays correctly across all browsers and devices

Generate Multiple Favicon Formats
I'll create and implement:

favicon.ico - Classic favicon format (16x16, 32x32, 64x64)

favicon-192x192.png - Android home screen icon

favicon-512x512.png - High-resolution version

apple-touch-icon.png - iOS/Safari home screen icon (180x180)

site.webmanifest - Web manifest for PWA support

Update HTML Head Configuration
In src/app/layout.tsx:

Add favicon link tags

Configure manifest.json

Set theme color

Ensure proper favicon caching headers

Browser & Device Compatibility

Desktop browsers (Chrome, Firefox, Safari, Edge)

Mobile browsers (Chrome, Safari, Samsung Internet)

iOS home screen (Apple touch icon)

Android home screen (Web manifest icons)

Windows favicons

macOS favicons

Implementation Details

Files to be modified:

src/app/layout.tsx - Add favicon meta tags

public/favicon.ico - Replace default favicon

public/manifest.json - Create/update web manifest

Meta tags to add:

Documentation

Document favicon implementation in README

Provide instructions for future favicon updates

Include favicon specifications and sizes

📋 Implementation Checklist:

Create favicon.ico with multiple sizes (16, 32, 64)

Generate PNG versions (192x192, 512x512, apple-touch-icon)

Create/update manifest.json for PWA support

Update layout.tsx with proper favicon links

Test favicon display in all major browsers

Test favicon on mobile devices (iOS & Android)

Verify caching headers are correct

Update README with favicon specifications

🎨 Branding Integration:

Use the existing AsHelp logo from public/logo.png

Maintain consistent branding across all sizes

Ensure logo is recognizable at small sizes (16x16)

Keep brand colors consistent with the design system

✅ Testing Plan:

Local Testing

Test in Chrome, Firefox, Safari, Edge

Clear browser cache between tests

Test favicon in tabs and bookmarks

Mobile Testing

Add to home screen on iOS (check for apple-touch-icon)

Add to home screen on Android (check PWA icon)

Verify icon appearance

Browser Tools

Use browser DevTools to inspect favicon links

Check manifest.json validity

Verify no console errors related to favicons

📦 Deliverables:

favicon.ico (multiple sizes)

favicon-192x192.png

favicon-512x512.png

apple-touch-icon.png

manifest.json (updated/created)

layout.tsx (updated with favicon links)

Updated README with favicon info

🚀 Why This Matters:

Improves brand recognition and professionalism

Enhances user experience across browsers and devices

Makes the app look polished and production-ready

Essential for PWA support

Better visual consistency across the platform

⏱️ Timeline:

I'm ready to start immediately and aim to complete this within 2-3 days with the following phases:

Day 1: Generate favicon assets and update configuration

Day 2: Testing across browsers and devices

Day 3: Documentation and PR submission

Could you please assign this issue to me? I'm committed to delivering a complete favicon implementation that enhances the AsHelp brand! 🎨

Looking forward to your response!

P.S. I'm familiar with Next.js and web manifest standards. I'll ensure the implementation follows best practices and maintains consistency with the project's codebase.

[Shubham-Rajpoot]

Hey @durdana3105 I have already create a pull request and resolved this issue now :)