---
title: "Spicing up your Browser Console - Muhammad Rehan Saeed"
description: "Use figlet fonts, ASCII art and browser console themes to spice up your browser console."
canonical_url: "https://rehansaeed.com/spicing-up-your-browser-console/"
last_updated: "2020-06-10T18:00:00+00:00"
meta:
  author: "Muhammad Rehan Saeed"
  keywords: "ASCII Art,Figlet Font,Browser,Console,JavaScript"
  "og:description": "Use figlet fonts, ASCII art and browser console themes to spice up your browser console."
  "og:image": "https://rehansaeed.com/_og/s/o_9af7f9d37c88b738.png"
  "og:image:alt": "Spicing up your Browser Console - Muhammad Rehan Saeed"
  "og:image:height": "630"
  "og:image:type": image/png
  "og:image:width": "1200"
  "og:title": "Spicing up your Browser Console"
  "twitter:image": "https://rehansaeed.com/_og/s/o_9af7f9d37c88b738.png"
  "twitter:image:alt": "Spicing up your Browser Console - Muhammad Rehan Saeed"
---

> Index of every page on this site: [llms.txt](https://rehansaeed.com/llms.txt)

# [Spicing up your Browser Console](https://rehansaeed.com/spicing-up-your-browser-console/)

Posted 10 June 2020 - **2 min read**

![Figlet Fonts](https://rehansaeed.com/_ipx/f_png&s_2560x1440/images/hero/Figlet-Fonts-1600x900.png)

Wouldn't it be cool if when you opened the browser console up on a site, you saw a cool secret message? There are many sites that do this with quite a few business's advertising frontend development jobs in this way. I wanted to join in on the fun, so...I did. Here is my story of two hours I'm not getting back.

I've done some work on [Colorful.Console](https://rehansaeed.com/colorful-console/) which is an amazing C# console library that lets you write text in ASCII art using [figlet fonts](https://en.wikipedia.org/wiki/FIGlet). I wanted to do the same for my blog. I was too lazy to use Colorful.Console and used a random [online generator](https://www.askapache.com/online-tools/figlet-ascii/) I found. I tried a couple of different fonts out and came up with this JavaScript code:

```js
const consoleOptions = 'background: #ffffff; color: #6b17e8';

// Standard Figlet Font
console.log('%c  ____      _                 ', consoleOptions);
console.log('%c |  _ \\ ___| |__   __ _ _ __  ', consoleOptions);
console.log('%c | |_) / _ \\ '_ \\ / _` | '_ \\ ', consoleOptions);
console.log('%c |  _ <  __/ | | | (_| | | | |', consoleOptions);
console.log('%c |_| \\_\\___|_| |_|\\__,_|_| |_|', consoleOptions);

// o8 Figlet Font
console.log('%c oooooooooo             oooo                              ', consoleOptions);
console.log('%c  888    888 ooooooooo8  888ooooo    ooooooo   oo oooooo  ', consoleOptions);
console.log('%c  888oooo88 888oooooo8   888   888   ooooo888   888   888 ', consoleOptions);
console.log('%c  888  88o  888          888   888 888    888   888   888 ', consoleOptions);
console.log('%c o888o  88o8  88oooo888 o888o o888o 88ooo88 8o o888o o888o', consoleOptions);
```

For the standard font, I had to escape quite a few characters using a back slash `\`, so watch out for that. The results in a browser console were pretty terrible and hard to read...

![My name rendered in ASCII art using a figlet font](https://rehansaeed.com/_ipx/f_png&s_1446x854/content-images/posts/2020/spicing-up-your-browser-console/images/First-Try-723x427.png)

Notice that I passed options to the `console.log` API to set the background and foreground colour of the text. The Chrome browser adds a lot of space between lines and the font just looks a little anaemic and hard to read. I rooted around the Character Map app in Windows, to see if I could find a more substantial set of characters that would show up more brightly instead of using dashes, pipes and numbers. Then I found these: `▀ ▄ █ ▌ ▐ ▲ ► ▼ ◄`.

# My Final Form Link to this section

I took the o8 figlet font text above and simply did a find and replace on it. I replaced the `8` character with `█` and I also replaced the `o` character with `▄`:

```js
console.log('%c ▄▄▄▄     ▄▄▄▄            ▄▄▄▄                                                                ▄▄▄▄', consoleOptions);
console.log('%c  ████▄   ███ ▄▄▄▄  ▄▄▄▄   ███▄▄▄▄▄    ▄▄▄▄▄▄▄   ▄▄ ▄▄▄ ▄▄▄▄   ▄▄ ▄▄▄ ▄▄▄▄    ▄▄▄▄▄▄▄    ▄▄▄▄▄███ ', consoleOptions);
console.log('%c  ██ ███▄█ ██  ███   ███   ███   ███   ▄▄▄▄▄███   ███ ███ ███   ███ ███ ███   ▄▄▄▄▄███ ███    ███ ', consoleOptions);
console.log('%c  ██  ███  ██  ███   ███   ███   ███ ███    ███   ███ ███ ███   ███ ███ ███ ███    ███ ███    ███ ', consoleOptions);
console.log('%c ▄██▄  █  ▄██▄  ███▄██ █▄ ▄███▄ ▄███▄ ██▄▄▄██ █▄ ▄███▄███▄███▄ ▄███▄███▄███▄ ██▄▄▄██ █▄  ██▄▄▄███▄', consoleOptions);

console.log('%c ▄▄▄▄▄▄▄▄▄▄             ▄▄▄▄                              ', consoleOptions);
console.log('%c  ███    ███ ▄▄▄▄▄▄▄▄▄█  ███▄▄▄▄▄    ▄▄▄▄▄▄▄   ▄▄ ▄▄▄▄▄▄  ', consoleOptions);
console.log('%c  ███▄▄▄▄██ ███▄▄▄▄▄▄█   ███   ███   ▄▄▄▄▄███   ███   ███ ', consoleOptions);
console.log('%c  ███  ██▄  ███          ███   ███ ███    ███   ███   ███ ', consoleOptions);
console.log('%c ▄███▄  ██▄█  ██▄▄▄▄███ ▄███▄ ▄███▄ ██▄▄▄██ █▄ ▄███▄ ▄███▄', consoleOptions);

console.log('%c ▄▄▄▄▄▄▄▄█                                          ▄▄▄▄ ', consoleOptions);
console.log('%c ███           ▄▄▄▄▄▄▄   ▄▄▄▄▄▄▄▄▄█ ▄▄▄▄▄▄▄▄▄█  ▄▄▄▄▄███ ', consoleOptions);
console.log('%c ███▄▄▄▄▄▄    ▄▄▄▄▄███  ███▄▄▄▄▄▄█ ███▄▄▄▄▄▄█ ███    ███ ', consoleOptions);
console.log('%c         ███ ███    ███ ███        ███        ███    ███ ', consoleOptions);
console.log('%c ▄██▄▄▄▄███   ██▄▄▄██ █▄  ██▄▄▄▄███  ██▄▄▄▄███  ██▄▄▄███▄', consoleOptions);
```

This seemed to work great and created a cool effect:

![My name rendered in ASCII art using a figlet font](https://rehansaeed.com/_ipx/f_png&s_2250x1136/content-images/posts/2020/spicing-up-your-browser-console/images/Second-Try-1125x569.png)

# Conclusions Link to this section

All you need to do now is copy and paste that text somewhere in the main part of your app. Now, when someone opens the browser console, they'll see your cool surprise. You can hit `F12` right now and take a look at mine.

## Web Mentions

[What's this?](https://en.wikipedia.org/wiki/Webmention)

### 0 Linked

### 0 Replies

## GitHub Comments

### 0 Comments

[Comment on GitHub](https://github.com/RehanSaeed/rehansaeed.github.io/issues/149)

```json
{"@context":"https://schema.org","@graph":[{"@id":"https://rehansaeed.com/#website","@type":"WebSite","description":"Software Developer at Microsoft, YouTuber, Open Source Contributor and Blogger","inLanguage":"en-GB","name":"Muhammad Rehan Saeed","url":"https://rehansaeed.com/","author":{"@id":"https://rehansaeed.com/#identity"},"potentialAction":[{"@type":"SearchAction","target":{"@type":"EntryPoint","urlTemplate":"https://rehansaeed.com/?search={search_term_string}"},"query-input":"required name=search_term_string"}],"publisher":{"@id":"https://rehansaeed.com/#publisher"}},{"@id":"https://rehansaeed.com/spicing-up-your-browser-console/#webpage","@type":"WebPage","dateModified":"2020-06-10T18:00:00+00:00","datePublished":"2020-06-10T18:00:00+00:00","description":"Use figlet fonts, ASCII art and browser console themes to spice up your browser console.","name":"Spicing up your Browser Console","url":"https://rehansaeed.com/spicing-up-your-browser-console/","breadcrumb":{"@id":"https://rehansaeed.com/spicing-up-your-browser-console/#breadcrumb"},"isPartOf":{"@id":"https://rehansaeed.com/#website"},"potentialAction":[{"@type":"ReadAction","target":["https://rehansaeed.com/spicing-up-your-browser-console/"]}]},{"@id":"https://rehansaeed.com/#identity","@type":"Person","name":"Muhammad Rehan Saeed","url":"https://rehansaeed.com/about/","image":{"@id":"https://rehansaeed.com/#/schema/image/1"},"sameAs":["https://github.com/RehanSaeed","https://www.linkedin.com/in/muhammad-rehan-saeed","https://stackoverflow.com/users/1212017/muhammad-rehan-saeed","https://www.youtube.com/c/MuhammadRehanSaeed","https://www.twitch.tv/rehansaeeduk"]},{"@id":"https://rehansaeed.com/#publisher","@type":"Organization","logo":"https://rehansaeed.com/images/schema/Publisher-600x60.png","name":"Muhammad Rehan Saeed","url":"https://rehansaeed.com"},{"@id":"https://rehansaeed.com/spicing-up-your-browser-console/#article","@type":"Article","dateModified":"2020-06-10T18:00:00+00:00","datePublished":"2020-06-10T18:00:00+00:00","description":"Use figlet fonts, ASCII art and browser console themes to spice up your browser console.","headline":"Spicing up your Browser Console","inLanguage":"en-GB","url":"https://rehansaeed.com/spicing-up-your-browser-console/","author":{"@id":"https://rehansaeed.com/#identity"},"image":[{"@type":"ImageObject","url":"https://rehansaeed.com/images/hero/Figlet-Fonts-1600x900.png","caption":"Figlet Fonts","width":"1600","height":"900"}],"isPartOf":{"@id":"https://rehansaeed.com/spicing-up-your-browser-console/#webpage"},"keywords":["ASCII Art","Figlet Font","Browser","Console","JavaScript"],"mainEntityOfPage":{"@id":"https://rehansaeed.com/spicing-up-your-browser-console/#webpage"},"publisher":{"@id":"https://rehansaeed.com/#publisher"}},{"@id":"https://rehansaeed.com/spicing-up-your-browser-console/#breadcrumb","@type":"BreadcrumbList","itemListElement":[{"@type":"ListItem","name":"Blog","item":"https://rehansaeed.com/","position":1},{"@type":"ListItem","name":"Spicing up your Browser Console","item":"https://rehansaeed.com/spicing-up-your-browser-console/","position":2}]},{"@id":"https://rehansaeed.com/#/schema/image/1","@type":"ImageObject","contentUrl":"https://rehansaeed.com/images/author/Muhammad-Rehan-Saeed/Logo-512x512.png","inLanguage":"en-GB","url":"https://rehansaeed.com/images/author/Muhammad-Rehan-Saeed/Logo-512x512.png"}]}
```

## Sitemap

See the full [sitemap](https://rehansaeed.com/sitemap.md) for all pages.