Add a custom Favicon to Cumulus Sites

May 28th, 2010

If you open a standard out-of-the-box version of Cumulus Web Publisher, Web Client or “Sites” in a “tabbed” browsers you will notice small brown picture next to the page title in the tab. For example here’s a screenshot of the tab for Cumulus Sites as shown in Firefox:

Cumulus Sites in Firefox showing the Tomcat Favicon

This little picture to the left of the “Cumulus Sites” page title is called a “Favicon” and if you look really closely at this one you will see that is actually a 16 by 16 pixel picture of a tom cat. Why a tom cat? Because the web server that comes with the Cumulus web clients is Apache Tomcat and this is its logo.

Apache Tomcat logo

Not everybody wants to have a tom cat icon associated with their web site. It would be better to have a favicon that reflects either your company brand or the purpose of the site. So how can you change it?

There are a number of ways to have your own custom favicon but in order to choose the right approach I’ll need introduce you to the slightly arcane world of favicons.

Favicons were originally invented by Microsoft as a way of visually tagging web sites in the “Favorites” list of their Internet Explorer web browser. Hence the name Fav-Icon. Competing browsers followed suit and effectively adopted this as a pseudo standard. With the advent of the “tabbed” user interface the browsers then started putting the favicon on the page tab as well as using it in other places where the site name is displayed – like the history list, address bar and so on.

W3C subsequently produced an “official” standard for favicons, but only the later browser versions support it completely and Microsoft is still going its own way. This has practical ramifications. For example the W3C standard allows you to use GIF, JPEG, PNG or the Microsoft proprietary ICO format for the favicon image file with an expressed preference for the open standards PNG format. But if you want it to work on Microsoft browsers you need to stick with the ICO format, which is fortunately still supported by the other major browsers as well.

So the first thing you will need to do is produce a 16 x 16 image file in the ICO format. To avoid possible rendering problems on older browsers make sure it has no more than 256 colors. There are lots of commercial and open source programs that you can use and there are even some handy web-based solutions like this one. The browsers also support multi-resolution favicons that look better when a bigger icon is needed such as iPhone links or desktop icons. There is a good article on how to create multi-resolution favicons here.

Now you have your ICO file, where do you put it? The original Microsoft approach was to simply call the file favicon.ico and put it at the top of the site so that it appears just after the host name in the URL, for example http://www.microsoft.com/favicon.ico If you open this URL in your web browser you should see the current Microsoft favicon that appears throughout their site.

While W3C tries to discourage it for various reasons this method is still part of the standard and, importantly, seems to be well supported by all the major browsers. This is in fact the way that the Tomcat favicon is delivered so replacing Tomcat’s standard favicon with your own is the simplest way to change it. So how do we make this happen?

Assuming you have access to the server where your Cumulus web site is installed you need to find your way to the Tomcat directory. Assuming you have the the standard “stand-alone” installation this will be under the directory where you installed Cumulus Sites or Cumulus Web Client. For example in a Windows installation of the current version of Sites the default location is:
C:\Program Files\Canto\Cumulus Sites\apache-tomcat-6.0.20

Under this directory you will find the “webapps” folder in which the “Web Applications” are kept. If you aren’t familiar with Tomcat or similar web containers the concept of a web application (or web app) can be a little confusing, but essentially each web app represents a self contained web process and its web pages are contained within single sub-folder under webapps.

You may not be interested in the gory details so let me cut to the chase right away and say that the file you need to replace is called favicon.ico in the webapps/ROOT folder. In the next section I’ll explain a bit more about what is going on.

Assuming you haven’t changed your Tomcat set up you will see that there are a number of standard web apps  such as docs, manager and examples as well as your Cumulus web app, which will usually be called Sites or CumulusE. To the web browser each web app represents a top level “path” within your site. To understand what I mean I suggest you open your current Sites site in your web browser in a separate window, and then replace the word Sites and everything afterwards with the word docs or manager or examples and see what appears in your browser. Assuming that you haven’t removed those web apps, and they aren’t being blocked by an interposed web proxy then you will be able to view their content.

Now try removing the whole path from the URL so that you only see the server name and possibly the port number. For example: http://myserver.com:8080/ You are now looking at the content from the special ROOT web app. This is why changing the favicon.ico in this folder changes the favicon for the site. Try loading the favicon from your site using something like http://myserver.com:8080/favicon.ico This is a good way to check if you have correctly updated your favicon.ico file.

