Featured Image Creator

Featured Image Creator

Create blog featured images as clean SVG graphics at 2400x1260px. Illustrations and icons tell the story, not text. Output is converted to PNG via rsvg-convert for WordPress.

Specs

Conversion Command

for f in *.svg; do rsvg-convert -f png -w 2400 -h 1260 -o "${f%.svg}.png" "$f"; done

Single file:

rsvg-convert -f png -w 2400 -h 1260 -o "output.png" "input.svg"

Illustration Library (Primary Visual Source)

Location

~/Icons/graphics-inspirations/

Available Collections

How to Use Illustrations

Illustrations are full SVG files with embedded <style> blocks using CSS classes (.st0, .st1, etc.) for colors. They have their own viewBoxes (commonly 0 0 156 156 or 0 0 600 600).

Embed using nested <svg> element to preserve the illustration's style scope:

<!-- Read the illustration file, strip the XML declaration and outer <svg> opening/closing -->
<!-- Then embed as a nested SVG with positioning -->
<svg x="600" y="80" width="1200" height="1100" viewBox="0 0 156 156">
  <style type="text/css">
    .st0{fill:#F7CFC6;}
    .st1{fill:#73504E;}
    <!-- ... all style classes from the illustration -->
  </style>
  <!-- All illustration paths/groups here -->
</svg>

Key embedding rules:

1. Read the illustration SVG file completely
2. Extract everything BETWEEN <svg ...> and </svg> (the inner content including <style>)
3. Wrap in a new <svg> element with x/y/width/height for positioning on the 2400x1260 canvas
4. The nested SVG's viewBox should match the original illustration's viewBox
5. Size the illustration to occupy ~60-80% of canvas height (750-1000px height)
6. Center horizontally, position slightly above vertical center

Illustration style notes:

• All illustrations use flat design with vibrant, consistent color palettes
• Colors include blues (#006BFF, #3BA2FB), greens (#00C491, #02A05A), pinks (#EE5271), yellows (#FFD700), and skin tones (#F7CFC6, #FAB19D)
• Character-centric scenes with professional themes
• Well-suited as hero visuals without color modification

Matching Illustrations to Topics

FontAwesome Icons (Local)

Location

~/Downloads/fontawesome-pro-6.4.2-desktop/svgs/

Categories

How to Use FontAwesome Icons

1. Read the SVG file to get the path data
2. Extract the <path d="..."> and viewBox from the file
3. Embed inline in your SVG using a <g> with transform for positioning and scaling

<!-- Example: embedding a FontAwesome icon -->
<g transform="translate(500, 400) scale(0.15)">
  <!-- Paste the path data from the .svg file -->
  <path d="M0 64C0 28.7 28.7 0 64 0L352..." fill="#2563eb"/>
</g>

Scaling Math

FontAwesome icons use large viewBoxes (typically 0 0 512 512 or 0 0 640 512). To get them to a target pixel size in the 2400x1260 canvas:

Formula: scale = target_size / icon_viewbox_width

Common Icons by Topic

Open-Source SVG Icons (Online)

When FontAwesome doesn't have what you need, use inline SVG paths from:

• Heroicons (MIT): Simple, clean outlines or solid fills
• Lucide (ISC): Fork of Feather Icons, consistent 24x24 grid
• Simple Icons (CC0): Brand/company logos
• Tabler Icons (MIT): 2px stroke, rounded caps

Embed the same way: extract <path> data, embed in <g> with transform.

Visual Styles

Pick one style per image based on article type. Do not mix styles.

Style 1: Floating Icons (Default)

Best for: Most blog articles, how-to guides, educational content.

Clean background gradient with 4-8 icons floating at different sizes, slight rotations, and varying opacities. The icons tell the story of the article topic.

Background: Subtle gradient (warm or cool), dot grid pattern for texture. Icons: Mixed sizes (60px to 250px), scattered composition, slight rotations (-15 to +15 degrees), varying opacity (0.4 to 1.0 for depth). Accents: Soft colored blobs behind icon clusters, decorative rings, thin connecting lines optional.

Depth techniques (REQUIRED for standout quality):

• Use 3 distinct depth layers: foreground (opacity 0.9-1.0, scale large), midground (0.6-0.8, scale medium), background (0.3-0.5, scale small)
• Background-layer icons should use a blur filter (feGaussianBlur stdDeviation="3") to simulate depth of field
• Foreground icons should have a drop shadow for elevation
• Add 1-2 decorative rings (unfilled circles with thin stroke) behind the hero icon cluster for visual interest
• Place accent dots (3-6px circles at 0.1-0.2 opacity) scattered between icons

<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 2400 1260">
  <defs>
    <linearGradient id="bg" x1="0%" y1="0%" x2="100%" y2="100%">
      <stop offset="0%" stop-color="#f0f9ff"/>
      <stop offset="100%" stop-color="#e0f2fe"/>
    </linearGradient>
    <filter id="shadow" x="-20%" y="-20%" width="140%" height="140%">
      <feDropShadow dx="0" dy="6" stdDeviation="12" flood-opacity="0.1"/>
    </filter>
    <filter id="bgBlur">
      <feGaussianBlur stdDeviation="3"/>
    </filter>
    <pattern id="dots" width="30" height="30" patternUnits="userSpaceOnUse">
      <circle cx="15" cy="15" r="1.5" fill="#94a3b8" opacity="0.15"/>
    </pattern>
  </defs>

  <!-- Background -->
  <rect width="100%" height="100%" fill="url(#bg)"/>
  <rect width="100%" height="100%" fill="url(#dots)"/>

  <!-- Accent blobs (soft, organic shapes) -->
  <ellipse cx="650" cy="450" rx="320" ry="260" fill="#dbeafe" opacity="0.35"/>
  <ellipse cx="1800" cy="800" rx="280" ry="220" fill="#c7d2fe" opacity="0.25"/>

  <!-- Decorative rings (behind hero icon) -->
  <circle cx="1100" cy="550" r="220" fill="none" stroke="#93c5fd" stroke-width="1.5" opacity="0.2"/>
  <circle cx="1100" cy="550" r="320" fill="none" stroke="#93c5fd" stroke-width="1" opacity="0.1"/>

  <!-- Accent dots scattered for texture -->
  <circle cx="380" cy="200" r="4" fill="#3b82f6" opacity="0.15"/>
  <circle cx="1900" cy="180" r="5" fill="#6366f1" opacity="0.12"/>
  <circle cx="2100" cy="900" r="6" fill="#3b82f6" opacity="0.1"/>
  <circle cx="300" cy="1000" r="4" fill="#8b5cf6" opacity="0.12"/>
  <circle cx="1500" cy="150" r="3" fill="#6366f1" opacity="0.15"/>

  <!-- BACKGROUND LAYER: small, blurred, low opacity -->
  <g filter="url(#bgBlur)">
    <g transform="translate(200, 180) scale(0.1) rotate(-8)" opacity="0.35">
      <path d="..." fill="#8b5cf6"/>
    </g>
    <g transform="translate(2050, 950) scale(0.1) rotate(10)" opacity="0.3">
      <path d="..." fill="#a78bfa"/>
    </g>
  </g>

  <!-- MIDGROUND LAYER: medium, partial opacity -->
  <g filter="url(#shadow)">
    <g transform="translate(500, 350) scale(0.22) rotate(8)" opacity="0.7">
      <path d="..." fill="#3b82f6"/>
    </g>
    <g transform="translate(1750, 350) scale(0.2) rotate(-10)" opacity="0.65">
      <path d="..." fill="#6366f1"/>
    </g>
    <g transform="translate(450, 750) scale(0.23) rotate(-10)" opacity="0.75">
      <path d="..." fill="#2563eb"/>
    </g>
  </g>

  <!-- FOREGROUND LAYER: hero, large, high opacity, strong shadow -->
  <g filter="url(#shadow)">
    <g transform="translate(1050, 500) scale(0.45) rotate(-5)" opacity="0.95">
      <path d="..." fill="#2563eb"/>
    </g>
    <g transform="translate(1850, 630) scale(0.2) rotate(6)" opacity="0.85">
      <path d="..." fill="#6366f1"/>
    </g>
  </g>
</svg>

Composition rules for floating icons:

• 1 large hero icon (180-250px) placed slightly off-center (rule of thirds)
• 2-3 midground icons (80-120px) distributed around
• 2-3 background icons (40-70px) filling gaps, lower opacity, slight blur
• Minimum 80px padding from canvas edges
• Vary rotation between -15 and +15 degrees
• Use 2-3 colors from the same palette, never rainbow
• Add decorative rings behind hero icon for visual depth
• Scatter 4-6 accent dots between icon clusters

Style 2: Icon Cards on Grid

Best for: Tool comparisons, plugin roundups, structured content.

Icons sit inside white card containers arranged on a visible dot grid. Connected by dashed lines. Feels organized and structured like a diagram.

Background: Light neutral with visible dot grid. Icons: Inside white rounded-rect cards (120x120px), consistent sizes (60-80px), arranged in a balanced grid-like pattern. Accents: Thin dashed lines connecting cards, subtle drop shadows on cards, one card highlighted with colored border.

<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 2400 1260">
  <defs>
    <linearGradient id="bg" x1="0%" y1="0%" x2="100%" y2="100%">
      <stop offset="0%" stop-color="#fafbfc"/>
      <stop offset="100%" stop-color="#f1f5f9"/>
    </linearGradient>
    <filter id="card-shadow" x="-20%" y="-20%" width="140%" height="140%">
      <feDropShadow dx="0" dy="4" stdDeviation="12" flood-opacity="0.06"/>
    </filter>
    <filter id="hero-shadow" x="-20%" y="-20%" width="140%" height="140%">
      <feDropShadow dx="0" dy="8" stdDeviation="20" flood-opacity="0.12"/>
    </filter>
    <pattern id="grid" width="60" height="60" patternUnits="userSpaceOnUse">
      <circle cx="30" cy="30" r="1.5" fill="#cbd5e1" opacity="0.25"/>
    </pattern>
  </defs>

  <rect width="100%" height="100%" fill="url(#bg)"/>
  <rect width="100%" height="100%" fill="url(#grid)"/>

  <!-- Connecting lines between cards (dashed) -->
  <line x1="520" y1="400" x2="780" y2="400" stroke="#cbd5e1" stroke-width="2" stroke-dasharray="8 4"/>
  <line x1="920" y1="400" x2="1180" y2="400" stroke="#cbd5e1" stroke-width="2" stroke-dasharray="8 4"/>

  <!-- Regular cards -->
  <g filter="url(#card-shadow)" transform="translate(400, 340)">
    <rect x="-60" y="-60" width="120" height="120" rx="16" fill="#fff"/>
    <g transform="scale(0.15) translate(-256, -256)">
      <path d="..." fill="#64748b"/>
    </g>
  </g>

  <!-- Hero card (highlighted, slightly larger, colored border) -->
  <g filter="url(#hero-shadow)" transform="translate(800, 340)">
    <rect x="-72" y="-72" width="144" height="144" rx="20" fill="#fff" stroke="#3b82f6" stroke-width="3"/>
    <g transform="scale(0.18) translate(-256, -256)">
      <path d="..." fill="#2563eb"/>
    </g>
  </g>

  <!-- More regular cards... -->
</svg>

Composition rules for icon cards:

• 5-7 cards in a loose grid (NOT perfectly aligned, slight organic drift)
• One card is the "hero" card: 20% larger, colored border, stronger shadow
• Cards connected by dashed lines to show relationships
• Use the Slate Neutral palette for cards, accent color only on hero card
• Stagger rows slightly for visual interest (not a rigid grid)

Style 3: Bold Gradient + Central Icon

Best for: Single-topic articles, reviews, opinion pieces, newsletter headers.

A rich gradient background with one large central icon (or a tight cluster of 2-3). Minimal, impactful, bold.

Background: Strong multi-point gradient, no grid. Icons: 1 large icon (280-350px) centered, or 2-3 tightly grouped. White or near-white fill. Accents: Glow effect behind central icon, concentric rings, subtle radial gradient, corner geometric shapes.

<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 2400 1260">
  <defs>
    <linearGradient id="bg" x1="0%" y1="0%" x2="100%" y2="100%">
      <stop offset="0%" stop-color="#1e3a5f"/>
      <stop offset="40%" stop-color="#1e40af"/>
      <stop offset="100%" stop-color="#3b82f6"/>
    </linearGradient>
    <radialGradient id="glow" cx="50%" cy="50%" r="35%">
      <stop offset="0%" stop-color="#fff" stop-opacity="0.12"/>
      <stop offset="100%" stop-color="#fff" stop-opacity="0"/>
    </radialGradient>
    <filter id="icon-glow" x="-50%" y="-50%" width="200%" height="200%">
      <feGaussianBlur in="SourceGraphic" stdDeviation="15" result="blur"/>
      <feBlend in="SourceGraphic" in2="blur" mode="normal"/>
    </filter>
  </defs>

  <rect width="100%" height="100%" fill="url(#bg)"/>
  <rect width="100%" height="100%" fill="url(#glow)"/>

  <!-- Concentric rings -->
  <circle cx="1200" cy="630" r="250" fill="none" stroke="#fff" stroke-width="1.5" opacity="0.08"/>
  <circle cx="1200" cy="630" r="350" fill="none" stroke="#fff" stroke-width="1" opacity="0.05"/>
  <circle cx="1200" cy="630" r="450" fill="none" stroke="#fff" stroke-width="0.5" opacity="0.03"/>

  <!-- Corner geometric accents -->
  <rect x="80" y="80" width="120" height="3" rx="1.5" fill="#fff" opacity="0.1"/>
  <rect x="80" y="80" width="3" height="120" rx="1.5" fill="#fff" opacity="0.1"/>
  <rect x="2200" y="1080" width="120" height="3" rx="1.5" fill="#fff" opacity="0.1"/>
  <rect x="2317" y="960" width="3" height="120" rx="1.5" fill="#fff" opacity="0.1"/>

  <!-- Central icon (large, white, with glow) -->
  <g transform="translate(1200, 630) scale(0.6)" filter="url(#icon-glow)">
    <g transform="translate(-256, -256)">
      <path d="..." fill="#fff"/>
    </g>
  </g>

  <!-- Small supporting icon (subtle) -->
  <g transform="translate(700, 400) scale(0.15)" opacity="0.2">
    <path d="..." fill="#93c5fd"/>
  </g>
</svg>

Style 4: Glassmorphism Float (NEW)

Best for: SaaS reviews, modern web tools, premium content.

Icons float on frosted glass cards over a gradient background. Premium, modern feel. Each icon sits on a semi-transparent card with backdrop blur simulation.

Background: Rich gradient (dark or vibrant). Icons: Inside glassmorphic containers (white at 0.08-0.12 opacity, white border at 0.15 opacity, rounded corners). Accents: Gradient orbs behind glass cards, scattered light sparkles.

<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 2400 1260">
  <defs>
    <linearGradient id="bg" x1="0%" y1="0%" x2="100%" y2="100%">
      <stop offset="0%" stop-color="#0f172a"/>
      <stop offset="50%" stop-color="#1e293b"/>
      <stop offset="100%" stop-color="#0f172a"/>
    </linearGradient>
    <filter id="glow-orb">
      <feGaussianBlur stdDeviation="40"/>
    </filter>
    <filter id="card-shadow">
      <feDropShadow dx="0" dy="8" stdDeviation="16" flood-color="#000" flood-opacity="0.2"/>
    </filter>
  </defs>

  <rect width="100%" height="100%" fill="url(#bg)"/>

  <!-- Glowing orbs behind cards -->
  <circle cx="500" cy="400" r="200" fill="#3b82f6" opacity="0.15" filter="url(#glow-orb)"/>
  <circle cx="1900" cy="800" r="180" fill="#8b5cf6" opacity="0.12" filter="url(#glow-orb)"/>
  <circle cx="1200" cy="600" r="250" fill="#06b6d4" opacity="0.08" filter="url(#glow-orb)"/>

  <!-- Glass card with icon -->
  <g filter="url(#card-shadow)" transform="translate(1100, 500)">
    <!-- Glass background -->
    <rect x="-80" y="-80" width="160" height="160" rx="24"
          fill="#fff" fill-opacity="0.08"
          stroke="#fff" stroke-opacity="0.15" stroke-width="1"/>
    <!-- Icon inside -->
    <g transform="scale(0.18) translate(-256, -256)">
      <path d="..." fill="#e2e8f0"/>
    </g>
  </g>

  <!-- More glass cards at various positions... -->

  <!-- Light sparkles (tiny bright dots) -->
  <circle cx="800" cy="300" r="2" fill="#fff" opacity="0.4"/>
  <circle cx="1600" cy="200" r="1.5" fill="#fff" opacity="0.3"/>
  <circle cx="2000" cy="500" r="2" fill="#fff" opacity="0.35"/>
</svg>

Composition rules for glassmorphism:

• 4-6 glass cards of varying sizes (100px to 200px containers)
• One hero card is 40% larger than others
• Cards overlap slightly at edges for depth
• 2-3 colored orbs behind cards create the glow bleed effect
• Scatter 5-8 tiny sparkle dots (1.5-3px, white, 0.2-0.5 opacity)
• Use slate white icons (#e2e8f0) for consistency on dark backgrounds

Style 5: Illustration Hero (PREFERRED)

Best for: Any article where a matching illustration exists. This is the highest-quality style.

A full illustration from the library serves as the hero visual, positioned on a gradient background with subtle accent elements. The illustration tells the story; FA icons are optional accents only.

Background: Soft gradient matching illustration mood + subtle dot grid. Hero: Full illustration (60-80% canvas height), centered or rule-of-thirds positioned. Accents: 2-3 soft blobs behind illustration, optional 1-2 small FA icons as floating accents at very low opacity, decorative rings.

<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 2400 1260">
  <defs>
    <linearGradient id="bg" x1="0%" y1="0%" x2="100%" y2="100%">
      <stop offset="0%" stop-color="#f0f9ff"/>
      <stop offset="100%" stop-color="#e0f2fe"/>
    </linearGradient>
    <filter id="shadow" x="-10%" y="-10%" width="120%" height="120%">
      <feDropShadow dx="0" dy="8" stdDeviation="20" flood-opacity="0.08"/>
    </filter>
    <pattern id="dots" width="40" height="40" patternUnits="userSpaceOnUse">
      <circle cx="20" cy="20" r="1" fill="#94a3b8" opacity="0.12"/>
    </pattern>
  </defs>

  <!-- Background -->
  <rect width="100%" height="100%" fill="url(#bg)"/>
  <rect width="100%" height="100%" fill="url(#dots)"/>

  <!-- Accent blobs (behind illustration) -->
  <ellipse cx="1200" cy="600" rx="500" ry="400" fill="#dbeafe" opacity="0.3"/>
  <ellipse cx="800" cy="700" rx="300" ry="250" fill="#c7d2fe" opacity="0.2"/>

  <!-- Decorative rings -->
  <circle cx="1200" cy="630" r="500" fill="none" stroke="#93c5fd" stroke-width="1" opacity="0.1"/>

  <!-- ILLUSTRATION (nested SVG preserves its own styles) -->
  <g filter="url(#shadow)">
    <svg x="600" y="80" width="1200" height="1100" viewBox="0 0 156 156">
      <style type="text/css">
        .st0{fill:#F7CFC6;}
        .st1{fill:#73504E;}
        <!-- ... illustration styles ... -->
      </style>
      <!-- ... illustration paths ... -->
    </svg>
  </g>

  <!-- Optional: 1-2 tiny FA icon accents (very subtle) -->
  <g transform="translate(300, 200) scale(0.12)" opacity="0.15">
    <path d="..." fill="#3b82f6"/>
  </g>

  <!-- Accent dots -->
  <circle cx="400" cy="300" r="4" fill="#3b82f6" opacity="0.12"/>
  <circle cx="2000" cy="900" r="5" fill="#6366f1" opacity="0.1"/>
</svg>

Composition rules for illustration hero:

• Illustration occupies 60-80% of canvas height (750-1000px)
• Center the illustration horizontally on the canvas
• Position illustration slightly above vertical center (y offset ~80-130px from top)
• Background gradient should complement the illustration's color palette
• Accent blobs should be BEHIND the illustration, large and soft
• FA icon accents are OPTIONAL and should be at 0.1-0.2 opacity max
• Keep accent dots and decorative elements subtle — the illustration is the star
• Apply a light drop shadow to the illustration group for elevation

How to embed an illustration:

1. Read the full illustration SVG file
2. Extract the viewBox value from the source SVG
3. Extract the inner content (everything between <svg> and </svg>, including <style> blocks)
4. Wrap in a new <svg x="..." y="..." width="..." height="..." viewBox="..."> element
5. Place inside a <g filter="url(#shadow)"> for elevation
6. Size: for a 156x156 viewBox illustration, use width="1100" height="1100" and center with x="650" y="80"
7. For 600x600 viewBox illustrations, use width="1100" height="1100" and center with x="650" y="80"

Illustration viewBox sizing reference:

Color Palettes

Pick one palette per image. Match to article mood.

Cool Blue (Default for tech/WordPress)

Warm Amber (Money, business, affiliate)

Fresh Green (Growth, blogging, beginner guides)

Deep Dark (Bold reviews, opinion pieces)

Slate Neutral (Comparisons, lists, roundups)

Composition Rules

Canvas Layout

+--80px padding--+------------------------------------------+--80px padding--+
|                 |                                          |                 |
|  80px           |         SAFE AREA (2240 x 1100)          |           80px  |
|  padding        |                                          |  padding        |
|                 |                                          |                 |
+--80px padding--+------------------------------------------+--80px padding--+

• Keep all icons within the safe area (80px inset from edges)
• Social sharing crops to ~1.91:1 (Facebook) or 2:1 (Twitter). Critical content should be centered
• WordPress thumbnails crop to various ratios. Center the visual weight

Hierarchy (3-Layer Depth System)

Every image MUST use 3 depth layers for visual richness:

1. Foreground (closest to viewer)

   • The hero icon (largest, 180-300px)
   • 1-2 supporting icons at high opacity (0.85-1.0)
   • Drop shadow filter applied
   • Slight rotation for dynamism

2. Midground (middle distance)

   • 2-3 medium icons (80-120px)
   • Medium opacity (0.6-0.8)
   • Light shadow or no shadow
   • Moderate rotation

3. Background (furthest away)

   • 2-3 small icons (40-70px)
   • Low opacity (0.3-0.5)
   • Apply blur filter (feGaussianBlur stdDeviation="2-4")
   • Creates atmospheric depth

Decorative Elements (REQUIRED)

Every image must include at least 3 of these:

• Accent blobs: Soft ellipses (200-350px radius) at 0.2-0.4 opacity in palette-matching colors
• Decorative rings: 1-2 unfilled circles (200-350px radius) with thin stroke (1-2px) at 0.08-0.2 opacity centered behind hero icon
• Accent dots: 4-8 small circles (2-6px) scattered across canvas at 0.1-0.2 opacity
• Dot grid pattern: Light repeating dot pattern for texture
• Corner accents: Thin L-shaped lines in corners (Style 3 and 4 only)
• Sparkles: Tiny bright dots for glassmorphism style

Spacing

• Minimum 80px between icon edges
• Hero icon should have 180px+ clear space around it (except for decorative rings)
• Supporting icons distribute evenly but not symmetrically
• Background icons can be partially clipped by safe area edges for depth

What NOT to Do

• No text (article title goes in WordPress, not the image)
• No photographs or raster images embedded in SVG
• No more than 8 icons total (gets cluttered)
• No rainbow colors. Stick to one palette (2-3 hues)
• No perfect symmetry (feels lifeless)
• No tiny icons that disappear at thumbnail size
• No clip art aesthetic
• No decorative borders or frames
• No flat compositions without depth layers
• No icons all the same size (kills visual hierarchy)
• No icons all at the same opacity (kills depth)

Execution Steps

1. Read the article (or article outline) to understand the core topic
2. Pick a visual style: Floating Icons (default), Icon Cards, Bold Gradient, or Glassmorphism Float
3. Pick a color palette: Match to article mood/category
4. Select 5-8 icons from FontAwesome that represent the topic
   • Read each .svg file from the local FontAwesome directory
   • Extract the viewBox and <path d="..."> data
   • Note the viewBox dimensions for scaling math
5. Build the SVG: a. Set viewBox="0 0 2400 1260" b. Define gradients, filters (shadow, blur, glow), and patterns in <defs> c. Create background (gradient + pattern) d. Add accent shapes (blobs, rings, dots) e. Place BACKGROUND layer icons (small, blurred, low opacity) f. Place MIDGROUND layer icons (medium, moderate opacity) g. Place FOREGROUND layer icons (hero + supporting, high opacity, shadow) h. Add final decorative touches (sparkles, corner accents)
6. Review: Does it read well at 300px wide (thumbnail)? Is the topic obvious from icons alone? Is there clear visual depth?
7. Save as .svg file
8. Convert: rsvg-convert -f png -w 2400 -h 1260 -o "output.png" "input.svg"

Matching Style to Article Type

PREFERRED: Always check the Illustration Library first. If a matching illustration exists, use Style 5: Illustration Hero. Fall back to icon-only styles when no good illustration match is available.

rsvg-convert Notes

• For exact 2400x1260 PNG: rsvg-convert -f png -w 2400 -h 1260 -o "output.png" "input.svg"
• For batch conversion: for f in *.svg; do rsvg-convert -f png -w 2400 -h 1260 -o "${f%.svg}.png" "$f"; done
• Install on macOS: brew install librsvg
• If only -w is specified, height scales proportionally from viewBox

Mobile-Friendly Rules

Featured images display at various sizes across devices:

1. viewBox is mandatory — viewBox="0 0 2400 1260", never fixed pixel dimensions.
2. Center visual weight: Social crops (1.91:1 Facebook, 2:1 Twitter) and WordPress thumbnails all crop from center. Keep the hero icon cluster centered.
3. Test at 300px wide: The image must be recognizable and the topic obvious at thumbnail size. This is the mobile card/feed width.
4. Minimum icon rendered size: The hero icon must remain identifiable at ~60px rendered width. Background icons can fade.
5. No tiny decorative elements that vanish at small sizes — accent dots under 4px at viewBox scale disappear on mobile.
6. Responsive embed: WordPress handles this, but for custom use: width="100%" height="auto".

Quality Checklist

• viewBox is 0 0 2400 1260
• No text or negligible text (title NOT baked into image)
• Icons are from FontAwesome (local) or open-source (inline paths)
• No <image> tags or external references (fully self-contained SVG)
• 5-8 icons total, clear visual hierarchy
• One color palette used consistently (2-3 hues max)
• Icons stay within safe area (80px from edges)
• 3 depth layers present (foreground, midground, background)
• Background layer icons have blur filter applied
• Foreground icons have drop shadow
• At least 3 decorative elements (blobs, rings, dots, sparkles)
• Reads well at thumbnail size (~300px wide)
• Topic is recognizable from icons alone
• Background has gradient (not flat white)
• rsvg-convert produces clean PNG without artifacts
• File size is reasonable (under 100KB for SVG)