Hello. How do you add an .ico icon image to a course so that when it's open in a browser, the icon is visible? I tried editing meta.xml and putting the .ico file in the project's main directory (where meta.xml lives). Didn't work... any suggestions?
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:
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?
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.
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):
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 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.
12 Replies
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.
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!
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.
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!
Thanks for popping in to share an update and how you were able to resolve Roberta :) Much appreciated.
Cool! It is good to know that actually works, since I hadn't actually tried it.
Hey There,
I've been trying this out myself and haven't been having any luck. Could an update in the last few years have changed how this works?
This should still work. Are you trying to do this in Storyline?
Yep. I tried with my existing ico file and when that didn't work, I tried a png like Ione. No luck with either.
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
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!
So cool. I'm glad that you got it working.
This discussion is closed. You can start a new discussion or contact Articulate Support.