Logo Maker

 

ctx.arcTo(ico_w + 0 + txt_w + 2 + txt2_w + 6, start_txt - txt2_h -3, ico_w + 0 + txt_w + 2 +

txt2_w + 6, start_txt - txt2_h, 3);

ctx.lineTo(ico_w + 0 + txt_w + 2 + txt2_w + 6, start_txt);

ctx.arcTo(ico_w + 0 + txt_w + 2 + txt2_w + 6, start_txt + 3, ico_w + 0 + txt_w + 2 + txt2_w +

3, start_txt + 3, 3);

ctx.lineTo(ico_w + 0 + txt_w + 5, start_txt + 3);

ctx.arcTo(ico_w + 0 + txt_w + 2, start_txt + 3, ico_w + 0 + txt_w + 2, start_txt, 3);

ctx.lineWidth = 3;

ctx.stroke();

ctx.fillStyle = clr;

ctx.fillRect(ico_w + 0 + txt_w + 2, start_txt - txt2_h -3,txt2_w + 6, txt2_h + 6);

}

ctx.font = a_bold + '48px '+ fnt2;

ctx.fillStyle = clr2;

ctx.fillText(txt2, ico_w + 0 + txt_w + 5,start_txt);

})

}

function renderImage2() {

document.fonts.ready.then(_ => {

canvas.style.letterSpacing = 0 + 'px';

ctx.font = '900 '+ico_sz+'px "Font Awesome 5 Free"';

var ico_w = ctx.measureText(ico).width;

var ico_h = parseInt(ctx.font.match(/\d+/), 10);

ctx2.font = '900 48px "Font Awesome 5 Free"';

var ico_w2 = ctx2.measureText(ico).width;

ctx.font = m_bold + '48px '+ fnt;

var txt_w = ctx.measureText(txt).width;

var txt_h = parseInt(ctx.font.match(/\d+/), 10);

ctx.font = a_bold + '12px '+ fnt2;

var txt2_w = ctx.measureText(txt2).width;

var txt2_h = parseInt(ctx.font.match(/\d+/), 10);

var max_w = Math.max(ico_w, txt_w, txt2_w);

var center = (max_w + 15) / 2;

canvas.width = max_w + 15;

canvas.height = ico_h + txt_h + txt2_h + 35;

canvas2.width = ico_w2 +5;

canvas2.height = 58;

ctx.textAlign = "center";

if (off_1 == 3){

ctx.font = '900 '+ico_sz+'px "Font Awesome 5 Free"';

ctx.fillStyle = off_clr;

ctx.fillText(ico, center + off_1, ico_h + 12.5 + off_1);

ctx.font = m_bold + '48px '+ fnt;

ctx.fillStyle = off_clr;

ctx.fillText(txt, center + off_1 ,ico_h + 5 + txt_h + 12.5 + off_1);

}

ctx.font = '900 '+ico_sz+'px "Font Awesome 5 Free"';

ctx.fillStyle = ico_clr;

ctx.fillText(ico, center , ico_h + 12.5 );

ctx2.font = '900 48px "Font Awesome 5 Free"';

ctx2.fillStyle = ico_clr;

ctx2.fillText(ico, 0, 48);

canvas.style.letterSpacing = 0 + 'px';

ctx.font = m_bold + '48px '+ fnt;

ctx.fillStyle = clr;

ctx.fillText(txt, center, ico_h + 5 + txt_h + 12.5);

if (txt2 != "" && shapes) {

ctx.strokeStyle = clr;

ctx.moveTo(center - (txt_w/2), ico_h + 10 + txt_h + 12.5);

ctx.lineTo(center + (txt_w/2), ico_h + 10 + txt_h + 12.5);

ctx.lineWidth = 2;

ctx.stroke();

}

if (off_1 == 3){

canvas.style.letterSpacing = document.getElementById('l_sp').value + 'px';

ctx.font = a_bold + '12px '+ fnt2;

ctx.fillStyle = off_clr;

ctx.fillText(txt2, center + off_1 ,ico_h + 5 + txt_h + 5 + txt2_h + 12.5 + off_1);

}

canvas.style.letterSpacing = document.getElementById('l_sp').value + 'px';

ctx.font = a_bold + '12px '+ fnt2;

ctx.fillStyle = clr2;

ctx.fillText(txt2, center,ico_h + 5 + txt_h + 5 + txt2_h + 12.5);

l_sp = 0;

})

}

var button = document.getElementById('fav-download');

