FiveM Image Sizes & Assets: The Definitive Guide

16 min read10 sections · 10 questions answered
Short answer

The only hard requirement FiveM itself enforces is the server icon: a 96×96 PNG loaded with load_server_icon. Everything else is a convention. Design loading screens for 1920×1080 (16:9) and let them scale, use WebM for video and MP3 for music, make inventory icons 100×100 transparent PNGs named after the item, keep streamed textures power-of-two and well under 16 MiB, and host every web image on a stable HTTPS link — never a Discord attachment link, which expires.

A FiveM server shows its face in more places than most owners realise: the server list, the connecting screen, the loading screen, the in-game HUD and inventory, Discord, and every video and social post. Each surface has its own size, format and rules, and a few of them are strict — get the server icon wrong and it simply does not appear. This guide lists every one of them in one place, separates the official requirements from the community conventions, and explains the reasons behind each number so you can make the right call when your situation is different.

The cheat sheet: every FiveM image size in one table

Bookmark this table. The Source column matters: “Cfx docs” means FiveM enforces or documents it, “Discord” means Discord publishes it, and “convention” means it is what works in practice across thousands of servers but nothing will reject a different size.

AssetSizeFormatWhere it goesSource
Server icon96×96PNGload_server_icon in server.cfgCfx docs (required)
Server detail bannerWide strip, e.g. 1865×108PNG / JPGsets banner_detail "https://…"Convention
Connecting bannerWide strip, e.g. 1865×108PNG / JPGsets banner_connecting "https://…"Convention
Loading screen background1920×1080 (up to 2560×1440)WebP / JPGYour loadscreen HTMLConvention
Loading screen logo512–1024 px widePNG / WebP / SVGYour loadscreen HTMLConvention
Loading screen video1920×1080, 24–30 fpsWebM (VP9/VP8)Your loadscreen HTMLConvention
Loading screen musicMP3 128–192 kbpsYour loadscreen HTMLConvention
Inventory item icon100×100PNG (WebP works)ox_inventory/web/images/<item>.pngConvention
Discord server icon512×512 or largerPNG / JPG / GIFServer settingsDiscord
Discord server banner960×540 (16:9)PNG / JPG / GIFServer settings (boost level 2)Discord
Discord invite background1920×1080PNG / JPGServer settings (boost level 1)Discord
Discord Rich Presence art1024×1024PNG / JPGDiscord developer portalDiscord
Link preview (Open Graph)1200×630PNG / JPGYour websiteConvention
YouTube thumbnail1280×720JPG / PNGYouTube StudioYouTube
TikTok / Shorts video1080×1920 (9:16)MP4TikTok / YouTubeConvention
Sizes are width × height in pixels.

Server icon: 96×96 PNG, and nothing else

The server icon is the small square next to your server name in the FiveM server browser and on your cfx.re page. It is the only image FiveM is strict about. The Cfx documentation for load_server_icon states that the file must be a 96×96 PNG — a JPG, a 128×128 PNG or a renamed WebP will not show.

server.cfg
# The file sits next to server.cfg (the server's working directory)
load_server_icon myLogo.png
  • Export at exactly 96×96. Resizing a large logo down to 96 in a browser tool usually blurs it — export from the design file at that size, or downscale with a sharp filter and check it at 100% zoom.
  • Transparency works, but the list background differs between light and dark themes. A logo on a solid rounded square reads everywhere.
  • Keep detail minimal. At 96 pixels a wordmark is unreadable; use the symbol from your logo, not the full lockup.
  • The path is relative to where the server runs. If the icon does not appear, the server console prints an error when it cannot open the file.

We cover the icon on its own — including how to make one that stays readable at that size — in the FiveM server icon guide.

Server list banners: banner_detail and banner_connecting

FiveM supports two optional banners set as server variables. banner_detail is shown on your server’s detail page in the server browser; banner_connecting is shown while a player is connecting. Both are URLs, so the image lives on a web host, not on the game server.

server.cfg
sets banner_detail "https://cdn.example.com/banner-detail.png"
sets banner_connecting "https://cdn.example.com/banner-connecting.png"

Cfx has never published an official banner size, and you will find wildly different “official” numbers online. The honest answer: the banner is drawn as a wide strip and scaled to the space available, so what matters is the shape. The long-standing community template on the Cfx forum uses 1865×108; many servers use 1920×200. Either works if you design for a wide, short strip and keep every important element in the middle third.

