Graphics tools for community branding: logo, OG cards, and node icons

A forum does not need a design department. It needs a small set of files the software already knows how to show: a mark in the header, a square icon for the home screen, a wide card for the link someone pastes into Discord, and the little glyphs on nodes or categories. This article is the tools that make those files. It is a bench, not a brand book.

It is not a brand-system essay. Palette theory, email chrome, voice, and “how the whole product feels” are a different job — do not wait for a later branding article to export a PNG the header can use this afternoon. It is also not an extra.less / template-modification process. XenForo 2.3 already has style properties (colors, numbers+units, CSS groups, the color palette, Light/Dark style types). Discourse already has theme settings and uploaded assets. Export SVG or PNG, then put the file in those properties. If you catch yourself forking PAGE_CONTAINER to hard-code a hex, you have left this article.

The admin toolkit already named graphics as a class. The dark-mode piece already owns style variations. The PWA / email article already owns the 192 and 512 PNG squares. Stay here for Figma-class vector benches, Photopea-class browser rasters, Affinity-class desktop suites, and Canva-class template boards — as classes, not a podium.

Three jobs, not a portfolio

If a file does not serve one of these jobs, it does not need to exist in production.

Job	What members see	Typical export	Where it lands
Mark	Header, email header, maybe the footer	SVG (preferred) or PNG with a transparent ground	XenForo style / logo properties; Discourse theme logo uploads
App / tab icon	Home screen, favicon, PWA	PNG square, 192 and 512 for XenForo PWA	Setup → PWA setup; favicon in the style
Share card (OG)	Discord, Slack, iMessage, some social previews	PNG or JPG, wide (commonly 1.91:1 / 1200×630-class)	The image the board or the page advertises as og:image
Node / category glyph	Forum list, category tiles	SVG or small PNG	XenForo node icon / style; Discourse category settings

That is the production set. Mood boards, unused mascots, and a 16-page PDF brand guide can live in the staff node. They are not what the server must ship.

XenForo official style machinery, for orientation only (the customization-process article is not this one):

• A Style is HTML templates + CSS/LESS templates + style properties.
• Properties inherit unless customized. Types include colors, text, numbers+units, switches, multiple-choice, CSS groups.
• Color palette plus Light/Dark style type (affects intensify / mix / diminish). 2.3 style variations are slots default and alternate.
• Do not edit Master or the vendor parent. Put experiments in a child. This article still does not walk extra.less.

Discourse: categories are walls; tags are lightweight. Category icons and colors are settings, not a reason to fork core CSS on day one. The beginner’s guide already told you not to redesign in week one.

Vector bench (Figma as a class)

Figma here means a vector, component, multi-page bench that lives in the browser (or a desktop shell around the same idea). Penpot, a local Inkscape file, a Sketch document you already own — same class if they export clean SVG and PNG.

Use this class when:

• The mark must stay sharp at 24 px in the header and at 512 px on a home screen.
• You want one source for the mark, the node glyphs, and the simple shapes on the OG card.
• More than one person will touch the file (components, a shared library, comments).

Do not use this class when you only need to crop a screenshot. That is the raster bench.

How to sit at it for a forum

1. One file per community, not one file per mood. Pages: mark, pwa, og, nodes.
2. Components for the mark. A header lockup that includes a wordmark you will not actually ship at 24 px is how you get an unreadable smear. Prefer a mark that works alone. Official XenForo PWA wants a square icon; a wide wordmark will be cropped by adaptive masks.
3. Export SVG for anything that is shapes and type you control. Export PNG where a browser or a phone OS is happier with pixels (PWA, many OG crawlers, older mail clients).
4. Keep a single colour token set in the file — steel, slate, one accent — that you will later type into style properties. This is not the place to implement Light/Dark in LESS. Export two PNG variants of the mark if the dark header needs a lighter drawing, then assign them in the style / variation UI.

What this class will not do for you: write XenForo style properties. It will not subset Font Awesome. 2.3 already has an Icon Usage Analyzer and <xf:fa icon="…" />. Community Font Awesome Manager advice is mostly a 2.1/2.2 leftover. Do not export a custom webfont from Figma because a 2021 thread did.

We will not invent Figma’s 2026 seat prices, Starter vs Pro grids, or a “best UI tool” badge. If your organisation already sits in another vector bench, stay there. The export is the product.

Raster bench (Photopea as a class)

Photopea here means a browser Photoshop-class editor: layers, masks, export to PNG/JPG/WebP, open a .psd someone mailed you. Desktop Photoshop, GIMP, Krita — same class.

Use this class when:

• You were given a photograph, a game screenshot, or a painted mascot.
• You need to remove a background, resize, or convert a format the vector bench should not hold.
• You are building an OG card that is a photo plus a simple mark overlay.

