How I Added An ASCII Banner to My Terminal

This past week or so I switched up my mac’s terminal from bash to zsh, and I have been enjoying personalizing my terminal just how I like it. I installed a framework called oh-my-zsh and I really like how easy it is to customize, I highly recommend it.

However, one of my buddies showed me his terminal when I was first starting at Flatiron School, and I was fascinated by some artwork he had at the top of his new terminal window. It was ASCII art, and I had no clue how he did it!

At the time I was practically brand new to software engineering, and was way too focused on other things to actually learn how to do it. Since I have been customizing my terminal, it made me remember that I wanted to make my command line interface as cool as his.

I am pleased to say that I have figured it out, and I wanted to write this short post for anyone out there who is curious on how to do it for themselves.

First, I’ll show my personal terminal off!

Maybe you don’t think it’s cool but I did! Now, let’s get into the steps I took to get my terminal to look like this on startup:

What do you want your ASCII banner to be?

Mine is made with my initials but maybe you want yours to be an image, or a different font. Either way, it is up to you, but if you want your banner to include words/letters, I recommend this website which I used to find the font I used, but ultimately customized.

If you want your banner to be an image, there are ASCII art generators out there, but I don’t have any personal recommendations in particular for that. I do however believe there are some good ones out there!

I will go ahead and demonstrate changing my own banner, to show from start to finish how to accomplish this!

Now that I have figured out what I want my new banner to be, I copied and pasted it into a Google Doc, that way I can copy and paste each line individually. You’ll see why shortly.

Here’s the new fonts I’ll use:

And then here is what they currently look like together in the Google Doc I have created:

Don’t mind the line spacing here, what you have set up in your terminal is the line spacing that will be used. I am only using this so I can copy each line one at a time.

Editing The Shell’s Resource File

In my case, as mentioned above, I use zsh now, but if you have bash, I know you can do this also. Instead of opening the~/.zshrc file, you would open your ~/.bashrc. These files hold information about what should happen when starting up a new terminal, including our banner.

I use VSCode so for me I use the command code ~/.zshrc to open up this file, and this is what it might look like inside before adding a banner:

Whoa! That’s a lot! No worries, we are only going to be adding to this, not changing everything.

We will be using a shell command called echo. I chose to insert my commands below the ZSH_THEME_RANDOM_CANDIDATES on line 18, but feel free to place it somewhere else in the file, I’m not sure that it matters, but if it does, this is what worked for me.

I will now copy and paste each line of my ASCII art into double quotes that follow an echo command. Here is what the first one looks like:

echo " _____ _____ _____ _____ _____ "

Until you have it all filled out like this:

You go back to the terminal, and…nothing. What did we do wrong? We need to make our system aware we want to use the updated source file with a command:

source ~/.zshrc

This will update the file officially, and we should now be seeing the results:

Keep in mind if you want to add space above or below, you just need to add another echo followed by a space inside double quotes, like so: echo “ ”

I added space underneath the word “TERMINAL”:

That’s better! Awesome, mission accomplished! It is that simple.

Something to Keep In Mind

Some characters will have to be “escaped” with a backslash — a tricky one is the backslash character. If you want to put more than one backslash character in a row, you will have to add 3 backslashes per backslash desired.

Take for example, my banner from earlier, it has a ton of backslashes in it, so here is what it looks like in echo commands:

So many backslashes, line 5 doesn’t fit in this GitHub Gist! Yikes! Yet, because so many of them are there just to “escape” the backslashes we want to show, it actually comes out like this:

I had to add extra backslashes to get it to look like this, so if your ASCII art doesn’t look right when you use the source command, you may have some characters that aren’t being escaped properly.

Conclusion

As much as I know this isn’t a super beneficial thing to know, I was having a hard time figuring it out in the beginning, but now I feel confident I can make any kind of ASCII banner possible!

Hopefully you found this post at least somewhat interesting, despite it’s educational value!

Thanks for reading, and happy hacking!