How to add a Favicon?

Mar 14, 2013

Hi

I would like do add a a favicon that it is displayed in the Tab of a browser. Normally the file favicion.ico must be placed in the root folder. I have placed the favicon in all output folders but it is not displayed so far. Maybe it might be a solution to manipulate some html files?

Thanks for your help

Timo 

11 Replies
Cody Salinas

Hey, Timo.

This is a few years after the fact, but I figured it would be helpful to add my solution. You can easily add a favicon to the tab by looking for Line 144 in the story.html code.

  1. Open story.html in an HTML editing tool such as Dreamweaver. If you don't have this, open the file in Notepad.
  2. Look for Line 144 in the code. It should look something like this: <script src="story_content/story.js" type="text/javascript"></script>
  3. Add the following bit of code below Line 144: <link rel="shortcut icon" href="https://yourfaviconlocationhere.com" type="image/x-icon" id="favicon"
  4. Save the story.html file and upload to your server. As long as you specify the location of the favicon correctly, it will appear in the tab on the next refresh.

Hope this helps!

 

Jacqueline Lins

Hi Cody,

Thanks a lot for your help! It worked perfectly when I uploaded the story.html file to the server where the Favicon is also located.

But I have an additional question to this:

In the nearer future our server link will change. That means that I would have to change every story.html file manually with Notepad  (we have a lot...). Since Articulate Storyline 2 always gives the same output after publishing (see screenshot attached), it would be nice to add the favicon here, so that the link to the favicon in the story.html file won't change, if the link to the server changes. Is there a possibility to do so?

Hope the explanation makes sense...

Thanks and regards,

Jacqueline

 

Jacqueline Lins

Hi all,

I could manage to add the favicon into the published Articulate Storyline file. Just copy the favcion.ico for example into the "story_content" file and use "story_content/favicon.ico" as reference, so that the code looks like this:

<link rel="shortcut icon" href="story_content/favicon.ico" type="image/x-icon" />

Still a bit of manual work, but only for once. Maybe a simple thing for a programmer, but a breakthrough for us ;)

Thanks again, Cody, for your help!

Ashley Terwilliger-Pollard

Hey Snorre,

This forum discussion is a bit older, but it looks like Jacqueline had to do some manual customization of this. You may want to message her and see if she's able to share the details with you on how this is working for her now and any other steps she had to take. You cna use the "contact me" button on her profile to reach out. 

This discussion is closed. You can start a new discussion or contact Articulate Support.