I recently built squareface-generator.org, a free browser-based avatar maker for creating cute square face icons, PFP avatars, and simple profile images.
The idea was simple: bring back the fun of classic square face avatar generators, but rebuild the experience for the modern web.
A lot of older avatar tools were Flash-based, slow, difficult to use on mobile, or no longer accessible in today’s browsers. At the same time, people still need quick, lightweight profile pictures for Discord, TikTok, YouTube, forums, gaming profiles, and online communities.
So I wanted to create something that was:
Free to use
Fast in the browser
No Flash
No installation
Mobile-friendly
Easy to export as PNG
Simple enough for non-designers
The result is Square Face Generator, a small web app that lets users customize square face avatars using original Canvas-drawn parts.
Why HTML5 Canvas?
For this project, HTML5 Canvas was a natural choice.
The avatar is built from multiple visual layers: face shape, hair, eyes, mouth, clothes, accessories, and background. Each part can be drawn or positioned on the canvas, then exported as a final PNG image.
Canvas made it possible to keep the experience lightweight and flexible without requiring a backend image-rendering service for every avatar.
A simplified drawing flow looks like this:
const canvas = document.querySelector("canvas");
const ctx = canvas.getContext("2d");
function drawAvatar(parts) {
ctx.clearRect(0, 0, canvas.width, canvas.height);
drawBackground(ctx, parts.background);
drawFace(ctx, parts.face);
drawHair(ctx, parts.hair);
drawEyes(ctx, parts.eyes);
drawMouth(ctx, parts.mouth);
drawAccessories(ctx, parts.accessories);
}
function exportPNG() {
const imageUrl = canvas.toDataURL("image/png");
return imageUrl;
}
The real implementation has more structure, but the core concept is still simple: render each avatar part in order, then allow the user to export the final canvas as a PNG.
Layering Matters
One of the biggest small details in an avatar generator is layer order.
For example:
Background
Face
Ears
Hair behind face
Eyes
Mouth
Clothes
Hair in front
Accessories
If the order is wrong, the avatar can look broken. A hat might appear behind the hair, glasses might be hidden by the face layer, or clothing might overlap in strange ways.
So I had to treat the avatar almost like a mini rendering engine. Each part needed a clear category, position, and z-index.
Random Generation
One of the most useful features is the random avatar button.
Many users do not want to customize every single detail from scratch. They just want inspiration quickly. Random generation solves that by creating a complete avatar instantly.
The basic logic is straightforward:
function getRandomItem(items) {
return items[Math.floor(Math.random() * items.length)];
}
function generateRandomAvatar(config) {
return {
face: getRandomItem(config.faces),
hair: getRandomItem(config.hair),
eyes: getRandomItem(config.eyes),
mouth: getRandomItem(config.mouth),
clothes: getRandomItem(config.clothes),
background: getRandomItem(config.backgrounds),
};
}
But the tricky part is making random results look good.
Not every combination works well. Some colors clash. Some accessories only fit certain hairstyles. Some facial parts need spacing rules.
So the generator needs a balance between randomness and constraints.
PNG Export Sizes
Another feature I added was multiple PNG export sizes.
Users may need different image sizes depending on where they want to use the avatar:
256px for small icons
512px for most profile pictures
1024px for higher-quality profile images
This makes the tool more useful across different platforms without requiring users to resize the image manually.
Shareable Avatar Links
A useful feature for avatar tools is the ability to share a generated result.
Instead of only downloading the image, users can also create a shareable link. This makes it easier to save, revisit, or send an avatar to someone else.
The general idea is to serialize the avatar configuration into a URL-friendly format:
const avatarState = {
face: "face_01",
hair: "hair_05",
eyes: "eyes_03",
mouth: "mouth_02",
background: "blue",
};
const encoded = encodeURIComponent(JSON.stringify(avatarState));
const shareUrl = ${location.origin}/?avatar=${encoded};
Then the app can read the URL parameter and rebuild the avatar from the saved configuration.
Designing for Non-Designers
The biggest product lesson from this project was that avatar generators should feel playful, not complicated.
It is tempting to add too many controls: sliders, advanced color pickers, layer editing, manual transforms, and detailed positioning. But most users just want a cute profile image quickly.
So I focused on keeping the interface simple:
Click to change parts
Use random generation for inspiration
Export PNG quickly
Share the result easily
The goal was not to build a professional illustration tool. The goal was to make avatar creation feel fast and fun.
Why I Built It
The inspiration came from older square face icon tools that many people used years ago. Those tools had a very specific charm: simple shapes, cute expressions, and a quick customization experience.
But many of them depended on outdated technology or were not built for modern browsers.
I wanted to rebuild that nostalgic experience using modern web technology, original artwork, and a cleaner user experience.
What I Learned
Building a simple avatar generator is more complex than it looks.
Some of the challenges included:
Managing canvas layers
Keeping generated avatars visually consistent
Supporting multiple export sizes
Making the app work well on mobile
Creating shareable avatar states
Keeping the UI simple enough for casual users
It reminded me that small tools can still involve interesting technical and design decisions.
Final Thoughts
Square Face Generator started as a small browser experiment, but it became a useful reminder of why I enjoy building web tools.
A good web app does not always need to be complex. Sometimes the best tools are simple, fast, and focused on one specific user need.
In this case, the need is simple:
Create a cute square face avatar, export it as a PNG, and use it anywhere online.
You can try it here:
https://squareface-generator.org/
I would love to hear feedback from other developers, especially around Canvas rendering, avatar state sharing, and improving random generation quality.
Top comments (0)