Skip to main content

How to change the favicon

Summary

The favicon is the small icon that appears in a browser tab or window when viewing a site. This icon is usually located in the /resources/images/ directory, and this path is referenced in the <head> section of your site to load the favicon image. Changing this image, or updating the reference will cause the favicon to change.

Procedure

  1. Place or update your favicon image. The default location for this file is: /resources/images/favicon.ico

  2. In the Pagebulder frontend code locate the favicon <link> reference or add the following example and verify that the file in href= refers to the same location where you placed your favicon image:

<link rel="icon" type="image/x-icon"href={deployment('/pf/resources/images/favicon.ico')} />

Note

Any files added to the `/resources/` folder require a deployment ID to render properly. For example, if your deployment is #123, the front-end code must specificy ?d=123 to render correctly for example, favicon.ico?d=123.

To eliminate the need to update the deployment ID for each new build, Fusion includes the deployment() function which appends the current deployment ID. For example given deployment '123' the following: href={deployment('/pf/resources/images/favicon.ico') will result in href=href='/pf/resources/images/favicon.ico?d=123'

In this section: