Super Tiny Website Logos in SVG

You may not realise it, but bandwidth is expensive. It costs you time, money, and battery power whenever you download a file larger than it needs to be.

That's why I've become a little bit obsessed with SVG - Scalable Vector Graphics. They're the closest thing to magic that the web has when it comes to image compression. Let me show you what I mean.

This is the standard Twitter Logo. It's 512 * 512 pixels and, even with hefty PNG compression, weighs in at around 20KB.

Here's the same logo rendered as an SVG. Because it is a vector graphic it can be magnified infinitely without any loss of fidelity.

The Twitter logo is a bird

The uncompressed SVG is a mere 425 Bytes. Not a typo. You could fit over 3,000 of these images on a floppy disk.

That's why I have released SuperTinyIcons on GitHub. Eighty of the web's most popular logos - each image is under 1KB.

Rows of icons - each one has the size printed next to it.

These files are suitable for use on the web - just use <img src=".... They are supported by all popular browsers. I've also converted them to Android Vector Drawables, so they can be incorporated into your apps.

I've released them as MIT licensed files - although you should check the original images' licences. Some of these logos may be trademarked.

SuperTinyIcons on GitHub

25 thoughts on “Super Tiny Website Logos in SVG

    1. Michael says:

      I guess you are already a cd-rom user... but you should know where we're coming from..

  1. says:

    People should submit patches if they can make identical versions that compress even better - you could imagine a leaderboard for who submits the most accepted patches.

    1. @edent says:

      Hi Stu, pull request welcome - I've already had a few people submit much smaller icons.

      1. Anonymous says:

        What about a reference PNG for each one, and CI that checked each pull request to make sure the rendering matched that PNG?

  2. Judy Gunnery says:

    I have just found a use for these .svg files. Using an image for crafting on electronic cutting machines is much easier and more efficient with .svg and virtually identical. I am new to the crafting world, but came into the machine world when computers were still reading paper tape. Geez, talk about floppy discs, we used 8 inch floppies. They were made of magnetic medianand protected by mylar.

    Old lady geek

  3. Detlev says:

    You mention battery power, but wouldn’t the rendering of the SVG use more power than to download and display the prerendered PNG file?

    1. jrg says:

      Rendering an SVG would most likely use less battery power. Rendering an SVG can be done mostly on the GPU, whereas decoding a PNG would require heavy CPU usage.

  4. MH Xion says:

    I think it’s worth mentioning, SVG compression ratio depends on the variations of color in an image. For example the above Twitter icon has only 2 different colors, using SVG is gonna save you from lots of pain. If it had more than 2 colors for example 1000 different colors (like our regular captured picture has) then the SVG format would have taken a way more space than PNG, JPG. It’s really great to use SVG when it comes to icon, logo, and simple illustration.

  5. says:

    I would like lesser known sites added to the tiny website logo. Like Gab/hooktv/voat a nintendo friend code and so on. I went a head and made my own just a plain 'FC' Logo in blue that's svg. But honestly this idea is a lot better. My friend who helped made my site couldn't find stuff like a gamepad or something more general for like psn and so on.

        1. @edent says:

          Sure! You might find Inkscape better for creating vector images. Send them as pull requests on GitHub.

Leave a Reply

Your email address will not be published.

%d bloggers like this: