web-design on S Anand

Using SVG favicons with Unicode

Thu, 01 Jan 2026 13:00:00 +0000

Browsers support SVG favicons as data: URLs.

For example, this SVG:

<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 32 32">
  <circle cx="16" cy="16" r="15" fill="#2563eb"/>
  <path fill="#fff" d="m16 7 2 7 7 2-7 2-2 7-2-7-7-2 7-2Z"/>
</svg>

… can be:

Compressed via svgomg
Converted to a data: URL via svgviewer
Inserted into HTML like this:

<link rel="icon" type="image/svg+xml" href="data:image/svg+xml,%3Csvg%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%20viewBox%3D%220%200%2032%2032%22%3E%3Ccircle%20cx%3D%2216%22%20cy%3D%2216%22%20r%3D%2215%22%20fill%3D%22%232563eb%22%2F%3E%3Cpath%20fill%3D%22%23fff%22%20d%3D%22m16%207%202%207%207%202-7%202-2%207-2-7-7-2%207-2Z%22%2F%3E%3C%2Fsvg%3E"/>

The fun part is that you can use text inside the SVG, styled as you wish:

<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 64 64">
  <rect fill="#2563eb" width="64" height="64" rx="10"/>
  <text x="32" y="35" text-anchor="middle" dominant-baseline="middle" font-size="40" font-weight="800" fill="white">DS</text>
</svg>

… or even use Unicode characters:

<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 64 64">
  <rect fill="#2563eb" width="64" height="64" rx="10"/>
  <text x="32" y="35" text-anchor="middle" dominant-baseline="middle" font-size="40">🌈</text>
</svg>

That can be converted into a HTML link like this:

<link rel="icon" type="image/svg+xml" href="data:image/svg+xml,%3Csvg%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%20viewBox%3D%220%200%2064%2064%22%3E%3Crect%20width%3D%2264%22%20height%3D%2264%22%20fill%3D%22%232563eb%22%20rx%3D%2210%22%2F%3E%3Ctext%20x%3D%2232%22%20y%3D%2235%22%20dominant-baseline%3D%22middle%22%20font-size%3D%2240%22%20text-anchor%3D%22middle%22%3E%F0%9F%8C%88%3C%2Ftext%3E%3C%2Fsvg%3E"/>

The variety is endless!

What makes this powerful is that:

You can create entire families of favicons using typography, Unicode characters, and colors.
The favicons are tiny (a few hundred bytes).
They’re easy to edit and maintain (just edit the SVG text).

Colour spaces

Mon, 27 Aug 2012 14:04:23 +0000

In reality, a colour is a combination of light waves with frequencies between 400-700THz, just like sound is a combination of sound waves with frequencies from 20-20000Hz. Just like mixing various pure notes produces a new sound, mixing various pure colours (like from a rainbow) produces new colours (like white, which isn’t on the rainbow.)

Our eyes aren’t like our ears, though. They have 3 sensors that are triggered differently by different frequencies. The sensors roughly peak around red, green and blue. Roughly.

It turns out that it’s possible to recreate most (not all) colours using a combination of just red, green and blue by mimicking these three sensors to the right level. That’s why TVs and monitors have red, blue and green cells, and we represent colours using hex triplets for RRGGBB – like #00ff00 (green).

There are a number of problems with this from a computational perspective. Conceptually, we think of (R, G, B) as a 3-dimensional cube. That’d mean that 100% red is about as bright as 100% green or blue. Unfortunately, green is a lot brighter than red, which is a lot brighter than blue. Our 3 sensors are not equally sensitive.

You’d also think that a colour that’s numerically mid-way between 2 colours should appear to be mid-way. Far from it.

This means that if you’re picking colours using the RGB model, you’re using something very far from the intuitive human way of perceiving colours.

Which is all very nice, but I’m usually in a rush. So what do I do?

I go to the Microsoft Office colour themes and use a colour picker to pick one. (I extracted them to make life easier.) These are generally good on the eye.
Failing that, I pick something from http://kuler.adobe.com/
Or I go to http://colorbrewer2.org/ and pick a set of colours
If I absolutely have to do things programmatically, I use the HCL colour scheme. The good part is it’s perceptually uniform. The bad part is: not every interpolation is a valid colour.

Comments

isomorphismes 13 Mar 2013 5:20 pm: What colours can’t be created by convex combinations of {R, G, B}? I mean within the visible spectrum.

Make backgrounds transparent

Wed, 28 Apr 2010 06:57:37 +0000

This is the simplest way that I’ve found to make the background colour of an image transparent.

Download GIMP
Open your image. I’ll pick this one:
Optional: Select Image – Mode – RGB if it’s not RGB.
Select Colors – Colors to Alpha…
Click on the white button next to “From” and select the eye-dropper.
Pick the green colour on the image, and click OK

The anti-aliasing is preserved as well.

Comments

