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

Share this post on…

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.


Trackbacks and Pingbacks

What links here from around this blog?

What are your reckons?

All comments are moderated and may not be published immediately. Your email address will not be published.Allowed HTML: <a href="" title=""> <abbr title=""> <acronym title=""> <b> <blockquote cite=""> <cite> <code> <del datetime=""> <em> <i> <q cite=""> <s> <strike> <strong> <p> <pre> <br> <img src="" alt="" title="" srcset="">