Do not use this class as the source of truth for a logo. A raster logo is a trap the first time you need a favicon and a 512 icon from the same drawing.

Forum-specific habits

• OG cards: start from a wide frame. Put the important drawing in the centre third so chat-app crops do not eat the mark. Do not put small readable paragraphs on the card. Crawlers and thumbs will wreck them. A mark plus a flat colour is enough.
• Screenshots as OG: crop, darken a veil, drop the mark in a corner. Do not ship a full ACP screenshot with member emails visible.
• WebP: XenForo 2.3 can convert JPEG/PNG/BMP uploads to WebP on the board itself (vendor/notebook figure: a large storage cut — treat as vendor, not as your measurement). That is member uploads, not a reason to skip a sensible PNG/JPG master for the logo. Keep a lossless master of the mark.
• $config['maxImageResizePixelCount'] defaults to 20,000,000. That is a board limit for uploads, not your design tool. Do not export a 80 MP “just in case” header asset.

Photopea’s virtue is no install on a staff laptop you do not own. Its vice is the same as any browser editor: you will forget where the .psd lives. Put the source in the same staff node or vault as the runbook, not in a Downloads folder.

We will not invent Photopea pricing or claim it replaces a desktop suite for print. You are not printing a magazine. You are making forum files.

Desktop suite (Affinity as a class)

Affinity here means a paid-once (or licensed) desktop suite: Designer-class vectors, Photo-class rasters, a file that lives on disk. Illustrator + Photoshop, Pixelmator, a local Inkscape + GIMP pair — same class if you already think in local files.

Use this class when:

• You already work that way.
• You need offline and you do not want a browser tab as the source of truth.
• The mark is genuinely complex (a detailed badge, a game crest) and the vector bench you have is fighting you.

Do not switch to a desktop suite because a forum is “serious now.” Serious is a child style and a restore drill, not a new license.

Habits that transfer:

• One local folder backed up offsite with the rest of staff secrets: /brand/mark.svg, /brand/pwa-192.png, /brand/pwa-512.png, /brand/og-default.png.
• Export SVG from the vector persona, PNG from the export persona. Do not flatten the only copy.
• If you produce both light and dark drawings of the mark, name the files that way. XenForo 2.3 variations can follow prefers-color-scheme; a single black wordmark on a dark header is how you fail contrast. Assign the files in style properties / variation-aware logo fields. Do not write the swap in a template in this article.

We will not invent Affinity’s 2026 store price, v2 vs v3 naming, or a comparison score against Adobe. The class is local, capable, export-clean.

Template bench (Canva as a class)

Canva here means a template board: presets for “social post,” drag-and-drop type, stock photos, a PNG export. Vista-class tools, some host-provided “logo makers,” a Google Drawing you refuse to be proud of — same class.

Use this class when:

• You need an OG card tonight and nobody on staff will open a vector bench.
• A volunteer is making event art (the events kind) and you would rather they use a locked template than a new font every Thursday.

Do not use this class as the origin of the mark if you can help it. Template logos look like template logos, and they are painful to extract as clean SVG. If this is all you have, export the largest PNG they will give you, then stop adding effects.

Rules if you use it anyway:

• Lock the brand kit (their phrase) to the two or three colours you will also type into XenForo Basic colors / Discourse colour settings. One accent. Not twelve.
• No tiny paragraphs on the OG export. A title the size of a billboard, or no title.
• Download PNG; keep the template URL in the runbook so the next volunteer does not start from “Summer Sale.”
• Do not let this class become a second style system that disagrees with the forum palette. The forum is the system. This is a card factory.

We will not invent Canva Pro prices or a 2026 feature matrix. If the free export is enough for a 1200-wide PNG, you are done.

Export: SVG or PNG, then stop

This is the only production advice that matters.

File	Prefer	Why	Do not
Header mark	SVG	Sharp at every density; small	A JPEG with a white box
PWA 192 / 512	PNG, square, ideally maskable	Official XenForo PWA requirement	A 512 JPG wordmark to the edges
Favicon	PNG (and SVG if you already have it)	Simple	An .ico you cannot open again
OG / share	PNG or JPG, wide	Crawlers	A 4K PNG with unreadably small type
Node / category glyph	SVG or small PNG	It sits at 16–32 px	A photo

Then:

1. Open the style properties (XenForo) or theme / category settings (Discourse).
2. Upload or paste the URL the product already offers.
3. Save. Hard-refresh as a guest. Flip the 2.3 light/dark variation if you use it. Check email on a real client if the mark also rides HTML mail — official XenForo Appearance has a separate default style for HTML email.

