How do I customize the application icon and the logo?

[jboekesteijn]

We have received questions about customization of your application icon and logo. This is what you can customize:

Login screen

You can choose a favicon.ico for the tab icon and a logo.png that will be shown as header. This is instance data for a session-manager system.

Application screen

You can choose a favicon.ico for the tab icon and a logo-sideways.png that will be shown in the sidebar. This is instance data for a auto-webclient system.

In all cases, these files should be placed in the appropriate system directory in your deployment directory structure. An example for the online IDE project:

Please make sure to follow this structure with the exact filenames, otherwise they will not be recognized:

systems
\ client
  \ instance
    - favicon.ico <-- app screen tab icon
    - logo-sideways.png <-- app screen sidebar logo
\ sessions
  \ instance
    - favicon.ico <-- login screen tab icon
    - logo.png <-- login screen header logo

[Martinique]

For a hobby project I am trying to change the Icon. As you can see, the favicon.ico is different from the Kjerner logo, however, when deploying with from migration, it does not show up.

Is there anything I am missing?

Thank you!

[jboekesteijn]

You can use the locally provided custom icon by changing the deployment.alan file.

In the default online IDE structure, there are two deployment.alan files:

- deployments/default/deployment.alan
- deployments/migrate/deployment.alan

The first one is used for new deployments without migrating existing application data. The second one is used for deployment with migration.

Both files specify how the data for the client system should be provided during deployment.

In deployments/default/deployment.alan:

systems
	'client'
		configuration: 'default'
			'timezone' = "Europe/Amsterdam"
		instance-data: local

In deployments/migrate/deployment.alan:

systems
	'client'
		configuration: 'default'
			'timezone' = "Europe/Amsterdam"
		instance-data: from 'server'/"ide-YOURNAME"/"client"

The last line with the instance-data specifies the source of the data for the client system, which includes the favicon.ico file.

• instance-data: local means: use the provided data/files from the local directory in the (online IDE) project.
• instance-data: from ... means: use the data from an existing system in the active version of the application.

So if you want to use your locally provided favicon.ico during deployments with migration, you should use instance-data: local for the client system in your deployments/migrate/deployment.alan file.

[Martinique]

application-servers
	'server': local

external-systems

systems
	'client'
		configuration: 'default'
			'timezone' = "Asia/Bangkok"
		instance-data: local

	'sessions'
		configuration: custom
			'token interval'               = 86400 // 1 day
			'token limit'                  = 2592000 // ~1 month (30 days)
			'domain name'                  = none
			'base uri'                     = "https://app.alan-platform.com/myide/auth/"
			'known uris'                   = (
				'https://app.alan-platform.com/myide/client/' = "Client"
			)
			'openid authority issuer uris' = ( )
			'openid authority client ids'  = ( )
		instance-data: local

	'server'
		configuration: 'multi-core'
		instance-data: from 'server'/"myide"/"server" @migrate
		schedule: every day every hour
			at 0
			at 30

	'mobile'
		configuration: 'default'
			'timezone' = "Asia/Bangkok"
		instance-data: local

Thank you Joost-Wim!

Still not having the result intended. What should I improve further within my IDE?

[jboekesteijn]

This turned out to have been a browser caching issue after further investigation. So for anyone who does not see their new/updated icons, please check in another browser and/or a private window.

[Martinique]

Thank you for the clear explanation!

Would it also be possible to set colours by default when deploying Alan?

[pvandam]

You can change the colors in the settings.alan of the client system. See the documentation and search for “custom color theme”.
Please note that this will soon change in future versions. We’ve implemented a dynamic color scheme based on some base colors. Preview: