---
name: featured-image-creator
description: Create blog featured images as SVG (2400x1260px) using FontAwesome icons and open-source SVGs. No or negligible text. Convert to PNG via rsvg-convert. Use for gauravtiwari.org blog post thumbnails, social sharing images, and WordPress featured images.
---

# Featured Image Creator

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

## Specs

| Attribute | Value |
|-----------|-------|
| Dimensions | `viewBox="0 0 2400 1260"` |
| Aspect ratio | ~1.9:1 (close to 16:9) |
| Text | None or negligible (title overlay not needed) |
| Icons | FontAwesome (local) + open-source SVGs (inline) |
| Output | `.svg` file, converted to `.png` via rsvg-convert |
| Target PNG | 2560px wide (rsvg-convert upscales from viewBox) |

## Conversion Command

```bash
for f in *.svg; do rsvg-convert -f png -w 2560 -o "${f%.svg}.png" "$f"; done
```

Single file:
```bash
rsvg-convert -f png -w 2560 -o "output.png" "input.svg"
```

---

## FontAwesome Icons (Local)

### Location

```
/Users/gauravtiwari/Inbox Dropbox/Gaurav Tiwari/Mac/Downloads/codecanyon-QcK03RWV-wp-smartsync-wordpress-plugin-for-media-assets-cdn-cloud-storage/Documentation/assets/fontawesome/svgs/
```

### Categories

| Category | Path | Count | Use For |
|----------|------|-------|---------|
| Solid | `solid/` | 1,390 | Primary icons, filled style |
| Regular | `regular/` | 163 | Outline style, lighter feel |
| Brands | `brands/` | 492 | WordPress, YouTube, GitHub, etc. |

### 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

```svg
<!-- 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:

| Target Size | Scale Factor (512 viewBox) | Scale Factor (640 viewBox) |
|-------------|---------------------------|---------------------------|
| 40px | 0.078 | 0.0625 |
| 60px | 0.117 | 0.094 |
| 80px | 0.156 | 0.125 |
| 100px | 0.195 | 0.156 |
| 120px | 0.234 | 0.188 |
| 150px | 0.293 | 0.234 |
| 200px | 0.39 | 0.313 |

**Formula**: `scale = target_size / icon_viewbox_width`

### Common Icons by Topic

| Blog Topic | Solid Icons to Use |
|------------|-------------------|
| Blogging / Writing | `pen-to-square`, `blog`, `pencil`, `keyboard`, `newspaper` |
| Money / Income | `dollar-sign`, `money-bill`, `coins`, `piggy-bank`, `wallet`, `chart-line` |
| WordPress | `brands/wordpress`, `brands/wordpress-simple` |
| Hosting / Server | `server`, `database`, `hard-drive`, `cloud` |
| SEO | `magnifying-glass`, `chart-simple`, `ranking-star`, `arrow-trend-up` |
| Email | `envelope`, `paper-plane`, `at`, `inbox` |
| Social Media | `brands/twitter`, `brands/youtube`, `brands/instagram`, `brands/linkedin` |
| Education / Students | `graduation-cap`, `book`, `book-open`, `school`, `chalkboard-user` |
| Tools | `screwdriver-wrench`, `gear`, `gears`, `toolbox`, `wand-magic-sparkles` |
| Speed / Performance | `bolt`, `gauge-high`, `rocket`, `stopwatch` |
| Security | `shield-halved`, `lock`, `key`, `user-shield` |
| Shopping / Affiliate | `cart-shopping`, `bag-shopping`, `tags`, `receipt` |
| Design | `palette`, `paintbrush`, `swatchbook`, `pen-ruler` |
| Code / Dev | `code`, `terminal`, `bug`, `laptop-code`, `file-code` |
| AI / Automation | `robot`, `microchip`, `brain`, `wand-magic-sparkles` |
| Analytics | `chart-bar`, `chart-pie`, `chart-line`, `chart-area` |
| Communication | `comments`, `message`, `bullhorn`, `phone` |
| Media | `image`, `camera`, `video`, `photo-film` |
| Growth | `arrow-up`, `arrow-trend-up`, `seedling`, `leaf` |

### 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), optional dot grid or geometric accents.
**Icons**: Mixed sizes (60px to 200px), scattered composition, slight rotations (-15 to +15 degrees), varying opacity (0.6 to 1.0 for depth).
**Accents**: Soft colored circles/blobs behind icon clusters, thin connecting lines optional.

```svg
<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="4" stdDeviation="8" flood-opacity="0.08"/>
    </filter>
    <pattern id="dots" width="30" height="30" patternUnits="userSpaceOnUse">
      <circle cx="15" cy="15" r="1.5" fill="#94a3b8" opacity="0.2"/>
    </pattern>
  </defs>

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

  <!-- Accent blobs -->
  <ellipse cx="600" cy="400" rx="300" ry="250" fill="#dbeafe" opacity="0.4"/>
  <ellipse cx="1800" cy="800" rx="250" ry="200" fill="#fef3c7" opacity="0.3"/>

  <!-- Icons at various positions, sizes, rotations -->
  <g id="icons">
    <!-- Large primary icon (center-ish, biggest) -->
    <g transform="translate(1100, 530) scale(0.35) rotate(-5)" opacity="0.95">
      <!-- FontAwesome path data here -->
      <path d="..." fill="#2563eb"/>
    </g>

    <!-- Medium supporting icons -->
    <g transform="translate(500, 350) scale(0.2) rotate(8)" opacity="0.8">
      <path d="..." fill="#3b82f6"/>
    </g>

    <g transform="translate(1700, 400) scale(0.22) rotate(-10)" opacity="0.75">
      <path d="..." fill="#6366f1"/>
    </g>

    <!-- Smaller accent icons -->
    <g transform="translate(350, 700) scale(0.12) rotate(15)" opacity="0.5">
      <path d="..." fill="#8b5cf6"/>
    </g>

    <g transform="translate(1900, 250) scale(0.1) rotate(-12)" opacity="0.4">
      <path d="..." fill="#a78bfa"/>
    </g>
  </g>
