diff --git a/CHANGELOG.md b/CHANGELOG.md
index 08baf69..1753fd5 100644
--- a/CHANGELOG.md
+++ b/CHANGELOG.md
@@ -1,3 +1,10 @@
+# [1.27.0](https://github.com/rodrigogs/whats-reader/compare/v1.26.1...v1.27.0) (2026-01-05)
+
+
+### Features
+
+* improve social media preview images with app logo ([f0c4c26](https://github.com/rodrigogs/whats-reader/commit/f0c4c268d18c7728ddcde4e8ab72b2f030464e7c))
+
## [1.26.1](https://github.com/rodrigogs/whats-reader/compare/v1.26.0...v1.26.1) (2026-01-05)
diff --git a/package-lock.json b/package-lock.json
index a0f6b91..34f19ed 100644
--- a/package-lock.json
+++ b/package-lock.json
@@ -1,12 +1,12 @@
{
"name": "whats-reader",
- "version": "1.26.1",
+ "version": "1.27.0",
"lockfileVersion": 3,
"requires": true,
"packages": {
"": {
"name": "whats-reader",
- "version": "1.26.1",
+ "version": "1.27.0",
"license": "AGPL-3.0",
"dependencies": {
"@floating-ui/dom": "^1.7.4",
diff --git a/package.json b/package.json
index 71dd852..93fd285 100644
--- a/package.json
+++ b/package.json
@@ -1,7 +1,7 @@
{
"name": "whats-reader",
"productName": "WhatsApp Backup Reader",
- "version": "1.26.1",
+ "version": "1.27.0",
"description": "A desktop app to read and visualize WhatsApp chat exports",
"license": "AGPL-3.0",
"author": {
diff --git a/scripts/generate-og-images.sh b/scripts/generate-og-images.sh
new file mode 100755
index 0000000..415463c
--- /dev/null
+++ b/scripts/generate-og-images.sh
@@ -0,0 +1,86 @@
+#!/bin/bash
+# Generate Open Graph images for social media sharing
+# Uses the actual app icon for a professional, recognizable look
+
+set -e
+
+SCRIPT_DIR="$(cd "$(dirname "${BASH_SOURCE[0]}")" && pwd)"
+PROJECT_ROOT="$(dirname "$SCRIPT_DIR")"
+STATIC_DIR="$PROJECT_ROOT/static"
+ICON="$STATIC_DIR/icon.png"
+
+# Verify icon exists
+if [ ! -f "$ICON" ]; then
+ echo "Error: icon.png not found at $ICON"
+ exit 1
+fi
+
+cd "$STATIC_DIR"
+
+# Colors (WhatsApp theme)
+BG_DARK="#075e54" # WhatsApp dark green (header/dark mode)
+BG_TEAL="#128C7E" # WhatsApp teal
+
+echo "Generating Open Graph images with app icon..."
+
+# =============================================================================
+# Main OG image (1200x630) - Facebook, LinkedIn, Discord, general
+# Layout: Gradient background, icon on left, text on right
+# =============================================================================
+magick -size 1200x630 \
+ -define gradient:direction=east \
+ "gradient:${BG_DARK}-${BG_TEAL}" \
+ \( "$ICON" -resize 280x280 \
+ \( +clone -background black -shadow 60x20+0+10 \) \
+ +swap -background none -layers merge +repage \
+ \) -gravity west -geometry +100+0 -composite \
+ -fill white \
+ -font "Helvetica-Bold" -pointsize 56 \
+ -gravity west -annotate +460-30 "WhatsApp" \
+ -annotate +460+40 "Backup Reader" \
+ -font "Helvetica" -pointsize 26 \
+ -fill "rgba(255,255,255,0.85)" \
+ -annotate +460+110 "Read your chat exports offline • Private & secure" \
+ og-image.png
+
+echo "✅ Created og-image.png (1200x630)"
+
+# =============================================================================
+# WhatsApp square image (800x800) - Avoids cropping on WhatsApp
+# Layout: Icon centered on top, text below
+# =============================================================================
+magick -size 800x800 \
+ -define gradient:direction=south \
+ "gradient:${BG_DARK}-${BG_TEAL}" \
+ \( "$ICON" -resize 260x260 \
+ \( +clone -background black -shadow 60x20+0+10 \) \
+ +swap -background none -layers merge +repage \
+ \) -gravity center -geometry +0-100 -composite \
+ -fill white \
+ -font "Helvetica-Bold" -pointsize 44 \
+ -gravity center -annotate +0+110 "WhatsApp" \
+ -annotate +0+165 "Backup Reader" \
+ -font "Helvetica" -pointsize 22 \
+ -fill "rgba(255,255,255,0.85)" \
+ -annotate +0+230 "Read your chats offline • Private & secure" \
+ og-image-square.png
+
+echo "✅ Created og-image-square.png (800x800)"
+
+# =============================================================================
+# Twitter/X image (copy of main, same dimensions work for Twitter cards)
+# =============================================================================
+cp og-image.png og-image-twitter.png
+echo "✅ Created og-image-twitter.png (copy of og-image.png)"
+
+# Show file sizes
+echo ""
+echo "📊 Generated images:"
+ls -lh og-image*.png
+
+echo ""
+echo "🎯 Usage:"
+echo " - og-image.png (1200x630): Facebook, LinkedIn, Discord"
+echo " - og-image-square.png (800x800): WhatsApp (avoids cropping)"
+echo ""
+echo "💡 Test at: https://developers.facebook.com/tools/debug/"
diff --git a/src/app.html b/src/app.html
index 8b4c0bb..2c5b206 100644
--- a/src/app.html
+++ b/src/app.html
@@ -23,7 +23,7 @@
-
+
@@ -31,8 +31,12 @@
-
+
+
+
+
+
@@ -40,7 +44,7 @@
-
+
diff --git a/static/og-image-square.png b/static/og-image-square.png
new file mode 100644
index 0000000..f432d01
Binary files /dev/null and b/static/og-image-square.png differ
diff --git a/static/og-image-twitter.png b/static/og-image-twitter.png
new file mode 100644
index 0000000..5ef448b
Binary files /dev/null and b/static/og-image-twitter.png differ
diff --git a/static/og-image.png b/static/og-image.png
index 4841180..5ef448b 100644
Binary files a/static/og-image.png and b/static/og-image.png differ