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

No Smoking Sigrate HTML Css

Clipped Square HTML Css

Chandrayan-3 3D Model

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

Top 5 Free Fire Bundles 3D Model in Free

How to Customize Desktop Youtube

How to Add User Set 4 Digit Pin in Website|| HTML, CSS, JS || Blogger

5 Mic Under 200rs for Start Youtube and Vlog || Available on Amazone

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