How do I get my logo ready to put on the site?
Swifty allows you to upload a few versions of your logo to ensure that it looks perfect everywhere it appears. Lets go through the proper way to prepare your logo files. But before we do that we need to talk about file formats and why they are important.
- SVG (Standard Vector Graphic) - Vector graphics can be resized as needed without losing any quality and they typically have very small file sizes which enables them to load faster. Most logos are originally created as vector graphics using a vector-based program such as Adobe Illustrator or Inkscape. The most common vector file formats are .ai and .eps, either of these can easily be converted into an SVG file format. One free online converter is https://www.epsconverter.com/
- PNG (Portable Network Graphics) - This is a bitmap image format that allows for transparent areas. These are great when used properly however they usually have a larger file size so they should be used sparingly. PNG files can be sized down (made smaller) without losing quality but when enlarged they will get blurry.
Now that you have a basic understanding of these two file formats we can get into how you should prepare your files. There are six possible variations of your logo that should be uploaded into the Dashboard > Settings > Branding > Logos in the Swifty admin area, they are:
- Color Version of the Logo - Preferably an SVG file but PNG is acceptable, if PNG is used the logo should be uploaded at 400 pixels wide.
- White version of the Logo - This is a solid white version of the logo that we can use throughout the site as a background element or in primary areas on a darker background. This is preferably an SVG file but PNG is acceptable, if PNG is used the logo should be uploaded at 400 pixels wide.
- Icon Logo in Color - Preferably an SVG file but PNG is acceptable if PNG is used the logo should be uploaded at 200 pixels wide.
- Icon logo in White - Preferably an SVG file but PNG is acceptable if PNG is used the logo should be uploaded at 200 pixels wide.
- Favicon - This is the icon that shows up in the tab on the web browser, only PNGs are allowed.
- Custom map marker - This will replace the default map marker on both the contact map as well as the neighborhood map, only PNGs are allowed.
Was this article helpful?
Thanks for the feedback.