🎨 Create a Quick-and-Dirty Logo for Your Discourse Site Using FontAwesome

How-to guides
1

A step-by-step how-to guide for Discourse admins who want a clean, lightweight logo without needing Photoshop, Inkscape, or design skills. We’ll use digitallysovereign.org and a tilted gold crown as our example.

What We’re Building

A full set of Discourse logo and icon files using nothing but:

  • A FontAwesome SVG icon as the graphic element
  • A text editor (Sublime Text, VS Code, even Notepad) to assemble the SVGs
  • Python + cairosvg for the few slots that require PNG

No design software needed. No subscriptions. No fussing with image editors.

The result for digitallysovereign.org is a gold crown ♛ tipped 10° to the right — simple, unique, and unmistakably ours.

Before You Start

You’ll need:

  • Admin access to your Discourse site
  • A text editor
  • Python 3 (only for the favicon and PWA icons — optional if you skip those)
  • About 30 minutes

Part 1 — Choose Your FontAwesome Icon

1.1 Browse the free icon set

Go to fontawesome.com/icons and search for an icon. Filter by Free to stick to the no-cost set.

For digitallysovereign.org we chose the crown — it nods to sovereignty without being heavy-handed.

1.2 Get the raw SVG

On the icon’s page, click SVG to copy the raw code. You’ll get something like:

<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 576 512">
  <path d="M313 87.2c9.2-7.3 15-18.6 ..."/>
</svg>

:bulb: You only need the viewBox dimensions and the <path d="..."/>. Everything else (the comment, width, height, fill on the root element) you’ll replace.

Note down the viewBox — for the crown it is 0 0 576 512, meaning the icon lives in a coordinate space 576 units wide and 512 units tall. You’ll use these numbers in the transform math below.

Part 2 — Understand the One Transform That Does Everything

Every file in this guide uses the same SVG transform pattern to position and rotate the icon:

transform="translate(tx, ty) scale(s) rotate(deg, cx, cy)"

SVG applies these right to left:

  1. rotate — tips the icon deg degrees around the icon’s center point (cx, cy) in its original coordinate space
  2. scale — shrinks the icon to fit your logo dimensions
  3. translate — moves it into position

Working out the numbers

For a FontAwesome icon with viewBox="0 0 W H":

  • The icon’s center is at (W/2, H/2) — for the crown: (288, 256)
  • Use rotate(10, 288, 256) to tip it 10° around that center

To land the (now rotated, now scaled) icon center at coordinates (X, Y) in your logo:

tx = X − (W/2 × s)
ty = Y − (H/2 × s)

Example: crown centered at (80, 80) in a logo, scaled to 25% (s = 0.25):

tx = 80 − (288 × 0.25) = 80 − 72 = 8
ty = 80 − (256 × 0.25) = 80 − 64 = 16

→ transform="translate(8, 16) scale(0.25) rotate(10, 288, 256)"

You’ll see this same pattern repeated in every file below, with different scale and target center values.

Part 3 — The Full Crown Path

To avoid repetition, here is the crown path string used in every file below. It is the d attribute from the FontAwesome crown SVG:

M313 87.2c9.2-7.3 15-18.6 15-31.2 0-22.1-17.9-40-40-40s-40 17.9-40 40c0 12.6 5.9 23.9 15 31.2L194.6 194.8c-10 15.7-31.3 19.6-46.2 8.4L88.9 158.7c4.5-6.4 7.1-14.3 7.1-22.7 0-22.1-17.9-40-40-40s-40 17.9-40 40c0 21.8 17.5 39.6 39.2 40L87.8 393.5c4.7 31.3 31.6 54.5 63.3 54.5l273.8 0c31.7 0 58.6-23.2 63.3-54.5L520.8 176c21.7-.4 39.2-18.2 39.2-40 0-22.1-17.9-40-40-40s-40 17.9-40 40c0 8.4 2.6 16.3 7.1 22.7l-59.4 44.6c-14.9 11.2-36.2 7.3-46.2-8.4L313 87.2z

