Favicon Generator Script HTML CSS JS

Copy To Clipboard

  <!--Start Code -->
  <!DOCTYPE html>
<html lang="en">
<head>
	<script src='https://kit.fontawesome.com/a076d05399.js' crossorigin='anonymous'></script>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Favicon Maker</title>
    <style>
        body {
            font-family: 'Arial', sans-serif;
              background: linear-gradient(rgb(0, 235, 255), #08124a);

            margin: 0;
            padding: 20px;
            text-align: center;
        }
        h1 {
        color: white;
       	background: black;
        box-shadow: 0px 0px 10px black;
        font-family: Lucida Handwriting;
        }

        
        input[type="file"] {
            display: none;
        }

        .file-input-label {
            display: inline-block;
            padding: 15px 30px;
            background-color: #000;
            color: #fff;
            cursor: pointer;
            border-radius: 8px;
            margin-bottom: 20px;
            transition: background-color 0.3s;
        }

        .file-input-label:hover {
            background-color: blue;
            box-shadow: 0px 0px 10px black;
        }

        canvas {
            display: block;
            margin: 20px auto;
            border: 1px solid #000;
            border-radius: 8px;
            max-width: 100%;
            
        }

        select, button {
            margin: 10px 0;
            padding: 15px 30px;
            font-size: 16px;
            background-color: darkblue;
            color: #fff;
            border: none;
            border-radius: 8px;
            cursor: pointer;
            transition: background-color 0.3s;
        }

        select:hover, button:hover {
            background-color: blue;
             box-shadow: 0px 0px 10px #ccc;
        }

        img {
            display: block;
            margin: 20px auto;
            max-width: 100%;
            border: 0px solid #ddd;
            border-radius: 8px;
            
            
        }

        .download-link {
            display: none;
            text-decoration: none;
            color: #333;
            font-weight: bold;
            padding: 15px 30px;
            background: linear-gradient(319deg, rgba(0,37,167,0.927608543417367) 43%, rgba(0,236,255,0.6699054621848739) 98%);
			box-shadow: 0px 0px 30px #000;
            color: #fff;
            border-radius: 8px;
            cursor: pointer;
            transition: background-color 0.3s;
          
            
        }

        .download-link:hover {
            background: linear-gradient(319deg, rgba(0,236,255,0.6699054621848739) 40%, rgba(0,37,167,0.927608543417367) 100%);
            

            
        }

        .dropdown-container {
            text-align: center;
        }

        @media (max-width: 600px) {
            .file-input-label, select, button, .download-link {
                width: 100%;
            }
        }
    </style>
</head>
<body>
	              <h1>Favicon Generator </h1>
    <label class="file-input-label" for="imageInput"><i class='fas fa-upload' style='font-size:20px;color:white'></i>  Choose Image</label> 
    <input type="file" id="imageInput" accept="image/*" /> <br>
   <label for="sizeSelect"> Your Favicon Image:</label><br>
    <canvas id="imageCanvas" width="128" height="128">  </canvas>
    <div class="dropdown-container">
        <label for="sizeSelect">Select Size:</label><br>
        <select id="sizeSelect">
            <option value="16x16">16x16</option>
            <option value="32x32">32x32</option>
            <option value="48x48">48x48</option>
            <option value="64x64">64x64</option>
            <option value="128x128">128x128</option>
            <option value="256x256">256x256</option>
        </select>
    </div>

    <div class="dropdown-container">
        <label for="shapeSelect">Select Shape:</label><br>
        <select id="shapeSelect">
            <option value="square">⛶ Square</option>
            <option value="circle"> ◯ Circle</option>
        </select>
    </div>

    <button id="generateButton">Generate Favicon</button>

    <img alt=" " id="faviconImage" />

    <a class="download-link" id="downloadLink" download>Download Favicon</a>

      <script>
        const imageInput = document.getElementById('imageInput');
        const imageCanvas = document.getElementById('imageCanvas');
        const sizeSelect = document.getElementById('sizeSelect');
        const shapeSelect = document.getElementById('shapeSelect');
        const generateButton = document.getElementById('generateButton');
        const faviconImage = document.getElementById('faviconImage');
        const downloadLink = document.getElementById('downloadLink');

        let selectedSize = '16x16';
        let selectedShape = 'square';

        imageInput.addEventListener('change', () => {
          const file = imageInput.files[0];
          if (file) {
            const reader = new FileReader();
            reader.onload = function (e) {
              const img = new Image();
              img.src = e.target.result;
              img.onload = function () {
                const ctx = imageCanvas.getContext('2d');
                ctx.clearRect(0, 0, imageCanvas.width, imageCanvas.height);
                ctx.drawImage(img, 0, 0, imageCanvas.width, imageCanvas.height);
              };
            };
            reader.readAsDataURL(file);
          }
        });

        sizeSelect.addEventListener('change', () => {
          selectedSize = sizeSelect.value;
        });

        shapeSelect.addEventListener('change', () => {
          selectedShape = shapeSelect.value;
        });

        generateButton.addEventListener('click', () => {
          const canvas = document.createElement('canvas');
          canvas.width = parseInt(selectedSize);
          canvas.height = parseInt(selectedSize);
          const ctx = canvas.getContext('2d');

          if (selectedShape === 'circle') {
            ctx.arc(canvas.width / 2, canvas.height / 2, canvas.width / 2, 0, 2 * Math.PI);
            ctx.clip();
          }

          ctx.drawImage(imageCanvas, 0, 0, canvas.width, canvas.height);

          const faviconURL = canvas.toDataURL('image/png');
          faviconImage.src = faviconURL;
          downloadLink.href = faviconURL;
          downloadLink.download = 'pomsd-favicon.png';
          downloadLink.style.display = 'block';
        });
        
      </script>
      
</body>
</html>

<a href="https://priyanshuomsd.blogspot.com/"> POMSD </a>

    
    <!--End Code-->

Copy

POMSD

Advertisement

Favicon Generator Script HTML CSS JS | Blogger

Copy To Clipboard

0 Comments

Contact Form

Popular Posts

🇭‌🇦‌🇨‌🇰‌🇪‌🇷‌ Login Panel UI Using HTML CSS Js for Website Blogger

Flappy Bird Game Script in HTML, Css, Js with Background Music, Game Over Sound with other Features for Blogger, Website

Archery Game Script in HTML CSS JS for Blogger , Website

THANOS Snap Source Code in HTML CSS JS for Blogger, Website

10 Ways to Fix Blue Screen Of Death (BSOD) Problem Step by Step.

Fruits Slicer Game Script || HTML, Css, Js || Blogger, Website

Amazing Website 😮😲 || Create your Music || Design Your Music Lab || अपनी धुन बनाये

How to Customize Desktop Youtube

Animated Button HTML and CSS

CSC DIGIPAY Lite Clone || Html Css and Js || for Website

Menu Footer Widget

Subscribe

News

Contact form

POMSD

Advertisement

Favicon Generator Script HTML CSS JS | Blogger

Copy To Clipboard

Recommend

0 Comments

Contact Form

Popular Posts

Menu Footer Widget

Subscribe

News

Contact form