Skip to content

Branding Guide

MrCrayfish edited this page Feb 17, 2025 · 9 revisions

This guide will walk you through the process of adding your own custom branding, ensuring your mod stands out with a custom icon, banner, and background.

Icons

processed_image

The icon is a small image displayed to the left of your mod’s name in the scroll list. Since it is drawn at a small size, the optimal resolution for the icon is 64x64 pixels. However the icon can be up to a maximum of 256x256 pixels. The icon must be saved in PNG format. Place the image in the resources directory of your mod at assets/<mod_id>/icon.png and specify the path to the icon in the metadata of your mod.

Fabric

Merge the following into your fabric.mod.json and replace <mod_id> with your mod id. An example can be found here.

{
    "icon": "assets/<mod_id>/icon.png",
}

NeoForge

Append the following to the bottom of your neoforge.mods.toml and replace <mod_id> with your mod id. An example can be found here.

[modproperties.<mod_id>]
catalogueImageIcon = "assets/<mod_id>/icon.png"

Note: If your mod does not provide banner branding, Catalogue will use the icon as a fallback. Keep in mind that the image will be scaled to fill the height requirement for the banner, so a larger icon (like 128x128) may be more optimal.

Banner

processed_image

The banner is a image that is shown at the top of the details section. It has a maximum size of 1280x256 pixels. Images can be smaller than the maximum size, however they will be scaled (with respect to the aspect ratio) to fill the available area of the banner. The banner must be saved in PNG format. Place the image in the resources directory of your mod at assets/<mod_id>/banner.png and specify the path to the banner in the metadata of your mod.

Since this image is quite large, it is recommended to optimise your image to reduce the file size. Remember to maintain an original copy before optimising.

Fabric

Merge the following into your fabric.mod.json at the bottom and replace <mod_id> with your mod id. An example can be found here.

{
    "custom": {
        "catalogue": {
            "banner": "assets/<mod_id>/banner.png"
        }
    }
}

NeoForge

Catalogue uses the logoFile property defined in neoforge.mods.toml for the banner branding. If logoFile is not already defined, add it under the [[mods]] section. Make sure to replace <mod_id> with your mod id. An example can be found here. You can read more about the NeoForge's mod properties here.

[[mods]]
logoFile = "assets/<mod_id>/banner.png"

Background

processed_image

The background is an image that is displayed behind the title and banner of the selected mod. Catalogue adds a fade out effect of the image to allow it to gracefully blend into the description section. The background image must be exactly 512 x 256 pixels. The background must be saved in PNG format. Place the image in the resources directory of your mod at assets/<mod_id>/background.png and specify the path to the background in the metadata of your mod.

Since this image is quite large, it is recommended to optimise your image to reduce the file size. Remember to maintain an original copy before optimising.

Fabric

Merge the following into your fabric.mod.json at the bottom and replace <mod_id> with your mod id. An example can be found here.

{
    "custom": {
        "catalogue": {
            "background": "assets/<mod_id>/background.png"
        }
    }
}

NeoForge

Append the following to the bottom of your neoforge.mods.toml and replace <mod_id> with your mod id. If you already have [modproperties.<mod_id>] defined, simply append the catalogueBackground property to the bottom. An example can be found here.

[modproperties.<mod_id>]
catalogueBackground = "assets/<mod_id>/background.png"

Need Support

If you are having any trouble with adding custom branding, feel free to reach out on MrCrayfish's Official Discord and post in the #mod-support forum.

Clone this wiki locally