index.html

<!doctype html>
<html lang="en">

<head>
    <meta charset="utf-8">
    <meta name="viewport" content="width=device-width, initial-scale=1">

    <link href="https://cdn.jsdelivr.net/npm/bootstrap@5.1.3/dist/css/bootstrap.min.css" rel="stylesheet"
        integrity="sha384-1BmE4kWBq78iYhFldvKuhfTAU6auU8tT94WrHftjDbrCEXSU1oBoqyl2QvZ6jIW3" crossorigin="anonymous">

    <title>Convert PNG Files to ICO - PNG2ICOjs</title>

    <!-- Global site tag (gtag.js) - Google Analytics -->
    <script async src="https://www.googletagmanager.com/gtag/js?id=G-8KYZZ1R8CZ"></script>
    <script>
        window.dataLayer = window.dataLayer || [];
        function gtag() { dataLayer.push(arguments); }
        gtag('js', new Date());

        gtag('config', 'G-8KYZZ1R8CZ');
    </script>
</head>

<body>
    <div class="container-lg">
        <h1>Convert PNG to ICO</h1>

        <article>
            <p>
                You can use this web app to quickly make a ICO file from one or multiple PNG files.<br />
                This is especially useful when you want to make <code>favicon.ico</code> file for your website.
            </p>

            <p>
                With this Javascript library, all processing happen in your browser.
                You do not need to upload any files to any server so it's fast and secure.
            </p>
        </article>

        <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>

        <hr />

        <p>
            This app is a demo for <code>PNG2ICOjs</code>. For feedback, contribution and donations please visit
            <a target="_blank" href="https://github.com/datvm/PNG2ICOjs">the Github page</a>
        </p>
    </div>

    <script defer type="module" src="js/convert.js"></script>
</body>

</html>