The full walkthrough, including safe areas and animated banners, is in the banner guide.

Loading screen images, video and audio

A loading screen is an HTML page rendered by FiveM’s built-in Chromium, so it follows web rules rather than game rules. There is no required resolution: the page fills the player’s window at whatever resolution they run. That is why the right approach is to design for 1920×1080 and build responsively, rather than exporting one giant image and hoping it fits.

ElementRecommendedWhy
Background image1920×1080 WebP or JPG, 300 KB – 1.5 MB1080p is the most common player resolution; 2560×1440 if your art has fine detail.
Background fitobject-fit: cover on a full-viewport elementCrops the edges on ultrawide instead of stretching the image.
LogoTransparent PNG/WebP or SVG, 512–1024 px wideSharp on 4K without being heavy; SVG scales perfectly.
VideoWebM VP9 (or VP8), 1080p, 24–30 fps, 10–30 MBWebM is the format FiveM’s Chromium plays in every build.
MusicMP3, 128–192 kbps, stereoReliable in CEF and small enough to start instantly.
FontsWOFF2, self-hosted, 1–3 familiesLoads with the page; no flash of fallback fonts.

Keep the text-safe area in the centre 1280×720 of your 1920×1080 design. A player on a 21:9 ultrawide sees extra width, a player on a 16:10 laptop loses a sliver of the sides, and a centred safe area survives both. Our guides on responsive loading screens, video backgrounds and fonts go deeper on each element.

In-game UI: inventory icons, HUD and NUI images

Everything drawn by a script’s interface — inventory, HUD, phone, menus — is NUI: another HTML page in the same Chromium. Those images follow the same web rules, with one important convention for inventories.

  • ox_inventory loads item images from nui://ox_inventory/web/images by default. The file name must match the item name exactly, in lowercase: an item called water needs water.png. The folder can be changed with the inventory:imagepath convar.
  • The de-facto icon size is 100×100 with a transparent background and the item centred with a small margin. Larger sources (256×256) are fine but are downscaled anyway, so they only cost memory.
  • qb-inventory and most QBCore inventories read from their own html/images folder with the same name-matching rule.
  • HUD icons are best as inline SVG or an icon font, which stay sharp at every resolution and cost almost nothing.

Weapon icons follow the same rules; the weapon studio covers them in detail in its weapon inventory image guide.

In-game textures: power of two and the 16 MiB warning

Textures that are streamed into the game world — vehicle liveries, clothing, weapon skins, map tiles — are not web images. They live in .ytd texture dictionaries, compressed in GPU formats (DXT1, DXT5, BC7) with mipmaps, and the rules are the engine’s.

  • Use power-of-two dimensions: 512, 1024, 2048, 4096. Non-power-of-two textures break mipmapping and waste memory.
  • Pick the smallest size that looks right at the distance players see it. A pistol grip does not need 4096×4096.
  • Compress: DXT1 for textures without alpha, DXT5 when you need alpha, BC7 when quality matters more than size.
  • Generate mipmaps. Without them distant objects shimmer and the game reads full-resolution data it never needed.

The FiveM server checks every streamed asset when it starts. Any asset using more than 16 MiB of physical or virtual memory is printed as a warning, the colour gets more alarming at 32 and 64 MiB, and above 48 MiB the message adds: *“Oversized assets can and WILL lead to streaming issues (such as models not loading/rendering).”* Treat 16 MiB as your ceiling, not 48.

Asset typeTypical texture sizeNotes
Vehicle livery2048×20484096 only for hero vehicles; every extra livery multiplies memory.
Clothing (EUP style)512–1024Hundreds of drawables add up quickly across a server.
Weapon skin1024–2048Seen up close in first person, so detail matters here.
Minimap tilesFixed by the gameReplace at the exact size of the original tile.

Minimap textures are the one case where you have no choice at all: the replacement must match the dimensions and layout of the original tiles. The minimap studio explains the full layout in its minimap technical specification.

Discord: icon, banner, invite background and Rich Presence

For most FiveM communities Discord is the front door, so its images deserve the same care as the server’s.

ImageSizeNotes
Server icon512×512 or largerShown as a circle or rounded square — keep the mark inside the centre.
Server banner960×540 (16:9)Discord’s published recommendation; 1920×1080 also uploads and is resized. Needs boost level 2.
Invite background1920×1080JPG or PNG. Shown behind your invite link. Needs boost level 1.
Custom emojiUp to 128×128256 KB file limit.
Rich Presence art1024×1024Discord “strongly recommends” 1024×1024 for activity art.