</svg>
```

**Composition rules for floating icons:**
- 1 large icon (hero, 150-200px) placed slightly off-center
- 2-3 medium icons (80-120px) distributed around
- 2-4 small icons (40-70px) filling gaps with lower opacity
- No icon should touch the edges. Keep 80px+ padding from canvas edges
- Vary rotation between -15 and +15 degrees
- Deeper icons (further "back") get lower opacity (0.4-0.6)
- Foreground icons at full or near-full opacity (0.85-1.0)
- Use 2-3 colors from the same palette family, not rainbow

### Style 2: Isometric Grid / Scene

Best for: Technical tutorials, architecture posts, tool comparisons.

A structured scene with icons arranged in a grid or isometric layout, connected by lines or placed on a subtle grid. More organized than floating, feels like a diagram.

**Background**: Light neutral with visible dot grid or line grid.
**Icons**: Placed on grid points, consistent sizes (80-120px), minimal rotation.
**Accents**: Thin lines connecting related icons, rounded rectangles behind icon groups, subtle shadows.

```svg
<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>
    <pattern id="grid" width="60" height="60" patternUnits="userSpaceOnUse">
      <circle cx="30" cy="30" r="1.5" fill="#cbd5e1" opacity="0.3"/>
    </pattern>
  </defs>

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

  <!-- Icon cards on grid -->
  <g id="icon-cards">
    <!-- Card: rounded rect background + icon -->
    <g filter="url(#card-shadow)" transform="translate(400, 300)">
      <rect x="-60" y="-60" width="120" height="120" rx="16" fill="#fff"/>
      <g transform="scale(0.15) translate(-256, -256)">
        <path d="..." fill="#2563eb"/>
      </g>
    </g>

    <!-- More cards at grid positions -->
    <g filter="url(#card-shadow)" transform="translate(700, 300)">
      <rect x="-60" y="-60" width="120" height="120" rx="16" fill="#fff"/>
      <g transform="scale(0.15) translate(-256, -256)">
        <path d="..." fill="#10b981"/>
      </g>
    </g>

    <!-- Connecting lines between cards -->
    <line x1="460" y1="300" x2="640" y2="300" stroke="#cbd5e1" stroke-width="2" stroke-dasharray="8 4"/>
  </g>
</svg>
```

### 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 gradient (two-tone or three-tone), no grid.
**Icons**: 1 large icon (250-350px) centered, or 2-3 tightly grouped.
**Accents**: Glow effect behind central icon, subtle radial gradient, thin geometric lines.

```svg
<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="50%" stop-color="#2563eb"/>
      <stop offset="100%" stop-color="#3b82f6"/>
    </linearGradient>
    <radialGradient id="glow" cx="50%" cy="50%" r="40%">
      <stop offset="0%" stop-color="#fff" stop-opacity="0.15"/>
      <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="20" 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)"/>

  <!-- Subtle geometric accents -->
  <circle cx="1200" cy="630" r="300" fill="none" stroke="#fff" stroke-width="1" opacity="0.1"/>
  <circle cx="1200" cy="630" r="400" fill="none" stroke="#fff" stroke-width="0.5" opacity="0.06"/>

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

---

## Color Palettes

Pick one palette per image. Match to article mood.

### Cool Blue (Default for tech/WordPress)

| Element | Color | Hex |
|---------|-------|-----|
| Background start | Ice blue | `#f0f9ff` |
| Background end | Light blue | `#e0f2fe` |
| Primary icon | Blue | `#2563eb` |
| Secondary icon | Indigo | `#6366f1` |
| Tertiary icon | Violet | `#8b5cf6` |
| Accent blob | Blue wash | `#dbeafe` |
| Grid dots | Slate | `#94a3b8` |

### Warm Amber (Money, business, affiliate)