Vinu 28 Apr 2010 11:21 pm: There is a tool in MS Office products (Word, Excel, PowerPoint) to set the transparent color as well, assuming of course that you plan to embed the image in a document…
S Anand 29 Apr 2010 7:19 am: Need to use the image in web pages, mostly. Would this MS Office tool still work?
S Anand 29 Apr 2010 7:20 am: True, Ravi. I need to automate this task, though. Tried ImageMagick at first, but gave up after a while.
Vinu 30 Apr 2010 5:51 pm: Good question. If you use a drag and drop, WYSIWYG web page editor, then perhaps it will translate. I tested it between Powerpoint & Word and it worked. Here’s the location of the control on PowerPoint 2007: on the Picture Tools /Format ribbon> Recolor (in the Adjust group, first from the left) drop down to “Set Transparent Color’. Keyboard accelerator = Alt + J P E S.
Atluri 28 Apr 2010 3:59 pm: This works well only for text and images with strong contrast against their background text as an image is outdated ;) and for images i would use blend->merge->eraser for edges!
Vipul 13 May 2010 5:31 am: Remove background option in MS-PowerPoint 2010 works even better. In love with that feature. :)

Mobile browsing

Wed, 03 Sep 2008 12:00:00 +0000

When I analysed my HTTP log last week, I had another motive: are there enough people accessing my site on a mobile device? Or is it too small at this stage for me to care about?

Well, have a look at the numbers.

Windows	98.4%
Mobile	0.6%
Linux	0.5%
OS X	0.5%

Yes, there are more people accessing my site through a mobile device than there are using Linux or OS X. That's shocking!

Now, I'm not saying that this is representative of the rest of the world or anything, but at least it tells me a couple of things.

Firstly, the whole mobile browsing thing is bigger than I thought it was. I started worrying about this a couple of months ago and got myself a HTC s620 phone and a BlackBerry (for free, through some innovative social engineering and smooth talking). It really does get pretty useful on the move... which is frankly anywhere outside of the home and the office, and sometimes even within. (It's handier to read recipes off the HTC than a laptop.) Google had caught on to the whole mobile browsing trend a very long time ago, and are rather well positioned to make use of it.

Secondly, it means that rather than worrying about my site working on Linux or OS X (i.e. worrying about what plugins to use), I should worry more about it working on mobile devices (i.e. small screen, no Javascript / CSS).

That's a fairly big shift in my thinking. Earlier, I had been all for shifting all the processing to client-side Javascript. Now it appears I need to design more towards plain HTML pages generated by Perl / PHP.

Comments

Dinakaran 3 Sep 2008 6:23 am: Nice to see that people visit your site your mobile. Mobile browsing is a very upcoming trend . It’s yet to catch up in India for the telecom infrastructure limitations.If there are better band width’s provided by the service providers , mobile browsing will move up to a new level.

A day when I’m able to play 30 minutes of non-interupted podcast through my mobile while travelling down to the office listening to the latest technology discussion is some thing which I dream to come as a reality in the near future.

A new home page

Mon, 04 Aug 2008 12:00:00 +0000

I have a new home page design. (If you’re reading the RSS feed, check the home page.)

One reason is that the old home page’s design sucked. Almost everyone told me that it was drab in black and white. Personally, I think the new home page sucks in terms of colours as well. There’s too many. I suck at picking colours. The only good thing about these colours is that I left it to the judgement of experts. These are the colours in Powerpoint 2007’s “Concourse” theme color, and I’ve just lifted them.

So, no, it wasn’t the colours that drove the redesign. My last redesign was over a year ago. I changed the structure from a list of links to two lists: one where I was just linking to interesting sites (bookmarking, really) and the other where I was writing content. The purpose behind that was to allow me to focus on writing stuff rather than just bookmarking.

And that worked pretty well for me.

In the last several months, I find myself writing more code than articles. I don’t quite have a way of sharing that. The new home page has a section dedicated to the sites I’m creating, and hopefully, it’ll let me share what I’m doing in a clearer way.

Another problem I have is that in attempting to write articles, I’ve cut myself off from writing the frivolous. Sometimes, I just need to share something small, like “I bought an Acer Aspire 5715Z” without going into the details of it. That’s not a bookmark. That’s not an article. I need a space in-between.

And that’s exactly the space micro-blogging captures.

I created a Twitter account last month. With the huge number of problems that twitter has, such as downtime and the lack of IM support, I hadn’t written a single tweet. Day-before, I created an account at identi.ca and it works just fine. Given that I now have 4 mobile devices, I should be able to do some decent microblogging.

This is actually my third or fourth attempt at redesigning my earlier home page. Every time, I’d start with a redesign, struggle with it, try to get things just right, and then eventually abandon the effort after a few weeks. This time, I succeeded – within a matter of three hours on my flight from Washington DC to London.

Two reasons. Yesterday, I found this CSS framework: 960.gs. It’s a grid system. And grids are absolutely the best way to get layouts for the web.

The other is an article from Coding Horror titled Quantity Always Trumps Quality. If you try to do stuff quickly, you end up doing better stuff than if you tried to do better stuff. To hell with perfection. Just get it out of the door.

Comments

Saravanan 4 Aug 2008 12:00 pm: “Personally, I think the new home page sucks in terms of colours as well. There’s too many. I suck at picking colours”

Absolutely true. Why don’t you learn from “The Laws of Simplicity” By John Maeda.Can apply it any where.

Cheers!
Saravanan
Zishaan 4 Aug 2008 12:00 pm: Colors suck! B&W rocked.
Marina Martin 4 Aug 2008 12:00 pm: Gorgeous design. I’m still tweaking my own custom blog theme - I’m not a designer, but I’m making headway. Really like yours!

What’s your Identi.ca handle?
Balaji 4 Aug 2008 12:00 pm: Hi Anand,
What ever the colour and page may be, i like ur post of contents and songs, its really worth….
its really nice to see the page with lots of colour,.
Cheers!!!!!!!!!!!! mate…
Regards
Balaji
Shyam 4 Aug 2008 12:00 pm: The colours on the new homepage are not only a pain to the eyes but also pretty confusing to navigate. Liked the old one - simplicity rules!

Creating user friendly 404 pages

Sun, 18 Mar 2007 12:00:00 +0000

Creating user friendly 404 pages.

The Search

Sat, 15 Apr 2006 12:00:00 +0000

I was reading John Battelle’s The Search , and realised: We don’t sit down on the computer and say, “Let’s do a search”.

True. We want to get something done. We know it’s out there somewhere. We search.

So every search on a search engine is a commercial opportunity. Contrawise, every site must let people to do what they want to do on the site.

Think… What do people want to do when they’re on YOUR site?

Site layout has changed

Fri, 03 Feb 2006 12:00:00 +0000

I’ve changed the site layout and some code behind it. Weird bugs are likely – so do let me know of any that you find.

Comments

ritzkini 4 Feb 2006 12:07 pm: No…no..no..first up: look not great..too much light blue..i dunno..my 2 cents..:-)
jake 5 Feb 2006 7:36 am: yup. looks more like ..candy. the thick blue bars.

