How To Make Your Own Cursor

Hello! I've made a few custom cursors before, my most recent one being the Smosh logo (which you can see on my profile), so I thought I would share how I personally do it! 

Step One - Creating/Drawing The Cursor:

For this, I use the website cursor.cc - link: https://www.cursor.cc/

Once you are on the site, it's pretty straightforward. 

Personally, I draw all my cursors, however you can upload an image (sadly I can't really give any advice on this as I have never done it before). If you choose to draw your own, I recommend using the larger drawing area (32x32 grid), as you can get more detail. 

Once you are done, you are going to want to press "Download Cursor." This will give you a .cur file of your cursor (we will talk about what to do with this file in step two).

You also have the option to publish your cursor, that way others can use it. You will need to make an account to do this. If you want to publish your cursor, I recommend creating an account BEFORE making your cursor, but you can do it afterwards.

If you have any questions on making/drawing your cursor, feel free to ask them in the comments. 

Step Two - Base64

For this, I use the website Base64.Guru and go to the File to Base64 encoder - link: https://base64.guru/converter/encode/file

Again, this site is pretty straightforward, too. 

All you have to do is choose the .cur file you just downloaded, and then press the "Encode file to Base64" button. There is no need to mess with the output format (it should read "Plain text -- just the Base64 value").

Step Three - Adding The Cursor To Your Profile

This is also fairly simple. Go wherever you have your layout code, and in the 'body' section, add

cursor:

url(data:image/png;base64,BASE64CODE), auto;

Replace 'BASE64CODE' with the Base64 code you got in step two (by copy and pasting it, that would be a nightmare to type out by hand)

It should end up looking something like this: 

<style>

body {

cursor:

url(data:image/png;base64,BASE64CODE), auto;

}

</style>

Alright, I hope this helps! Please let me know if this does not end up working for you! I know I didn't go too in depth, and left out some more beginner information (such as how to edit your layout in the first place), so if you have any questions, feel free to ask them in the comments! Before anyone asks, I have yet to learn how to make cursors that change when you hover over a link, and animated cursors.