4.2 Adding your logo and startup image

Now that you have your brand folder setup, you should ideally change the startup image and the logo at the bottom right corner of the simulation.

4.2.1 Startup Image

As you can see in the image below this is the standard startup image by phet.
As an example this is the startup image I am using in my own simualtions.
To change this image you need to have your desired startup image as a .svg file, if your image is a .jpeg or a .png you can utilize one of many online convertors to convert your image to a .svg file.
Change the name of your file to splash.svg
Once you have your desired image, just go to your brand folder, for example: adapted-from-phet. (The path in this case would be phetsims/brand/adapted-from-phet)
Open the images folder and replace the present splash.svg with the one you just made.
To test our new image we can always run the example simulation like so: http://localhost:8080/example-sim/example-sim_en.html (Make sure you have the server setup!)

4.2.2 Logo

As you can see once the simulation is loaded, this is probably close to the default logo you see on the bottom left:
Once again in my case, I am using a custom logo like so:
To make this change you essentially follow some of the same steps as for your startup image, let's again assume that your brand name is adapted-from-phet. (The path in this case would be phetsims/brand/adapted-from-phet)
Open the images folder and replace the logo.png with your own image (make sure to rename it as logo.png)
Next, you have to go online and again look for one of many convertors online to convert your .png image to URI
You need to convert the image from .png to URI because the next step requires that.
Now once you have done that you should have a block of code similar to this (A very long line of code):

    'data:image/png;base64,iVBORw0KGgoAAAAN.......(keeps on going)'

Next, in the images folder where you put the logo.png, look for logo_png.js and open it up
Now you need to change the image.src to the one you got from the convertor and after making the changes, you should have something like this:

    /* eslint-disable */
    import asyncLoader from '../../../phet-core/js/asyncLoader.js';

    const image = new Image();
    const unlock = asyncLoader.createLock( image );
    image.onload = unlock;
    image.src = 'data:image/png;base64,iVBORw0KGgoAAAAN.......(keeps on going)'
    export default image;

To test our new image we can always run the example simulation like so: http://localhost:8080/example-sim/example-sim_en.html (Make sure you have the server setup!)