Miscellaneous Downloads.

"You're entering the vicinity of an area adjacent to a location. The kind of place where there might be a monster, some kind of weird mirror. These are just examples, it could also be something much better. Prepare to enter, The Scary Door."
Futurama "A Head in the Polls" (2ACV03)

Favicons: a mysterious iconic symbol of the internet.

Updated September 2016 to include new information

In late 2014 I investigated favicons. the little image you have next to the name of the page, and discovered that unlike a lot of other key foundations of websites this one was not exactly easy to decipher. especially with the addition of mobile browsing. I therefore endevoured to find a "catch all" system of displaying the correct sized favicon without demanding too much bandwith or load time. heres what i came up with


<!-- Terms of Use: This work (favicons-setup-full_2016_revision8)  is distributable modified or unmodified
	for non-commercial purposes and with attribution to the original creator. -->
<!-- Favicon.ico must be in ROOTDIR of domain/sub-domain -->
<!-- Chrome for Android 192x: -->
<link rel=" icon" sizes="192x192" href="/touch-icon-192x192.png">
<!-- iPhone 6 Plus with 3× display 180x: -->
<link rel="apple-touch-icon-precomposed" sizes="180x180" href="/apple-touch-icon-180x180-precomposed.png">

<!-- iPad with 2× display - iOS ≥ 7 152x: -->
<link rel="apple-touch-icon-precomposed" sizes="152x152" href="/apple-touch-icon-152x152-precomposed.png">

<!-- iPad with 2× display - iOS ≤ 6 144x: -->
<link rel="apple-touch-icon-precomposed" sizes="144x144" href="/apple-touch-icon-144x144-precomposed.png">

<!-- iPhone with 2× display - iOS ≥ 7 120x: -->
<link rel="apple-touch-icon-precomposed" sizes="120x120" href="/apple-touch-icon-120x120-precomposed.png">

<!-- iPhone with 2× display - iOS ≤ 6 114x: -->
<link rel="apple-touch-icon-precomposed" sizes="114x114" href="/apple-touch-icon-114x114-precomposed.png">

<!-- iPad mini, first and second-generation iPad (1× display) on iOS ≥ 7 76x: -->
<link rel="apple-touch-icon-precomposed" sizes="76x76" href="/apple-touch-icon-76x76-precomposed.png">

<!-- iPad mini, first and second-generation iPad (1× display) on iOS ≤ 6 72x: -->
<link rel="apple-touch-icon-precomposed" sizes="72x72" href="/apple-touch-icon-72x72-precomposed.png">

<!-- non-Retina iPhone, iPod Touch, and Android 2.1+ devices 57×: -->
<link rel="apple-touch-icon-precomposed" href="/apple-touch-icon-precomposed.png">

<!-- Chrome, Safari, Firefox (Desktop) Etc. 32x -->
<link rel="icon" href="/favicon.png">

<!-- IE Only -->
<!--[if IE]><link rel="shortcut icon" href="/favicon.ico"><![endif]-->
<!-- IE 10 Windows 8 Tiles 144x -->
<meta name="msapplication-TileColor" content="#00cea0">
<meta name="msapplication-TileImage" content="/tileicon.png">

