The IFTTT logo in pure HTML / CSS. Just change the "font-size" attribute in line 1 to change the size. Everything scales naturally. The CSS is all inline, to include this in an e-mail. If you want the code with the CSS extracted, check out https://gist.github.com/charliepark/6598079.

IFTTT logo in pure HTML+CSS

  <div style="font-size:10px;height:2.2em;position:relative;width:8.5em">
	<div style="float:left;height:2.2em;margin-right:.3em;position:relative;width:.7em;">
		<div style="background:#3cf;height:100%;width:.7em"></div>
	</div>
	<div style="float:left;height:2.2em;margin-right:.2em;position:relative;width:1.6em">
		<div style="background:#3cf;height:100%;width:.7em"></div>
		<div style="background:#f40;height:.7em;position:absolute;top:0;width:1.6em;"><div style="background:#000;height:.7em;position:absolute;width:.7em"></div></div>
		<div style="background:#f40;height:.7em;position:absolute;top:.9em;width:1.3em;"><div style="background:#000;height:.7em;width:.7em"></div></div>
	</div>
	<div style="float:left;height:2.2em;margin-right:.2em;position:relative;width:1.7em">
		<div style="background:#f40;height:.7em;position:absolute;width:100%"></div>
		<div style="background:#3cf;height:100%;margin:0 auto;width:.7em"><div style="background:#000;height:.7em;position:absolute;width:.7em"></div></div>
	</div>
	<div style="float:left;height:2.2em;margin-right:.2em;position:relative;width:1.7em">
		<div style="background:#f40;height:.7em;position:absolute;width:100%"></div>
		<div style="background:#3cf;height:100%;margin:0 auto;width:.7em"><div style="background:#000;height:.7em;position:absolute;width:.7em"></div></div>
	</div>
	<div style="float:left;height:2.2em;margin-right:.2em;position:relative;width:1.7em">
		<div style="background:#f40;height:.7em;position:absolute;width:100%"></div>
		<div style="background:#3cf;height:100%;margin:0 auto;width:.7em"><div style="background:#000;height:.7em;position:absolute;width:.7em"></div></div>
	</div>
</div>