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

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

Clipped Square HTML Css

No Smoking Sigrate HTML Css

Chandrayan-3 3D Model

Top 5 Free Fire Bundles 3D Model in Free

UP Board Result 2023 Class 10th, 12th

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

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

Fruits Slicer Game Script || HTML, Css, Js || Blogger, 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