<!-- Manifest + Colour-->
<link rel="manifest" href="/manifest.json">
<meta name="theme-color" content="#ffffff">

	"name": "Bouncebag",
	"icons": [
			"src": "\/touch-icon-192x192.png",
			"sizes": "192x192",
			"type": "image\/png"
	"theme_color": "#ffffff",
	"display": "standalone"


      <square150x150logo src="/mstile-150x150.png"/>

favicons-setup-full_2016_revision8 is a heavily researched favicon setup to have full compatability with less demand on icon load times and server.

Most browsers will assign to correct icon using this setup. Some quirks in some obscure browsers are unavoidable. (I tried to fix some, but it is impossible to fix all browser quirks.) Some obscure browsers will download a much larger/smaller version of icon than needed, but all browsers /should/ display an favicon that is close to/at the correct size. If your browser does not display a favicon/tileicon, let me know on the Contact Page

In the latest version I have added a new browser config and manifest Along with a 150x150 icon. The two additional files give IE/Edge and Android the information for when you link the webpage as a Windows Tile/Android App.

Only the manifest file needs to be listed in the HTML, the browser config is picked up automatically by IE/Edge. the new browser config will overwrite the older 144x144 image in most instances, apart from some edge cases, mostly with IE10 and Windows 8.

A simplified fully compatible version (All browsers (IE5 to the modern day) displaying a favicon) is favicons-setup-min_2014_revision3, it has fewer lines of code, but more demand on icon load times and server.

<!-- Terms of Use: This work (favicons-setup-min_2014_revision3)  is distributable modified or unmodified
	for non-commercial purposes and with attribution to the original creator. -->
<!-- Favicon.ico must be in ROOTDIR of domain/sub-domain -->
<link rel=" shortcut icon" href="/favicon.ico">
<link rel="apple-touch-icon-precomposed" href="/apple-touch-icon-152x152-precomposed.png">
Both these setups will display an image in almost all browsers (I have tested both on mobile devices (iOS, Android and Windows) and on desktops.)

The min setup only requires one .ico file and a 152x152 png icon.
The full setup requires various sizes majority of which are .png files. (you can use .gif for some, however .png is recommend as it decreases the amount of browser issues)
The requirements are:

  • 192x192 .png Icon for Google Chrome for Android (Later Android phones) + Optional Manifest JSON
  • 180x180 .png Apple iPhone 6 Plus with 3× display
  • 152x152 .png Apple iPad with 2× display - iOS ≥ 7 152x
  • 150x150 .png Microsoft Windows Tile + Browser Config XML
  • 144x144 .png Apple iPad with 2× display - iOS ≤ 6
  • 144x144 .png Microsoft Internet Explorer 10, Windows 8 Tile, it also needs a background colour declaring.
  • 120x120 .png Apple iPhone with 2× display - iOS ≥ 7
  • 114x114 .png Apple iPhone with 2× display - iOS ≤ 6
  • 76x76 .png Apple iPad mini, first and second-generation iPad (1× display) on iOS ≥ 7
  • 72x72 .png Apple iPad mini, first and second-generation iPad (1× display) on iOS ≤ 6
  • 57x57 .png Apple non-Retina iPhone, iPod Touch, and Android 2.1+ devices
  • 32x32 .png Chrome, Safari, Firefox (Desktop) Etc. This is utilised most widely outside of IE and small screen Safari.
  • One .ico file, preferably with at least a 16x16, 32x32 and 48x48 packed in the favicon.ico file. Used only for Internet Explorer browsers Pre IE 10. If using the min setup I recommend a 64x64 packed within the ico aswell.
It is recommend that you keep the naming convention I have used (for some of the files it is a requirement.) It is also essential that the favicon.ico is stored in either the domain or sub-domain root of the page using the icon (where the browser will automatically search for it as a fall back if it cannot process any of the other code, only browsers that will do this are early versions of Internet Explorer and similarly aged web browsers).

The file sizes are due to the number of uses. the larger icons are used as page shortcuts on tablets and mobiles, therefore they are required to be large to present a clear, well formed image of your website.

The unfortunate thing about this full setup is that no matter how strict the coding, there will be some browsers that will not display the correct icon.

However I believe it is the most comprehensive way of displaying icons correctly, especially for mobile browsing.

"Here's to another lousy Millennium."
Philip J. Fry - Space Pilot 3000 - Futurama (1ACV01)

Displaying New Year and Christmas Day every year using JavaScript.

Old code Poorly written and bloated code, left for reference purposes.

I was re-learning some basic JavaScript and came across time codes and date stamps, my original idea was to use maths in JavaScript to get the new year by milliseconds, then i discovered that simply knowing the month and date would be good enough to get it to only display on a date of my choosing.
The month of "0" is January, all months in JavaScript are numerically from 0-11 instead of 1-12. this script should work with any month and any day inputed, including 29th of febuary, which would only display once every leap year

//Simple function that returns true on 1st day of the 0th (js) month. (January)
// Also returns true on 25th day of the 11th JS month (December)
//It is used here to display a New Year's greeting message as well as a Xmas Day one
// that includes the year as well.
// Date = 1. Month = 0
// Date = 25. Month = 11
// For example for the 17th of march to display a message true
// (month == 2 && date == 17) in Javascript january = 0, december = 11
// Terms of Use: This work (NewYear.js) is licensed under
// Creative Commons Attribution-NonCommercial-ShareAlike 4.0 License.
// It is attributed to Lewis Wright, owner of www.bouncebag.com .
function newYear() {
    var d = new Date();
    var m = new Date();
    var y = new Date();
    var date = d.getUTCDate();
    var month = m.getMonth();
    var year = y.getFullYear();
    var greeting;
    if (month == 0 && date == 1) {
        greeting = "<br />Happy New Year " + year + "!";
    } else if (month == 11 && date == 25) {
        greeting = "<br />Merry Christmas " + year + "!";
    } else {
        return false;
    document.getElementById("newyear").innerHTML = greeting;

It is useful for pulling up a custom greeting for birthdays, events and anniversaries.


To see this script in action Click here
The linked file displays "TEST" on most days of the year. On New Years day (01/01/YYYY) displays "Happy New Year YYYY!" and on Christmas Day (25/12/YYYY) displays "Merry Christmas YYYY!" replace YYYY with the year.

"That from and after the Tenth Day of April, One thousand seven hundred and ten, the Author of any Book or Books already Printed [...] shall have the sole Right and Liberty of Printing such Book and Books for the Term of One and twenty Years
The Statute of Anne, 1710

Displaying a up to date copyright notice with hidden JavaScript.

Using this simple script you can display a copyright or year inclusive notice without having others see the code in the "Inspect Element" as it writes over itself.


var d = new Date();
document.getElementById("copy-right").innerHTML = "© Lewis Wright - " + d.getFullYear();

The above Javascript code would be wrapped in a script tag inside an element with id="copy-right" which to the inspect element explorer would appear like this


<p id="copy-right">
	© Lewis Wright - 2023

This code would write "© Lewis Wright - 2015" in the year 2015., for other years it would automatically detect the year and post it.

As the script is held within the HTML element it overwrites it will be hard to detect this script when using browser side element inspectors.

The code, both HTML and Javascipt are contained in the .txt file.

Romanising the numerals in the copyright.

Using this simple script you can display a copyright or year inclusive notice, with Roman numerals, without having others see the code in the "Inspect Element" as it writes over itself. It uses a roman numeral converter


	var d = new Date();
	document.getElementById("copywright").innerHTML = "© Lewis Wright - " + NumerisRomanis(d.getFullYear());

See the Pen Roman Numerals as DateTime JS by L Wright (@Bouncebag) on CodePen.

Have no fear of perfection - you'll never reach it.
Salvador Dali

Contrast background and foreground colours.

From the ID of an element, find whether black of white text contrasts better with the background colour and sets the colour of the element.

In the HTML <script> tag add the list of HTML element ID's as an array and pass to the function, it can also be passed in as a singular ID to only set the foreground colour for that singular element.

 const idList = ["demo","demo2","demo3", "demo4"];

The Below code sets it as a class of "white" or "black" though commented out above it is to set it just as a style on the element.

function runList(id) {
 const elem = document.getElementById(id);
 //can look at any computed css of the current element
 const allComputedStyles = elem.computedStyleMap();
 for (const [prop, val] of allComputedStyles) {
  //Gets background colour for contrast ratio.
  if (prop == 'background-color') {
   let bgcolour = val; //array
   var rgb = bgcolour.toString(); //'rgb(rrr, ggg, bbb)' string
  } //END if background-colour
 } //END for loop
 rgb = rgb.split(/\(([^)]+)\)/)[1].replace(/ /g, ''); //rrr,ggg,bbb string
 //Map RGB values to variables
 var r = parseInt(rgb.split(',')[0], 10),
     g = parseInt(rgb.split(',')[1], 10),
     b = parseInt(rgb.split(',')[2], 10),
 //If RGBA, map alpha to variable (not currently in use)
 if (rgb.split(',')[3] !== null) {
   a = parseInt(rgb.split(',')[3], 10); 
 // r, g, b, a, all as ints. alpha not used.
 //Calculate contrast of color (standard grayscale algorithmic formula)
 var contrast = (Math.round(r * 299) + Math.round(g * 587) + Math.round(b * 114)) / 1000;
 //Set colour of text of the element either white or black depending on bg contrast.
 //console.log ("Colour Contrast: ID:", id, " RGB:", rgb, " Contrast:", contrast, "/128");
 //return (contrast >= 128) ? elem.style.color = 'black' : elem.style.color = 'white'; 
 return (contrast >= 128) ? elem.classList.add("black") : elem.classList.add("white"); 
} //End Func

It is also possible with a little modifcation to pass in a HEX value and then run the same code from rgb = rgb.split( using the below code

function hexToRGB(hex) {
    var r = parseInt(hex.slice(1, 3), 16),
        g = parseInt(hex.slice(3, 5), 16),
        b = parseInt(hex.slice(5, 7), 16);

    return "rgb(" + r + ", " + g + ", " + b + ")";


To see this script in action, look at the palette on the Rollercoaster Tycoon 2 page, all the foreground colours on the palette are set using this script.

Back to Top