Created
December 20, 2024 12:21
-
-
Save Cody01100011/3dc850feee4716907ed82ca291e99f89 to your computer and use it in GitHub Desktop.
img_to_ico_converter
This file contains hidden or bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
| <body id="body" onload="sc()" onclick="dr(event)"> | |
| <div id="hd"><div id="h0"></div><div id="h1"></div><p id="h2">convert.net</p> | |
| <div id="h3"></div><div id="h5"></div></div> | |
| <label id="inp"><input id="myfile" type="file" multiple="multiple" accept="image/png,.bmp">Upload img files</label> | |
| <button id="btn" onclick="mf()">Convert to ico</button> | |
| <a id="url" download="file">Download</a> | |
| <div id="mgs"></div> | |
| <div id="box"> | |
| <a id = "ts">Theme setings</a><br> | |
| <a id = "tr">Reload page</a><br> | |
| <a id = "tm">Info and Manual</a> | |
| </div> | |
| <div id="inf"> | |
| Online converter to ico.<br><br> | |
| Info ico this multi size format, supported .png and .bmp smaller 255x255.<br> | |
| Loading img bigger 255x255 poseble, but not tested support multi size.<br> | |
| Also recommended use transperant images in .bmp and .png formats.<br><br> | |
| Developer lazy.cod and cyberBox.net | |
| </div> | |
| <div align="center" id="out"><h id="hl">Download or save<br>this ico</h> | |
| <img id="mgi" width="100px" height="100px" src=""> | |
| <h id="hr">Download or save<br>this ico</h> | |
| </div> | |
| </body> | |
| <style> | |
| body{ | |
| position:absolute; | |
| margin: 0px; | |
| height:100%; | |
| width:100%; | |
| overflow:hidden; | |
| user-select: none; | |
| } | |
| #box{ | |
| position:absolute; | |
| background: #ffffff; | |
| right:0px; | |
| top:38px; | |
| display:none; | |
| padding-top: 5px; | |
| padding-left: 15px; | |
| padding-right: 25px; | |
| padding-bottom: 2px; | |
| border-radius: 3px; | |
| border:solid 1px #dcdcdc; | |
| cursor: default; | |
| } | |
| #box a{ | |
| color:#d3d3d3; | |
| font-size: 100%; | |
| line-height: 2; | |
| font-family: Helvetica; | |
| text-decoration: none; | |
| cursor: default; | |
| } | |
| #box a:hover{ | |
| text-decoration: underline; | |
| } | |
| #vie{ | |
| border: solid 1px #dcdcdc; | |
| border-radius: 5px; | |
| object-fit: cover; | |
| width:50px; | |
| height:50px; | |
| margin: 0.1%; | |
| } | |
| #hd{ | |
| position:absolute; | |
| left:0px; | |
| top:0px; | |
| width:100%; | |
| height:35px; | |
| border-bottom:1px solid #dcdcdc; | |
| } | |
| #h0{ | |
| position:absolute; | |
| left:20px; | |
| top:6px; | |
| width:8px; | |
| height:8px; | |
| border:solid 4px; | |
| border-radius:39%; | |
| border-color: #dcdcdc transparent #dcdcdc #dcdcdc; | |
| } | |
| #h1{ | |
| position:absolute; | |
| left:35px; | |
| top:12px; | |
| width:8px; | |
| height:8px; | |
| border:solid 4px; | |
| border-radius:39%; | |
| border-color: #dcdcdc transparent #dcdcdc #dcdcdc; | |
| } | |
| #h2{ | |
| position:absolute; | |
| height:15px; | |
| width:50px; | |
| left:52px; | |
| top:-2px; | |
| color:#dcdcdc; | |
| font-family: Roboto-Regular,Helvetica; | |
| font-weight:bold; | |
| font-size: 100%; | |
| } | |
| #h3{ | |
| position:absolute; | |
| background-image:url("data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAACAAAAAgCAYAAABzenr0AAAAAXNSR0IArs4c6QAAAARnQU1BAACxjwv8YQUAAAAJcEhZcwAADsMAAA7DAcdvqGQAAADKSURBVFhH7ZRRCgIhEIZN8SZSeKUuE12mK0mLNxGt5idCxNiZB5HC72F3Z/2QcXf41WwO77sKIRy11mdjzIXqnPO1lHLz3m8QKiTuHmiANrTW3vGmIaV0qjeWuBw0Lq/ToOrQrklcDvgCMcYHqi845z6/SuJywBeYCRqgIULVoV2TuBzQAE0wqg7tmsTlgAZocmmC6xPQc2+qJe7iJxgexXvu0CjmuEOjmOMOjWKO+99RzHGHRjHHHRrFEncxjRXFK4pXFK8onoxSTwdAtgf8jUIBAAAAAElFTkSuQmCC"); | |
| background-size:cover; | |
| height:20px; | |
| width:20px; | |
| right:20px; | |
| bottom:8px; | |
| } | |
| #h5{ | |
| position:absolute; | |
| //background-image:url("Darkc.jpg"); | |
| //background-size:cover; | |
| height:25px; | |
| width:25px; | |
| right:60px; | |
| bottom:4px; | |
| border-radius:100%; | |
| border:solid 1px #dcdcdc; | |
| } | |
| #myfile{ | |
| display:none; | |
| } | |
| #btn{ | |
| position:absolute; | |
| background-color: transparent; | |
| left:41%; | |
| top:15%; | |
| border:solid 2px #dcdcdc; | |
| border-radius: 5px; | |
| width:17%; | |
| padding: 0.5%; | |
| color:#d3d3d3; | |
| text-align: center; | |
| line-height:150%; | |
| font-weight:bold; | |
| font-size: 100%; | |
| font-family: Helvetica; | |
| } | |
| #inp{ | |
| position:absolute; | |
| left:20%; | |
| top:15%; | |
| border:solid 2px #dcdcdc; | |
| border-radius: 5px; | |
| width:17%; | |
| padding: 0.5%; | |
| color:#d3d3d3; | |
| text-align: center; | |
| line-height:150%; | |
| font-weight:bold; | |
| font-size: 100%; | |
| font-family: Helvetica; | |
| } | |
| #url{ | |
| position:absolute; | |
| left:62%; | |
| top:15%; | |
| border:solid 2px #dcdcdc; | |
| border-radius: 5px; | |
| width:17%; | |
| padding: 0.5%; | |
| color:#d3d3d3; | |
| text-align: center; | |
| line-height:150%; | |
| font-weight:bold; | |
| font-size: 100%; | |
| font-family: Helvetica; | |
| } | |
| #mgs{ | |
| position:absolute; | |
| left:20%; | |
| bottom:0%; | |
| width:60%; | |
| height:70%; | |
| } | |
| #inf{ | |
| position:absolute; | |
| background: #ffffff; | |
| padding: 0.5%; | |
| width: 59%; | |
| left: 20%; | |
| top: 35%; | |
| border:solid 1px #dcdcdc; | |
| border-radius: 5px; | |
| color:#dcdcdc; | |
| line-height: 1.3; | |
| font-family: Roboto-Regular,Helvetica; | |
| //font-weight:bold; | |
| font-size: 100%; | |
| text-align: center; | |
| display:none; | |
| user-select: text; | |
| z-index: 3; | |
| } | |
| #out{ | |
| position:absolute; | |
| height: 102px; | |
| width: 60%; | |
| left: 20%; | |
| top: 35%; | |
| border:solid 1px #dcdcdc; | |
| border-radius: 5px; | |
| color:#dcdcdc; | |
| font-family: Roboto-Regular,Helvetica; | |
| font-weight:bold; | |
| font-size: 100%; | |
| display:none; | |
| z-index: 2; | |
| } | |
| #out img{ | |
| //width: 100px; | |
| //height: 100px; | |
| border:solid 1px #dcdcdc; | |
| border-radius: 5px; | |
| } | |
| #hl{ | |
| position:absolute; | |
| top:30%; | |
| left:8%; | |
| } | |
| #hr{ | |
| position:absolute; | |
| top: 30%; | |
| right:8%; | |
| } | |
| </style> | |
| <script> | |
| var dat = ""; | |
| var buf1 = ""; | |
| var buf2 = ""; | |
| var buf3 = ""; | |
| var sv1 = false; | |
| var di = 0; | |
| var svB = true; | |
| var buf4 = ""; | |
| var valB = ""; | |
| var lenR = ""; | |
| var lenC = ""; | |
| var lenB = ""; | |
| var lenN = ""; | |
| var boxSV = false; | |
| var temSV = false; | |
| var infSV = false; | |
| var inp = document.getElementById("inp").style; | |
| var ibt = document.getElementById("btn").style; | |
| var url = document.getElementById("url").style; | |
| var box = document.getElementById("box").style; | |
| var mgi = document.getElementById("mgi").style; | |
| var inf = document.getElementById("inf").style; | |
| var mgs = document.getElementById("mgs").style; | |
| var out = document.getElementById("out").style; | |
| ///////////////////////////////////////////////uploader files/////////////////////////////////////////// | |
| document.getElementById("myfile").onchange = function exp(evt){ | |
| var count = evt.target.files.length; | |
| for(i = 0; i < count; i++){ | |
| var reader = new FileReader(); | |
| reader.onload = function(evt){ | |
| dat = evt.target.result; | |
| mfff(); | |
| }; | |
| reader.readAsDataURL(event.target.files[i]); | |
| } | |
| }; | |
| //////////////////////////////////////////////////////////////////////////////////////////////////////// | |
| ///////////////////////////////////////////button convert/////////////////////////////////////////////// | |
| function mf(){ | |
| if(di <= 0){ | |
| alert("!!! Not img. Please select img !!!"+"\n"+"Select img > Pres convert > And download ico."); | |
| } | |
| if(di > 0){ | |
| buf4 = ""; | |
| mff(); | |
| } | |
| } | |
| //////////////////////////////////////////////////////////////////////////////////////////////////////// | |
| ///////////////////////////////////////////converter to ico///////////////////////////////////////////// | |
| function mff(){ | |
| var h = "\x00\x00\x01\x00"; | |
| var s = "\x00\x00\x01\x00\x20\x00"; | |
| var n = String.fromCharCode(parseInt(di, 16))+"\x00"; | |
| var j = parseInt((10 * di) + 6, 16); | |
| var l = String.fromCharCode(j); | |
| var z = "\x00\x00\x00"; | |
| var k = 0; | |
| for(ii = 0; ii < di; ii++){ | |
| dat = document.getElementById(ii).currentSrc; | |
| let res = document.getElementById(ii); | |
| let inf = dat.slice(11, 14); | |
| let rsh = res.height; | |
| let rsw = res.width; | |
| let sx = "\x00"; | |
| let sy = "\x00"; | |
| if(rsh <= 255 && rsw <= 255){ | |
| sx = String.fromCharCode(rsw); | |
| sy = String.fromCharCode(rsh); | |
| } | |
| if(rsh >= 255 && rsw >= 255){ | |
| alert("!!! Warning ( img_"+(ii+1)+" ) Biger 255x255 multi size not suported !!!"); | |
| } | |
| for(i = 0; i < dat.length; i++){ | |
| if(sv1 == true){ | |
| buf1 += dat.charAt(i); | |
| } | |
| if(dat.charCodeAt(i) == 44 ){ | |
| sv1 = true; | |
| } | |
| } | |
| sv1 = false; | |
| buf2 = atob(buf1); | |
| let inc = buf2.charCodeAt(28); | |
| s = "\x00\x00\x01\x00\x20\x00"; | |
| buf1 = ""; | |
| if(inf == "png"){ | |
| buf3 += buf2; | |
| } | |
| if(inf == "bmp"){ | |
| lenR = ""; | |
| lenC = ""; | |
| lenB = ""; | |
| lenN = ""; | |
| if(inc <= 24){ | |
| s = "\x00\x00\x01\x00\x18\x00"; | |
| } | |
| for(i = 2; i < 6; i++){ | |
| lenR += buf2.charCodeAt(15-i).toString(16); | |
| lenC += buf2.charCodeAt(27-i).toString(16); | |
| } | |
| let h = (parseInt(lenC, 16) * 2).toString(16); | |
| let zzz = ["","0","00","000","0000","00000","000000","0000000","00000000"]; | |
| let HexFix = zzz[8-h.length] + h; | |
| for(i=0; i<8; i+=2){ | |
| let a = HexFix.charAt(7-i); | |
| let b = HexFix.charAt(7-(i+1)); | |
| lenN += String.fromCharCode(parseInt(b+a, 16)); | |
| } | |
| lenB = "\x28" + buf2.slice(15, 22) + lenN + buf2.slice(26, 54) + buf2.slice(parseInt(lenR, 16), buf2.length); | |
| buf2 = lenB; | |
| buf3 += lenB; | |
| } | |
| var val = ""; | |
| let hex = buf2.length.toString(16); | |
| let zzz = ["","0","00","000","0000","00000","000000","0000000","00000000"]; | |
| let HexFix = zzz[8-hex.length] + hex; | |
| for(i=0; i<8; i+=2){ | |
| let a = HexFix.charAt(7-i); | |
| let b = HexFix.charAt(7-(i+1)); | |
| val += String.fromCharCode(parseInt(b+a, 16)); | |
| } | |
| if(svB == false){ | |
| buf4 += sx+ sy+ s+ val+ valB; | |
| valB = ""; | |
| } | |
| let hexB = (buf2.length+j+k).toString(16); | |
| let zzzB = ["","0","00","000","0000","00000","000000","0000000","00000000"]; | |
| let HexFixB = zzzB[8-hexB.length] + hexB; | |
| for(b=0; b<8; b+=2){ | |
| let aB = HexFixB.charAt(7-b); | |
| let bB = HexFixB.charAt(7-(b+1)); | |
| valB += String.fromCharCode(parseInt(bB+aB, 16)); | |
| } | |
| k += buf2.length; | |
| if(svB == true){ | |
| buf4 = h+ n+ sx+ sy+ s+ val+ l+ z; | |
| svB = false; | |
| } | |
| } | |
| buf4 += buf3; | |
| svB = true; | |
| let fin = "data:image/x-icon;base64,"+btoa(buf4); | |
| document.getElementById("url").href = fin; | |
| document.getElementById("mgi").src = fin; | |
| buf3 = ""; | |
| valB = ""; | |
| out.display = "inline"; | |
| box.display = "none"; | |
| mgs.display = "none"; | |
| inf.display = "none"; | |
| infSV = false; | |
| boxSV = false; | |
| } | |
| //////////////////////////////////////////////////////////////////////////////////////////////////////// | |
| ////////////////////////////////////////////preview imgs//////////////////////////////////////////////// | |
| function mfff(){ | |
| var elem = document.createElement("img"); | |
| var view = document.createElement("img"); | |
| elem.src = dat; | |
| view.src = dat; | |
| elem.id = di; | |
| view.id = "vie"; | |
| elem.style.display = "none"; | |
| di = ++di; | |
| mgs.display = "inline"; | |
| box.display = "none"; | |
| inf.display = "none"; | |
| out.display = "none"; | |
| infSV = false; | |
| boxSV = false; | |
| document.body.appendChild(elem); | |
| document.getElementById("mgs").appendChild(view); | |
| } | |
| //////////////////////////////////////////////////////////////////////////////////////////////////////// | |
| /////////////////////////////////////////////////box menu/////////////////////////////////////////////// | |
| function dr(event){ | |
| let xSV = event.target.id; | |
| if(xSV == "h3"){ | |
| if(boxSV == false){ | |
| box.display = "inline"; | |
| } | |
| if(boxSV == true){ | |
| box.display = "none"; | |
| } | |
| boxSV = !boxSV; | |
| } | |
| if(xSV == "ts"){ | |
| if(temSV == false){ | |
| document.getElementById("body").style.background="#7b7b7b"; | |
| localStorage.setItem("theme", "darck"); | |
| box.background="#8b8b8b"; | |
| inf.background="#8b8b8b"; | |
| } | |
| if(temSV == true){ | |
| document.getElementById("body").style.background="#ffffff"; | |
| localStorage.setItem("theme", "light"); | |
| box.background="#ffffff"; | |
| inf.background="#ffffff"; | |
| } | |
| temSV = !temSV; | |
| } | |
| if(xSV == "body" || xSV == "mgs" || xSV == "hd"){ | |
| box.display = "none"; | |
| inf.display = "none"; | |
| infSV = false; | |
| boxSV = false; | |
| } | |
| if(xSV == "tr"){ | |
| location.reload(); | |
| } | |
| if(xSV == "tm"){ | |
| if(infSV == false){ | |
| inf.display = "inline"; | |
| } | |
| if(infSV == true){ | |
| inf.display = "none"; | |
| } | |
| infSV = !infSV; | |
| } | |
| } | |
| //////////////////////////////////////////////////////////////////////////////////////////////////////// | |
| ////////////////////////////////////////////screan orentation/////////////////////////////////////////// | |
| window.addEventListener("resize", sc); | |
| function sc(){ | |
| let tm = localStorage.getItem("theme"); | |
| let sc = screen.orientation.type.slice(0, 1); | |
| console.log(sc +"/"+ tm); | |
| if(tm == "darck"){ | |
| document.getElementById("body").style.background="#7b7b7b"; | |
| box.background="#8b8b8b"; | |
| inf.background="#8b8b8b"; | |
| temSV = true; | |
| } | |
| if(sc == "p"){ | |
| console.log("p"); | |
| inp.top = "5%"; | |
| inp.width = "59%"; | |
| inp.left = "20%"; | |
| inp.padding = "1%"; | |
| inp.fontSize = "200%"; | |
| ibt.top = "11%"; | |
| ibt.width = "61.4%"; | |
| ibt.left = "20%"; | |
| ibt.padding = "1%"; | |
| ibt.fontSize = "200%"; | |
| url.top = "17%"; | |
| url.width = "59%"; | |
| url.left = "20%"; | |
| url.padding = "1%"; | |
| url.fontSize = "200%"; | |
| box.fontSize = "200%"; | |
| inf.fontSize = "200%"; | |
| out.fontSize = "180%"; | |
| out.fontWeight = "normal"; | |
| document.getElementById("hl").innerHTML = "Download</br>this ico"; | |
| document.getElementById("hr").innerHTML = "Download</br>this ico"; | |
| document.getElementById("hl").style.top = "20%"; | |
| document.getElementById("hl").style.left = "5%"; | |
| document.getElementById("hr").style.top = "20%"; | |
| document.getElementById("hr").style.right= "5%"; | |
| } | |
| if(sc == "l"){ | |
| console.log("l"); | |
| inp.top = "15%"; | |
| inp.width = "17%"; | |
| inp.left = "20%"; | |
| inp.padding = "0.5%"; | |
| inp.fontSize = "100%"; | |
| ibt.top = "15%"; | |
| ibt.width = "17%"; | |
| ibt.left = "41%"; | |
| ibt.padding = "0.5%"; | |
| ibt.fontSize = "100%"; | |
| url.top = "15%"; | |
| url.width = "17%"; | |
| url.left = "62%"; | |
| url.padding = "0.5%"; | |
| url.fontSize = "100%"; | |
| box.fontSize = "100%"; | |
| inf.fontSize = "100%"; | |
| out.fontSize = "100%"; | |
| out.fontWeight = "bold"; | |
| document.getElementById("hl").innerHTML = "Download or save</br>this ico"; | |
| document.getElementById("hr").innerHTML = "Download or save</br>this ico"; | |
| document.getElementById("hl").style.top = "30%"; | |
| document.getElementById("hl").style.left = "8%"; | |
| document.getElementById("hr").style.top = "30%"; | |
| document.getElementById("hr").style.right= "8%"; | |
| } | |
| } | |
| //////////////////////////////////////////////////////////////////////////////////////////////////////// | |
| </script> |
Sign up for free
to join this conversation on GitHub.
Already have an account?
Sign in to comment