# Customize Your Site Branding
**URL:** https://meta.discourse.org/t/customize-your-site-branding/258307
**Category:** Site Management
**Tags:** tutorial, customization
**Created:** [March 16, 2023, 12:16am UTC](https://meta.discourse.org/t/customize-your-site-branding/258307 "2023-03-16T00:16:39Z")
**Posts on this page:** 7
**Page:** 1
### Author:  [@Discourse](https://meta.discourse.org/u/Discourse)
#### Post date: [March 16, 2023, 12:16am UTC](https://meta.discourse.org/t/customize-your-site-branding/258307/1 "2023-03-16T00:16:39Z")
> đ This is a _non-technical_ tutorial that will guide you through customizing the branding and appearance for your Discourse site.
>
> đ Required user level: Administrator
Want to customize your site branding, but donât know where to start? Read more to find out!
# The Setup Wizard
Discourse is very customizable! A good place to start with site customizations is to login your admin account on the site and [run the siteâs setup wizard](https://meta.discourse.org/t/rerun-the-setup-wizard/101179). đ§
The setup wizard allows you to configure your siteâs title, default locale, and access settings (public vs private, sign-up vs invite-only, and whether users must be approved). These are the essential first steps for getting your site running.
Once the wizard is complete, you can further customize your siteâs appearance â logos, colors, fonts, and more â from the admin panel.
You can preview the available options directly on this page. Click the âNextâ button when you have found the settings that work for you. Donât worry, you can always change these settings later if you decide theyâre not what youâre looking for.
# Site Themes
Once you have a basic configuration in place, itâs time to customize your site even further! â¨
Themes are expansive customizations that change multiple elements of the style of your forum design, and often also include additional front-end features. Themes have the ability to significantly change the look and layout of your forum.
The #Customization > Theme category on Meta hosts a variety of pre-created themes that you can use on your site to customize your siteâs appearance. This is the best place to search for a theme to use on your site. Go ahead and pick out a theme youâd like to use for your site from this category.
Once youâve decided on a theme to use for your site, you can add the theme to your site from the `Admin -> Customize -> Themes` page (located at `/admin/config/customize/themes`). You can also make changes to your siteâs theme, or even create a completely new theme from this page.
The [Beginnerâs guide to using Discourse Themes](https://meta.discourse.org/t/beginners-guide-to-using-discourse-themes/91966) is a crash course in Discourse theme basics, and provides an overview of how to install themes on your Discourse site. Read through this guide for instructions on how to install the theme youâve chosen.
> đââď¸ You can also find more info on how to use, create, and share your own themes in:
- [Designerâs Guide to Discourse Themes](https://meta.discourse.org/t/designers-guide-to-discourse-themes/152002)
- [Developerâs guide to Discourse Themes](https://meta.discourse.org/t/developer-s-guide-to-discourse-themes/93648)
# Color Palettes
You can further customize your site by adjusting its color palette from the `Admin -> Config -> Colors` page (located at `/admin/config/colors`). đ¨
From here you can create a new color palette, select an existing palette to customize, and assign palettes as the default light or dark scheme for your theme.
Select an existing color scheme to base your new color scheme off of, and then customize the colors of your new scheme by clicking on the color next to each color section:
Donât forget to name your new color scheme and save your changes once youâre finished!
> đââď¸ Need some help deciding on colors? A color picking tool like [Paletton - The Color Scheme Designer](http://paletton.com/#uid=1000u0kllllaFw0g0qFqFg0w0aF) can be very helpful for this!
For additional information on how you can use color palettes within Discourse, see:
> [@Create and share a color scheme](https://meta.discourse.org/t/create-and-share-a-color-scheme/61196):
>
> Discourse now supports importing color schemes from remote repository. Here I will demonstrate how you would go about doing this. Navigate to colors and add a color scheme. Head to /admin/customize/colors on your site and create a color scheme. Tips: I used a chrome plugin ([color picker](https://chrome.google.com/webstore/detail/colorpick-eyedropper/ohcpnigalekghcmgcdcenkpelffpdolg?hl=en)) to select colors from an existing image of a palette on the web. If you create a theme, assign the color scheme to the theme and preview it, changes will be reflected live. Create a new giâŚ
# Theme Components
Similar to themes, Discourse also has âTheme Componentsâ you can use to change surface elements of your forum design, or add extra front-end features. Smaller and more targeted than full themes, they can generally (though not always) be combined with other theme components to create a bespoke forum design tailored for your community. â
The #Customization > Theme component category on Meta contains all of Discourseâs official and non-official theme components. Look through the theme components listed there, and if youâd like to install any of them on your site, just follow the instructions here: [The Discourse Theme Interface and How-To Install Theme Components](https://meta.discourse.org/t/beginners-guide-to-using-discourse-themes/91966#discourse-theme-interface-4)
Some of the most popular Discourse Theme Components include:
- [Brand Header](https://meta.discourse.org/t/brand-header/77977)
- [DiscoTOC - automatic table of contents](https://meta.discourse.org/t/discotoc-automatic-table-of-contents/111143)
- [Custom Header Links](https://meta.discourse.org/t/custom-header-links/90588)
- [Versatile Banner](https://meta.discourse.org/t/versatile-banner/109133)
> đââď¸ Discourse also has a built-in dark/light mode toggle controlled by the `interface_color_selector` site setting, which can be set to show the toggle in the sidebar footer or the header.
> đââď¸ The #theme-guides tag on Meta also has lots of how-to guides with ideas for further customizing your site with Theme Components.
# Site Branding
Discourse has a dedicated logo configuration page at `Admin -> Appearance -> Logo` (located at `/admin/config/logo`) where you can manage all of your siteâs logos and icons.
- `Primary logo` - Appears on the siteâs top navigation, as well as the top of the siteâs Email Notifications. Recommended size is 600 Ă 80 pixels.
- `Primary logo dark` - Dark mode alternative for the primary logo. Recommended size is 600 Ă 80 pixels.
- `Square icon` - A square version of the logo image that appears at the top of the site and is also the mobile app logo. Recommended size is 512 Ă 512 pixels.
- `Favicon` - The logo will appear as the icon in the browser tab and the browser favorites/bookmarks.
- `Small logo` - The small logo image at the top left of your site, seen when scrolling down. If left blank, a home glyph will be shown. Recommended size is 120 Ă 120 pixels.
- `Small logo dark` - Dark mode alternative for the small logo. Recommended size is 120 Ă 120 pixels.
Under the **Mobile** section:
- `Mobile logo` - The logo used on mobile version of your site. If left blank, the image from the `logo` setting will be used. Use a wide rectangular image with a height of 120 and an aspect ratio greater than 3:1.
- `Mobile logo dark` - Dark mode alternative for the mobile logo. Use a wide rectangular image with a height of 120 and an aspect ratio greater than 3:1.
- `Manifest icon` - Image used as logo/splash image on Android. If left blank, large\_icon will be used. Recommended size is 512 Ă 512 pixels.
- `Manifest screenshots` - Screenshots that showcase your instance features and functionality on its install prompt page (shown when using âAdd to Homescreenâ on Android). All images should be local uploads and of the same dimensions.
- `Apple touch icon` - Icon used for Apple touch devices. If left blank, large\_icon will be used. Recommended size is 180 Ă 180 pixels. A transparent background is not recommended.
Under the **Email** section:
- `Digest logo` - The alternate logo image used at the top of your siteâs email summary. If left blank, the image from the `logo` setting will be used. Use a wide rectangle image. Donât use an SVG image.
Under the **Social media** section:
- `OpenGraph image` - Default [opengraph](https://ogp.me/) image, used by many apps and platforms for weblink previews when a page has no other suitable image. If left blank, large\_icon will be used.
- `X summary large image` - X card âsummary large imageâ. If left blank, regular card metadata is generated using the OpenGraph\_image, as long as that is not also a .svg. Recommended size is at least 280 Ă 150 pixels. Donât use an SVG image.
> đââď¸ For best results, we recommend following the size guidelines listed above for each type of logo and icon.
# Additional Customizations
Now that youâve added a custom theme, color palette, some brand logos, and maybe a few theme components to your site, youâre finished with all the basic site customizations! đ
If youâre still looking for more ways to customize your Discourse site, we recommend reading through any of the following topics that might interest you:
- [Customize any text in Discourse](https://meta.discourse.org/t/customize-any-text-in-discourse/36092)
- [Customizing the Discourse outer email template](https://meta.discourse.org/t/customize-and-style-the-discourse-outer-email-template/153637)
- [Creating and configuring custom user fields](https://meta.discourse.org/t/create-and-configure-custom-user-fields/113192)
- [Configure custom emoji](https://meta.discourse.org/t/configure-custom-emoji/23365)
> Last edited by @olivia 2026-04-13T03:24:17Z
>
> > **Check document**
> >
> > Perform check on document:
---
### Author:  [@jordan-violet](https://meta.discourse.org/u/jordan-violet)
#### Post date: [January 14, 2025, 4:09pm UTC](https://meta.discourse.org/t/customize-your-site-branding/258307/8 "2025-01-14T16:09:03Z")
So what does `Manifest screenshots` _actually_ do? Like, where are these screenshots used? Is it when someone installs your community as a local app through their browser? Are the images what show up if you make your community discoverable with Discourse Discover?
---
### Author:  [@Moin](https://meta.discourse.org/u/Moin)
#### Post date: [January 14, 2025, 4:38pm UTC](https://meta.discourse.org/t/customize-your-site-branding/258307/9 "2025-01-14T16:38:34Z")
I see those screenshots when I use the âadd to homescreenâ option in Chrome on my Android device
---
### Author:  [@jordan-violet](https://meta.discourse.org/u/jordan-violet)
#### Post date: [January 14, 2025, 6:00pm UTC](https://meta.discourse.org/t/customize-your-site-branding/258307/10 "2025-01-14T18:00:28Z")
Interesting! I thought thatâs what they did, but I didnât see them when I installed on my desktop (Chrome, Windows). But I may not have given them enough time to load/propagate somewhere.
Glad to know I was right on what they do, though!
---
### Author:  [@calebhearth](https://meta.discourse.org/u/calebhearth)
#### Post date: [June 6, 2025, 3:17pm UTC](https://meta.discourse.org/t/customize-your-site-branding/258307/11 "2025-06-06T15:17:08Z")
> [@Discourse](#):
>
> đââď¸ For best results here, we recommend following the size guidelines for each type of logo.
Looks like this section was left out by mistake,
---
### Author:  [@Moin](https://meta.discourse.org/u/Moin)
#### Post date: [June 6, 2025, 4:05pm UTC](https://meta.discourse.org/t/customize-your-site-branding/258307/12 "2025-06-06T16:05:17Z")
After reading it twice, I think I understood. The size guidelines are included above. For example:
> [@Discourse](#):
>
> - `logo` - The logo image at the top left of your site. Use a wide rectangular image with a **height of 120** and an **aspect ratio greater than 3:1**. If left blank, the site title text will be shown.
I think in general this guide is quite outdated. You can no longer add a logo or configure the look and feel in the wizard. The themes admin page looks totally different now, and color schemes were renamed to color palettes.
The dark/light mode toggle theme component was moved to core. And branding has a new config page at /admin/config/logo.
I just wonder why the size mentioned on the config page is different from the description when I look at the site setting.
600Ă80 is different from min. 360Ă120.
---
### Author:  [@nathank](https://meta.discourse.org/u/nathank)
#### Post date: [September 30, 2025, 11:39pm UTC](https://meta.discourse.org/t/customize-your-site-branding/258307/16 "2025-09-30T23:39:59Z")
This topic is now a bit out of date as this stuff has been recently overhauled.
Here are my thoughts on a few minor (but valuable) suggestions for improvements:
> [@Logo and Icons are difficult to configure due to unclear descriptions / settings logic](https://meta.discourse.org/t/some-additional-tweaks-for-logos-and-icons-in-the-core-settings/384420):
>
> Iâve just set up a new site, and hit a few hiccoughs. First, I love the new admin settings (/admin/config/logo) - they are a vast improvement and visually very nice. Suggestion 1 That the new term âSquare iconâ be used instead of large\_icon in the text explainers. The old name has been changed, but this hasnât been followed through with in the text. Suggestion 2 That there is a separate Android icon under Mobile, as there is for iOS. At present, the Square Icon is used for the Android home âŚ