The Icons & screenshots folder in the Project Bar holds a set of image files that are used for icons, splash screens or screenshots for your project. The specific images used depend on the platform you export to, but where possible Construct will automatically use the images from the folder where appropriate.
Image purposes
When you select an image in the Icons & screenshots folder in the Project Bar, the Properties Bar updates to show properties for that image. The most important property is the Purpose property. This tells Construct what you want to use the image for. The different purposes and what they are used for are described below.
None set
If the purpose is (none set), Construct won't automatically use this icon for anything. It will be treated as a simple image file that is bundled with your project. This may be useful if you want to manually configure an icon after exporting. It's also the default for newly imported image files, so you may want to change it after importing if you intend for the icon to be used for something else.
App icon
This will use the image as the standard app icon. This is used for desktop exports, the page icon on the web, and also the app icon for installable web apps.
The icon size is automatically derived from the image size. For most platforms, icons should be square, and are typically in a range of power-of-two sizes, such as 32x32, 128x128, 256x256, etc. Most platforms support a range of icon sizes, so Construct will list all icons with this purpose in the exported project, and the target platform will select an appropriate icon size from the available set.
App icon maskable
Currently this purpose is specific to installable web apps (Progressive Web Apps, or PWAs). All web exports from Construct are PWAs, and so in supported browsers can be installed, such as adding to the device home screen. The App icon purpose can be used for this case, but optionally you can also provide a maskable icon, where the outer 10% edges of the image may be cropped. This is used to give the system more flexibility in how to crop or shape the icon. As with app icons, you can also provide multiple maskable icons in different sizes.
You can test maskable icons with maskable.app, and read more about them at the web.dev page on maskable icons.
Loading logo
The loading logo is the image shown on the loading screen while loading the project. Typically this is most relevant to web exports, since the project may take a while to download, during which time the loading screen is showing. Other export types, like apps, bundle all the resources locally so typically load quickly enough that the loading screen isn't seen or is only seen briefly.
For the loading logo to appear, the project Loader style property must be set to Progress bar & logo. The progress bar will appear beneath the loading logo with the same width as the loading logo image. You can also only specify a single loading logo image.
Adaptive foreground/background
This purpose is only provided for compatibility with Construct 3's Android exports. It is not used in Construct Animate.
iOS splash screen
This purpose is only provided for compatibility with Construct 3's mobile exports. It is not used in Construct Animate.
Android splash icon
This purpose is only provided for compatibility with Construct 3's mobile exports. It is not used in Construct Animate.
Screenshot
This purpose indicates that the given image is a screenshot of the project, suitable for using as a preview of what the project looks like. Currently this is only used for web exports in order to allow adding screenshots to a Progressive Web App (PWA) install prompt, which is also known as the Richer install UI. When choosing the Screenshot purpose for an image, an additional two properties appear:
- Label: a brief description of the image, which may be used as a caption for the screenshot.
- Form factor: indicates the type of the screenshot. Typically Narrow is used for mobile screenshots and Wide is used for desktop screenshots. It is recommended to add at least one Narrow and one Wide screenshot to ensure the richer install UI appears.