Configure custom favicon in Mendix

1
How do I configure a custom favicon for my Mendix website? I tried replacing the favicon.ico in the theme directory but it keeps changing back to the mendix favicon.
asked
4 answers
18

add

<link rel="shortcut icon" href="img/favicon.ico" type="image/x-icon" />

to your index.html (in your theme directory, if not there extract the zip file) and setup the correct reference to you .ico file ;-)

 

if you also want that your app is correctly saved as a bookmark you can  also add this:

		<link rel="apple-touch-icon" sizes="57x57" href="img/apple-touch-icon-57x57.png">
		<link rel="apple-touch-icon" sizes="60x60" href="img/apple-touch-icon-60x60.png">
		<link rel="apple-touch-icon" sizes="72x72" href="img/apple-touch-icon-72x72.png">
		<link rel="apple-touch-icon" sizes="76x76" href="img/apple-touch-icon-76x76.png">
		<link rel="apple-touch-icon" sizes="114x114" href="img/apple-touch-icon-114x114.png">
		<link rel="apple-touch-icon" sizes="120x120" href="img/apple-touch-icon-120x120.png">
		<link rel="manifest" href="img/manifest.json">
		<meta name="apple-mobile-web-app-title" content="your-app-name">  
		<meta name="application-name" content="your-app-name">  
		<meta name="msapplication-TileColor" content="#da532c">
		<meta name="theme-color" content="#ffffff">

 

the named manifest.json has specific contents for Android:

{
	"name": "your-app-name",
	"icons": [
		{
			"src": "\/android-chrome-36x36.png",
			"sizes": "36x36",
			"type": "image\/png",
			"density": 0.75
		},
		{
			"src": "\/android-chrome-48x48.png",
			"sizes": "48x48",
			"type": "image\/png",
			"density": 1
		},
		{
			"src": "\/android-chrome-72x72.png",
			"sizes": "72x72",
			"type": "image\/png",
			"density": 1.5
		},
		{
			"src": "\/android-chrome-96x96.png",
			"sizes": "96x96",
			"type": "image\/png",
			"density": 2
		}
	]
}

 

answered
8

Pims answer doesnt work anymore due to native and pwa goodness.

the new way is:

click on navigation and upload it here.

answered
0

Try this widget Dynamic Favicon

answered
-2

After you change the favicon.ico from the theme folder,

1- compress all files inside the theme folder to ZIP file
2- open modular > Project Explorer > Project > setting > Theme 
3- click on refresh button and add theme ZIP file

# please make sure that zip file is on the theme folder and contain all files inside the theme folder.

answered