Configure Website Branding: Logos, Titles, Icons & Social Share Image

Your website’s first impression often comes down to its branding. In DecoNetwork, the Logo & Title settings give you one place to control the key visual and identity elements that appear across your site and beyond: the store name, desktop and mobile logos, browser icon (favicon), site tag line, and the social share image that platforms like Facebook, X, and LinkedIn display when your site is shared.

Configuring these elements ensures your brand looks professional and consistent across all touchpoints—from the customer browsing your storefront, to the icon they see in their browser tab, to the preview they share on social media. It also plays a direct role in search engine optimization (SEO), making it easier for customers to find and recognize your site.

This article walks you through how to update each setting and provides best-practice tips for logos, icons, and images so your site branding stays sharp, optimized, and consistent across devices.

In this article

• Prerequisites
• Why configure branding here?
• Step 1: Open the Logo & Title settings
• Step 2: Set your Store (Site) name
• Step 3: Upload your Desktop Logo
• Step 4: Upload your Mobile Logo
• Step 5: Set the Address Bar Icon (favicon)
• Step 6: Add the Social Share image (Open Graph)
• Step 7: Configure the Site Tag Line
• Step 8: Publish your changes
• Best-Practice Tips
• Troubleshooting
• FAQs
• Additional Resources

Prerequisites

Why configure branding here?

Branding in Logo & Title centralizes site identity so it’s consistent across pages, emails, and social previews.

• Consistency: Unified look across desktop and mobile.
• Professionalism: Proper favicon and page titles improve credibility.
• Shareability: A designated social image improves link previews and click-throughs.
• SEO clarity: Clean page titles help users and search engines understand your site.

Step 1: Open the Logo & Title settings

1. Go to Admin → open your Website Editor.
2. Click Design → select Logo & Title.

Step 2: Set your Store (Site) name

1. Highlight the current site name in the SITE NAME field.
   
2. Enter the name you want displayed across the site (and commonly in emails).
3. Click Save.

   Note: The Store name may be reused in various templates and contexts, in your copyright notice and emails, and in place of a logo if you have not uploaded any; choose a customer-facing brand name..

Step 3: Upload your Desktop Logo

1. In the Desktop logo tile, click to upload or choose an image.

   

   Upload or select a desktop logo. Prefer .svg for best scaling.

2. Select from Your Images, Theme Images, Stock Images, or Search the Web.
   • Your Images: your own images, uploaded from your device.
   • Theme Images: images supplied with website themes.
   • Stock Images: free stock images.
   • Search the Web: images from the web.

   

   Upload or select a desktop logo. Prefer .svg for best scaling.

3. Browse and select the desired image.
4. Click OK in the Select Image popup.
   • If you have chosen an image format other than SVG, the option to Resize the image to fit. will be displayed and ticked by default.

     Desktop:

     Mobile:

     Ticking the checkbox will resize the logo image to fit within the recommended dimensions of the target container.

   • If you have chosen an SVG image, the Resize the image to fit. option will be disabled and unticked as SVG images cannot be resized. If you upload an SVG image, make sure it is saved at the desired display size.
   • If you have chosen an image in JPG format, an Image Quality setting will also be displayed.
     

     This setting lets you set the image quality of the logo image. It allows you to optimize your website performance. Depending on the setting, images will be compressed to output an image quality relative to speed performance. Image compression is when information in an image file is removed to reduce its file size so that it can load faster. The higher the speed performance setting, the lower the image quality. The higher the image quality setting, the slower the performance.

     • Default
     • Highest Speed
     • Higher Speed
     • Balanced Speed/Quality
     • Higher Quality
     • Highest Quality

     This setting will apply globally to all listing and display images on your website, i.e. images in the product listing widgets, design listing widgets, category listing widgets, Image Widget, Image Gallery Widget, Logos Widget, and widget backgrounds.

     Note that this setting will not affect the physical image size (resolution) set for the image. Image size can be set at the widget level.

   • If you have chosen an image in SVG format, the image will be maintained at the original size in vector format at all times to ensure image quality. Because the option to resize will not be available for SVG format, make sure you upload an image that is appropriately sized for each display size.
5. Click Save.

Step 4: Upload your Mobile Logo

1. Repeat the process for Mobile logo to ensure the header looks right on small screens.

   

   Select a mobile logo.

2. Click Save.

Step 5: Set the Address Bar Icon (favicon)

1. Click the Address bar icon tile and upload a square image (e.g., 64×64 or 128×128).

   

   Choose a high-contrast icon for visibility at small sizes.

2. Click Save.

Step 6: Add the Social Share image (Open Graph)

1. In Social share image, click to upload/select a 1200×630 image.

   

   Select a social share image

2. Click Save.

Step 7: Configure the Site Tag Line

1. In Site Tag Line, enter the tagline you want to display alongside your site name (e.g., “Custom Tees & Merch Since 1999”).

   

   Enter a concise tagline that supports your brand identity and SEO.

2. (Optional) Enable Append title to page names if you want the tagline automatically added after individual page titles.
3. Click Save.

Step 8: Publish your changes

1. Click Publish in the Website Editor to make updates live.

Best-Practice Tips

• Prefer SVG for logos: Crisp on all devices and scales cleanly.
• Optimize raster images: Use appropriate dimensions; avoid excessively large files.
• Consistent background: Transparent PNG/SVG often look best against varied headers.
• Readable mobile logo: Simplify and increase padding for small screens.
• Site tag lines: Keep them concise, meaningful, and under ~60 characters where possible.

Troubleshooting

• Logo looks blurry: Re-export at higher resolution (for PNG/JPG) or switch to SVG.
• Favicon didn’t change: Clear browser cache and hard-refresh; ensure the image is square.
• Wrong social preview: Social sites cache aggressively—use their debugger to rescrape.
• Tag line duplication: Review Append title to page names and simplify wording if it looks repetitive.

FAQs

• What file types are best for logos? .svg is preferred. Use high-quality .png/.jpg if SVG isn’t available.
• Will the Store name appear in emails? Often yes; it’s used by templates and components across the platform.
• Do these settings affect every site? Changes apply to the specific site you’re editing.
• Recommended social image size? 1200×630 ensures good coverage across major platforms.

Additional Resources

• Design Tab - Website Editor
• How Do I... Ensure Image Quality in the Website Pages Editor?
• Logo & Title Settings