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

Website Gravity Like Google Gravity Source Code in HTML JS for BLogger, Website

Chandrayan-3 3D Model

Top 6 3D Room, App Menu, Space Glob, other

Printer with text input in HTML,CSS,JS

Animated Links Hover Effect HTML,Css

Favicon Generator Script HTML CSS JS | Blogger

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