Have an idea?

Visit Sawtooth Software Feedback to share your ideas on how we can improve our products.

Include an image in the browser title

I know we are all accustomed to seeing text and text only in the browser title.

I have one client who would like to incorporate an icon / image before the browser title.

I was using something like this but couldn't get it working ...

<img alt="" src="http://host.pathway.com/graphics/image.png">

Hoping someone could please provide a handy tip?

asked Aug 27, 2018 by Paul Moon Platinum (101,255 points)

1 Answer

0 votes
Hi Paul,

Do you have a "favicon" in mind -the icon that appears left of the page's name in the browser tab?  If so, just add a small .ico or .png picture in your graphics folder and include this in your study HTML <head> Tag.

<link rel="shortcut icon" href="[% GraphicsPath() %]favicon.png">

Just in case, Google provide a nice trick to capture the favicon of any site (e.g. your client's site):

If you mean adding another picture on top of the favicon, I would not know how.

answered Aug 27, 2018 by amic Bronze (1,445 points)
Thanks for your reply. Much appreciated.

You are correct, it is the favicon I am seeking.

I have been provided a png file which I saved in my graphics folder.

I inserted the script you refer to into the HTML <head> tag but no success?

I just see a little box next to the browser title.

Have I left something out?
Hmm, hoping a pro can jump in.

Meanwhile maybe try refreshing or even hard-refreshing (Ctrl + refresh) your browser.  
Maybe also try with a "real" favicon file (using the Chrome URL to grab one), to check if the problem is not with the picture file.  They are sometimes .png, sometimes .ico.
And maybe try and make the original .png a small-ish file, like 32x32 pixels or so.

I just checked the file size and it is 32x32. It is a png file type too. So those issues are okay.

I have also cleared the browsing history.

Thanks for chipping in. I feel I have made some progress.
After a bit of snooping around, I found a short video that guided me into getting this working.

As mentioned earlier, you almost got me across the finishing post.

Here is the solution ...
<link rel="shortcut icon" href="[%GraphicsPath()%]favicon.png" type="image/png">

You had the type="image/png" missing.

Thanks again.
Sorry I could not take you to the complete solution, but glad to hear things are now working.

Making note of the image/png for my own use!
Thanks mate. You got me 90% of the way there.

I just had to hunt down the missing element which I was glad to find via a demo video.

So thank you.

And yes, we can all use it.

The demo I watched mentioned 16x16 or 32x32 image sizes. And they mentioned best leaving the name as favicon.png. So I followed their rules.

Good forum this isn't it!