Announcement

Collapse
No announcement yet.

How to change the favicon

Collapse
X
 
  • Filter
  • Time
  • Show
Clear All
new posts

  • How to change the favicon

    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.

  • #2
    Since 5.8.3.

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

    Code:
    {
        "favicon": "path/to/file",
        "favicon196": "path/to/file"
    }
    https://github.com/espocrm/espocrm/c...7566b8aead69d9

    Comment


    • #3
      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.

      Comment


      • murugappan
        murugappan commented
        Editing a comment
        espcrm did you get to resolve the problem of your code been overridden by Espocrm upgrades?

    • #4
      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?


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

      Comment


      • #5
        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"

        Comment


        • punkyard
          punkyard commented
          Editing a comment
          that's exactly what i needed, thanks

        • telecastg
          telecastg commented
          Editing a comment
          You're welcome

      • #6
        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

        Comment


        • #7
          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
          Last edited by telecastg; 07-07-2020, 04:19 AM.

          Comment


          • #8
            I followed the steps above.

            Created file:
            Code:
            custom/Espo/Custom/Resources/metadata/app/client.json
            With contents:
            Code:
            {
            "favicon": "client/custom/img/favicon-ficrm.ico",
            "favicon196": "client/custom/img/favicon192x192-ficrm.ico"
            }
            And saved my png's to folder :
            Code:
            client/custom/img
            But still showing default favicon.

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

            Am I missing something?


            Comment


            • #9
              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.

              Click image for larger version

Name:	favicon source.JPG
Views:	1684
Size:	33.6 KB
ID:	60956

              (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}" )

              Comment


              • #10
                Thanks for your reply.

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

                Page source still showing default favicon:


                Code:
                <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?

                Code:
                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?

                Comment


                • #11
                  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.
                  Last edited by telecastg; 07-28-2020, 07:25 AM.

                  Comment


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

                    Comment


                    • #13
                      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:

                      PHP Code:
                      {
                      "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:

                      Click image for larger version  Name:	Screenshot_3.png Views:	0 Size:	23.4 KB ID:	86856Click image for larger version  Name:	Screenshot_2.png Views:	0 Size:	34.5 KB ID:	86857
                      Last edited by murugappan; 01-08-2023, 12:37 AM.

                      Comment


                      • espcrm
                        espcrm commented
                        Editing a comment
                        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.
                        Last edited by espcrm; 01-13-2023, 02:41 AM.

                      • murugappan
                        murugappan commented
                        Editing a comment
                        Hi espcrm , 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.

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


                      Click image for larger version

Name:	image.png
Views:	818
Size:	80.9 KB
ID:	87218

                      Comment


                      • espcrm
                        espcrm commented
                        Editing a comment
                        I use your tutorial so it got what I need. It something to consider for other people to use I suppose.

                      • murugappan
                        murugappan commented
                        Editing a comment
                        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.

                      • espcrm
                        espcrm commented
                        Editing a comment
                        'Link Multiple' is probably EspoCRM Forum Wishlist at the moment from the Elba team.
                    Working...
                    X