Creating a fancy message using console.log

We just recently released our brand-new website, and just to make it better we added a very fancy ascii-art-style logo in the developer tools. Here is how it looks like in Chrome and Firefox browsers:

How do I make my own custom message in the console?

Step 1. Something that is recommended is to take advantage of the multiline strings available in ECMAScript 2015, this is helpful when creating a logo with multiple lines (used a lot with template literals too: https://developer.mozilla.org/en/docs/Web/JavaScript/Reference/Template_literals).

// Notice the character ` at the beginning and at the end of following multi-line string.
let textChrome = `
%cXX                                %cXXXXXX XXXXXXX    
%cXX                                    %cXX      XX
%cXX                                %cXXXXXX XXXXXXX
%cXXXXXXXX XXXXXXXX XXXXXXX XXXXXXX %cXX     XX
%cXX    XX XX    XX XX      XX   XX %cXXXXXX XXXXXXX
%cXX    XX XX    XX XXXXXXX XXXXXXX %c
%cXX    XX XX    XX      XX XX      %c
%cXXXXXXXX XXXXXXXX XXXXXXX XXXXXXX %c
               %cXX
`;

Step 2. Once you have your ES2015 logo, you can use Babel transpiler to get the ES5 code as in this example.

Step 3. Copy the transpiled code (it will look less beautiful than the original code in ES2015 but it is fine:

var textChrome = "\n%cXX                                %cXXXXXX XXXXXX    \n%cXX                                    %cXX     XX\n%cXX                                %cXXXXXX XXXXXX\n%cXXXXXXXX XXXXXXXX XXXXXXX XXXXXXX %cXX     XX\n%cXX    XX XX    XX XX      XX   XX %cXXXXXX XXXXXX\n%cXX    XX XX    XX XXXXXXX XXXXXXX %c\n%cXX    XX XX    XX      XX XX      %c\n%cXXXXXXXX XXXXXXXX XXXXXXX XXXXXXX %c\n               %cXX\n";

Step 4. Now, it is time to add styles (font-size, color, etc.) to your logo, that can be done easily by declaring JavaScript variables and use them as parameters in the console.log method:

// My gray color
let g = "color:#0F669D;font-weight:bold;";
console.log("%cMessage in gray!", g);

Step 5. Finally you can improve your logo with more code, e. g. our base22 logo is generated with this code:

let g = "color:#777;font-weight:bold;";
let b = "color:#0F669D;font-weight:bold;";
let base22MainStyle="font-size:34px; font-weight:200; letter-spacing:0.02em; line-height:1.4em; font-family:helvetica,arial; color:rgba(0,0,0,0.9);";
let base22MessageStyle="font-size:21px; font-weight:200; letter-spacing:0.2em; line-height:1.4em; font-family:helvetica,arial; color:rgba(0,0,25,0.5);";
let isChrome = /Chrome/.test(navigator.userAgent) && /Google Inc/.test(navigator.vendor);
let textChrome = `
%cXX                                %cXXXXXX XXXXXX    
%cXX                                    %cXX     XX
%cXX                                %cXXXXXX XXXXXX
%cXXXXXXXX XXXXXXXX XXXXXXX XXXXXXX %cXX     XX
%cXX    XX XX    XX XX      XX   XX %cXXXXXX XXXXXX
%cXX    XX XX    XX XXXXXXX XXXXXXX %c
%cXX    XX XX    XX      XX XX      %c
%cXXXXXXXX XXXXXXXX XXXXXXX XXXXXXX %c
               %cXX
`;

let textOthers = `
%cXX                                %cXXXXXX XXXXXXX    
%cXX                                    %cXX      XX
%cXX                                    %cXX      XX
%cXXXXXXXX XXXXXXXX XXXXXXX XXXXXXX %cXXXXXX XXXXXXX
%cXX    XX XX    XX XX      XX   XX %cXX     XX
%cXX    XX XX    XX XXXXXXX XXXXXXX %cXX     XX
%cXX    XX XX    XX      XX XX      %cXX     XX
%cXXXXXXXX XXXXXXXX XXXXXXX XXXXXXX %cXXXXXX XXXXXXX
               %cXX
`;


// There is no better web brower for developers, right?
if( isChrome ) {
	console.log(textChrome, g,b,g,b,g,b,g,b,g,b,g,b,g,b,g,b,g);	
} else {
	console.log(textOthers, g,b,g,b,g,b,g,b,g,b,g,b,g,b,g,b,g);	
}

console.log("%cBase22",base22MainStyle),
console.log("%cEnterprise Web Evolution",base22MessageStyle),
console.log("%c","font-size:34px; line-height:1.4em;");

Official documentation: https://developers.google.com/web/tools/chrome-devtools/console/