Composr Supplementary: How to Change Your Favicon and Site Logo in Composr

There are two styling elements you will probably want to change when you begin working on your new Composr website. You will need to change the site logo and you will also need to change your website's favicon.

How to Change your Favicon

The Favicon is the small image that appears on tabs on your web browser and also appears next to bookmarks for your website. Having a unique favicon makes your site stand out among other bookmarks and makes it easy to identify.

A Favicon is 16×16 pixels. Web browsers will resize your image for you to ensure it is the correct size, but it is important if the image you use is at very least square. You also need to make sure there isn't too much detail as this will be lost if it is sized down.

Actually the above was a simplification: nowadays favicons come in many sizes, and you can include multiple icons within a single .ico file. Making a 16×16 one is a good start. The Supplementary web technologies (media, social networking, etc) tutorial goes into more detail.

Changing the Favicon Step by Step

1. Log in to the Admin Zone
2. Navigate to the Style section of the Admin Zone menu
3. Choose the Themes icon
4. Scroll to the theme you currently have live on your site
5. Choose Edit theme images
6. Expand the first tray, titled "(unnamed)"
7. Scroll down to Favicon and click on it
8. Choose and upload your image and click the save button
9. Check your Favicon is appearing correctly in the tab which displays your website
10. (If the favicon doesn't look correct edit the image and repeat the process)

How to change your website logo

There are two routes you can take to edit your website logo. I will cover both.

The simplest way to edit your main website logo is to:

1. Go to your homepage
2. Hover your mouse over the logo in the top left until you see a popup to "edit theme image"
3. Click the popup which will take you to the edit screen
4. Click the Upload option and upload your new logo image
5. Click to save
6. If your Logo does not look right you may need to tweak your CSS or the image and repeat the steps above.

Changing the website logo Step by Step via the Admin Zone

1. Log in to the Admin Zone
2. Navigate to the Style section of the Admin Zone menu
3. Choose the Themes icon
4. Scroll to the theme you currently have live on your site
5. Choose the Edit theme images icon
6. Scroll down to the Logo section and expand it
7. Choose the logo titled logo/-logo
8. Click the Upload option and upload your new logo image
9. Click to save
10. (If your Logo does not look right you may need to tweak your CSS or the image and repeat the steps above.)

There is also the logo/standalone_logo theme image that you should also change as it is used for e-mails etc.

Feedback

Have a suggestion? Report an issue on the tracker.