How to customise your Mastodon server’s artwork

Mastodon server admins can add their own custom artwork so that links and bookmarks to their website show up in their own style instead of using Mastodon’s default artwork. The admins can also choose the server’s default theme and techy admins can customise it with CSS code.

This is a really good idea for any server that wants to have a public identity, and even on single-user servers it can be fun to make it look like your own style. The default artwork is okay, but because it’s there by default it can deprive your site of its own identity. Adding your own artwork helps tell people that you are committed to your server.

How to customise your server’s artwork

  1. Log into your server’s website or web app with your admin account
  2. Click on ⋯ More and then Administration (if you’re using a phone click ☰ first)
  3. Click on Server Settings (if you’re using a phone click ☰ first)
  4. Scroll down to the sections marked Server thumbnail, Favicon and App icon
  5. Click the Browse buttons on the icons and thumbnail artwork and upload the images you want to use. You don’t have to upload them all, just upload what you want to customise.
  6. Click Save changes button at the bottom
  7. Click on Appearance tab at the top
  8. Choose a Default theme (users can still set their own theme, this is just the default one). “Automatic” means it uses dark or light depending on what the person viewing the site has chosen on their own system.
  9. If you’re a techy person or you’re using ready-made code, you can add additional CSS in the Custom CSS box
  10. Click on Save changes button at the bottom

What does “Server Thumbnail”, “Favicon” and “App Icon” actually mean in practice?

  • Server Thumbnail: The artwork which appears in link previews and in Mastodon server listings on websites and apps. It helps get across what kind of server you run. This is probably the most important to customise.
  • Favicon: This is the icon that appears when people bookmark your server’s website on their web browser.
  • App Icon: This is the icon that appears on phones or tablets if people install your server’s website as a web app.

Can admins add extra themes?

Yes, there are ready-made themes and themes can be created, though it may require tech skills to add or create them. See the custom CSS guide for more details.

↩ Back to the front page