Brand
Logo
About Logos
Brand logos are displayed using the Image element inside of the Elements panel under Media. Necessary logos are uploaded to the assets panel and can be used as many times as needed on any web project. When using logos, rules are determined based off of each brand's style guide.
Rules on how to use each logo, how many variations of the logo, logo color, etc. are on a case-by-case basis and depends on the client and or the brand.
Favicon & Webclip
About Favicons and Webclips
The favicon are files that are associated with a URL. They are used by most browsers to represent your website on browser tabs and in bookmarks.
Webclips, or touch icons, are files used for a web page icon on the Apple iPhone, iPod Touch, iPad, and Apples Safari browser.
Image assets
The favicon should be 32x32 pixels in size while the webclip should be 256x256 pixels in size.
Filenames used in these image assets will be visible in the final HTML stack. Do not include any sensitive information that you do not want to be indexed by search engines.
Uploading your icons
When you receive your image assets:
- Go to your Project Settings > General tab > Icons
- Upload the images you received
- Publish your site for changes to go live
- Refresh your live site in your browser to see the changes come into effect
Open Graph Image
About Open Graph Images
The open graph image (OG image) are images that appears when you post your website to your social media accounts. It is important from both a branding perspective and from an SEO perspective. For the purposes of this section, we will mainly be covering the OG image.
Image assets
The OG image has a specific size recommendation being 1200x630 pixels in size, or any image in a 1.91:1 aspect ratio.
Best practices
When you receive your image assets:
- Upload the OG image to your assets panel
- Grab the URL in the assets panel by right-clicking on the link icon next to the assets name in the Assets panel > Assets Details (gear icon) menu and copy the link
- Paste the link into the Page Settings > Open Graph Settings > Open Graph Image URL on each page you want to display the OG image onto