It can sometimes be quite frustrating checking that your favicon change has actually worked. The first thing to do is run the test mentioned above to make sure the new file is actually being delivered. If it hasn’t changed then try forcing an update by hitting ctrl+F5. If this doesn’t fix it you may need to clear your browser cache and restart your browser – which I’m guessing in this case is probably Internet Explorer. Another possibility is that you are accessing the site through a proxy server which is mistakenly caching the image, in which case you could try running the browser on the same machine that Tomcat is running on.

Having checked that the new favicon.ico is being delivered correctly you can then check if your browser is correctly displaying the new favicon for your site. One thing to watch out for here is that for older versions of Internet Explorer you actually need to put the site into your Favorites list before the favicon is picked up. If your browser doesn’t show the favicon then try clearing the cache and restarting the browser again. You might even feel the need to restart Tomcat but unless there is some strange web proxy set-up this probably won’t make a difference.

Assuming you have got your new favicon working and you are happy with the result you can sign off now. If however you are having problems, or if you are wanting to look at doing it the way that is recommended by W3C then the following may be of interest.

One problem with having a single favicon for the whole site is that it’s the same for all the different web pages or “resources” within that site. This is particularly a problem for Tomcat because individual web apps, which may have quite different functions, look to the browser like they all part of the same web site. Another problem is that in order to enhance performance Tomcat is often “front-ended” by a proxy server that hides away the ROOT directory and any non-public web apps. For these reasons it’s worth knowing that there is another way of setting up your favicon.ico. To do this you need to make changes to the HTML code in your site. If you don’t feel comfortable doing this, or the description below doesn’t make sense to you, then you may wish to enlist the help of a web expert.

The article pointed at by this link shows you W3C’s recommended method. Firstly they suggest adding a “profile” parameter to the head tag so that it looks like this:

<head profile="http://www.w3.org/2005/10/profile">

In practise I have found that this change to the <head> tag isn’t necessary, but it doesn’t seem to do any harm.

W3C then say you need add a link tag in the head section that contains a rel parameter that points to your favicon file. Here is the example they suggest:

<link rel="icon" type="image/png" href="/myicon.png" />

Note that W3C are here suggesting a PNG file for the favicon, but as I said before, to be compatible with Microsoft browsers you really need to use an ICO file. The trick in changing from PNG to ICO format is to make sure you use the correct MIME type, which for Microsoft ICO format is “vnd.microsoft.icon”. Your link tag should therefore look something like this:

<link rel="icon"
      type="image/vnd.microsoft.icon"
      href="/myicon.ico" />

Note that the href parameter can be either an absolute or relative href. In the example above the favicon will be the file myicon.ico at the root of the web site. Alternatively an absolute href may be of value if you want to always use your company’s approved favicon, for example:

<link rel="icon"
      type="image/vnd.microsoft.icon"
      href="http://mycompany.com/myicon.ico" />

For the purpose of having a different favicon for each Tomcat web app the best approach is to use an href that is relative to the “page” being delivered, for example:

<link rel="icon"
      type="image/vnd.microsoft.icon"
      href="images/myicon.ico" />

Before we talk about how to achieve this in Cumulus Sites there’s just one more thing you need to know. It seems that the rel=”icon” parameter isn’t understood by the Microsoft browsers. They prefer to see rel=”shortcut icon”. So in order to stay standards compliant but still keep Microsoft happy I suggest including two link tags, one for each version as I’ll show you below.

Well, that’s the general favicon theory out of the way, now we are going to look at customizing your Cumulus Sites web app so that it has its own separate favicon. You could if you wish zip up the resulting web app to make a “war” file that you can deploy on a different Tomcat server and it will retain its favicon.

Customizing Cumulus Sites is a big topic, and I’ll try to cover it in more detail in later blog posts, but if you follow the instructions below you should be able to make the changes you need.

  1. You need to have opened your Sites web site at least once to ensure that the Sites.war file has been unpacked into the webapps folder.
  2. If you have already made changes I suggest you take a back up of your Sites directory in case you need to revert back. If you haven’t made changes then the Sites.war file will still contain the original web site.
  3. If you haven’t done so already then rename or move away your Sites.war file to ensure that your changes don’t get accidentally reverted back.
  4. Inside the Sites webapp folder you will find a sub-folder called customizations. Inside that folder there is another folder called original - this is where the “factory default” web files are found.
  5. Create another sub-folder under customizations, effectively making a sibling with original. It doesn’t matter what you call it, but for the sake of this example let’s call it mychanges
  6. Copy your favicon file into your mychanges folder. I suggest you call it fav.ico
  7. Copy the file sites.jspx from customizations to original and open the copy in a text editor and make the following changes.
  8. Search for the <head> tag and add the profile parameter as shown above.
  9. Add the following two lines after the <head> tag:
