Create a logotype of the program for PC, iOS and Android versions

Egor Polyakov9 July 2019 Technologies:SAASSVGPCiOSAndroid

Task

To create the version of logotype for the program or app for PC, iOS and Android versions.

Intro

The simple task of creating customized versions of the logo for PC devices, iOS and Android.

Dont forget to take care to do correct versions for each system with standard sizes and file formats.

We use at start SVG file of logotype in square form (width equally height of scalable file titled logo.svg).

About using Inmotus SVG Generator

In this task we use Inmotus SVG Generator for quick actions on first steps of this practice.

Notice

  • Scalable file is the optimal for start of work.
  • Transparent PNG files is actual for using on PC in web browsers.
  • PDF files is actual for work with PC and iOS devices: iPhone, iPad and e.t.c.
  • PDF is interesting specially for use for glyphs and other flat, vector artwork that requires high-resolution scaling.
  • Use the 8-bit color palette for PNG graphics that don’t require full 24-bit color.
  • All app icons in iOS should adhere to the following specifications.
  • Use words only when they’re essential or part of a logo.

Formats for logotypes

System
File formats

PC (OS Win 32-64)

Mac (iOS devices)



Android

PNG, ICO (8-24 bit)
72 dpi

PNG (8-24 bit)
image size and resolution depends on model and version of device

SVG
Vector Drawable
ICO

App Icon Attributes

Attribute
Value

Format

Color space

Layers

Resolution


Shape

PNG

sRGB

Flattened with no transparency

Varies
See Image Size and Resolution

Square with no rounded corners

Image size and resolution for iOS devices

Device
Scale Factor

12.9" iPad Pro

11" iPad Pro

10.5" iPad Pro

9.7" iPad

7.9" iPad mini 4

iPhone XS Max

iPhone XS

iPhone XR

@2x

@2x

@2x

@2x

@2x

@3x

@3x

@2x

Other versions of iOS

Device
Scale Factor

iPhone X

iPhone 8 Plus

iPhone 8

iPhone 7 Plus

iPhone 7

iPhone 6s Plus

iPhone 6s

iPhone SE

@3x

@3x

@2x

@3x

@2x

@3x

@2x

@2x

Let`s go to do it!

Create a logotype of the program or app for Android, Apple and PC versions

Scheme of edit the logotype for PC, Android and iOS

Work step by step: how to do versions of logotype for PC, Android and iOS devices.

Study step by step

  1. At start go to program Inmotus SVG Generator for import of the logotype (logo.svg).
  2. Import file "logo.svg" to Inmotus SVG Generator to next edit.
    The automatic script positions the loaded logo relative to the square layout absolutely in the middle and in the center in the ratio of 50% of the layout size 512x512px.
  3. Choose style «Gray app» for background of logotype in right panel of Inmotus SVG Generator.
  4. Optionally select a color of the logotype (if necessary) in front layer of composition.
  5. Use the function Export. At window of exporting choice for file formats: SVG, PDF, PNG and Vector Drawable.
  6. Open the resulted ZIP archive to preview the folders with versions for PC, iOS and Android devices.
    Extended license is available for resulted icons (based on logotypes), if You is the owner of trademark (which logotype is used by You for commercial aims).
  7. Specially for iOS devices use technical information from table "Image size and resolution for iOS devices".

    High-resolution displays have a higher pixel density, offering a scale factor of 2.0 or 3.0 (referred to as @2x and @3x). As a result, high-resolution displays demand images with more pixels.
    For example, suppose you have a standard resolution (@1x) image that's 100px × 100px. The @2x version of this image would be 200px × 200px, and the @3x version would be 300px × 300px.

Custom design for logotype

Tutorial video «How it works»

Watch a tutorial video to have the first practice and knowledge about SVG Generator.

Have any questions?

We can helps you at all questions:
read more about instruments and frequently asked questions.

Ask question

Working process: step by step

← View all lessons
Share link:
Hello! We can help you.Please, choose from list.
Open FAQ for reading Ask question View tutorial video Preview Premium Graphics
Ask your questionAnswer will be in the next 24 hours.
Main questionsPlease, choose from list.
Ask question
Tutorial videofor Inmotus SVG Generator
Ask question