That is the handoff. No extra.less in this article. No “add this block to PAGE_CONTAINER.” No Google Fonts CDN — site policy and performance both say self-host if you must custom-font at all, and typography is a different tutorial.

Official XenForo PWA, again, because people fail it with pretty files:

1. Site must be HTTPS.
2. Title of 12 or fewer characters (Board short title if the board title is longer).
3. Two square icons: 192 and 512. PNG as a general rule. Ideally maskable (important graphics inside the safe zone). Check the box if they are.

Miss any one and PWA does not enable. The setup page tests this. Believe the red X.

XenForo: where the files actually go (properties, not templates)

You do not need the designer-mode flag. You need a child style.

Practical path, still not a customization treatise:

• Appearance → Styles. Create a child of the style you serve. Leave Master and the vendor parent untouched.
• Logo / header image / favicon fields live in that style’s style properties (the exact label moves with versions; the ACP search is the authority). Upload there.
• Color palette and Basic colors (@xf-paletteNeutral3, @xf-textColor and friends) are how you match the mark’s steel-blue to the chrome. Type the tokens. Do not paint the header in a template.
• If you use 2.3 variations, test both. A property marked variation-aware can differ between light and dark. An image that is black-on-transparent will vanish on a dark header unless you assigned the light drawing to the dark slot.

Node icons: the nodes article already owns the tree. Here: export a simple glyph. A 12-colour illustration at 16 px is noise. Category nodes are containers; they do not need a mascot.

Email: official Default style for HTML email can differ from the public style. Useful when the public variation is dark. Export a mark that survives a white mail canvas even if the site is dark.

Outdated templates and TMS are not this job. If a logo requires a template edit, the style you bought is fighting you — or you skipped a property. Stop and look again.

Discourse: uploads, not a second design tool

Discourse expects:

• A logo and a small logo / square in site settings (wording moves; the settings search is the authority).
• Category color + optional icon.
• Theme components that may add a header asset — official-ish community pattern, still an upload.

CDN notes from the hosting notebook, because graphics are bytes: DISCOURSE_CDN_URL must include the protocol. S3 CDN is DISCOURSE_S3_CDN_URL, not the app CDN. If you put uploads on S3, that is a stack decision, not a Figma setting.

Cloudflare: disable JS minify / JS modifications or Discourse breaks. That is not a graphics rule, but it is how people “optimize” a new logo deploy and take the editor with it. Do not let a “make my images faster” tickbox rewrite JavaScript.

Category icons: four walls, not twenty-four. Atwood’s line is still the IA. A beautiful glyph on a maze is still a maze. The structure article is the room plan.

OG cards without a marketing department

Open Graph is how a pasted URL becomes a card. XenForo and Discourse both emit metadata; your job is the image.

Practical defaults:

• One default card for the homepage / brand.
• Optional per-article cards later. Do not block launch on 90 unique illustrations.
• No tiny text. If the card is 200 px tall in Slack, anything under a display size is decoration.
• Keep a JPG if a particular crawler is happier with it; keep the PNG master.
• After you change the default OG file, expect caches. Discord and similar will show the old card until their cache expires. That is not XenForo “not saving.”

This site’s own convention (for orientation if you write here): AVIF on the page, JPG for OG. Your forum does not have to copy that. It has to have a file and a URL that returns 200.

Do not put member-only URLs in a public OG image path. Private nodes are a permissions problem, not a graphics problem.

File hygiene

Treat brand files like config.php: few, named, backed up.

/brand
  /source     mark.afdesign or .fig export, the .psd
  /export
    mark.svg
    mark-on-dark.svg
    pwa-192.png
    pwa-512.png
    favicon.png
    og-default.png
    /nodes    support.svg  general.svg

Rules:

• The source is not the export. Do not edit the only SVG into a one-off event poster.
• Put this folder in the same backup story as the board, or in the staff vault. A logo you cannot open after a laptop dies is how people redraw a worse one.
• XenForo backup doctrine is still database + data/ + internal_data/. Logo files you uploaded through style properties usually live under data/. If you only dump SQL, the mark vanishes. The backup article is the restore loop.
• Do not commit 40 MB of unused stock photos into the web root “for later.”

Image weight on the board (member uploads, WebP, a CDN) is a performance job. The speed article owns guest LCP. This article only asks that the header SVG is not a traced photograph.

A worked afternoon: mark, PWA, one OG

You have four hours and no design department. This is a sequence, not a taste lecture.

Hour 1 — mark (vector bench if you can).
One shape that is still a shape at 24 px. No tagline in the drawing. Two exports: mark.svg (for the header) and mark-on-dark.svg if the dark header is dark. If all you have is the template bench, export the largest PNG they will give you and accept that you will redraw it later. Do not spend the hour picking a display typeface. XenForo will use the style’s typography; you are not shipping a poster.

