Basics: Brand icon/logo

Make Skedda your own with a logo familiar to your users

Team Skedda avatar
Written by Team Skedda
Updated over a week ago

Set your logo / icon / brand symbol (we'll call it logo) by uploading its scalable-vector-graphic (SVG) representation in the Basics settings page.

Learn more about SVGs and some of the errors you may encounter in the FAQs section.


Where is the logo shown?

Here are a few examples of how your logo works together with your custom brand color in order to fully white-label your account's appearance!

Note that the logos in this animation are the property of their respective owners and are used just to demonstrate the feature.

Your logo (together with your brand color) is used in:

  • the main navbar on desktop and mobile devices,

  • the home-screen launcher icons and splash screens for our progressive app on mobile devices,

  • the taskbar launcher icons for our progressive web app (PWA) on desktop devices,

  • the various browser icons (favicons, bookmarks etc).


Test with some demo files!

Below are the links to the SVGs for the brand logos shown in the animation above. Please note that these are stored on an external site (this GitHub repository) and that all of these logos are the property of their respective owners. We are referring to them here just so that you can quickly try out the feature in Skedda with some realistic examples:


Uploading your logo

When adding your own logo we have a few helpful tips and notes to consider.

Shape

Your logo should be more or less "square" in shape. That is, in all the places we use it (listed above), we put it into a square container. This usually implies that you should avoid including your textual brand name in the graphics that you upload, because that tends to make it too wide and the result can look a bit "squashed".

Color Contrast

You should use the variation of your logo that contrasts well with your dark brand color that will form its background. That is, the graphical elements in your SVG logo file should have light fill colors (e.g. white, yellow). If you don't have any "light" representation of your brand logo, another option is to include a light background element (like a circle) in your SVG. A good example of this idea is the Esbuild icon.

viewBox

Your SVG markup must declare a so-called "viewBox" so that we can be sure that we understand the coordinates of your graphics and appropriately manipulate your logo for the various contexts in which we use it. Most SVGs should have this included. Chat with your designer if your SVG doesn't declare a viewBox and you're not sure how to set it.

File Size

Your SVG file must be smaller than 25kB (our current limit). Normally, brand logos are much smaller than this because they contain relatively simple lines and shapes. If your SVG file is larger than this, you may well be able to reduce its size without significant loss of quality by using an SVG-compression tool (such tools, many of which are available online, remove unnecessary whitespace and truncate numbers having excessive precision, for example). If, after attempting to compress your SVG, you're legitimately convinced that your brand logo can't be simplified and really needs to be bigger than 25kB, please reach out to Skedda support and share it with us so we can take a look.

Images

Your SVG file cannot contain any <image> (embedded binary image data) or <a> (hyperlink) elements. Skedda will remove such elements during the upload process if they are found. If you find that your logo is "empty" after you upload it, then it's likely the case that the SVG file you uploaded had such an embedded image which Skedda removed (leaving an empty result). To see if your SVG does indeed have <image> or <a> elements, open your SVG file in any text editor and do a search (i.e. search for "<image"). For your logo to show correctly, you must make sure that your SVG defines it using SVG markup (i.e. based on SVG graphics like rectangles, circles, paths etc., not embedded images). The basic reason why we don't allow embedded image data to be uploaded is that it's not "scalable" without loss of quality.

Security Cleaning

For security reasons (as part of our best-practice defense-in-depth principle), we will "sanitize" the SVG that you upload. This process removes any potentially-malicious content (e.g. embedded scripts). In tandem with our strict CSP and other measures, this ensures that Skedda isn't vulnerable to "injection attacks" through the vector of uploading SVG files onto our platform. If you're a legitimate user and you notice that something's "missing" from your SVG after you upload it, then it may be a result of this sanitization process and you should closely inspect your SVG file for relevant content. Feel free to reach out so Skedda support if you're still unable to get it to work!


FAQs

Why SVG?

  • We don't just want to show your logo in the navigation bar, but also in all the other contexts that users interact with Skedda! In order to make sure that your logo always looks amazing, scalable vector graphics (SVG) give us the technical means to achieve this. Unlike conventional image files (PNG, JPEG etc.), images based on SVGs can be scaled without loss of quality, so we're able retain the gorgeousness regardless of whether it's a 16x16-pixel favicon or a 512x512-pixel "splash screen" image.

I don't have an SVG logo, can I upload something else?

  • No, we only accept SVGs for the reasons above. We expect that most organizations already possess brand assets in SVG format. If not, we encourage you to invest in creating an SVG representation of your brand logo...you'll probably end up using it in many places (particularly on the web)!

I converted my logo image to SVG, but I get an error while uploading

  • Many converters will wrap up an image in an SVG file, but the image will still be inside. Skedda won't accept SVGs with images! Refer to our notes on this above. You may need to create a real SVG!

I uploaded my logo (with no error message), but I can't see it. The Skedda logo is gone, but it's a blank space now.

My SVG is missing the viewBox attribute

  • Please chat with your SVG designer first if you're not sure how to set this. The Skedda support team may be able to help with this as well!

Did this answer your question?