added favicon instructions

guides/project_portal/tutorials/6_customize_website.qmd

@@ -19,6 +19,28 @@ Changing these color settings will automatically update elements such as headers
 ensuring a consistent and cohesive appearance. This method is user-friendly and does not require any coding knowledge,
 making it suitable for most administrators and editors.
 
+### Changing the favicon
+
+The favicon is the small icon displayed in the browser tab, bookmarks, and shortcuts.
+By default, an APEx project web portal uses the ESA favicon. This can be replaced with a custom project favicon when available.
+
+To add a custom favicon:
+
+1. Navigate to **Appearance > Settings > Horizon** via the navigation bar.
+2. On the settings page, scroll down to the **Favicon** section.
+3. Uncheck **Use the favicon supplied by the theme** if you want to upload your own image.
+4. Click **Upload favicon image** to upload a square-shaped custom favicon file in one of the following formats: \
+(recommended size: 32×32 pixels)
+   * .ico (preferred for compatibility)
+   * .png
+   * .svg
+5. Don’t forget to click **Save configuration** to apply the changes.
+
+Additionally, on the same page, under the **Page element display** section, make sure to activate the **Shortcut icon** option.
+
+To verify your changes, refresh the web portal in a private/incognito window to avoid cached content interfering with the
+update.
+
 ### Adding Custom CSS
 
 For more advanced customization, Drupal allows you to add custom CSS descriptors to further refine the website's appearance.