<link rel="icon" type="image/vnd.microsoft.icon"
    href="fav.ico" />
<link rel="shortcut icon" type="image/vnd.microsoft.icon"
    href="fav.ico" />

Finally restart your Tomcat server and test to see if your favicon has changed.  If not then you may need to try clearing your browser cache as described earlier in this post.

Further reading:

  • http://en.wikipedia.org/wiki/Favicon
  • http://www.w3.org/2005/10/howto-favicon
  • http://egressive.com/tutorial/creating-a-multi-resolution-favicon-including-transparency-with-the-gimp

My new blog

March 12th, 2010

I hope you enjoy my new blog about Digital Asset Management or “DAM” for short.

I plan to make regular posts about DAM, and in particular the DAM product known as Cumulus from a company called Canto. Why this product in particular? Well it just happens to be the one that I know best, having worked with it now for over 10 years.

Although I do sell services and add-on products for Cumulus I don’t intend for this to become a forum for spruiking. I hope that you will find the information here genuinely useful. If you find me plugging my own products and services, then please take me to task!

Over the years I’ve seen a lot of change in the DAM industry, in fact when I first started it wasn’t even called “DAM”, it was called “MAM” for “Media Asset Management” reflecting the fact that in those days the focus was pretty much on keeping track of things like image files. You’ll still see the term MAM around, but these days it refers mainly to that subset of Digital Asset Management that focusses on audio, video and rich media content.

These days DAM systems are designed to handle any type of digital file and there is even a degree of overlap with document management systems in the sense that DAM can also help you keep track of document files.

What are DAM systems used for?

In my experience the most common use is to provide some sort of digital library in which a large number of files are stored or managed in such a way as to allow them to be easily found and retrieved. The idea behind this is that it is cheaper to reuse work that is already done, rather than having to do it again. In this scenario the “users” of the library tend to access it via a web-based interface, and the librarians tend to use what we call a “desktop” application or “client” to administer and update the library. It is possible to do the admin and update work via the web, and many systems, including Cumulus support this, but with current technology the quickest and easiest software to use for this is that which runs on your own computer.

Another common use for DAM is to support the creation of digital assets. For example it can support Desktop Publishing in the creation of layout documents with tools like Quark Express and Adobe InDesign. In this case the DAM system helps the graphic designer find the components from the library, and then tracks the use of those components in the layout documents, and also tracks the layout documents themselves.  It can also provide supervisors with the ability to set up and monitor workflows to expedite the creative process. Then when the layout documents are finalised they can be archived back in the library as digital assets in their own right.

There are many other uses as well, including:

  • Brand management – ensuring that only approved logos and images are used throughout the enterprise
  • Digital supply chain – the pushing of digital content such as music and videos to retailers and consumers
  • License tracking – tracking the use of and granting of copyright and other rights for licensed assets
  • Collaboration systems – supporting the sharing and updating of documents and other digital asset between various users

DAM systems can also be integrated with related software such as Web Content Management Systems to provide a single, shared repository of digital assets, rather than each system having its own.

So what do these DAM systems do?

Here’s what you can expect your DAM system to do for you:

  1. Fast and convenient “ingestion” functions, by which you can introduce easily assets into the system and have the system extract as much information as possible from the asset itself without you having to type it in
  2. Fast and convenient data entry functions, allowing you to perform updates to many assets at once, and to use techniques such as drag and drop to minimise the amount of typing you need to do
  3. Support for many types of metadata including tect, dates, multi-choice and so forth
  4. Support for metadata standards such as Dublin Core and PBCore
  5. Provision of low res “copy proxies” such as thumbnails
  6. Comprehensive search functions to allow you to quickly and easily find the assets again
  7. Control over who has access to the assets and what they can do
  8. Version control of assets, including the ability to track who did what
  9. Various asset delivery options, including web and email

Many DAM systems also provide the following:

  1. Web based access
  2. Usage tracking and reporting
  3. Approval of requests for assets and their delivery to the requesters
  4. Ability to transcode assets, for example to provide a low res JPEG version of a high res TIFF original
  5. Asset transformation functions, such as image editors
  6. System integration facilities, including things like import/export, and an “Application Programmers Interface” or “API” to allow access to the internal data and provide automated control
  7. Customisation, both of form and function. An API of some sort is really important for the latter

So you can see that there is quite a lot to talk about, and I hope you will find what I have to say to be of value to you!

Until next time!

Glenn Lawrence (AKA “Buster”)

glenn (AT) aimtec (DOT) com (DOT) au