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.

Hi @titipat, did you try the solution here [Customize welcome page of ipython notebook](http://stackoverflow.com/questions/27177459/customize-welcome-page-of-ipython-notebook) ? I try this solution and it works to me. — Eric, Feb 18 '16 at 00:56
Oh nice. thanks @Eric! It almost works for me. I put the `logo.png` and added css into `custom.css`. However, my image is just too big. Probably I have to change the css file in order to make logo display properly. — titipata, Feb 18 '16 at 01:08

score 10 · Accepted Answer · edited Sep 19 '19 at 13:30

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;
}

Thanks for the answer. Note: I believe the syntax should have quotes around the file: background: url("logo.png") no-repeat; — Professor Rumble Pony, Sep 07 '19 at 14:16

score 1 · Answer 2 · answered Mar 22 '17 at 14:17

Add logo.png into .jupyter/custom/logo.png. Then add the following lines to .jupyter/custom/custom.css in order to load the logo. With a square size I was seeing an offset of the notebook name when used titipad's CSS. This fixes it.

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

    #header-container {
        display: flex;
        justify-content: space-between;
    }

    span#login_widget {
        flex-grow: 1;
        order: 4;
        display: flex;
        justify-content: flex-end;
    }

    span#save_widget {
        flex-grow: 40;
    }

Change Jupyter notebook version 4.x+ logo

2 Answers2