To add a graphic overlay, add it as a source in the scene that contains your live video, then size and position it on the canvas. In OBS, use an Image source for a static file and a Browser Source for web content such as alerts or chat; Streamlabs Desktop also supports library, import and manual workflows.
The right choice depends on what the graphic needs to do. A logo that stays still does not need a browser page or a plugin, while a changing alert usually relies on web content supplied by a service. Build the scene, check it in preview and make sure the overlay does not cover the parts of the picture your audience needs to see.
Choose the graphic and overlay type
Start with the job the graphic should do, not with a search for an overlay package. A channel logo, a frame around a camera, a small programme label or a fixed notice can usually be prepared as an image file. If the design does not need to change while you stream, keeping it as a local image makes the source straightforward: OBS displays the file you choose in the scene.
Web-based elements have a different purpose. Alerts, chat boxes and other widgets may show changing information, so their source is a webpage or widget URL rather than a single static file. They may depend on an account, a service or an internet connection. An overlay library or web alert is only available when its provider offers it and you have access to the relevant content; it is not a feature that every graphic automatically includes.
| What you want to show | Suitable starting point | What to check |
|---|---|---|
| A logo, border or fixed label | OBS Image source | The image file is in the intended scene and remains legible at output size. |
| An alert or chat box | OBS Browser Source | The provider's page or widget is available and the source dimensions suit the canvas. |
| A ready-made themed design in Streamlabs Desktop | Streamlabs overlay library | Which components the design includes and how they appear in the chosen scene. |
| An overlay package you already have | Streamlabs import workflow | The file is an overlay package intended for that import route. |
| Streamlabs features inside OBS Studio | Optional Streamlabs plugin | Current operating-system and OBS compatibility requirements. |
There is no need to use one method for every element. A scene can combine a local logo with a browser-based alert if each has a clear role. For a channel that runs a fixed visual loop, such as a devotional music stream, a modest logo and a clear programme label may be enough; a local-news loop might also use a changing web element if it actually needs to update during the broadcast.
Decide where the graphic belongs before adding it. A camera layout, a full-screen presentation and a music visual may need different compositions. OBS scenes hold their own arrangements of sources, so a graphic intended for one layout need not be added to every scene. If you are still planning the room, camera and audio around a stream, the practical home streaming setup guide can help frame those choices separately from the overlay itself.
Add a static image source in OBS
Open OBS Studio and select the scene where the graphic should appear. If you have not made one for this layout, create a scene and give it a name that makes sense to you, such as “Camera with logo” or “Music loop”. The scene is the composition you will preview and send to the stream; the sources inside it are the individual picture and sound elements.
In the Sources panel, choose the add control and select Image. Give the source a useful name, then browse to the graphic file and confirm. OBS's Sources Guide describes Image Sources as a way to add an image or slideshow to a scene. For one fixed logo or frame, select the image itself rather than creating a browser page for it.
A transparent PNG is often convenient when you want the camera or video to remain visible around the design, but the important point is that the file itself should have the shape and background you intend. If you choose an image with an opaque rectangle behind a logo, OBS will display that rectangle too. Check the graphic in the preview rather than assuming that transparency or colour will appear as expected.
Once added, select the image in the canvas. Drag a corner or edge to adjust its size, and drag the graphic itself to move it. Keep a copy of the original image unchanged so you can start again if you distort the on-screen version. If precise sizing matters, use the source's transform options in OBS and check the result against the whole canvas, rather than judging it from a cropped view.
Check the source order in the Sources panel as well as its position. Sources higher in the visual stack can cover sources beneath them, so an image that seems to have disappeared may be behind another full-screen source. Move the image above the video it should sit on, while keeping it below any element that is deliberately meant to cover it. The preview gives you the practical answer: the correct order is the one that produces the intended composite.
If the image should appear only in certain layouts, add it only to those scenes or organise the layouts as separate scenes. Avoid duplicating a graphic across scenes unless that is actually what you want; separate copies can be useful when placement differs, but can also mean you have to update each one when the design changes. For other continuous-stream planning, such as keeping OBS from sleeping overnight, see the guide to preventing OBS from sleeping during a 24/7 stream.
Use Browser Source for web content
Use Browser Source when the thing you want to display is provided as web content. The OBS Project describes Browser Source as an embedded browser for custom layouts, images, video and audio, and its source guidance names alerts and chat boxes as common uses. Its Browser Source documentation is the reference for the source's current options. The source is not required for an ordinary local image.
First obtain the correct page or widget content from the service that provides it. Some services give you a unique URL associated with your account or widget. Treat such URLs as private if they grant access to your content, and use the provider's own instructions to find or regenerate them. Do not assume that installing OBS also supplies an alert design, a chat overlay or a third-party widget; those elements come from the service that offers them.
In OBS, add a Browser Source to the relevant scene and enter the page or widget details supplied by its provider. Set the width and height to suit the overlay's intended design and the scene canvas. A widget designed for a wide strip may not look right in a small square source, and an oversized browser area can make positioning harder. Start with the dimensions the provider recommends, if it gives them, then inspect the result in preview.
Place and resize the Browser Source as you would other sources, but remember that the webpage may have its own internal layout. If the page appears clipped, blank or unexpectedly scaled, check the URL, source dimensions and provider's instructions before rebuilding the scene. Also check that the source is visible, is not covered by another source, and has not been hidden. These are useful first checks, not a guarantee that a third-party page will always load.
A browser overlay can rely on the provider's service and your connection at the time it is shown. That is a practical difference from an image saved on your computer: a static logo can remain available from its local file, while a web alert needs its underlying page or widget to work. If a particular detail must stay on screen regardless, consider whether a fixed image is more appropriate than a changing widget.
The OBS Project's alerts tutorial shows how browser sources can be used for alerts. For a Streamlabs-specific example involving membership gifting, see the guide to setting up YouTube membership gifting alerts in Streamlabs. Follow the current instructions from the service that supplies the widget, since a URL, account setting or dashboard label may change.
Size and position the overlay
Treat the canvas as the complete picture your audience will receive. An overlay that looks discreet while you are focused on one corner can still cover a face, a lyric line, a ticker or an important part of a presentation. Place it, then look at the whole scene at the actual output canvas dimensions before deciding it is finished.
A simple working order is to add the main video first, establish its framing, and then place the graphic over it. Keep the graphic close to the edge only when that position leaves enough room for visible text and does not crowd other elements. For a logo, leave breathing space around its edges; for a lower-third label, make sure it does not obscure captions or information that is part of the programme. These are composition decisions rather than software rules, so use the content of your own stream as the test.
Use the source handles to resize proportionally where possible. Pulling only one side can stretch a logo or make text difficult to read. If the image contains empty transparent margins, the visible part may appear smaller than the source's bounding box suggests. Crop or adjust the source only when you understand which part of the graphic will be removed; otherwise, revise the image file and reload it.
For browser content, size the source to the widget's expected layout before trying to force it into a very different shape. If a widget is designed as a horizontal alert strip, narrowing it may wrap text or cut off artwork. If the provider supplies separate widget dimensions or layout options, use those rather than assuming a generic size. Then reposition the complete source in the scene to keep its contents visible.
Check source order when a graphic overlaps unexpectedly. A full-screen image or browser source above the camera may hide it; moving the overlay higher in the list can solve that, while moving a background lower can restore the intended layering. Naming sources clearly—“logo image”, “chat widget”, “camera”—helps when a scene has several elements and makes it easier to find the one you need to adjust.
If the design is used across several scenes, compare each scene rather than assuming one placement suits all of them. A graphic that fits beside a camera may land on top of a title card in another layout. Keep a version of the scene without the overlay if that helps you compare, or switch between scenes in preview as part of the review. The aim is a readable composition, not the largest possible graphic.
Import or build an overlay in Streamlabs
Streamlabs Desktop provides several routes, depending on whether you want a ready-made design, already have a package, or prefer to assemble the scene yourself. Its overlay instructions describe installing components from its overlay library, importing an existing .overlay file, and building a scene collection manually. These are distinct workflows, not steps every user needs to complete.
For a library design, find a design in Streamlabs and select the components you want to install into the scene collection. Review what the design actually contains before using it. A library item may include more than a border or logo, and its presence does not mean every web alert or service is automatically enabled. Confirm the elements shown in the scene and whether any included widget needs separate configuration.
If you have an existing .overlay package, Streamlabs documents an import route through Settings, Scene Collections and Import Overlay File. Select the intended file and then inspect the resulting scenes and sources. Importing a package is not the same as adding one image: it can bring in a composed set of elements, so make sure you know which scene collection is active before editing or going live.
You can also build manually. Create or select a scene collection, add scenes for your layouts, and use image files as sources for static elements. For web-driven content, add the relevant browser-based element using the instructions for the service that supplies it. This lets you keep the setup limited to the assets you actually need instead of installing a themed design simply because it is available.
Some people want Streamlabs features inside OBS Studio rather than switching to Streamlabs Desktop. Streamlabs documents an optional plugin route, but it is not necessary to display an ordinary image in OBS. Its plugin quick-start guide lists Windows and OBS Studio 28.0.0 or later as requirements and notes that some changes may require restarting OBS. Requirements and interface labels can change, so check that page for current compatibility before installing.
If a built-in Image source already does the job, adding a plugin introduces another workflow without solving a problem you have. Conversely, if you already use Streamlabs features and the supported setup fits your computer and version, the plugin may suit your way of working. Choose based on the element you need and the software you already run, not on a belief that overlays require a particular brand or add-on.
Preview the scene before going live
Use the preview to check the entire composition before starting a broadcast. Confirm that the image or web source is visible, the layers are in the right order, and text remains readable at the full canvas size. Switch through every scene that will be used during the stream; an overlay that works in the opening layout may be absent or misplaced in a later scene.
Check the edges of the canvas as well as the centre. Make sure a logo is not clipped, a label is not cut off and an alert has room to appear without covering essential content. If you use a Browser Source, check that its page appears and that the widget's content fits inside the source area. If it is blank, begin with the URL and dimensions, then confirm visibility and layer order before changing unrelated settings.
For any web element, think about what the audience sees if the page is unavailable. A logo saved as an Image source and an alert delivered by a service have different dependencies. If the alert does not appear in preview, that does not prove the scene is ready; investigate the service and source before relying on it during a live broadcast. You can decide whether the stream still makes sense without that element or whether to postpone using it.
Avoid making last-minute changes directly in the live scene without checking their effect. If the stream is already running, a scene change or source adjustment can be visible to viewers. Where practical, prepare the layout in advance and review it in preview; if you do change it during a broadcast, confirm that the intended scene is active and the main content is still visible.
A 24/7 channel has an additional operational choice: the computer that runs OBS must remain available for its scenes and sources. If the specific pain is leaving your own computer on to keep a file-based YouTube stream running, StreamNeo removes that computer-from-home constraint by turning an uploaded video into a YouTube live stream; it is not a replacement for OBS scene composition or a way to add graphics to every kind of live camera input. Keep the distinction clear: the overlay belongs in the visual workflow that produces your stream, and the continuous broadcast arrangement is a separate decision.
Keep the setup maintainable
A scene is easier to troubleshoot when its sources have understandable names and each source has one clear job. “Main camera”, “logo”, and “chat widget” are more useful than a list of unnamed images. If you later replace a logo or remove a widget, descriptive names make it less likely that you will alter the camera or the wrong scene by mistake.
Keep the original artwork and note where it is stored. If OBS can no longer find a local image after you move or rename the file, the source may need to be pointed to its new location. A local graphic is not independent of its file: it is simple to use, but the file still needs to remain accessible to the application. For streams built around stored media, the guide to streaming mixed MP4 and MKV files to YouTube Live from a VPS covers a different part of the continuous-video workflow.
For browser widgets, keep account-specific URLs private and record which service or account supplies them. If a widget changes or stops appearing, you can check the source that owns it instead of guessing whether OBS or the design itself is at fault. Avoid adding a web element just because a template includes one; if you do not need its changing information, a static image may be simpler to maintain.
Finally, review the scene after software updates or after importing a new collection. A renamed control, a changed provider page or a different canvas setting can affect the workflow. Official documentation explains the intended source types and current product steps, but it cannot confirm that your particular graphic, account widget or scene is configured correctly. Your own preview is the final check before the audience sees it.
Before committing, compare the operating options on the pricing page. When the file and channel are ready, start free — 24-hour trial, no card.
FAQ
Do I need Browser Source to add a graphic in OBS?
No. Use an Image source for a static graphic file such as a logo, border or fixed label. Browser Source is for web content, including widgets such as alerts or chat when a provider supplies them.
Can I use an overlay without an overlay library?
Yes. You can add a local image directly as a source in OBS or build a scene manually in Streamlabs Desktop. A library is one route to a ready-made design, not a requirement for a graphic overlay.
Why is my Browser Source overlay blank or cut off?
Check that the URL or widget content is correct and available, then check the source's width and height, visibility and position in the layer order. If the provider has setup instructions, compare your source with them; a third-party page can change or become unavailable.
Does Streamlabs' OBS plugin work on every system?
No. Streamlabs' published quick-start guide lists Windows and OBS Studio 28.0.0 or later, and says some changes may require an OBS restart. Check its current documentation before installing, because compatibility requirements can change.