How to Include Your Logo in OG Images
Your logo on an OG image is instant brand recognition. When someone scrolling through their feed sees your link preview, the logo tells them exactly who is behind the content before they even read the title. But placing a logo well requires more thought than just slapping it in a corner.
Logo Sizing and Proportions
Your logo should be visible but not dominant. A good rule of thumb is to keep the logo at 10-15% of the image width, which means roughly 120-180px wide on a 1200px canvas. If your logo is taller than it is wide (a logomark or icon), constrain it by height instead, keeping it around 60-90px tall. The logo should complement the headline text, not compete with it. When the image is scaled down to 400px on a mobile feed, your logo should still be recognizable but small enough that it does not overpower the title text. If your logo contains fine details or thin text, consider using a simplified version (like just the icon/mark) at small sizes.
Placement Strategies That Work
The most common and effective logo placements are top-left (like a letterhead), bottom-left (anchoring the composition), or center-bottom (for symmetrical designs). Top-left works best when you want the viewer to identify your brand first, then read the headline. Bottom-left or bottom-right works well when the headline should be the primary focus and the logo serves as a signature. Avoid placing the logo in the exact center of the image unless your design specifically calls for it, because it competes with headline text and can make the image feel like a splash screen rather than a content preview. Whichever position you choose, be consistent across all your OG images to build brand recognition.
File Format and Background Handling
Always use a PNG logo with a transparent background when compositing onto your OG image. This gives you flexibility to place the logo on any background color or image without a visible rectangular border around it. If your logo is only available in dark colors and your OG image has a dark background, prepare a white or light version of the logo as well. Some brands maintain both a full-color and a monochrome (white) version specifically for dark backgrounds. When using an AI-generated or photographic background, ensure the logo area has sufficient contrast either by placing a subtle background shape behind the logo or by using a region of the image that is naturally lighter or darker.
Consistency Across Dynamic Images
When generating OG images dynamically for hundreds or thousands of pages, your logo placement and sizing should be templated so every image maintains the same brand treatment. Define fixed coordinates and dimensions for the logo position in your generation template, and test with a variety of background colors and headline lengths. If you use different OG image styles for different content types (blog posts, product pages, landing pages), each style template should include the logo in a consistent position. This repetition builds familiarity, and over time, your audience will recognize your links in their feed based on the visual pattern alone.
When Not to Include a Logo
There are cases where including a logo in the OG image adds clutter without adding value. If the OG image is already complex with a detailed illustration, headline text, and a subtitle, adding a logo may push the design past the point of readability at small sizes. In these cases, your og:site_name meta tag and the page domain shown by the platform provide sufficient brand attribution. E-commerce product images where you want the product to be the star of the show often look better without a logo overlay. Consider the context: if your brand is not well-known enough for the logo alone to drive recognition, the space might be better used for a more descriptive subtitle or visual element.
Generate your OG image in seconds
Paste a title, pick a brand color, and get production-ready social cards for every platform — with framework-specific meta tag snippets included.
Create Branded OG Images with Your Logo