Rich Presence is the “Playing on your server” card players see on each other’s profiles; FiveM can set it with a few natives. The whole setup is in the Discord Rich Presence guide, and the full Discord art set in Discord branding sizes.

Website and social media

  • Open Graph image: 1200×630. This is the card shown when your website link is shared on Discord, X and Facebook. Without it your link posts as bare text.
  • YouTube thumbnail: 1280×720 (16:9, minimum 640 wide). A face or a vehicle and three words beat a paragraph.
  • Vertical video: 1080×1920 for TikTok, Reels and Shorts — the channel that brings most new players to roleplay servers today.
  • Favicon: a 512×512 PNG master, exported down to 32×32 and 180×180 (Apple touch icon).

Where to host images so they never break

Anything referenced by URL — banners, loading screen assets hosted online, NUI images loaded from the web — is only as reliable as its host. The server icon is the exception, because it is read from disk.

  1. 1Use HTTPS. The loading screen and NUI pages are served securely, and Chromium blocks http:// media on secure pages.
  2. 2Use a direct file URL. The address must return the image itself — a share page from a cloud drive returns HTML.
  3. 3Use a host that allows cross-origin requests if scripts read the file (for example to draw it on a canvas).
  4. 4Avoid links that expire: Discord attachments and some image hosts sign their URLs.
  5. 5Version your files (banner-v2.png) when you change them, so players do not keep a cached old copy.

Files placed inside a resource and declared in the manifest are served by the FiveM server itself and never expire, which is often the simplest option for loading screen assets. See how NUI asset paths work.

A practical export workflow

Design once, export many times. Keep a single master file per asset and export every size from it, so a colour change updates everything at once.

  1. 1Create a master logo as a vector (SVG or a vector layer) with a symbol-only variant for small sizes.
  2. 2Export the server icon at 96×96 PNG from the symbol variant.
  3. 3Export the Discord icon at 1024×1024 and let Discord downscale it.
  4. 4Build the loading screen background at 1920×1080 and export WebP at quality 80–85.
  5. 5Export banners at 1865×108 or 1920×200 with the text centred.
  6. 6Check every export at 100% zoom, on a dark and a light background.

Consistency across all of these is what makes a server look established. The server branding kit guide turns this list into a reusable set of colours, fonts and templates.

Common questions

What size is the FiveM server icon?

Exactly 96×96 pixels, PNG format. It is loaded with load_server_icon yourfile.png in server.cfg, and the file sits next to server.cfg. Other sizes and formats are not shown.

What is the official FiveM banner size?

There is none. banner_detail and banner_connecting are scaled to fit, so design a wide strip — 1865×108 (the Cfx forum template) or 1920×200 are both common — and keep text in the centre. See the banner guide.

What resolution should a FiveM loading screen be?

Design at 1920×1080 and build the page responsively so it scales to every resolution. A loading screen is a web page, so it fills whatever window the player has.

Can I use an MP4 video in my loading screen?

WebM (VP9 or VP8) is the safe choice because it plays in every FiveM client build. H.264 MP4 support has not been reliable, so convert MP4 files to WebM before using them.

What size should ox_inventory item images be?

The common standard is 100×100 transparent PNG. The file name must match the item name exactly, and the default folder is ox_inventory/web/images.

Why does my server icon not show?

Usually the file is not exactly 96×96, is not a real PNG, or the path in load_server_icon does not match the file next to server.cfg. Check the server console on start — it reports when it cannot load the icon.

How big can a streamed texture be in FiveM?

There is no hard cap, but the server warns about any asset using more than 16 MiB of memory and calls anything above 48 MiB a streaming risk. Aim for 2048×2048 or smaller with compression and mipmaps.

Can I host my banner on Discord?

No. Discord attachment links now expire, so the banner disappears after a while. Host it on your website or a permanent image host with an HTTPS direct link.

What size is a Discord server banner?

Discord recommends 960×540 (16:9). A 1920×1080 image also uploads and is resized. The banner requires server boost level 2.

Do I need a 4K loading screen background?

Rarely. A well-compressed 1920×1080 or 2560×1440 image looks sharp on most screens and loads far faster than a 4K file. Load time matters more than pixels players will not notice.

Want a loading screen you never have to debug?

Build it in the browser, export once, and edit it whenever — no HTML, no re-uploads.

Start free

More guides