button.addEventListener('click', function (e) {

var dataURL = canvas2.toDataURL('image/png');

button.href = dataURL;

});

var button2 = document.getElementById('logo-download');

button2.addEventListener('click', function (e) {

var dataURL2 = canvas.toDataURL('image/png');

button2.href = dataURL2;

});

/* hexToComplimentary : Converts hex value to HSL, shifts

* hue by 180 degrees and then converts hex, giving complimentary color

* as a hex value

* @param [String] hex : hex value

* @return [String] : complimentary color as hex value

*/

function hexToComplimentary(hex){

// Convert hex to rgb

// Credit to Denis http://stackoverflow.com/a/36253499/4939630

var rgb = 'rgb(' + (hex = hex.replace('#', '')).match(new RegExp('(.{' + hex.length/3 + '})',

'g')).map(function(l) { return parseInt(hex.length%2 ? l+l : l, 16); }).join(',') + ')';

// Get array of RGB values

rgb = rgb.replace(/[^\d,]/g, '').split(',');

var r = rgb[0], g = rgb[1], b = rgb[2];

// Convert RGB to HSL

// Adapted from answer by 0x000f http://stackoverflow.com/a/34946092/4939630

r /= 255.0;

g /= 255.0;

b /= 255.0;

var max = Math.max(r, g, b);

var min = Math.min(r, g, b);

var h, s, l = (max + min) / 2.0;

if(max == min) {

h = s = 0; //achromatic

} else {

var d = max - min;

s = (l > 0.5 ? d / (2.0 - max - min) : d / (max + min));

if(max == r && g >= b) {

h = 1.0472 * (g - b) / d ;

} else if(max == r && g < b) {

h = 1.0472 * (g - b) / d + 6.2832;

} else if(max == g) {

h = 1.0472 * (b - r) / d + 2.0944;

} else if(max == b) {

h = 1.0472 * (r - g) / d + 4.1888;

}

}

h = h / 6.2832 * 360.0 + 0;

// Shift hue to opposite side of wheel and convert to [0-1] value

h+= 180;

if (h > 360) { h -= 360; }

h /= 360;

// Convert h s and l values into r g and b values

// Adapted from answer by Mohsen http://stackoverflow.com/a/9493060/4939630

if(s === 0){

r = g = b = l; // achromatic

} else {

var hue2rgb = function hue2rgb(p, q, t){

if(t < 0) t += 1;

if(t > 1) t -= 1;

if(t < 1/6) return p + (q - p) * 6 * t;

if(t < 1/2) return q;

if(t < 2/3) return p + (q - p) * (2/3 - t) * 6;

return p;

};

var q = l < 0.5 ? l * (1 + s) : l + s - l * s;

var p = 2 * l - q;

r = hue2rgb(p, q, h + 1/3);

g = hue2rgb(p, q, h);

b = hue2rgb(p, q, h - 1/3);

}

r = Math.round(r * 255);

g = Math.round(g * 255);

b = Math.round(b * 255);

// Convert r b and g values to hex

rgb = b | (g << 8) | (r << 16);

return "#" + (0x1000000 | rgb).toString(16).substring(1);

}

</script>

<!-- adsense -->

<!-- Adsense Code -->

</body>

</html>

<br /></p><p>You can make and customize your favicon and logo with our free online favicon

and logo maker, create a favicon and logo for your new website for free in seconds with

our favicon maker and logo maker tool, you can also create a favicon for the teamís social

media pages with our favicon and logo maker.</p><p>Favicons (short for favorites icons)

are the small images that appear next to a websiteís name in the URL bar or bookmark tab

of a web browser. They were originally intended to be used as simple site logos, but have

evolved over time into being used for more creative purposes. Favicons are very

convenient for users, as they allow them to quickly identify the site they are on when

browsing through their bookmarks.</p><p>Favicons are small icons that appear on the tab

of a web browser and on bookmarks. They are unique to each website and used for

identification purposes.</p><p>Favicons allow users to quickly identify websites they are

visiting, bookmarking or sharing with friends. The icons are a popular way to personalize

the web experience. They are small, but very important to the userís experience and can

look professional and creative. They can often look like the logo for a

company.</p><p>There are different ways a website may use this, and that means you can

use it in different ways to represent your team. These may include the logo itself, the

teamís colors, the mascot, the teamís mascot, etc. This section will show you how to create

a favicon for your new website. You could also create a favicon for your teamís social

media pages.</p><p><br /></p><div><br /></div