Recommended Image Sizes - HL Vanilla Community
<main> <article class="userContent"> <p>This article serves as a one-stop reference guide detailing the recommended sizes for images that you can upload in your <strong>Higher Logic Vanilla</strong> community.</p><p><strong>📝 NOTE</strong>: Not all images listed below are required. Some are based on particular modules by subscription plan level (e.g., Knowledge Base and Subcommunities), while others are based on enabled addons (e.g., Groups, Ranks, Badges).</p><h2 data-id="style-guide-(theme-editor)">Style Guide (Theme Editor)</h2><h3 data-id="navigation">Navigation</h3><p><code class="code codeInline" spellcheck="false" tabindex="0">Dashboard > Appearance > Branding & Assets > Style Guides > Edit a Theme</code></p><h3 data-id="images">Images</h3><ul><li><strong>Homepage Banner</strong> (desktop) – 1920px by 322px</li><li><strong>Homepage Banner</strong> (tablet) – 768px by 255px</li><li><strong>Homepage Banner</strong> (mobile) – 414px by 120px</li><li><strong>Logo</strong> – 400px by 300px</li><li><strong>Content Banner </strong>(desktop) – 1920px by 150px</li><li><strong>Content Banner </strong>(tablet) – 768px by 255px</li><li><strong>Content Banner </strong>(mobile) – 414px by 120px</li></ul><div class="embedExternal embedImage display-large float-none"> <div class="embedExternal-content"> <a class="embedImage-link" href="https://us.v-cdn.net/6030677/uploads/I0RWSF2DYK1G/style-guide-themes.png" rel="nofollow noreferrer noopener ugc" target="_blank"> <img class="embedImage-img" src="https://us.v-cdn.net/6030677/uploads/I0RWSF2DYK1G/style-guide-themes.png" alt="style_guide_themes.png" height="681" width="1192" loading="lazy" data-display-size="large" data-float="none"></img></a> </div> </div> <p><strong>✔️ TIP</strong>: To learn about <strong>enabling responsive breakpoints</strong> that ensure <em>better rendering of Homepage and Content banner images</em>, see:</p><div class="js-embed embedResponsive" data-embedjson="{"body":"With Higher Logic Vanilla's (Vanilla) Foundation theme, you can specify different responsive breakpoints to control how the theme banner and content banner images in your community display on various devices. Desktops, tablets, and mobile devices have different screen sizes, so it's important that your images adapt to look…","photoUrl":"https:\/\/us.v-cdn.net\/6030677\/uploads\/GXW21TRYG1JP\/share-imagevanilla-community.jpg","url":"https:\/\/success.vanillaforums.com\/kb\/articles\/213","embedType":"link","name":"Responsive Breakpoints - HL Vanilla Community","faviconUrl":"https:\/\/us.v-cdn.net\/6030677\/uploads\/5OJX0TDUV3I6\/vanilla-32x32-favicon.png"}"> <a href="https://success.vanillaforums.com/kb/articles/213" rel="nofollow noreferrer ugc"> https://success.vanillaforums.com/kb/articles/213 </a> </div><h2 data-id="branding-assets">Branding & Assets</h2><h3 data-id="navigation-1">Navigation</h3><p><code class="code codeInline" spellcheck="false" tabindex="0">Dashboard > Appearance > Branding & Assets > Branding & SEO</code></p><h3 data-id="images-1">Images</h3><ul><li><strong>Favicon</strong> – 16px by 16px</li><li><strong>Touch Icon</strong> – 152px by 152px</li><li><strong>Shared Image</strong> – 200px by 200px</li><li><strong>Mobile Logo </strong>– 80px by 33px</li></ul><div class="embedExternal embedImage display-large float-none"> <div class="embedExternal-content"> <a class="embedImage-link" href="https://us.v-cdn.net/6030677/uploads/9ZG2SDDYH4C4/dashboard-settings.png" rel="nofollow noreferrer noopener ugc" target="_blank"> <img class="embedImage-img" src="https://us.v-cdn.net/6030677/uploads/9ZG2SDDYH4C4/dashboard-settings.png" alt="dashboard_settings.png" height="642" width="1148" loading="lazy" data-display-size="large" data-float="none"></img></a> </div> </div> <h2 data-id="settings-left-panel-options">Settings > left panel options</h2><h3 data-id="navigation-2">Navigation</h3><p><code class="code codeInline" spellcheck="false" tabindex="0">Dashboard > Settings > various left panel pages</code></p><h3 data-id="images-2">Images</h3><ul><li><strong>Category Banner</strong> – 1000px by 400px</li><li><strong>Category “Icon” Display Type</strong> – 200px by 200px</li><li><strong>Category “Image” Display Type</strong> – resized category banner image (resized to 400px by 300px)</li><li><strong>Category “Background” Display Type</strong> – resized category banner image (resized to 400px by 400px)</li><li><strong>Avatar </strong>– 560px by 560px; customizable in the Dashboard (see <a href="https://success.vanillaforums.com/kb/articles/120" rel="nofollow noreferrer ugc"><em>Avatars</em></a>)</li><li><strong>Avatar</strong> <strong>Thumbnail</strong> – 200px by 200px; customizable in the Dashboard</li><li><strong>Badges</strong> – 200px by 200px (see <a href="https://success.vanillaforums.com/kb/articles/15" rel="nofollow noreferrer ugc"><em>Badges</em></a>)</li><li><strong>Reactions</strong> – 200px by 200px (see <a href="https://success.vanillaforums.com/kb/articles/22" rel="nofollow noreferrer ugc"><em>Reactions</em></a>)</li><li><strong>Email Logo </strong>– 400px by 300px</li><li><strong>Knowledge Base Icon </strong>– 200px by 200px</li><li><strong>Knowledge Base Banner </strong>– 1000px by 400px</li><li><strong>Knowledge Base Content Image </strong>– 600px by 400px</li><li><strong>Subcommunity Icon URL </strong>– 200px by 200px</li><li><strong>Subcommunity Banner </strong>– 1000px by 400px</li></ul><div class="embedExternal embedImage display-large float-none"> <div class="embedExternal-content"> <a class="embedImage-link" href="https://us.v-cdn.net/6030677/uploads/AT93UAGFK3ND/dashboard-settings.png" rel="nofollow noreferrer noopener ugc" target="_blank"> <img class="embedImage-img" src="https://us.v-cdn.net/6030677/uploads/AT93UAGFK3ND/dashboard-settings.png" alt="dashboard_settings.png" height="886" width="783" loading="lazy" data-display-size="large" data-float="none"></img></a> </div> </div> <h2 data-id="groups-(community-front-end)">Groups (community front end)</h2><h3 data-id="navigation-3">Navigation</h3><p><code class="code codeInline" spellcheck="false" tabindex="0">Main navigation > Groups > New Group or Edit Group</code></p><h3 data-id="images-3">Images</h3><ul><li><strong>Group Icon</strong> – 200px by 200px</li><li><strong>Group Banner</strong> – 1164px by 200px (i.e., 582:1)</li></ul><div class="embedExternal embedImage display-large float-none"> <div class="embedExternal-content"> <a class="embedImage-link" href="https://us.v-cdn.net/6030677/uploads/WDECGT86E396/groups.png" rel="nofollow noreferrer noopener ugc" target="_blank"> <img class="embedImage-img" src="https://us.v-cdn.net/6030677/uploads/WDECGT86E396/groups.png" alt="groups.png" height="628" width="1090" loading="lazy" data-display-size="large" data-float="none"></img></a> </div> </div> <p><br></p> </article> </main>