Super Tiny Website Logos in SVG

by @edent | # # | 23 comments | Read ~43,488 times.

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

23 thoughts on “Super Tiny Website Logos in SVG

  1. Meg says:

    Lovely. The Web needs more svg.

  2. Please Sir, what’s a “floppy disk”?

    1. Michael says:

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

  3. RIP has come back from the dead! pines for ANSI and high ASCII symbols

  4. Mike says:

    Haven't had the time...but how do these stack against fa fa fonts...size wise?

    1. @edent says:

      A quick look shows that their Twitter icon is 635 bytes. My icon is a mere 429 bytes.

  5. Stu 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?

        1. Matt says:

          Something like: https://www.argos-ci.com/ ? (open-source automated visual diffing).

  6. Jonathan says:

    While not a coder I appreciate what you have done.
    A mashup of this plus https://blog.clearbit.com/logo/ would be great.

  7. Mohsin Shafique says:

    That's really great! What tool did you use to author them?

    1. @edent says:

      A mixture of Inkscape, text editor, and SVGO.

  8. 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

  9. 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.

  10. 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.

    1. Meg says:

      The author did title it as "Super Tiny Website Logos in SVG"

  11. Patrick 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:

      Hi Patrick - if you can find good vector logos for them, I'll certainly consider it. I use "The Noun Project" as a good source of general icons. See https://thenounproject.com/search/?q=gamepad

      1. Patrick says:

        I could always make them or convert and edit them in gimp for you. If your willing to accept that.

        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. Required fields are marked *

This site uses Akismet to reduce spam. Learn how your comment data is processed.