Change Jupyter notebook version 4.x+ logo

Question

In IPython notebook version 2.x, you can add logo by customizing folder .ipython/profile_name/static/base/images/logo.png and it will display the custom logo that we made on the header of the notebook.

In Jupyter notebook version 4.x, we know that they move directory to .jupyter/ instead i.e. .jupyter/base/ and .jupyter/custom/custom.css. However, when I try to customize default profile in ~/.jupyter/base/images/logo.png, I couldn't custom the logo anymore.

The question is: How to custom logo in Jupyter notebook version 4.x. I'm wondering if there is a solution to custom Jupyter notebook logo (version 4.x) or not. I put example snapshot of customized notebook logo in previous version 2.x below.

Answer 1

So here is the quick solution thanks to @Eric comment (referring to this post). First, I add logo.png into .jupyter/custom/logo.png. Then add the following lines to .jupyter/custom/custom.css in order to load the logo.

#ipython_notebook img{                                                                                        
    display:block;
    /* logo url here */
    background: url("logo.png") no-repeat;
    background-size: contain;
    width: 233px;
    height: 33px;
    padding-left: 233px;
    -moz-box-sizing: border-box;
    box-sizing: border-box;
}

You can also add this css tag to increase logo padding height by adding:

#ipython_notebook {
    height: 40px !important;
}