Replace this with your own icon’s path d value throughout.

Part 4 — Discourse’s Image Slots

Go to Admin → Settings and search for logo. Here are all the slots and what each file will do:

Discourse slot File Format Notes
Logo logo-light.svg SVG :white_check_mark: Wide, shown in light mode header
Logo (dark mode) logo-dark.svg SVG :white_check_mark: Same layout, dark mode colours
Logo (small) logo-small-light.svg SVG :white_check_mark: Icon only, mobile / narrow header
Logo (small, dark) logo-small-dark.svg SVG :white_check_mark: Icon only, dark mode
Favicon favicon.svg SVG :white_check_mark: (try) Browser tab; fall back to PNG if needed
Apple touch icon icon-180.png PNG :framed_picture: iOS home screen
PWA icon (192) icon-192.png PNG :framed_picture: Progressive web app
PWA icon (512) icon-512.png PNG :framed_picture: PWA splash screen

:bulb: Discourse accepts SVG for all logo slots — upload directly without exporting to PNG. Only the favicon and PWA/Apple touch icons strictly require PNG.

Part 5 — Create the SVG Files

Open your text editor and create each file below. For each one:

  1. Create a new file with the filename shown
  2. Paste the SVG code exactly
  3. Save it

logo-light.svg

Wide header logo — light mode: gold crown + dark text on transparent background

<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 1200 160">
  <g transform="translate(8, 16) scale(0.25) rotate(10, 288, 256)">
    <path fill="#ffd43b" d="M313 87.2c9.2-7.3 15-18.6 15-31.2 0-22.1-17.9-40-40-40s-40 17.9-40 40c0 12.6 5.9 23.9 15 31.2L194.6 194.8c-10 15.7-31.3 19.6-46.2 8.4L88.9 158.7c4.5-6.4 7.1-14.3 7.1-22.7 0-22.1-17.9-40-40-40s-40 17.9-40 40c0 21.8 17.5 39.6 39.2 40L87.8 393.5c4.7 31.3 31.6 54.5 63.3 54.5l273.8 0c31.7 0 58.6-23.2 63.3-54.5L520.8 176c21.7-.4 39.2-18.2 39.2-40 0-22.1-17.9-40-40-40s-40 17.9-40 40c0 8.4 2.6 16.3 7.1 22.7l-59.4 44.6c-14.9 11.2-36.2 7.3-46.2-8.4L313 87.2z"/>
  </g>
  <text x="170" y="80" dominant-baseline="middle"
        font-family="Arial, 'Helvetica Neue', sans-serif"
        font-weight="800" font-size="76" fill="#2d2d2d">digitallysovereign.org</text>
</svg>

logo-dark.svg

Wide header logo — dark mode: white crown + white text on transparent background

<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 1200 160">
  <g transform="translate(8, 16) scale(0.25) rotate(10, 288, 256)">
    <path fill="#ffffff" d="M313 87.2c9.2-7.3 15-18.6 15-31.2 0-22.1-17.9-40-40-40s-40 17.9-40 40c0 12.6 5.9 23.9 15 31.2L194.6 194.8c-10 15.7-31.3 19.6-46.2 8.4L88.9 158.7c4.5-6.4 7.1-14.3 7.1-22.7 0-22.1-17.9-40-40-40s-40 17.9-40 40c0 21.8 17.5 39.6 39.2 40L87.8 393.5c4.7 31.3 31.6 54.5 63.3 54.5l273.8 0c31.7 0 58.6-23.2 63.3-54.5L520.8 176c21.7-.4 39.2-18.2 39.2-40 0-22.1-17.9-40-40-40s-40 17.9-40 40c0 8.4 2.6 16.3 7.1 22.7l-59.4 44.6c-14.9 11.2-36.2 7.3-46.2-8.4L313 87.2z"/>
  </g>
  <text x="170" y="80" dominant-baseline="middle"
        font-family="Arial, 'Helvetica Neue', sans-serif"
        font-weight="800" font-size="76" fill="#ffffff">digitallysovereign.org</text>
