Pixel art sharp on your page, and as your site icon

Pixel art should look crisp: every pixel a sharp little block. On a web page it can turn soft or uneven without you doing anything wrong. Here is how to keep it sharp on Neocities, SpaceHey or any page - and how to put it in the tab of your site, as its icon.

A blinking pixel bunny at its own size, sharp

At its own size, 256 × 256, with image-rendering: pixelated: every pixel sharp

The same bunny at 200 by 200 the usual way: soft

At 200 × 200, the usual way: soft, and the pixels uneven

At half, 128 × 128, also pixelated: still sharp, every pixel a block of 8

1 Start with a good file

Save your pixel art as a GIF or a PNG, never as a JPG: a JPG smudges the edges of the pixels. The Pixel Art Maker saves it big already - 256 × 256, where every pixel of a 16 × 16 drawing is a block of 16, or 128 × 128 - and names the file after your drawing: pixel-art-bunny.gif for a drawing called Bunny. Image to Pixel saves a PNG of about 512 pixels.

2 Put it on your page, sharp

On Neocities, upload the file on your dashboard with Upload, then open your page with Edit and add the picture where it should be. Give it its width and height, and one line of style that tells the browser not to smooth it:

<img src="pixel-art-bunny.gif" width="256" height="256" style="image-rendering: pixelated" alt="A pixel bunny">

Why the line, if the file is big already? Phones and many laptops make every picture two or three times bigger behind the scenes, and smooth it as they do. image-rendering: pixelated keeps the edges of your pixels crisp there, and whenever you show it bigger than it is. It works in every browser people use today.

3 Keep to whole sizes

A pixel can only be shown as a whole number of screen pixels. At half its size or at twice its size, every pixel of your art stays the same block; at 200 for a file of 256, the pixels come out soft or uneven, as in the middle bunny above. Keep to whole steps:

a file of 256 × 256: 128 × 128 (half), 256 × 256, 512 × 512 (twice)
a file of 128 × 128: 128 × 128, 256 × 256, 384 × 384
any other size: multiply the width and the height by the same whole number - or halve them, as long as every block stays a whole number of pixels

More about why, with a blinkie, is in how to show a small GIF bigger without blurring it.

4 Many at once, and on SpaceHey

A whole row of pixel art? Give every picture a class, and say it once:

<img class="pixel" src="pixel-art-bunny.gif" width="128" height="128" alt="A pixel bunny">
<img class="pixel" src="pixel-art-kitten.gif" width="128" height="128" alt="A pixel kitten">

<style>
  .pixel { image-rendering: pixelated; }
</style>

On SpaceHey, the same code goes in About Me, the style too - with the full address of your picture in src, where it is on the web, on your Neocities site for instance. Where everything goes on SpaceHey is in how to decorate your SpaceHey profile with glitter.

5 Your pixel art as your site's icon

The little picture in the tab of a browser is the icon of a site. Pixel art is perfect for it - and a drawing of 16 × 16 the best of all, as a tab shows its icon 16 pixels big: every pixel of your drawing becomes one pixel of the icon. A drawing of 32 × 32 is sharp on most phones and newer laptops.

In the Pixel Art Maker, draw it at 16 × 16 and save it with PNG. The browser makes it small itself.
Upload the PNG to your site, on Neocities with Upload.
Open your page and put this line in its <head>, under the <title>, with the name of your file:

<link rel="icon" href="/pixel-art-bunny.png" type="image/png">

Put the line in every page of your site that should have the icon. Browsers remember an icon for a while, so a new one can take some time to show up. Use the PNG: most browsers would show only the first frame of a GIF there anyway.

Good to know

The line works for blinkies, buttons and every other little pixel graphic too.
A photo or a soft painted picture looks better smoothed: leave the line out for those.
Never stretch it: give the width and the height the same step, or a square bunny becomes a wide one.
No pixel art yet? How to make pixel art starts at the beginning, and how to add blinkies to your Neocities page shows the uploading step by step.

Make pixel art for your page or see why whole sizes matter