12 Replies
Dave Cox

I assume that you talking about the icon that gets added to the browser tab? 

Traditionally that is accomplished by adding an icon called favion.ico the website's root directory. If you are trying to add an icon to a tab where you are using an LMS, you will probably not have access to the site's root directory.

There is a new way you could try that might work though. Add the following the the <head> section of the story file:

<link rel="icon" href="http://example.com/favicon.png">

Replace the contents of href with a link to an icon image in your file path.

I haven't actually tried this, so I don't know for sure if it will work.

 

IONE Trainer

Thanks, Dave.

Yes, the little image icon in the browser. I'm not hosting it on an LMS, so that part's a non-issue.

In the past for websites, I've always named the favicon something else but given it the .ico suffix and this has worked fine. I thought I could just pop the .ico (in my case, called owl.ico) into the main directory and it would work.

The extra step I tried was adding the following line to meta.xml:

icon=owl.ico

But, it didn't work.

I can try editing the .story file as you suggest; will that file open as text in an editor?

Thanks for your help!

Dave Cox

Browsers specifically look for an icon file, and more specifically for the favicon.ico file. Since you are not on an lms, try renaming it to that. I know the specs for how broswers look for that file have changed recently, so that may make it work. Also, sometimes the browser will not find it consistently, so it may take awhile to appear.

IONE Trainer

Ok, I combined pieces of your advice, and it works! :) You were right about putting the path in the header. First I tried just naming it favicon.png and doing my original way, which did not work.

So I put this in the header (because I haven't published it to a web directory yet):

<link rel="icon"
type="image/png"
href="C:\Users\roberta.markevitch\Documents\My Articulate Projects\ico try - Storyline output\owl.png">

and it works. So I'll replace the path once I upload the package to the web.

Thanks again!

Dave Cox

Ok.  How did you create the .ico file? An icon file is a different format than a .png file, so you can't just change the extenstion and get it to work. you have to specifically create the icon file with the correct foramt.  Also, what are the dimensions of your file? Favicon files are typically 16 x 16 pixels. Although other, larger sizes can work, the wrong combination is ignored by many broswers. These files should also be 8 or 32 bit files. 

One last thing to note. Once a page has been cached into a browser, it can be extremely difficult to get the browser to pick up the icon. I will eventually, but this makes test very hard. To get it to work, you may need to publish your file with a different name, so the browser doesn't recognize that it's been to that site before.

 

I hope this information helps,

Dave

Mark Weingarten

Hi Dave, 

I ended up creating a demo favicon at https://www.favicon-generator.org/ and after a bit of fiddling, it's working! I love that I can just leave the favicon on my website and just need to paste that one line of code into each course's index.html file (I typically rename story.html) to make it work.

Thanks so much for your help!