| Element | Color | Hex |
|---------|-------|-----|
| Background start | Warm cream | `#fffbeb` |
| Background end | Amber tint | `#fef3c7` |
| Primary icon | Amber | `#d97706` |
| Secondary icon | Orange | `#ea580c` |
| Tertiary icon | Rose | `#e11d48` |
| Accent blob | Amber wash | `#fde68a` |
| Grid dots | Stone | `#a8a29e` |

### Fresh Green (Growth, blogging, beginner guides)

| Element | Color | Hex |
|---------|-------|-----|
| Background start | Mint | `#f0fdf4` |
| Background end | Green tint | `#dcfce7` |
| Primary icon | Green | `#16a34a` |
| Secondary icon | Teal | `#0d9488` |
| Tertiary icon | Emerald | `#059669` |
| Accent blob | Green wash | `#bbf7d0` |
| Grid dots | Gray-green | `#86efac` |

### Deep Dark (Bold reviews, opinion pieces)

| Element | Color | Hex |
|---------|-------|-----|
| Background start | Dark blue | `#1e3a5f` |
| Background end | Blue | `#2563eb` |
| Icon color | White | `#ffffff` |
| Secondary icon | Light blue | `#93c5fd` |
| Geometric accents | White at low opacity | `#ffffff` @ 0.08 |

### Slate Neutral (Comparisons, lists, roundups)

| Element | Color | Hex |
|---------|-------|-----|
| Background start | Near white | `#fafbfc` |
| Background end | Light slate | `#f1f5f9` |
| Primary icon | Slate | `#475569` |
| Secondary icon | Blue-gray | `#64748b` |
| Accent | Blue pop | `#3b82f6` |
| Card background | White | `#ffffff` |

---

## 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

1. **One hero element**: The largest icon or icon group. Slightly off-center (rule of thirds) or dead center for Style 3
2. **2-3 supporting elements**: Medium icons that relate to the topic
3. **2-4 ambient elements**: Small, low-opacity icons for depth and visual interest
4. **Background texture**: Dot grid, blobs, or geometric lines. Subtle, never competing

### Spacing

- Minimum 60px between icon edges
- Hero icon should have 150px+ clear space around it
- Supporting icons distribute evenly but not symmetrically
- Small ambient icons can cluster near edges (but within safe area)

### 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

---

## Execution Steps

1. **Read the article** (or article outline) to understand the core topic
2. **Pick a visual style**: Floating Icons (default), Isometric Grid, or Bold Gradient
3. **Pick a color palette**: Match to article mood/category
4. **Select 4-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. Create background (gradient + optional texture)
   c. Add accent shapes (blobs, circles, grid)
   d. Place hero icon (largest, most prominent)
   e. Place supporting icons (medium, distributed)
   f. Place ambient icons (small, low opacity)
   g. Apply rotations, opacity variation, shadows
6. **Review**: Does it read well at 300px wide (thumbnail)? Is the topic obvious from icons alone?
7. **Save** as `.svg` file
8. **Convert**: `rsvg-convert -f png -w 2560 -o "output.png" "input.svg"`

---

## Example: "Blogging for Students" Featured Image

**Style**: Floating Icons
**Palette**: Fresh Green
**Icons selected**:
- Hero: `graduation-cap` (large, center)
- Supporting: `blog`, `dollar-sign`, `laptop-code`
- Ambient: `pen-to-square`, `lightbulb`, `chart-line`

**Composition**:
- `graduation-cap` at ~180px, slightly left of center
- `blog` at ~100px, upper right area
- `dollar-sign` at ~90px, lower left
- `laptop-code` at ~110px, right side
- Small icons scattered with 0.4-0.6 opacity

---

## Matching Style to Article Type

| Article Type | Recommended Style | Recommended Palette |
|-------------|-------------------|---------------------|
| How-to guide | Floating Icons | Cool Blue |
| Tutorial | Isometric Grid | Cool Blue or Neutral |
| Money/affiliate | Floating Icons | Warm Amber |
| Beginner guide | Floating Icons | Fresh Green |
| WordPress tutorial | Isometric Grid | Cool Blue |
| Software review | Bold Gradient | Deep Dark |
| Product review | Bold Gradient | Deep Dark or Cool Blue |
| Comparison/roundup | Isometric Grid | Slate Neutral |
| Opinion/thought leadership | Bold Gradient | Deep Dark |
| Newsletter header | Floating Icons | Any |
| Tool recommendation | Floating Icons | Warm Amber |
| Student/education | Floating Icons | Fresh Green |

---

## rsvg-convert Notes

- `rsvg-convert` respects `viewBox` proportions. Setting `-w 2560` on a `2400x1260` viewBox produces a `2560x1344` PNG
- If you need exact 2400x1260 PNG: `rsvg-convert -f png -w 2400 -h 1260 -o "output.png" "input.svg"`
- For batch conversion from a directory: `for f in *.svg; do rsvg-convert -f png -w 2560 -o "${f%.svg}.png" "$f"; done`
- Install on macOS: `brew install librsvg`

---

## 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)
- [ ] 4-8 icons total, clear visual hierarchy
- [ ] One color palette used consistently
- [ ] Icons stay within safe area (80px from edges)
- [ ] 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)
