• jmtalarn.com

    The site home index page.

  • Web dev notes

    Web Dev Notes: Where I jot down tech insights, resources on technology and web development and handy tips to remember.

  • CV

    Explore my CV to learn about my background, experience, education, certifications, and projects.

Build and publish a Ionic App – Generate icon and splash images

android, angularjs, app, firebase, google, html, ionic, nodejs, play store, productivity, strikethru
App development, Web development
7, October 2017

The icon is the first presentation of your app and maybe a bad design or a not so nice icon can make the user refuse to install your app. You should try to give a professional and nice presentation to, at least, avoid get the user away only at the first glance.

The Ionic applications have two main assets which will be the visual presentation of your app. The framework provide a tool to generate all necessary files from the source images provided in your project. These files were'll be ready to be embedded on your final build and adapted to each size and requirement from the device.

Place your images on the resources folder

You should put your original images in the resources folder.

  • icon

    The first one, the icon, the typical clickable element on your device that will boot your application. It should be an image at least 1024 per 1024 pixels, called icon.png and placed on the resources folder. resources/icon.png

<li>

splash

The splash image is the image used as presentation during the first boot waiting time. It should be an image at least 2732×2732px, called splash.png and placed on the resources folder. resources/splash.png

Execute command to generate resources

You only have to execute the following command to generate all necessary assets. Once generated you only have to build your application as usual and the procedure will get the needed images to generate the application.

$ ionic cordova resources

If you want to generate specifically only one target system you can specify a third parameter ios or android. Here there is all the information about this command.

How to get good icons and images

The best option is always getting a professional doing that work. This can be an expensive option but there are many affordable options like Fiverr marketplace full of professionals with a low price initial packs starting at 5$ or Envato Market where you can find logo templates from 6$ (formerly http://graphicriver.net )

Fiverr link Envato link

DIY resources

But if you're a friend of the DIY, as I am, you could find interesting the following resources.

  • Material Icon generator. You can upload a custom svg file or use one from the default material icons collection to generate a nice rounded or squared materialized icon for your Android app.

  • Pixabay. Thousands of images free to use, Creative Commons licensed.

And if after all, you dare to edit and modify by your own the assets I recommend these two, widely known, open source programs, included in all repositories of any Linux distro.

  • Gimp icon GIMP

    GIMP is a cross-platform image editor available for GNU/Linux, OS X, Windows and more operating systems. It is free software, you can change its source code and distribute your changes. Whether you are a graphic designer, photographer, illustrator, or scientist, GIMP provides you with sophisticated tools to get your job done. You can further enhance your productivity with GIMP thanks to many customization options and 3rd party plugins.

  • Inkscape icon Inkscape

    Inkscape is an open-source vector graphics editor similar to Adobe Illustrator, Corel Draw, Freehand, or Xara X. What sets Inkscape apart is its use of Scalable Vector Graphics (SVG), an open XML-based W3C standard, as the native format.

Blog post