FAVICON GENERATOR

Favicon Generator

1. မိမိ site ကို account အရင်ဝင်ပါ
2. dashboard ထဲက Pages ကိုနှိပ်
3. ➕ New Page (or) ➕ အိုင်ကွန်ကိုနှိပ်
4. 🖍️ အိုင်ကွန်ကိုနှိပ်ပါ </> HTML view ကိုရွေးချယ်၍နှိပ်ပါ
5. အောက်က ပေးထားတဲ့ Design code တွေကို copy ယူ၍ကူးထည့်
6. save ကိုနှိပ်ပြီးပါပြီ

<style>
* {
    margin: 0;
    padding: 0;
    box-sizing: border-box;
}

box {
    font-family: Arial, sans-serif;
    background-color: #f0f0f0;
    display: flex;
    justify-content: center;
    align-items: center;
    height: 100vh;
}

.container {
    background: #fff;
    color:#333;
    padding: 30px;
    border-radius: 8px;
    box-shadow: 0 4px 8px rgba(0, 0, 0, 0.1);
    text-align: center;
}

input[type="file"] {
    margin-top: 20px;
    color:#333;
    border:1px solid #333;
    max-width:100%;
    padding:8px;
    border-radius: 12px;
}
  
button {
    background-color: #4CAF50;
    color: white;
    padding: 10px 20px;
    border: none;
    cursor: pointer;
    border-radius: 5px;
    margin-top: 20px;
}

button:hover {
    background-color: #45a049;
}

#output {
    display: none;
    margin-top: 20px;
}

#favicon-preview img {
    max-width: 100px;
    margin-bottom: 10px;
}

select {
    padding: 5px;
    margin: 15px 0;
}
</style>

    <div class="container">
    <!--File input for image-->
        <input accept="image/*" id="file-input" type="file" />
<!--Dropdown for selecting size-->
   <label>Choose Favicon Size:</label>
  <select id="favicon-size">
<option value="16">16x16 px</option>
<option value="32">32x32 px</option>
<option value="48">48x48 px</option>
<option value="64">64x64 px</option>
<option value="128">128x128 px</option>
<option value="192">192x192 px</option>
<option value="512">512x512 px</option>
 </select>

<button id="generate-favicon">Generate Favicon</button>

        <!--Output Section-->
        <div id="output">
   <h2>Your Favicon Preview:</h2>
     <div id="favicon-preview"></div>
            <button id="copy-favicon">Copy Favicon URL</button>
            <button id="download-favicon">Download Favicon</button>
        </div>
    </div>
<script>
document.getElementById('generate-favicon').addEventListener('click', function () {
    const fileInput = document.getElementById('file-input');
    const faviconSize = document.getElementById('favicon-size').value; // Get selected size
    const output = document.getElementById('output');
    const faviconPreview = document.getElementById('favicon-preview');
    const copyFaviconButton = document.getElementById('copy-favicon');
    const downloadFaviconButton = document.getElementById('download-favicon');
    
    if (fileInput.files && fileInput.files[0]) {
 const file = fileInput.files[0];
 const reader = new FileReader();
        
 reader.onload = function (e) {
  const faviconDataUrl = e.target.result;
            
// Resize the image to the selected size using Canvas
const img = new Image();
img.src = faviconDataUrl;
img.onload = function() {
const canvas = document.createElement('canvas');
canvas.width = parseInt(faviconSize);
canvas.height = parseInt(faviconSize);
const ctx = canvas.getContext('2d');
ctx.drawImage(img, 0, 0, canvas.width, canvas.height);
const resizedFaviconDataUrl = canvas.toDataURL();

// Set favicon preview
faviconPreview.innerHTML = `<img src="${resizedFaviconDataUrl}" alt="Favicon Preview">`;
                
// Show the output section
output.style.display = "block";
                
// Enable Copy button functionality
copyFaviconButton.onclick = function () {
navigator.clipboard.writeText(resizedFaviconDataUrl).then(function() {
alert("Favicon URL copied to clipboard!");
                    }).catch(function(error) {
console.error("Failed to copy text: ", error);
                    });
                };
                
// Enable Download button functionality
downloadFaviconButton.onclick = function () {
const link = document.createElement('a');
link.href = resizedFaviconDataUrl;
link.download = "favicon.ico";
link.click();
                };
            };
        };
        
reader.readAsDataURL(file);
    } else {
output.innerHTML = "Please choose a valid image!";
    }
});
</script>