Twitch Graphics Size Guide
Are you a stream graphic designer? DIY Twitch streamer on a budget? Consider this Twitch Size Guide your new bible. Like an OG Design GameShark dishing out pixel gold. Poggers.
This guide series is designed with both artists and streamers in mind - a quick reference guide for size and dimension of the essential stream images. From webcam overlays to banners to panels and more. Streamers, we’ll give you the tools you need to create graphics worthy of your unique Twitch brand. Designers, bookmark this page - it will be a vital resource in your quest to create god-tier stream graphics.
In Part One, we’ll take you on a tour of the key Twitch graphics. Part Two will cover the essentials of Mixer, while Part Three tackles social media graphics. We’ll keep our Sizing Guides updated as new changes roll out. You’ll also note that under each section, we’ve included ‘Tips from the Designers’ - a few best-practices and insights from the pro designers at VBI.
In a rush? We’ve included a condensed infographic right below. For a deeper dive into each individual element, scroll down.
NOTE: While we’d always prefer you work with our team of expert designers, animators, and illustrators, we also recognize that - like us - you’re a creative type. A maverick innovator willing to get their hands dirty. The world can’t keep your awesome powers caged, and we won’t either… If you change your mind and decide to leave design to the pros, VBI has your back. Shop our available stream designs, browse our free stream graphics collection, or kick your career into high gear with custom Twitch design.
Twitch Profile Picture (Avatar)
Let’s start with the basics. Your Profile Picture, also referred to as an Avatar, is the primary image associated with your Twitch channel. It’s likely to be a new viewer’s first impression of your stream brand, so make it count.
And it appears everywhere. Here are a few key locations where viewers will spot it:
Twitch Navigation and Channel Search
‘Going-Live’ Email Alert Notifications
Web Searches (Including Google)
Twitter Posts Including Your Stream Link
So don’t be a pleb. Get your sizing correct.
Note that unlike most other stream graphics, Profile Pictures are square - you’ll need to use a 1:1 aspect ratio (height and width equal). Twitch recommends minimum dimensions of 200 x 200 pixels, with a maximum of 256 x 256 pixels. We suggest using 256 x 256, if possible, to ensure the highest image quality possible - anything over this size and Twitch will automatically scale down your image. Maximum file size is 10MB, and accepted file types include JPEG & PNG.
Recommended Size: 256 x 256 pixels
Maximum File Size: 10MB
Accepted File Types: JPEG, PNG
Tips From the Designers:
We recommend using your main brand image here, whether that’s a kick-butt stream logo or a photo of your big beautiful mug. Whichever you choose, make sure the subject fits into as much of the frame as possible. This is because the Profile Picture (which is already small to start with) will often be scaled down further to fit on different devices, Twitch navigation, etc.
The final product should be clear and distinct - viewers should immediately be able to recognize your channel from your profile image. If they need to squint to make out your image, you’re doing it wrong.
Twitch Profile Banner
So you’ve successfully caught their attention and they’re on your channel page. Now win them over with a creative, epic Cover Image.
Let’s be frank. The Profile Banner used to be King of the streamer graphics, pinned to the top of your channel and proudly displaying your branding for the world to see. This year’s Twitch updates have put a dent in that once-sterling reputation, but there’s no question that the Cover Image remains a powerful tool to keep visitors engaged and smashing that Follow button in no time.
Now let’s talk dimensions. Following the most recent updates, Twitch recommends a size of 1200 x 380 pixels. No need to get cute with image height - anything shorter or taller than 380 pixels will automatically scale to the required 380px. Again, max file size is currently 10MB, and accepted file types include JPEG, PNG, & GIF.
One thing to note here: your banner art will scale depending on the browser width of each user. This means your banner will stretch if a user’s browser window is wider than your image width. TDLR, keep your height stable @ 380 pixels, but the wider the image, the better it will scale - meaning you could potentially extend your width beyond 1200px for viewers with ultra-high resolution (we’ve seen some banners as wide as 3000px!)
Recommended Size: 1200 x 380 pixels
Maximum File Size: 10MB
Accepted File Types: JPEG, PNG, GIF
Tips From the Designers:
Remember that little issue with width scaling we discussed earlier? Well, that stretching will occur on the right-hand side, because Twitch banners are aligned with the left-hand side of the UI. This means you’ll want to concentrate your graphics and branding on the LEFT, so that they remain visible regardless of each viewer’s browser width / resolution.
Oh! And before we forget, make sure to include your social media accounts on the final graphic. It’s a popular design format for a reason - keeping your handles front-and-center is a great tool for building social communities.
Twitch Webcam (Overlays)
So you’ve opted to use a webcam overlay on-stream. Cheers to that. Soon, that beautiful face of yours will be visible to hundreds, if not thousands of viewers across the globe. Now don’t look like a rookie with a slipshod overlay - put some time & thought into your webcam design and you’ll find yourself rewarded.
There are two popular webcam options to consider here: 16:9 or 4:3 aspect ratios. Ultimately, the choice will depend on your stream camera's resolution. While 16:9 tends to be more common, some streamers prefer 4:3 webcam frames
In reality, Webcams are a bit of an odd duck from a design standpoint. It's tricky to pin down specific sizes or dimensions,since streamers typically crop their Webcam boxes via OBS to fit the size they're looking for - or by making custom shapes via masks, etc. The final frame is almost always going to be scaled down and adjusted by each streamer to meet his or her needs. Generally, no two streamers are going to size their cam the exact same - it all comes down to personal preference.
For this reason, recommending a specific webcam resolution is tough, although we suggest making it as large as possible. At the very least, start with 1920 x 1080 pixels, so that when scaling down you preserve the design quality. If your webcam is static, use a PNG (JPEGs aren't recommended since they don't support transparency). For animated frames, go with GIF.
Recommended Size: 1920 x 1080 pixels
Accepted File Types: PNG (Static), GIF (Animated)
Tips From the Designers:
While the webcam may seem simple, there are LOTS of options here, and many streamers experiment with multiple design types until they find the right fit. Webcams can range from simple, minimalist frames, to more complex overlays featuring tickers & stream info, to fully-animated, dynamic designs. As always, we recommend sticking with a design that fits your channel’s branding and visual themes.
You’ll also want to play around with the on-screen placement and sizing of your webcam overlay. Playing a game with complicated UI info, like League of Legends or World of Warcraft? Consider minimizing your webcam size and arranging it so that it doesn’t cover key in-game indicators. On the other hand, with Battle Royales or FPS games like Overwatch featuring simpler in-game UIs, you have more leeway RE: webcam layout.
Twitch Panels
Let’s talk about your stream info... If you’ve ever used the Twitch native header markdown, you know it is a whole lot of BLEH. Hello walls of text, goodbye viewers. Seriously, don’t make us vom.
Veteran streamers use Panels to create flowing, engaging channel profiles - without the eye-sore. Feature your most important channel information in meaningful, bite-sized chunks, while simultaneously injecting your stream brand and personality through personalized designs.
OK, down to business - let’s talk sizing. The maximum width for Panel Headers is 320 pixels - anything wider than that and Twitch will automatically scale your image. For height, you’ve got a bit more leeway for creativity. Some streamers like to use shorter, horizontal panels featuring a quick section title - for example, ‘ABOUT ME’ or ‘DONATE’ or ‘SOCIAL MEDIA’. For these, we suggest a height of 75 pixels (or 320 x 75 px). Others prefer taller, vertical (or square) panels that allow more space for text and images, in which case we suggest a maximum height of 600 pixels (or 320 x 600 px). Oftentimes, streamers like to mix in both types. The choice is yours. Maximum file size here is 2.9MB, while we recommend sticking with JPEG or PNG.
Recommended Size: 320 x 75 pixels (Minimum), 320 x 600 pixels (Maximum)
Maximum File Size: 2.9MB
Accepted File Types: JPEG, PNG
Tips From the Designers:
If you can help it, don’t use just any generic Twitch Panels. Go for designs that are unique to the theme and branding of your channel - this will separate you from the streamer crowd and add a professional vibe to your profile.
Pro-tip here. For better profile flow, try implementing different designs for different Panel features. For example, if your Panels feature links, try differentiating them from your standard headers by using a different color or a unique border. The end result is a giant beacon just asking to be clicked!
And while we’re on the topic of LINKS, well… use them! Panels look like giant BUTTONS for a reason - they are amazing tools for getting your viewers to visit your social media, Discord, etc. Too often, we see streamers bury their links in text below perfectly-good Panels and this makes us MonkaS sad.
Twitch Offline Screen (Video Player Banner, Stream Screens)
Marathon-streams, late night IRL chats, and unhealthy amounts of G-FUEL... who needs sleep when you’re having this much fun? But even streaming gods needs time off-camera for R&R. The question is, what happens to your channel when you’re away? Well, that’s where Offline Banners come in. When viewers visit your page, they’ll be greeted by a static banner image featuring (hopefully) engaging visuals and some of the channel info essentials. A well designed Video Player Banner hustles while you sleep.
When it comes to size, the Twitch Offline Banner is relatively straightforward. Stick with 16:9 ratio, with recommended dimensions of 1920 x 1080 for the best resolution and quality. You’ll want to keep it under 10 MB, and stick with JPEGs & PNGs. Pretty cut-and-dry here, folks.
And while we're at it, everything above also applies to your typical stream screens. You know, Starting Screens, BRB Screens, Stream Ending Screens, etc. Just stick with the resolution & sizes above/below and you're good to go, playa.
Recommended Size: 1920 x 1080 pixels
Maximum File Size: 10MB
Accepted File Types: JPEG & PNG
Tips From the Designers:
Now’s where things get creative. Considering the relatively-large size of Video Player Banners, there’s a lot of real estate to cover here. Some streamers prefer to keep things simple, with minimalist, subtle visuals. Others experiment with more action packed, extensive designs. The choice is yours.
We recommend, at a bare minimum, including your stream logo and/or visual branding prominently. Most streamers like to include their social media handles (including Discord links) on their final design. If you have a consistent streaming schedule, consider adding it to your Banner. Remember that there are a lot of viewers who won’t bother to scroll down and read your stream info - most veteran streamers know this and so include their channel’s most important info on their Offline Screen.
Oh, and in most cases, we’ve found it’s best to keep your visuals centered for this particular graphic. Unless you’re trying to get real edgy.
Twitch Alerts
Let’s be real, we all want senpai to notice us - and this includes your viewers. Just think of some of the biggest streamers in the game… $10 says you’d recognize their iconic alert drops within seconds.
Stream alerts can be one of the best tools to grow your Twitch community and encourage viewer engagement. Set up your alerts properly, and each Follower, Sub, Host, or Donation will grow your streamer brand - and get you one step closer to the pros.
Unlike the other Twitch graphics listed here, Stream Alerts are generally managed through a third-party streamer software, such as Streamlabs, and then connected to your OBS Studio. We recommend sticking with alert dimensions of 750 x 250 pixels. For static Alerts, go with PNG files (JPEGs aren't ideal since they lack transparency). For animated Alerts, you’ll want to us GIF or WEBM files. Maximum file size here is 10MB.
Recommended Size: 750 x 250 pixels
Maximum File Size: 10MB
Accepted File Types: PNG (Static), GIF / WEBM (Animated)
Tips From the Designers:
We sound like a broken record here, but it’s for good reason. Make sure your alerts fit your stream’s visual themes and branding. This could mean incorporating your logo, color scheme or design patterns, or even modifying the standard alert text.
New streamers tend to stick with static alerts - they get the job done, look great, and add professionalism to your stream presentation. As your channel grows, consider taking the leap to animated stream alerts. Even if the rest of your stream design is minimalist or subtle, animated stream alerts are almost always worth the investment - and are a clear mark of a stream veteran.
Twitch Emotes
Remember the first time you saw the Kappa emote? Pogchamp? Probably puzzled, perhaps a bit curious. But after some quick research you suddenly felt like you had been admitted into a secret club. Like you’d been let in on an inside joke. And you immediately proceeded to spam your new emote in Twitch chats far and wide.
This is the community-building power of emotes. And you can harness this power with customized emotes unique to your channel. Get people to start dropping your emotes in chat - not only will your stream look alive and dynamic, but new viewers will start smashing that Sub Button just to get in on the action.
Currently, Twitch Affiliates are only able to upload one custom emote to their channel. HOWEVER, Affiliates can upload two additional emote variations unique to the Subscription tier - for example, viewers who opt for a Tier 2 $9.99 Sub unlock a unique emote design, as is the case for Tier 3 $24.99 Subs. Once you hit Partner, all eyes are on Subscriber Points, which build up as viewers subscribe to your channel over time. As you hit new Sub Point goals, you unlock additional emote slots, which allow you to upload more emote designs to your channel. For a breakdown of tiers, check out this Twitch post. At the moment, the max # of emotes that can be uploaded to your channel is 50.
Feeling artsy and independent? Looking to create your own emotes? You’ll want to get sizing and formatting right, since all emotes need to be submitted to Twitch for review before you can use them on your channel. Each emote needs to be submitted in the following three sizes: 28 x 28 pixels, 56 x 56 pixels, and 112 x 112 pixels - so be sure to save out three different versions. All emotes must be transparent, so you’ll need to stick with PNG format. Oh, and maximum file size is 25KB.
Required Size: 112 x 112px, 56 x 56px, & 28 x 28px
Maximum File Size: 25KB
Accepted File Types: PNG
Tips From the Designers:
Think about your favorite emotes. They’re all relatively simple designs, when you really think about it. That’s the key - your emotes should be simple but iconic to your streamer brand. We often see streamers make the mistake of packing too much detail into their emotes. Sure, it may look great in high resolution, but once you scale it down to the tiny size of 28 x 28 pixels (as it will appear in chat), all those extra details will be lost. Chat will be left squinting at your blurry, chaotic design. Feelsbadman.
So keep it simple. Use a well-defined image that can still be clearly recognized in bite-size. This includes text - all words or phrases should be big, because text is one of the first things to be lost when your emote is scaled down.
Twitch Badges (Subscriber Badges, Loyalty Badges)
Think of your favorite streamer’s Chat. When you roll in there as a Subscriber, you rep that channel badge with pride. You’re a veteran of their stream and you’ve directly supported their broadcasting career. Pride, loyalty, epeen… Whatever you call it, that same phenomena can be recreated on your channel when you upload custom Subscriber Badges.
Twitch Sub Badges are automatically displayed next to a subscribed viewer’s name in Chat, and are exclusive to your channel. Twitch Affiliates and Partners have the ability to upload custom designs for this ‘Base Badge’, which indicates the viewer has been subscribed for at least one month to your channel. The default Base Badge is a star... Don’t be that guy/girl. Go with a design unique to your Twitch channel and brand - trust us, it will pay off.
Affiliates and Partners also have the ability to upload Loyalty Badges, which are unique custom badges reflecting the length a viewer has been Subscribed to your channel. For example, a 6-month Subscriber to your channel would have a different badge design than a 3-month Subscriber. This is an opportunity for you to reward your most loyal Subs with exclusive flair in chat - and is also an incentive for viewers to stay subscribed in hopes of unlocking the next tier of badges. Currently, Affiliates can upload custom loyalty badges for 3-month, 6-month, and 1-Year Subscribers (in addition to their Base Badge). Partners unlock additional slots for viewers with Subs between 2-and 8-years.
Unlike Emotes, badges do not require Twitch review and approval - you can upload them to your channel as soon as they’re ready. Each badge needs to be uploaded in three sizes: 18 x 18 pixels, 36 x 36 pixels, and 72 x 72 pixels, so save out three different copies of each badge. All badges need to be transparent PNG files, with a maximum file size of 25KB.
Required Size: 72 x 72px, 36 x 36px, & 18 x 18px
Maximum File Size: 25KB
Accepted File Types: PNG
Tips From the Designers:
As we discussed with emotes, your designs should be clear and simple to compensate for size scale-down. This is extra-true for Subscriber Badges, which are almost half the size of your standard chat emote. There is a reason that most of the best Twitch Badges are minimalist, simplistic designs. Don’t over-complicate things.
On a tight budget or short on time? Opt for simple color changes to your badges, as opposed to entirely unique designs. For example, Base Sub is a red heart, 3-month is a green heart, 6-month is a purple heart, etc. When done right, these can be as effective as unique badge designs - although most streamers prefer to upgrade to unique designs once they have the resources or time to do so.
Twitch VOD Thumbnail
Sometimes everything hits juuuust right on stream… You’re in the zone, the donations & subs are rolling, and chat is en fuego. Once the Stream Ending screen has rolled, save that bad boy out as a VOD to reshare with your community at a later date. But a pro streamer knows VODs alone don’t guarantee views - you’ll want to upload an engaging and creative Thumbnail image to get followers clicking.
This one’s relatively straightforward - you don’t need insane design skills to pull off an epic Twitch Thumbnail. You’ll want to stick with the standard 16:9 aspect ratio, with maximum dimensions of 1280 x 720 pixels. Stick with JPEGs or PNGs, easy as pie.
Recommended Size: 1280 x 720 pixels
Accepted File Types: JPEG, PNG
Tips From the Designers:
Get creative, folks! This is not the time to use a generic, default frame from your stream. Think about the thumbnails you typically see on other Twitch streamers’ channels, or on YouTube - which videos are you most likely to click on? Images with a clear, zoomed-in point of focus work best, whether that’s a closeup of your beautiful mug, an epic in-game-moment, or a custom creation. Just grab a snapshot from your broadcast, crop it, and - if you’ve got some design skills - consider adding text or image overlays to the final product for a bit of extra spice.
Don’t spend too much time here, but don’t overlook it either. VODs can be powerful channel-growers, and a kick-butt thumbnail is worth the investment. Just look at how often Ninja runs his past broadcasts - there’s clearly something to it!
Conclusion
Welp, there you have it folks. Design recommendations and sizing dimensions for all the essential Twitch graphics. Now get out there and conquer the design world like some faceroll-EZ, uber-tilted Bob Ross. The brush is in your hands and the streamer-sphere is your canvas.
We’re confident you’ve got all the tools you need to take the next step, but if you need any help along the way our team of pro stream designers is here to lend a hand. Our collection of premium free and premade Twitch overlays is always at your disposal. And when the day comes for personalized, custom stream design for your channel, you know who to call.
Stay tuned for the next two parts of our stream sizing series! Part Two will cover the essential Mixer stream graphics, and Part Three will tackle the most important social media images for your stream.
Until then, keep on keepin’ on, cool kids.
Love,
VBI