Missing Images for PWA & SEO

The following images need to be created for full PWA and SEO functionality:

Favicon Set (Required)

• assets/images/favicon-32x32.png - 32×32px favicon
• assets/images/favicon-16x16.png - 16×16px favicon
• assets/images/apple-touch-icon.png - 180×180px Apple touch icon

PWA Icons (Required for site.webmanifest)

• assets/images/icon-192.png - 192×192px PWA icon
• assets/images/icon-512.png - 512×512px PWA icon

Social Sharing (Required for OG/Twitter cards)

• assets/images/og-image.jpg - 1200×630px Open Graph image
• assets/images/site-logo.png - 512×512px site logo (square)

Generation Instructions

Using bio-photo.jpg as source:

You can generate these from the existing assets/images/bio-photo.jpg:

# Install ImageMagick if needed
# brew install imagemagick  # macOS
# apt-get install imagemagick  # Linux

cd assets/images

# Favicon sizes
convert bio-photo.jpg -resize 32x32 favicon-32x32.png
convert bio-photo.jpg -resize 16x16 favicon-16x16.png

# Apple touch icon (with subtle background)
convert bio-photo.jpg -resize 180x180 -gravity center -background "#0597F2" -extent 180x180 apple-touch-icon.png

# PWA icons
convert bio-photo.jpg -resize 192x192 icon-192.png
convert bio-photo.jpg -resize 512x512 icon-512.png

# Square logo
convert bio-photo.jpg -resize 512x512 -gravity center -extent 512x512 site-logo.png

# OG image (add text overlay for better social sharing)
convert header-bg.jpg -resize 1200x630^ -gravity center -extent 1200x630 \
  -fill white -pointsize 60 -font Arial-Bold \
  -gravity northwest -annotate +50+50 "Suprasanna Sarkar" \
  -pointsize 30 -font Arial \
  -gravity northwest -annotate +50+130 "Data, Analytics & AI/ML Engineering Leader" \
  og-image.jpg

Using Online Tools (Alternative)

• Favicon Generator: https://realfavicongenerator.net/
• PWA Icon Generator: https://www.pwabuilder.com/imageGenerator
• OG Image: https://www.canva.com/ (template: 1200×630px)

Quick Placeholder (Testing Only)

For testing, you can temporarily copy bio-photo.jpg to all required filenames:

cd assets/images
for size in favicon-32x32.png favicon-16x16.png apple-touch-icon.png icon-192.png icon-512.png site-logo.png; do
  cp bio-photo.jpg "$size"
done
cp header-bg.jpg og-image.jpg

Verification

After creating images, verify references in:

• _config.yml - Check og_image, logo, favicon paths
• _includes/head/custom.html - Check favicon and icon links
• site.webmanifest - Check icon paths

Current Status

• ✅ Source images exist: bio-photo.jpg, header-bg.jpg, feature-*.jpg
• ❌ Missing: All favicon, PWA, and OG images listed above