Is there a way to add an image to an about:blank cloaking tool?

I am trying to make an about:blank cloaking tool. However, I am having an issue with uploading an icon to the cloak. Here is my code:

<!DOCTYPE html>
<html>
<head>
</head>
<body>
<input id="link", type="text", value="Insert Link..."></input>
<input id="title", type="text", value="Insert Title..."></input>
<input type="file", id="myFile", name="filename">
<button onclick="openGame()">Open Game</button>
<script>
  function openGame() {
  var win = window.open()
  var url = document.getElementById("link").value;
  var iframe = win.document.createElement('iframe')
  iframe.style.width = "100%";
  iframe.style.height = "100%";
  iframe.style.border = "none";
  iframe.src = url;
  win.document.body.appendChild(iframe)
  win.document.title = document.getElementById("title").value;
  link = win.document.createElement('link')
  link.rel = icon
  link.type = "image/x-icon"
  link.href = document.getElementById("myFile").value;
  win.document.head.appendChild(link)
}
</script>
</body>
</html>

Also, if you have the chance, could you provide a way to add an icon that isn’t just an .ico file?

Anything is much appreciated.

I tried a few combinations using W3schools (specifically file upload and favicon pages) and messed around quite a bit with the code. What resulted was I only got the default favicon, no matter what icon I uploaded.