Fix Favicon & Social Preview (Safari, iOS, Open Graph, PWA)

Job Description

We’re looking for an experienced front-end / web developer to properly configure and resolve favicon and link preview issues across browsers and social platforms.

This is a technical debugging task requiring deep understanding of browser behavior, Open Graph metadata, and PWA configuration.

🔎 Current Situation

• ✅ Favicon is correctly recognized by Google Search and Safari
• ❌ Some link preview tools (e.g., AllMyLinks and other social preview platforms) fail to detect it
• ❌ These platforms default to showing the PWA icon
• ❗ We need a separate social favicon from the one used in Google & Safari

🎯 Objective

1. Properly configure favicon hierarchy:
   • Standard favicon (.ico)
   • PNG variants
   • Apple touch icon
   • Mask icon (Safari pinned tabs)
   • PWA manifest icon
2. Implement correct:
   • Open Graph (og:image)
   • Twitter Card metadata
   • Proper link rel configurations
   • Correct MIME types
   • Cache invalidation strategy
3. Ensure:
   • Social preview tools show the correct icon
   • Browsers continue displaying the correct favicon
   • PWA icon remains functional
   • iOS home screen icon works properly
   • No fallback to incorrect icon versions

🛠 Required Experience

You should be comfortable with:

• Open Graph & social metadata standards
• PWA manifest configuration
• Safari-specific behavior (mask-icon, apple-touch-icon)
• iOS caching quirks
• Cross-browser favicon loading logic
• Debugging with:
  • Facebook Sharing Debugger
  • Twitter Card Validator
  • OpenGraph.xyz
  • Lighthouse
  • Curl header inspection

Bonus:

• Experience resolving CDN caching issues
• Experience with Next.js / React head configuration
• Understanding of how crawlers parse HTML

📦 Deliverables

• Correct favicon configuration across all environments
• Separate and working social preview image
• Clean head implementation
• Documentation of what was changed and why
• Confirmation tested across major preview tools