A favicon is that tiny image you see next to the page name in the browser tab or bookmark. By default, the theme uses the CollectionBuilder icon. To add a polishing touch to your collection, you can add your own custom favicon in a few steps.
- Create an image that is representative of your site that will scale down to a tiny size nicely, i.e. it can’t have much detail!
- Open the image with GIMP (a free opensource photo editor).
- Make the image into a square by cropping or adding to the canvas size.
- Click Image > Scale Image… and set the Image Size to 32 x 32 pixels (or 16 x 16 for full backward browser support), click Scale.
- Click File > Export As… then in the name box type
favicon.ico, and click Export (GIMP will automatically export the file type based on the extension). Click okay for the default export options.
- Copy the “favicon.ico” file to your collection repository replacing the existing file. Git add, commit, and push.
The favicon file is set in the
<head> section of your web pages using this link metatag:
<link rel="shortcut icon" type="image/x-icon" href="/cb-docs/favicon.ico">
In your CB project, the tag is in the file
_includes/head/head.html. If you want to create a more advanced set of icons (for example from using a favicon generator), you can replace the current tag with the updated markup.