Change Jupyter notebook version 4.x+ logo

问题

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.

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

回答2:

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

来源：https://stackoverflow.com/questions/35469343/change-jupyter-notebook-version-4-x-logo