Hour 2 — squares.
From the same mark, export 192×192 and 512×512 PNG. Sit the drawing in the centre ~80% so an Android mask does not crop it. Check the maskable box in Setup → PWA setup only if you actually left that margin. Set Board short title to ≤ 12 characters if the board title is a sentence. Confirm HTTPS. The PWA page will test this; a pretty icon does not override a red X.

Hour 3 — OG.
Wide frame. Flat steel-blue or slate field. Mark in the centre third. No paragraph. Export og-default.png (and a JPG if you already know a crawler that prefers it). Assign it as the board’s default share image wherever your version exposes that field. Paste the homepage URL into a private Discord or Slack. If you see last year’s card, wait on their cache; do not rebuild XenForo.

Hour 4 — assign and walk away.
Child style. Logo / favicon / email-style mark in style properties. Discourse: logo + small logo in site settings. Guest hard-refresh. Flip the 2.3 variation. Open a lost-password mail if the mark rides HTML email. Put the source file in /brand/source next to the runbook.

You did not open extra.less. You did not install a header add-on. You did not start a brand book.

Contrast, two drawings, one property set

A single black SVG on a dark header is how “we shipped dark mode” becomes “the logo vanished.”

• If the header background changes between variations, you need two drawings or a mark that is a mid-luminance shape with a stroke that works on both.
• Assign them in the variation-aware logo / header fields if your style offers them. Test both. The dark-mode article is the switch; this is only the files.
• HTML email often stays on a light canvas even when the site is dark. Official Appearance: a separate default style for HTML email. Give that style the on-light mark.
• Do not encode the swap as a CSS filter: invert() in a template. You will invert a multi-colour crest into garbage.

Node glyphs follow the same rule at 16 px: one colour that still reads on both list backgrounds, or two glyphs. Photographs will not.

Choosing a class without a podium

Situation	Class that matches	Why
You can draw a clean mark and will reuse it	Vector bench	One SVG, many sizes
You have a photo and need an OG card tonight	Raster bench	Crop, veil, export
You already live in a desktop suite	Desktop suite	Do not migrate files for sport
A volunteer must make event art from rails	Template bench	Locked colours, PNG out
You have nothing and need a header Friday	Template or vector, one mark, stop	A finished SVG beats a perfect process

You can mix classes. You should not mix sources of truth. One mark file. Everyone else exports.

If two staff members disagree about tools, they are having the wrong fight. Agree on the export folder and the style-property handoff.

What not to do

• Do not install a third-party “logo in the header” add-on because you could not find the style property.
• Do not edit Master. Do not edit the vendor parent.
• Do not load Google Fonts from a CDN to match a Canva template. If type must match, that is a later typography tutorial and a self-hosted file.
• Do not build a readable-text cover system in this pass. Export the image; assign the property.
• Do not ship twelve node icons that are photographs. Glyphs.
• Do not “optimize” Discourse JavaScript at the edge because you uploaded a logo.
• Do not put the only copy of mark.svg in a Slack thread.

Checklist

• You can name the four jobs: mark, app icon, OG, node glyph
• One source-of-truth file for the mark (vector if you can)
• Exports live in a named folder that is backed up
• Header: SVG or clean PNG, assigned in style properties / theme settings
• PWA: 192 and 512 square PNG, maskable if you claim they are; title ≤ 12 characters; HTTPS
• Email style can use a different default; mark still readable on a light mail canvas
• Light and dark drawings assigned if the header flips; both variations tested
• OG default exists; no microscopic text
• Node / category glyphs are simple; the tree is still the nodes job
• No extra.less required for this ship
• Template-bench volunteers cannot invent a second palette
• Restore test: a fresh board plus data/ still shows the mark

What this article will not do

It will not write your brand system. It will not walk child-style TMS, outdated-template merge, or extra.less includes. It will not rank Figma against Affinity against Canva. It will not invent 2026 subscription prices. It will not tell you how to paint a portal slider — that is a portal and widgets problem.

It will not replace light vs dark as a design decision. Variations are the switch. This article only hands them files.

Takeaways

• Four files matter: mark, square app icons, wide OG, small glyphs.
• Treat Figma, Photopea, Affinity, and Canva as classes. Pick the class that matches the job, not a podium.
• Export SVG or PNG, then use style properties / theme settings. That is the whole integration.
• PWA is HTTPS + short title + 192/512 squares. Pretty files that fail those checks do not install.
• One source of truth. Back it up with data/. Do not open extra.less to hang a logo.

Make the file. Assign the property. Refresh as a guest. Then go back to the queue.