Web App Visual Asset Requirements
| Size | File Details |
App Brand | 200px height | Filename: [YourBrandName]_AppBrand.png |
App Icon | 512x512px | Filename: logo512.png |
Favicon | 192x192px | Filename: favicon.ico |
Preview (Open Graph) Image | 1200x630px | Filename: preview.png
Cannot have transparency |
In this article, you'll learn about the specific visual assets you will need to provide in order to launch your web app with Viewcastle.
App Brand
200px height
The app brand is your logo that appears in your streaming app’s header and footer. The logo needs to include transparency and be designed with lighter colors to be legible over a dark background.
Considerations
When formatting your logo for your streaming site, consider:
Scale and legibility
Horizontally-formatted logos work best for the space. If your logo has a lot of complexity that doesn't scale down well, consider asking your designer to create a simplified variation that can be specifically for your streaming service.
Our support team can customize the size of your app brand. If you'd like it to be bigger or smaller, let us know during your onboarding session, or email support@viewcastle.com.
Transparency
In most cases, your app brand will need to be in a PNG format with a transparent background.
Dark theme contrast
Your app brand should utilize lighter colors that will contrast well with a dark background. If your logo doesn't already have a "dark theme" variation, consider asking your designer to create one. Modifications for dark theme would include:
Inverting dominant neutral colors (i.e. converting black text/objects to white)
Slightly increasing brightness/saturation in colors
Primary Color
Your primary color is used for accents in the user interface—most prominently, buttons. A darkened version of the primary color is also used in a subtle background gradient.
Considerations
When choosing a primary color for your streaming app, two key factors to consider are:
Brand consistency
Choose a color that relates to your brand—either your brand's primary color or an accent color in your palette.
Accessibility
Choose a color that contrasts well with white text to ensure button legibility.
Use a web accessibility tool to test your color against a foreground color of white (#ffffff). For Viewcastle, your primary color should pass at least Large Text and UI Components in WCAG Compliance.
App Icon
512x512px
This will be the icon for your web app. It will display when a user saves the web app to their mobile device’s home screen or as a bookmark in their browser.
Favicon
192x192px
This will be the very small icon that appears next to the web app page title in browsers. This image may have transparency if desired.
A very simple logo or letter is best here, as the favicon will appear at small scale.
Once you have designed your favicon and saved it as a PNG, you can then use an online favicon converter tool to create an ICO file. This is a handy file type that packages all the various image sizes that browsers use into a single file. You may also simply provide us your 192x192px PNG file and our team will convert it for you.
Preview (Open Graph) Image
1200x630px
This will be the image that appears when sharing a link to the web app homepage on social media, messaging, or other platforms. For examples, visit Open Graph Preview.
Note: This asset will only appear when sharing a link to your streaming app home screen. When you share then link to a specific media item in your app, then cover/thumbnail image for that media item will be used as the preview.
Ready to submit your visual assets?
Click below to upload them through your onboarding portal:
Sign into your personalized portal by entering your email address. (If you haven't yet begun the onboarding process, reach out to sales@viewcastle.com to get started!)
Once signed into your portal, open the task "Add your branding details." Upload your files and click "Submit." Please allow 1–3 business days for asset files and primary color to be added to your streaming app.
To update any of your assets, simply return to your onboarding portal, open "Add your branding details," upload your new file, and click "Submit" again. This will notify your onboarding team to add the updated file(s) to your the app.