Change the favicon

This procedure shows you how to change the favicon image.

About this task

A favicon is an icon associated with a URL that is variously displayed, as in a browser's address bar or tab, or next to the site name in a bookmark list. Figure 1 shows the tab of the OfficeStore demo displayed in the GBC using the default favicon.

Figure: Default favicon


The image file for the favicon is named gbc_logo.ico. It is referenced in gbc-project-dir/src/index.html. This page is not customizable; to replace the default favicon, you add your own image using the same name (gbc_logo.ico). The only decision you make is in which directory you save your image; this decision affects when your custom image is used. You can make your image the default for all themes in a customization, or you can add it to a theme part to associate it with specific themes only.

To change the favicon for a customization

When using this method, all themes in the customization will use this image, unless the chosen theme overrides with its own favicon.

  1. Save your image:
    • with the name gbc_logo.ico.
    • in the gbc-project-dir/customization/customization-project-dir/resources/img directory

To change the favicon for a theme

When using this method, the favicon is added to a theme part. Those themes that include the theme part will display the favicon.

This procedure assumes you are comfortable updating theme parts and themes. For the basic principles behind themes and theme parts, see How customization works. For instructions about adding and modifying themes and theme parts, see Working with themes. For information about the underlying GBC infrastructure and its components, see Theme reference.

  1. Identify the theme part you plan to update. If you are creating a new theme part, prepare the directory.
  2. Save your image:
    • with the name gbc_logo.ico.
    • in the gbc-project-dir/theme/theme-directory/resources/img directory.
  3. If you created a new theme part, add it to one or more themes.

Compile and test

  1. Save your changes and rebuild your customization using gbc build: 
    $ gbc build --customization customization-project-dir
  2. Test that your changes work as expected.

    Close and reopen your application. Check whether the favicon displays.

    Tip:

    You may need to use CTRL + F5 to clear the browser cache before you see your changes.

    If your tests do not behave as expected, ensure you are using your newly-built custom GBC. Depending on your development environment, you may need to package and deploy a custom GBC client. For information on which customization and theme you are using, see Selecting customizations and themes.