Howdy, Stranger!

It looks like you're new here. If you want to get involved, click one of these buttons!


Hey guys. Big twine fan, been working on some cool stuff with it.

Wondering if a solid custom favicon option is available? I know it's simple HTML, but I can't figure out a decent way to attach a .ico without going in and changing the HTML on each passage.

Searched around a bit, couldn't find much, hope I'm not blind and missing something really simple!


  • I know I've done this for my games before, I think I just inserted it once, like a normal favicon? I'm not sure if I did it in something like StoryTitle or into the compiled code through notepad, but try and see if that works.
  • I'll assume that you're familiar with what Wikipedia has to say about Favicons.

    If you don't mind modifying the post-compiled HTML file, you could always add the <link> tag manually.  For example:

    <!-- Old-school (make sure it's in ICO format) -->
    <link rel="shortcut icon" href="_ICON_URL_" />

    <!-- New style (can use various image formats, PNG is probably your best bet here) -->
    <link rel="icon" type="_ICON_TYPE_" href="_ICON_URL_" />
    If you wanted to do it programmatically, within your story, you could do something like this (in a 'script' tagged passage):

    // Old-school (again, make sure it's in ICO format)
    ;(function () {
    var favicon = document.createElement("link");
    favicon.rel = "shortcut icon";
    favicon.href = "_ICON_URL_";

    // New style (again, can use various image formats, PNG is probably your best bet here)
    ;(function () {
    var favicon = document.createElement("link");
    favicon.rel = "icon";
    favicon.type = "_ICON_TYPE_";
    favicon.href = "_ICON_URL_";

    If you wanted to embed the icon, you could construct a data URL out of it (e.g. "data:_ICON_TYPE_;base64,_BASE64_ENCODE_OF_ICON_").  Any of the methods described here will take a data URL for the _ICON_URL_ bit.

    Additionally, if you're using Twine 1.4+ and would prefer to use a non-ICO icon (PNG or whatever), you can use its image embedding feature to make the data URL for you.  For example, after dropping the image into Twine, you could do something like this (again, in a 'script' tagged passage):

    // New style
    ;(function () {
    var favico = document.createElement("link");
    favico.rel = "icon";
    favico.type = "_ICON_TYPE_";
    favico.href = tale.get("_ICON_PASSAGE_NAME_").text;
  • Excellent! I realized last night when I was lying in bed that I could edit the compiled HTML but I figured there must be some other ways to do it. Thanks, Mad :]
Sign In or Register to comment.