How can I change the favicon on my app?

  • 25 June 2019
  • 5 replies
  • 171 views

Userlevel 4
Badge
  • AIMMS Implementation Partner
  • 57 replies
I do love the itty-bitty AIMMS A logo as the favicon, but being able to make that the client's favicon is a small but very nice thing.

I can change it locally, but is there a way to change it so that it won't just happen on my own computer?

And if not, can you put it on the list of things to add?

Thanks!

5 replies

Userlevel 4
Badge
@Jess Es Whoa! I'm TOO excited now!

I'm unstoppable!
Userlevel 6
Badge +6
Hi Bon

Now I realize that you likely not mean the above About AIMMS part (although I suspect my answer is still handy so I leave it up). I believe you mean the icon appearing in the browser. There are no plans to change this as we see this also as part of the product (make it recognizable what the AIMMS Apps are, like you can recognize Gitlab, Yammer, Google etc. and this community ☺️).

Userlevel 6
Badge +6
hi Bon,

The AIMMS logo is part of the product and opens the About AIMMS and shows the copyright and proprietary notifications. This can not be removed in accordance to the license agreement. However, you can add a logo on top in the bar. This could be the same logo you use for example when publishing the App on AIMMS PRO/AIMMS Cloud. With that, you would have a nice alignment. We have also seen customer have 2 logos there by make a wider icon.png file that e.g. contains a company and app logo.

Add code below as css file (say icon.css) in your webui\resources\css folder and add icon.png in the same folder. Of course, you can play a little with the CSS.

Hope this helps,

code:
/* This adds an icon in front of the application name in the header
*
* Add an icon that is at least 23 pixels wide and 22 pixels high.
* icons will automatically be resized to fit, so any larger icon
* will always fit.
*
* If you have an icon that is much wider than it is high,
* you could try increasing the "width" value below to make
* it more visible.
*/

.theme-aimms header h1 .pages .app-name {
margin-top:5px; /* this fixes the alignment with the icon */
}

.theme-aimms header h1 .pages .app-name::before {
content: ' ';
background: url(icon.png) no-repeat center/contain;
float: left;
width: 23px;
height: 22px;
margin-right: 7px;
vertical-align: middle;
transform: translateY(-3px);
}



Userlevel 4
Badge
Yes indeed, @Gertjan, I was referring to the browser favicon. But I do see that it could be handy to have the AIMMS "A" icon so you can quickly see your app.

On the other hand, I often have the app and many pages up from the documentation, the community AND from the "How-to" site open, all with the same favicon. Which makes it really helpful for me to have a DIFFERENT favicon on the app.

Maybe you can consider making a slightly different version of the favicon just for the app?

Something like the circle one in this screenshot?



Thanks for the info and the consideration!
Userlevel 6
Badge +6
Another thing to mention...not directly related to favicon, but since we're on logos...you can customize the splash screen (startup image) for your app.

Edit: Shucks, I found out this only works for WinUI apps, but currently not for WebUI - I updated the article to make that clearer.

Reply


Didn't find what you were looking for? Try searching on our documentation pages:

AIMMS Developer & PRO | AIMMS How-To | AIMMS SC Navigator