HTML keyboard shortcuts

Wed, 30 Nov 2005 12:00:00 +0000

HTML keyboard shortcuts using the “accesskey” attribute.

Rounded corners

Mon, 28 Nov 2005 12:00:00 +0000

Why we love rounded corners.

Screenshots of Website

Wed, 27 Jul 2005 12:00:00 +0000

Screenshots of my website. From Browsershots.

London Marketing Soiree

Tue, 12 Jul 2005 12:00:00 +0000

I met Leonard Payne, The Priest, Andrea Casalotti and Scott Caplan at the London Marketing Soiree. Quite a diverse bunch of people. Leonard quoted Seth Godin on something neither he nor I will never forget.

They say, if a website is well designed, people will find what they want. That’s not true. Think of the visitors as monkeys, wearing a ‘Big Red Fez’, going itchy on the keyboard. What’s the one thing on the monkey’s mind?

Where’s the banana!?

Comments

S Anand 13 Jul 2005 10:02 am: See more at GeekDinner.

Google blogger template

Mon, 21 Feb 2005 12:00:00 +0000

The Google-like blogger template had me for a while, when I was browsing Shamit’s page.

Comments

Kaviraj 21 Feb 2005 12:00 pm: Hi Anand
TOPFRAME 21 Feb 2005 12:00 pm: that was pretty good..
Dhar 8 Mar 2005 8:06 am: In the free anti virus category, I would put Clam-Av, in firewalls for Linux - iptables, IDS I am surprised they didnt put in SNORT, website ripper - wget.

Top 10 web design mistakes of 2002

Wed, 25 Dec 2002 12:00:00 +0000

Jakob Nielsen’s top 10 web design mistakes of 2002. Fortunately, I was committing only one of them – fixed font sizes. Now rectified.

Froogle

Fri, 13 Dec 2002 12:00:00 +0000

Froogle. A product search from Google. The way Google is going, I don’t think there’s any point in most sites bothering about design. Google will just offer it to customers the way they want to see it. via Kiruba

Changes to my site

Sat, 03 Aug 2002 12:00:00 +0000

I’ve overhauled my site, replacing tables and frames with CSS. If you have problems with your browser, please let me know.

Learning Flash

Fri, 29 Mar 2002 12:00:00 +0000

I’m learning Flash.

The Web is boring

Thu, 28 Mar 2002 12:00:00 +0000

It’s true. The Web is boring. I am increasingly bored. Can’t somebody come up with new paradigms?

256 byte page

Sat, 02 Mar 2002 12:00:00 +0000

How good can a 256 byte webpage be? See the 256b.htm competition. I was particularly impressed by Bonz-Mandelbrot, Poi-Metaballs and Mados-Divo. 256b.com has more 256-byte stuff.

Good designs

Thu, 07 Feb 2002 12:00:00 +0000

yugop.com: great flash design. kottke.org: good blog. shift.com: interesting magazine. After seeing these, I should revamp my site completely. It’s boring.