How to change the favicon (small icon in browser tabs and bookmarks)

Task Description

CollectionSpace ships with the default Tomcat favicon: the small icon that appears in browser bookmarks and tabs related to your CollectionSpace system.

This document describes how to replace the default favicon with your custom favicon for all tenants on the server. It also describes how to override the default favicon with your custom favicon just on your museum's pages.

(If you wish to create a custom favicon yourself, various graphics editors and web-based tools are capable of creating these.)

Prerequisites

This work requires knowledge of how to:

Make new directories, copy files, and perform similar tasks in your operating system.
Run commands at your operating system's command prompt.
Edit HTML files.

In addition, if you have not already done so:

Create a tenant for your museum. (A tenant is a space or partition on a CollectionSpace system for your museum or collection, within which you'll make most or all of your configuration changes.)
- Creating your new tenant
Understand how to make configuration changes in CollectionSpace's User Interface (UI) layer.
- Configuring CollectionSpace's User Interface (UI) Layer - An Overview

Layers involved

To carry out this task, you will need to make changes in the following CollectionSpace layer(s):

User Interface (UI) (if you want to set the default favicon for a particular tenant)

Procedure

Setting the default favicon for all tenants on your CollectionSpace system

To set the default favicon for all tenants, you can simply replace a favicon file within your CollectionSpace server folder with another, identically named favicon file.

The default favicon for all pages on the Tomcat server is located at $CSPACE_JEESERVER_HOME/webapps/ROOT/favicon.ico.

Replace this file with your desired favicon.

A sample replacement - a favicon for the CollectionSpace logo - is attached and can be downloaded by clicking this link. A preview of that image:

Test your changes.

Overriding the default favicon for a particular tenant

Find your tenant folder

Click here to read these instructions (included in many documents on this site) ...

Unknown macro: {multi-excerpt-include}

(Or instead see Finding your tenant folder.)

Copy your custom favicon into your tenant folder

If it isn't already present, make an images folder within your tenant folder.
Copy your favicon file into that folder.
Afterwards, you will then have this folder/file structure:
```
 
```

Copy HTML pages into your tenant folder and modify them to reflect that favicon

If it isn't already present, make an html folder within your tenant folder.
Make a pages folder within your newly-created html folder.
Afterwards, you will then have this folder/file structure:
```
 
```
From src/main/webapp/defaults/html/pages, copy all of the top level HTML files into src/main/webapp/tenants/{mymuseum}/html/pages (substituting the actual name of your museum for {mymuseum} in this example). E.g. on a Linux or Mac OS X system, starting at the top-level ui folder:
```
 
```
Edit each of these HTML files:
- Add the following line within each file's <head> section. (In the example below, replace favicon.ico with the name of your favicon file, if different):
```
 
```
Since the files you edited are cached in browsers' local application caches, you'll also have to make a change - any change - to the cache configuration file. This is described in How to Update UI Files that are in the Offline Application Cache.

Copy your changes to the CollectionSpace server

Click here to read these instructions (included in many documents on this site) ...

Unknown macro: {multi-excerpt-include}

(Or instead see Configuring CollectionSpace's User Interface (UI) Layer - An Overview.)

Test

After following the procedure above, use a web browser for the following steps:

If you are not already logged into your museum (tenant) on your CollectionSpace system:

Visit your museum's (tenant's) Sign In (login) page. For details, see the Test section of Creating your new tenant.
Inspect the small icon shown in the browser tab for your tenant's page.

If it doesn't work

Clear your browser's cache.
If you've created a favicon just for your own museum (tenant), use your browser's appropriate menu command to view the HTML source of the page you're viewing. (This may be named "View Source" or something equivalent.)
- Verify that there is an entry on that page that looks something like this, referencing a favicon file:
```
 
```
Visit that favicon link directly in your browser; e.g. for a tenant named mymuseum, on a CollectionSpace host named mymuseum.example.com, this might be a link somewhat similar to the following:
```
 
```

These instructions need to be tested in Internet Explorer. IE can be finicky about whether it prefers the server default icon, or the one specified in the HTML page.