How to change the favicon

[murugappan]

Hi,

Does anyone know how to change the favicon? I tried the replacing the files in client/img/ but that didnt work. I tried changing the Main.html that didnt work either.

Any help will be appreciated. Thank you in advance.

[yuri]

Since 5.8.3.

custom/Espo/Custom/Resources/metadata/app/client.json

{
    "favicon": "path/to/file",
    "favicon196": "path/to/file"
}

https://github.com/espocrm/espocrm/c...7566b8aead69d9

[esforim]

Replacing the favicon of EspoCRM work, I did it before but update/change installation revert it back. If you are seeing old (or original EspoCRM favicon) it because your webbrowser is using the cache icon. Just need to clear it or use a new browser and new favicon should show.

I didn't know you can edit filepath in 5.8.3 now.

[murugappan]

esforim did you get to resolve the problem of your code been overridden by Espocrm upgrades?

[esforim]

I'm planning to add favicon in the same folder. Does anyone know if a relative path way?

Can I just do this type of code?

{
"favicon": "/favicon.ico",
"favicon196": "favicon.ico"
}

[telecastg]

If you just add an image to the core folder client/img (this is where the espo favicon.ico is located) you might lose it in an update.

You would be better off making a custom folder client/custom/img and then storing your custom favicon images there.

If you do this, the full path would be then: "client/custom/img/favicon.ico"

[punkyard]

that's exactly what i needed, thanks

[telecastg]

You're welcome

[esforim]

Thanks telecastg

Yes, that the plan, I'm using custom favicon but was hoping if relative path possible since I can just upload the example for future EspoCRM user and since it is relative they can just exact the file and it should work.

So instead of full path: client/custom/img/favicon.ico

(From reading Linux "relative path"), it seem like this code might be possible (maybe):

../../../favicon.ico

[telecastg]

I don't think that a relative path is possible because Espo is expecting a full path to specify the favicon source - see lines 12,13 and 14 at html/mail.html script here https://github.com/espocrm/espocrm/c...7566b8aead69d9

[Rucorosa]

I followed the steps above.

Created file:

custom/Espo/Custom/Resources/metadata/app/client.json

With contents:

{
"favicon": "client/custom/img/favicon-ficrm.ico",
"favicon196": "client/custom/img/favicon192x192-ficrm.ico"
}

And saved my png's to folder :

client/custom/img

But still showing default favicon.

I've flushed cache and also removed 'favicons-journal' from browser AppData.

Am I missing something?

[telecastg]

Did you also rebuild your Espo instance ?

If you did and the default favicon is still showing, check the page source in your browser (right click > page source) and make sure that the correct image file including path is being included in the page like this.



(In your case the path should be "client/custom/img/{name and extension of your image file}" instead of "client/modules/property-management/img/{name and extension of your image file}" )

[Rucorosa]

Thanks for your reply.

Yes I rebuilt (both from Admin panel and CLI) as well as Clear Cache.

Page source still showing default favicon:

<link rel="shortcut icon" sizes="196x196" href="client/img/favicon196x196.png">

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

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

Is my JSON path correct?

custom/Espo/Custom/Resources/metadata/app/client.json

I didn't originally have an 'app' folder so I created it. Could that be the problem?

[telecastg]

I don't see any problems with the JSON path, the custom/Espo/Custom/Resources/metadata/app folder needs to be created so you didn't do anything wrong.

Is your current version 5.8.3 or higher ?

The only other thing that could be an issue are the names of the favicon files which are "favicon.ico" and "favicon196x196.png" but you renamed them to
"favicon-ficrm.ico" and "favicon192x192-ficrm.ico".

I am not really sure if that would make a difference but I see that in the template install/core/tpl/index.tpl the name "favicon.ico" is hard coded so it could be that the file name name has to remain "favicon.ico"

I honestly don't know if it will make a difference but try renaming your image files to favicon and favicon196x196 and match the required type (.ico and .png) just in case...

You can also check this link to the core Espo code https://github.com/espocrm/espocrm/c...7566b8aead69d9 that shows how the application reads the file path to see if you can figure out what's going on.

Compare your own "application/Espo/Core/Utils/ClientManager.php" with the code repository to confirm that it has the same code.

[jurnet]

It works.
Be sure that the folder is Resources with one s.

[murugappan]

Hi,

NOTE: Use a file converter like https://favicon.io/favicon-converter/ to convert your png images to .ico flles, though the png should also work.

As a closure, I am documenting what i did using all the advises above:

(1) loaded my ico files (either .png or .ico) into new folder under client/custom/img
(2) created a folder custom/Espo/Custom/Resources/metadata/app/
(3) created a new file client.json in the same folder
(4) Added the following code in client.json:

{
"favicon": "client/custom/img/favicon.png",
"favicon196": "client/custom/img/favicon196x196.png"
}​ 

(5) restart the app, cleared cache and did a rebuild under Administrator function
(6) Logout and reloaded the login page.
(7) IT WORKED!!!

Thank you all and Yuri.

See the final results below:

[esforim]

Confirm easy to follow tutorial and working well.

Very hard to get a good looking favicon due to the small size!

I also want to differential it from other domain/subdomain so I add a "text" to the icon but is so hard to read still. I added in a "red background" to make it slightly easier. It doesn't look good on Desktop, but on mobile with better density it look readable.

Anyway you may need to make a few attempt.

[murugappan]

Hi esforim , with regards to differentiating it from other domain/subdomain by adding a "text" to the icon seems too much work. In my case i just change the app name in the settings. This way it will appear at the top of the side-bar. Just a suggestion.

[Abdulkadir]

Hi my friend, you can use the EblaSoft extension. The extension name is Ebla Theme.
You can change favicon easily

[esforim]

I use your tutorial so it got what I need. It something to consider for other people to use I suppose.

[murugappan]

Some of the extensions are really interesting and great. These are a my picks:

(1) Label Cells
(2) Welcome
(3) Layout Pro --> good but expensive to justify
(4) Chat ---> expensive, cannot justify need, nice to have.
(5) Mask Field ---> Will not be used often but useful
(6) Link Multiple ---> definitely very useful but very expensive

The rest are something that i would lay off. The bad part the many do have demo and those that have do not work because we need to sign in, its odd. The extension which Abdulkadir mentioned does not exists. Probably he must have bought it sometime ago and it may have been taken off the shelf.

[esforim]

'Link Multiple' is probably EspoCRM Forum Wishlist at the moment from the Elba team.

[murugappan]

Recently, as a change management standard we made it a standard to Espocrm version number (soon to add out version number as well). Use case: We have multiple instances of Epsocrm for different purposes (e.g. Ducument Management, System Control Parameter, Application Config Management etc,) and we need to keep track the versions of these instances in production and in development. This is a suggestion: