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

how to make hacker login page HTML

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

ja chor day meri waadi kashmir 💧💧 🇮🇳🇮🇳 Desh Bhakti Ringtone Video by PRIYANSHU OM SHANTI DIGITAL

How to make name ringtone and dj tone with other ringtone.

BrightClouds INTRO

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

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

Gore Rang pe Morni Rutan kare in Hindi Best Song

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

How to Create Chat Application in HTML, Css, Js || Blogger and 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