</svg>

:bulb: Only two things change between light and dark: the fill on the path (#ffd43b → #ffffff) and the fill on the text (#2d2d2d → #ffffff). Everything else is identical.

logo-small-light.svg

Square icon — light mode: gold crown on transparent background

<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 160 160">
  <g transform="translate(8, 16) scale(0.25) rotate(10, 288, 256)">
    <path fill="#ffd43b" d="M313 87.2c9.2-7.3 15-18.6 15-31.2 0-22.1-17.9-40-40-40s-40 17.9-40 40c0 12.6 5.9 23.9 15 31.2L194.6 194.8c-10 15.7-31.3 19.6-46.2 8.4L88.9 158.7c4.5-6.4 7.1-14.3 7.1-22.7 0-22.1-17.9-40-40-40s-40 17.9-40 40c0 21.8 17.5 39.6 39.2 40L87.8 393.5c4.7 31.3 31.6 54.5 63.3 54.5l273.8 0c31.7 0 58.6-23.2 63.3-54.5L520.8 176c21.7-.4 39.2-18.2 39.2-40 0-22.1-17.9-40-40-40s-40 17.9-40 40c0 8.4 2.6 16.3 7.1 22.7l-59.4 44.6c-14.9 11.2-36.2 7.3-46.2-8.4L313 87.2z"/>
  </g>
</svg>

:bulb: Same transform as the wide logos — the crown sits in an identically-sized area, the viewBox just drops the space reserved for text.

logo-small-dark.svg

Square icon — dark mode: white crown on transparent background

<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 160 160">
  <g transform="translate(8, 16) scale(0.25) rotate(10, 288, 256)">
    <path fill="#ffffff" d="M313 87.2c9.2-7.3 15-18.6 15-31.2 0-22.1-17.9-40-40-40s-40 17.9-40 40c0 12.6 5.9 23.9 15 31.2L194.6 194.8c-10 15.7-31.3 19.6-46.2 8.4L88.9 158.7c4.5-6.4 7.1-14.3 7.1-22.7 0-22.1-17.9-40-40-40s-40 17.9-40 40c0 21.8 17.5 39.6 39.2 40L87.8 393.5c4.7 31.3 31.6 54.5 63.3 54.5l273.8 0c31.7 0 58.6-23.2 63.3-54.5L520.8 176c21.7-.4 39.2-18.2 39.2-40 0-22.1-17.9-40-40-40s-40 17.9-40 40c0 8.4 2.6 16.3 7.1 22.7l-59.4 44.6c-14.9 11.2-36.2 7.3-46.2-8.4L313 87.2z"/>
  </g>
</svg>

favicon.svg

Tiny browser tab icon — 32×32 coordinate space, gold crown

<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 32 32">
  <g transform="translate(1.6, 3.2) scale(0.05) rotate(10, 288, 256)">
    <path fill="#ffd43b" d="M313 87.2c9.2-7.3 15-18.6 15-31.2 0-22.1-17.9-40-40-40s-40 17.9-40 40c0 12.6 5.9 23.9 15 31.2L194.6 194.8c-10 15.7-31.3 19.6-46.2 8.4L88.9 158.7c4.5-6.4 7.1-14.3 7.1-22.7 0-22.1-17.9-40-40-40s-40 17.9-40 40c0 21.8 17.5 39.6 39.2 40L87.8 393.5c4.7 31.3 31.6 54.5 63.3 54.5l273.8 0c31.7 0 58.6-23.2 63.3-54.5L520.8 176c21.7-.4 39.2-18.2 39.2-40 0-22.1-17.9-40-40-40s-40 17.9-40 40c0 8.4 2.6 16.3 7.1 22.7l-59.4 44.6c-14.9 11.2-36.2 7.3-46.2-8.4L313 87.2z"/>
  </g>
</svg>

:bulb: Transform math for 32×32: s = 0.05 → crown center (288×0.05, 256×0.05) = (14.4, 12.8) → to land at (16, 16): tx = 1.6, ty = 3.2

icon.svg

Source file for all PNG exports — 200×200, gold crown on a dark rounded background

<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 200 200">
  <rect width="200" height="200" rx="40" fill="#1e1e2e"/>
  <g transform="translate(13.6, 23.2) scale(0.3) rotate(10, 288, 256)">
    <path fill="#ffd43b" d="M313 87.2c9.2-7.3 15-18.6 15-31.2 0-22.1-17.9-40-40-40s-40 17.9-40 40c0 12.6 5.9 23.9 15 31.2L194.6 194.8c-10 15.7-31.3 19.6-46.2 8.4L88.9 158.7c4.5-6.4 7.1-14.3 7.1-22.7 0-22.1-17.9-40-40-40s-40 17.9-40 40c0 21.8 17.5 39.6 39.2 40L87.8 393.5c4.7 31.3 31.6 54.5 63.3 54.5l273.8 0c31.7 0 58.6-23.2 63.3-54.5L520.8 176c21.7-.4 39.2-18.2 39.2-40 0-22.1-17.9-40-40-40s-40 17.9-40 40c0 8.4 2.6 16.3 7.1 22.7l-59.4 44.6c-14.9 11.2-36.2 7.3-46.2-8.4L313 87.2z"/>
  </g>
</svg>

:bulb: Transform math for 200×200: s = 0.3 → crown center (288×0.3, 256×0.3) = (86.4, 76.8) → to land at (100, 100): tx = 13.6, ty = 23.2

Part 6 — Export PNGs from icon.svg

The Apple touch icon and PWA slots require PNG. Generate all three sizes at once:

pip install cairosvg

import cairosvg

for size in [180, 192, 512]:
    cairosvg.svg2png(
        url="icon.svg",
        write_to=f"icon-{size}.png",
        output_width=size,
        output_height=size
    )
    print(f"✅ icon-{size}.png")

Save as export_icons.py and run with python3 export_icons.py.

Part 7 — Upload to Discourse

  1. Go to Admin → Settings and search for logo
  2. Upload each file to its matching slot:
Setting name File
logo logo-light.svg
logo dark logo-dark.svg
small logo logo-small-light.svg
small logo dark logo-small-dark.svg
favicon favicon.svg (or icon-32.png if SVG isn’t accepted)
apple touch icon url icon-180.png
pwa icon 192 icon-192.png
pwa icon 512 icon-512.png
  1. Hard-refresh your browser (Ctrl+Shift+R / Cmd+Shift+R) to see the new logos immediately.

Adapting This for Your Own Site

What to change Where
Icon Replace the <path d="..."/> contents with your own FontAwesome path
Icon viewBox Update rotate(10, W/2, H/2) with your icon’s actual center point
Tilt angle Change 10 in rotate(10, ...) — try 5°–15° for a subtle tip, 0° for upright
Icon colour Change fill="#ffd43b" on the path
Text Replace digitallysovereign.org with your site name
Text colour Change fill="#2d2d2d" (light) and fill="#ffffff" (dark)
Dark background Change fill="#1e1e2e" on the <rect> in icon.svg
Corner radius Change rx="40" on the <rect> — rx="0" for square corners

Quick Reference Checklist

  • FontAwesome icon chosen and raw SVG path copied
  • logo-light.svg created and tested in browser
  • logo-dark.svg created (only fill values differ from light)
  • logo-small-light.svg created (same transform, no text)
  • logo-small-dark.svg created
  • favicon.svg created
  • icon.svg created (source for PNG exports)
  • cairosvg installed and PNGs exported at 180, 192, 512px
  • All files uploaded to correct Discourse settings slots
  • Hard-refreshed browser to verify logos appear correctly in both light and dark mode

Questions or ran into something unexpected? Drop a reply below — Discourse installations vary and your icon’s viewBox dimensions may need different transform numbers. :crown:

:information_source: This topic is available in our Outline documentation library. If you find it useful, please let us know by adding a reply below. You can also add comments in Outline to point out issues or suggest improvements. Thank you! :hugs: → View in Outline