PNG To ICO Converter In Vanilla JavaScript

Preview:

Description:

This is a very simple online tool to convert PNG images to ICO files. It supports all possible variations of the ICO format, including the ones with and without transparency, and it can also resize the image if needed.

The whole thing is done client-side, so there’s no need for any server-side processing. This means your users don’t have to wait for their browser to communicate with a server before they can see the results.

How to use it:

1. Import the PNG To ICO Converter.

import { PngIcoConverter } from "../src/png2icojs.js";

2. Code the HTML for the PNG To ICO Converter. Note that we use the Bootstrap framework in this example for basic styling.

<form class="frm-convert">
  <div class="mb-3">
    <input type="file" id="txt-files" accept="image/png" multiple class="form-control" required />
  </div>
  <div class="form-check mb-3">
    <input class="form-check-input" type="checkbox" id="chk-ignore-size">
    <label class="form-check-label" for="chk-ignore-size">
        Ignore Image Size<br />
        <span class="text-muted">
            You probably want to keep your images at 256px max due to <code>.ICO</code> specifications.
            However most applications are still able to open files that violate this limitation.
            You can check this box if you want to proceed anyway.
        </span>
    </label>
  </div>
  <p class="text-center">
    <button type="submit" class="btn btn-primary btn-lg w-100">Convert</button>
  </p>
</form>
<form class="frm-download">
  <div class="input-group">
    <input id="txt-name" class="form-control" placeholder="Default download name: favicon.ico" />
    <button type="submit" id="btn-download" target="_blank" class="btn btn-success" disabled>
      Download
    </button>
  </div>
</form>

3. The main script to enable the PNG To ICO Converter.

const ErrorMessages = {
  "INVALID_IMAGE": "Cannot open the PNG file, please make sure it's a valid PNG file",
  "INVALID_SIZE": "The PNG file is larger than 256px. Please check Ignore Size to proceed anyway.",
};
class ConvertApp {
  btnDownload = document.querySelector("#btn-download");
  init() {
      document.querySelector(".frm-convert").addEventListener("submit", e => {
          e.preventDefault();
          void this.convert();
      });
      document.querySelector(".frm-download").addEventListener("submit", e => {
          e.preventDefault();
          void this.onDownload();
      });
  }
  onDownload() {
      if (!this.currBlob) { return; }
      const url = URL.createObjectURL(this.currBlob);
      const a = document.createElement("a");
      a.href = url;
      const name = document.querySelector("#txt-name").value || "favicon.ico";
      a.download = name;
      a.click();
  }
  async convert() {
      const files = document.querySelector("#txt-files").files;
      if (!files.length) {
          alert("Please choose at least a file");
          return;
      }
      const converter = new PngIcoConverter();
      const ignoreSize = document.querySelector("#chk-ignore-size").checked;
      const inputs = [...files].map(file => ({
          png: file,
          ignoreSize,
      }));
      try {
          this.currBlob = await converter.convertToBlobAsync(inputs);
          this.btnDownload.removeAttribute("disabled");
      } catch (e) {
          console.error(e);
          const msg = e.message;
          if (msg) {
              alert("Error converting: " + (ErrorMessages[msg] ?? msg));
          }
      }
  }
}
new ConvertApp().init();