text:
Make the PPCG Favicon
Come November 1, Programming Puzzles and Code Golf will graduate, so in the next 11 months, we'll want to save some memories from when we were ungraduated.
Write a program that produces the PPCG favicon, seen below.

The image must be at least 64x64 pixels.
The blue must be the color #62B0DF. The background can be white or a light gray.
The image need not be pixelated like it is here.
Alternatively, create text (with dimensions at least 64x64 non-whitespace characters) using standard bright ANSI color codes of Cyan and White.
Built in images and importing the PPCG logo are not allowed.

This is code golf, so standard rules apply. Shortest code in bytes wins.

Seriously though, what do you mean by print? Output the bytes of this exact image? Display the image on the screen? Something else?

Without any restrictions on how the image can be displayed or generated, or any guidelines what kinds of answers should be considered interesting, this is by far too broad for a popularity contest.

@LegionMammal978 The [tag:popularity-contest] tag is not an excuse for a vague spec. The specification of a popularity contest should be held to the same standards as that of any other challenge type. The tag is intended for challenges where humans are better at judging the quality of an answers than computers (e.g. visual similarity in an image processing challenge), not for challenges where it's not even clear what a good answer would look like to a participant. "Most votes" does not constitute an objective winning criterion if there are no guidelines for how to aim for those votes.

I'd suggest to at least disallow loading the logo from any resource.

@nicael that is already disallowed as a standard loophole.  But as the poster said You heard the man, any way we like. The question is simply too broad. It might have stayed open 3 years ago before "Code Trolling"  but not now.

@steveverrill I added a rule saying that no future posters could load the image.

"You can use whatever methods you want (except loading the image, with the exception of VoteToClose's response)" It isn't fair to allow exceptions for specific users/answers.

You can perhaps add the dimensions the output needs to be to make it more specific. Also you can specify by telling us what are the exact colours required for each part of the picture.

@Dennis He meant print it using the nearest cloud printer

Bash (OSX), 33 27 23 18 Bytes
You heard the man, any way we like.
open http:yon.se/q
I am aware that this is a popularity contest. But hey, when you can code golf it, why not?
It is now a code golf. \o/ This was valid at the time of posting.

There was even an exception made for me at some point! But, as @AlexA. pointed out...

"You can use whatever methods you want (except loading the image, with the exception of VoteToClose's response)" It isn't fair to allow exceptions for specific users/answers. - Alex A.

I agree with this, and, as of such, do not wish this to be picked as the answer. Doesn't mean I won't still try to golf it down more. ;)
Thanks to @ΚριτικσιΛίθος for shaving off 6 bytes with a fancy short URL!
Thanks to @ev3commander for shaving off ANOTHER 5 bytes with an even fancier, shorter URL!
Thanks to @kennytm for pointing out that I can reduce the protocol size and remove the quotes, saving me another 4 bytes!

Are you sure this has real chance to be the most popular?

@manatwork It won't. This is mainly to point out why saying "anything else" might be a bit too vague. But I'll leave it up with hope. :D

@VoteToClose You can use this shorter URL to reduce byte count: http://goo.gl/gviJDX

@manatwork Reverse psychology? It's working.

Can the protocol be left, or open doesn't work without?

@SzabolcsPáll If you remove the protocol, it'll assume file:///.

Ah, makes sense.

Even shorter: open http:goo.gl/gviJDX

@kennytm Huh, didn't know that bash did that. :D

try this url: http:yon.se/q

That's 18 bytes...

@ev3commander You're right - just forgot to update it, thanks.

Link is borked.

BitShift, 2795 bytes
10100110010101101001010111001010110100101011100101011010010101110010101101001010111001010110100101011100101011010010101110010101101001010111001010110100101011100101011010010101110010101101111011101010000000110101001011010100011010100010101101010010101101010010101101010010101101010010101101010010101101010011010100101101010001101010010110101001100110010101111111001010111010100101011010100101011010100101011010100101011010100101011010100101011010100101011010100101011001010110100101011001100110101000000011010100010101101010010101101010010101101010010101101010010101101010010101101010010101101010010101101010011010100101101010011001100101011111110010101110101001010110101001010110101001010110101001010110101001010110101001010110101001010110101001010110010101101001010110011001101010000000110101000101011001010110100101011100101011101010010101101010011010100101101010001010110101001010110010101101001010111001010111010100110101001011010100110011001010111111100101011101010011010100010101101010011010100010101100101011101010010101100101011101010011010100010101101010010101101010011010100101101010011001100101011111110010101110101001101010010110101000110101000101011010100110101000101011010100101011010100110101000101011001010110100101011101010011010100101101010011001100101011111110010101110101001101010001010110101001010110101001101010001010110101001101010001010110010101110101001010110010101110101001101010010110101001100110010101111111001010111010100110101000101011010100101011010100101011001010110100101011101010010101101010011010100101101010001010110101001101010010110101001100110010101111111001010111010100101011010100101011010100101011010100101011010100101011010100101011010100101011010100101011001010110100101011001100110101000000011010100101101010001010110101001010110101001010110101001010110101001010110101001010110101001010110101001101010010110101000110101001000010001010111111100101011010010101110010101110101001010110101001010110101001010110101001010110101001010110101001010110010101101001010111001010110100101011001100110101000000011010100101101010001101010010110101000110101001011010100011010100101101010001101010001010110101001010110010101101001010111001010110100101011100101011010010101110010101101111011101010000000110101001011010100011010100101101010001101010010110101000110101001011010100011010100010101101010011010100101101010001101010010110101000110101001011010100011010100101101010011001100101011111110010101101001010111001010110100101011100101011010010101110010101101001010111001010111010100110101001011010100011010100101101010001101010010110101000110101001011010100011010100100001000101011111110010101101001010111001010110100101011100101011010010101110010101101001010111001010110100101011100101011010010101110010101101001010111001010110100101011100101011010010101110010101

This outputs
   @@@@@@@@@@@@
 @@@@@@@@@@@@@@@@
 @@@@@@@@@@@@@@@@
 @@@@@@@@@@@@@@@@
 @   @@@  @@@   @
 @ @@ @ @@ @ @@@@
 @   @@ @@@@ @  @
 @ @@@@ @@ @ @@ @
 @ @@@@@  @@@  @@
 @@@@@@@@@@@@@@@@
  @@@@@@@@@@@@@@
   @@@@@@@@@@@@
         @@@
         @@
         @

This is probably the shortest code with which you can actually still recognize the logo... I created a terrible language :(
Try it here
Note
This was submitted before the rules were changed, by the current rules this answer is invalid. I will leave it here to perhaps inspire people

Now now, don't be sad, that is some very special output from a very special language.

JavaScript
Note: This answer was made before the rules were significantly changed so this answer is not competing.

This prints in into the your browser console, through some crazy and awesome string processing.
I've made a shorter version of this but I can't seem to find it anywhere.
Chrome/Firefox
This version just doubles up on each pixel so it looks more proportional
var a = `<long_string_here>`;
console.log.apply(console, [].concat.apply( [Array(+a.split('\n')[1].split(' ')[1] ).join(' ').split(' ').map(function(l){return'%c█'.repeat(+a.split('\n')[1].split(' ')[0]).repeat(2)}).join('\n')], a.split`
`.slice(3).map(function(l){return [].concat.apply([], l.match(/\d+ \d+ \d+/g).map(function(l){return [l.replace(/(\d+) (\d+) (\d+)/,"color:rgb($1,$2,$3)"),l.replace(/(\d+) (\d+) (\d+)/,"color:rgb($1,$2,$3)")]}))})))

Safari
var a = `<long_string_here>`;
console.log.apply(console, [].concat.apply( [Array(+a.split('\n')[1].split(' ')[1] ).join(' ').split(' ').map(function(l){return'%c█'.repeat(+a.split('\n')[1].split(' ')[0])}).join('\n')], a.split`
`.slice(3).map(function(l){return l.match(/\d+ \d+ \d+/g).map(function(l){return l.replace(/(\d+) (\d+) (\d+)/,"color:rgb($1,$2,$3)")})})))

The long_string_here is an ppm, I wrote this script a while back to print an arbitrary image to the console.

How does this work? Well JavaScript has a feature in console.log where you can provide css to style the message.
I the unicode character █ and color that the correct color, which is retrieved from the ppm.

To display any other image run: convert my_img.png -resize 50x50 -trim -compress none -blur 1x2 -flatten -background white ppm:-, then copy the output to <long_string_here>
Full code
Because this is quite massive, I've put the full code in pastebins so you can run them
Chrome/Firefox: pastebin
Safari: pastebin

Result

Firefox Result
Safari Result

Can you downsize the screenshots a bit? Every single one of them takes up all of my vertical screen estate. (Maybe one image is sufficient, make the rest links).

What's the byte count? this is [tag:code-golf] now

Ruby with Shoes
zoom = 10

Shoes.app(width: 19 * zoom, height: 18 * zoom) {
    background white

    stroke fill '#62B0DF'
    rect 1 * zoom, 1 * zoom, 17 * zoom, 13 * zoom, 3 * zoom

    skew 0, -45
    rect 10 * zoom, 11 * zoom, 5 * zoom, 4 * zoom

    stack(left: 1 * zoom, top: 3 * zoom) {
        para('PCG').style size: (5.66 * zoom).to_i, weight: 700, stroke: white
    }

}

Sample output:

Javascript (ES2015), 199 bytes
(+72 bytes of CSS)
My code prints the logo into the  element of a page through some unicode sequences. Suggestions improving the code are welcome  (especially for 0-pads task)

Demo (tested on MacOsX/Chrome 46): http://codepen.io/anon/pen/EVBmKN?editors=011

Javascript
(newlines inserted for readability)
f=l=>{for(l of[49155,0,0,0,29070,19024,29206,16978,16780,0,0,32769,49155,65311,
65343,65407].map(r=>(1e15+r.toString(2)).slice(-16)))document.body.innerText+=
[...l].map(b=>["▉", " "][b]).join``+"\n"}

CSS
*{letter-spacing:-.1em;font:1em/.96 arial;white-space:pre;color:#62B0DF}

Result

Ungolfed and Explained
If we consider the original 16x16 PCG icon originally posted, we could encode the information in a binary format.
E.g. the first line would be encoded as 1100 0000 0000 0011 where [0, 1] maps to [blue, white]. Every binary number can be easily stored in decimal format so 1100 0000 0000 0011 is 49155. The array
[49155,0,0,0,29070,19024,29206,16978,16780,0,0,32769,49155,65311,65343,65407]

contains all the information (in decimal format) about each pixel color. Each element of the array represents a line to draw. Note that some lines are 0 (full-blue lines) or their length is less than 16 digits (a line starting with a blue pixel): then we need to right-pad these binary numbers
[...].map(r=>(1e15+r.toString(2)).slice(-16))

The map function add 15 zeroes to the left plus the binary number concatenated. Thus the result is sliced by 16 pixel to the left. Now the array is actually
0:  "1100000000000011"
1:  "0000000000000000"
2:  "0000000000000000"
3:  "0000000000000000"
4:  "0111000110001110"
5:  "0100101001010000"
6:  "0111001000010110"
7:  "0100001001010010"
8:  "0100000110001100"
9:  "0000000000000000"
10: "0000000000000000"
11: "1000000000000001"
12: "1100000000000011"
13: "1111111100011111"
14: "1111111100111111"
15: "1111111101111111"

Take a look closer at the digits above: we can almost see the PCG logo. :)
Note that if we store this information in the array, we need to use 16x18 bytes (288 bytes). This approach requires instead 135 bytes
The next step is draw each line. The construct
for(l of [...].map(...))

loop over the array values (ES6 feature) and we add to the body
document.body.innerText += [...l]

where [...l] represent the binary string as an array . E.g. the first line would be read as
["1", "1", "0", "0" ... , "0", "0", "1", "1"]

then again we use map() to transform each value:
 b=>["▉", " "][b]

if the value is 0 then it becomes a LEFT SEVEN EIGHTHS BLOCK (U+2589) otherwise it is a space EM SPACE (U+2003). In short this assignment
document.body.innerText += [...l].map(b=>["▉", " "][b]).join``+"\n"

converts  each 0 or 1 either into a squared block or into a space: then the array is joined and, along with a trailing newline sequence, is appended to the body.
The CSS I've used fixes the line-height and the letter-spacing (I've tested on Chrome, so the result may slightly vary in other browsers)

control-f 0, and you CAN see the PPCG logo in the 0s and 1s :D

@ev3commander When I control-f, then it starts lagging, due to the BitShift answer.

Brainfuck, 120148 bytes
This answer is now non-competitive.  This was before the rules were changed, and this has absolutely no hope of winning as code-golf.
Brainfuck code to output hex value of image.  Very, very, long.
Here is a pastebin link, and the first couple lines.
https://paste.ee/p/LtcCy
+[--------->+<]>-.+.----.-----.++++.-[--->++++<]>+.>-[----->+<]>+.+++.-------.--[-->+++<]>-.+[--->++<]>++.[--->++++<]>+.-[---->+++<]>+.-[--->++++<]>+.-[---->+++<]>.[--->++++<]>+.-[---->+++<]>.......--[-->+++<]>-.[---->+++<]>+.+++++.-----.++++.----..+.---.--......+.++.---......+.+.--.++++++++.--------.++++++.------......----[-->+++<]>.---------.---------.--[-->+++<]>--.++.-[------>+<]>-.+.+++.---------....+.+++++++.------.+++.+.+++.-----.-.+.-.++.-----.++++.+++++.-----.-.+.-.-.--.+++++.-----.+++++++.-----.++++.[->++++++<]>++.--[------>+<]>...+++.--

+1 for the solid byte count, reads very well! Just a note: pasted it there, looks like 120,148 bytes.

Thanks, I put in through that exact same counter.  I must have mistyped or something.  Fixed now.

Snap, 16 blocks

Tell me if this is invalid.

Probably invalid... but who cares; it looks good enough.

Javascript ES6, 461 bytes
I need to work on the compression more.

x.style.cssText='display:block;font:4px/2px monospace;color:#62B0DF',x.innerHTML=`  28
 38
 31
${a=`5
`.repeat(8)}6   a   a    7
6  8  8 8  8  8  6
6  8  +  7  71
6      +9 6
6  a9 6
6  6a 8  1 6
698   +  6
6  7+   1+    7
${a} 31
 38
  3+
   28
47
46
41+
41
48
4+`[r='replace'](/a/g,'  1')[r](/9/g,'  7  +  ')[r](/8/g,'++')[r](/7/g,11)[r](/6/g,'1++')[r](/5/g,'31+')[r](/4/g,Array(18).join` `)[r](/3/g,21)[r](/2/g,11111111)[r](/1/g,'+++')

Bubblegum, 175 bytes
One of the rare times Bubblegum is useful for graphical-output!
Run in a terminal that supports ANSI escape codes.
0000000: e060 3e00 a75d 000d 97c4 b1da c813 35e1  .`>..]........5.
0000010: 9ebb 75d8 b95a ea28 a23d e9c6 5d80 7ce0  ..u..Z.(.=..].|.
0000020: 8d72 884f 2eb0 23f0 a6dc 406b 5724 9b78  .r.O..#...@kW$.x
0000030: 229d 11b7 29c8 9be6 7b76 26d4 f41a 69e0  "...)...{v&...i.
0000040: e626 1923 061a 07fc 4ca6 3cc9 f947 7760  .&.#....L.<..Gw`
0000050: 86df 1d86 37a8 6825 dd9d a3b4 a050 573c  ....7.h%.....PW<
0000060: 7efa 920a 446d 98f8 eeb9 91f7 f912 ca3b  ~...Dm.........;
0000070: 9360 ddba 3450 30ff cee0 fb32 31d1 06cd  .`..4P0....21...
0000080: 0d46 2f2d 5371 896c 6bb0 5fb8 3d6d f096  .F/-Sq.lk._.=m..
0000090: 67e9 8cb8 f92f 9eaa 7d35 0914 a742 6315  g..../..}5...Bc.
00000a0: 1a62 f54d b969 b980 c832 8a3f 8c00 00    .b.M.i...2.?...

Reverse the hexdump with xxd -r
Here's a screenshot of output:

Note: On my Windows machine with the MinGW terminal, the Windows Python binary doesn't output ANSI codes correctly so the above was python <esolangs reference implementation>.py <infile> | cat but it should work correctly on Linux machines.

Javascript (ES6), 192 bytes
document.body.innerHTML='<svg><path fill=#62B0DF d="'+"m01Q0010L60Q7071L74Q7565L55L37L35L15Q0504z".split('').map(v=>v*20||v).join(" ")+'"/><text y=65 fill=#FFF style="font:38pt arial">\xa0PCG'

This takes a compressed version of a SVG D path. Spaces are removed, so all arguments have to be a single decimal, so any number is multiplied by 20 before being written to the actual svg.
Output:

Demo: https://jsfiddle.net/Luy6qj80/

@RikerW It doesn't look to be taking from a URL.

NVM, I realized what this does.  Nice job.

LibreLogo, 122 116 115 bytes

Using Logo to create a Logo. Does this count as recursion?

Code:
fontsize 20 fontcolor [3]fontweight "bold pc [24]fc 6402271 bk 40 rt 45 fd 40 fill home rectangle[64,52,5]text "PCG

Result:

Explanation:
fontsize 20             ; Font Size   = 20pt
fontcolor [3]           ; Font Color  = white
fontweight "bold        ; Font Weight = bold
pc [24]                 ; Pen Color   = invisible
fc 6402271              ; Fill Color  = #61B0DF
bk 40                   ; Move Back 40pt
rt 45                   ; Turn Clockwise 45 Degrees
fd 40                   ; Move Forward 40pt
fill                    ; Close and Fill the Line Shape
home                    ; Reset Initial Turtle Settings and Position
rectangle[64,52,5]      ; Draw a Rectangle with Rounded Corners
text "PCG               ; Set Text of the Actual Drawing Object as "PCG"

Previous Attempts:
116 Bytes:
fontsize 20 fontcolor [3]fontweight "bold pc [24]fc 0x61b0df bk 40 rt 45 fd 40 fill home rectangle[64,52,5]text "PCG

122 Bytes:
ht fontsize 20 fontcolor [3]fontweight "bold pc [24]fc [97,176,223]bk 40 rt 45 fd 40 fill home rectangle[64,52,5]text "PCG

JavaScript, 680 bytes
Well, I had this already finished for the original contest, which rules were changed drastically. This is definitely not the shortest code you can come up with. It was designed for the popularity contest and it creates the original favicon pixel by pixel. It has some more features, too. :)
f=c=>{x=(d=document).body.appendChild(d.createElement`canvas`).getContext`2d`;if(c.b)x.scale(4,4);x.fillStyle=c.m?'#2d2d2d':'#62b0df';x.fillRect(0,0,16,16);x.fillStyle='#fff';for(i=0;i<(w=[0,0,1,0,14,0,15,0,0,11,15,11,0,12,1,12,14,12,15,12,0,13,1,13,2,13,3,13,4,13,5,13,6,13,7,13,11,13,12,13,13,13,14,13,15,13,0,14,1,14,2,14,3,14,4,14,5,14,6,14,7,14,10,14,11,14,12,14,13,14,14,14,15,14,0,15,1,15,2,15,3,15,4,15,5,15,6,15,7,15,9,15,10,15,11,15,12,15,13,15,14,15,15,15,1,4,2,4,3,4,7,4,8,4,12,4,13,4,14,4,1,5,4,5,6,5,9,5,11,5,1,6,2,6,3,6,6,6,11,6,13,6,14,6,1,7,6,7,9,7,11,7,14,7,1,8,7,8,8,8,12,8,13,8,]).length;i++)(t=a=>setTimeout(_=>x.fillRect(w[a++],w[a++],1,1),(c.a||0)*i))(i++)}

You can call the function with up to three parameters:
f({});
f({m:true});
f({b:true});
f({a:50});
f({m:true,b:true,a:50});

m goes meta and changes the color accordingly. And if you find it to small, use b to supersize it from 16x16px to 64x64px. Finally a animates the logo, like it is engraved into a blue board. The value is the speed for each animation step.
Ungolfed
f=c=>{
    x=(d=document).body.appendChild(d.createElement`canvas`).getContext`2d`;
    if (c.b) x.scale(4,4);
    x.fillStyle = c.m?'#2d2d2d':'#62b0df';
    x.fillRect(0,0,16,16);
    x.fillStyle='#fff';
    for(i=0;i<(w=[0,0,1,0,14,0,15,0,0,11,15,11,0,12,1,12,14,12,15,12,0,13,1,13,2,13,3,13,4,13,5,13,6,13,7,13,11,13,12,13,13,13,14,13,15,13,0,14,1,14,2,14,3,14,4,14,5,14,6,14,7,14,10,14,11,14,12,14,13,14,14,14,15,14,0,15,1,15,2,15,3,15,4,15,5,15,6,15,7,15,9,15,10,15,11,15,12,15,13,15,14,15,15,15,1,4,2,4,3,4,7,4,8,4,12,4,13,4,14,4,1,5,4,5,6,5,9,5,11,5,1,6,2,6,3,6,6,6,11,6,13,6,14,6,1,7,6,7,9,7,11,7,14,7,1,8,7,8,8,8,12,8,13,8,]).length;i++)
        (t=a=>setTimeout(_=>x.fillRect(w[a++],w[a++],1,1),(c.a||0)*i)
        )(i++);
}

Output
Default

Animated

Six hundreds and eighty bytes?! You want to make your answer leaderboard-bot proof?

Python 3, 10,069 bytes
Writes the hex from the original logo to a new file.
with open('test.png', 'w+b') as image_file:
    for line in ['\x89PNG\r\n', '\x1a\n', '\x00\x00\x00\rIHDR\x00\x00\x00\x13\x00\x00\x00\x12\x08\x06\x00\x00\x00\xb9\x0c\xe5i\x00\x00\n', '\xa3iCCPICC Profile\x00\x00H\x89\x95\x97\x07T\x13\xe9\x16\xc7\xbf\x99I/\x94\x04"\x9d\xd0;R\x04\x02H\xaf\xa1\x08\xd2\xc1FH\x02\t%\x84@\x10\xb1#\xe2\n', '\xac\x05\x15\x91bAW)\n', "V@\xd6\x82\x88baQ\xec}A\x16\x01u],\xd8Py\x03<\xc2{\xef\xbc=\xef\xbc{\xce\x9d\xf9\x9d{\xee\xfc\xe7\xce7\xf3\x9d\xf3\x1f\x00(]\x1c\xb18\x15V\x00 M\x94%\t\xf3\xf3d\xc6\xc4\xc61\xf1\xbf\x03\x02\xc0\x00\x1ap\x02\xca\x1cn\xa6\xd8#44\x08\xfcm|\xbc\x07\xa0\x89\xf3m\x8b\t\xad\xbf\xef\xfb\xaf\xa1\xc8\xe3gr\x01\x80BQN\xe0er\xd3P>9\x91\\\xb1$\x0b\x00D\x80\xd6\xf5\x96f\x89'\xb8\x18e%\t: \xca{'8i\x8aONp\xc2\x14_\x99\xec\x89\x08\xf3B\xf9\t\x00\x04\n", "\x87#I\x02\x80<\x84\xd6\x99\xd9\xdc$T\x87B@\xd9J\xc4\x13\x8aPf\xa1\xec\xca\x15px(\xe7\xa0l\x9e\x96\x96>\xc1\x07P6N\xf8\x17\x9d\xa4\x7f\xd3L\x90ir8I2\x9ez\x96\xc9 x\x0b3\xc5\xa9\x9ce\xff\xe7r\xfc\xefHK\x95N\xdfC\x17M\x8a@\xe2\x1f6qF\xd7\xac&%=P\xc6\xa2\x84y!\xd3,\xe4M\xf6O\xb2@\xea\x1f9\xcd\xdcL\xaf\xb8i\xe6q\xbc\x03\xa7Y\x9a\x12\xe91\xcd\x1c\xc9\xcc\xb5\xc2,v\xc44K\xd2\xc3d\xfa\xfcL\x9fp\x99>\x9f\x1d$\x9b!u\x9e\x8c\x13\x85\xbe\xeci\xce\x15DDOs\xb60j\xde4g\xa6\x84\x07\xce\xf4x\xc9\xea\x12i\x98l\xe6D\x89\xaf\xec\x19\xd32gf\xe3rff\xc8\x12D\xf8\xcf\xcc\x16#\x9b\x81\xc7\xf7\xf6\x91\xd5E\x91\xb2~q\x96\xa7LS\x9c\x1a*\xeb\xe7\xa7\xfa\xc9\xea\x99\xd9\xe1\xb2k\xb3\xd0\x0fl\x9a\x939\x01\xa13:\xa1\xb2\xf5\x01^@\x08D\x80\x0f\xd2\x00'\x8b\x9f\x9351\xa8W\xbax\x99D\x98$\xc8bz\xa0;\x85\xcfd\x8b\xb8\x96\xe6L\x1b+k;\x00&\xf6\xdd\xd4k}\xcf\x98\xdcO\x10\xe3\xdaLm\xb91\x00\xeee\x00\xc053\xb5\xe8c\x00\x1cv\x07@\xf9\xecLM\xef;\x00t\xb4\xb7\xb5\x93+\x95dO\xd50\x13\x07, \x01y\xa0\x04T\x81\x16\xd0\x03\xc6\xc0\x02\xd8\x00{\xe0\x0c\xdc\x81\x0f\x08\x00! \x02\xc4\x82\xc5\x80\x0b\x04\xe8\xbc\x12\xb0\x14\xac\x00kA\x01(\x02[\xc0\x0eP\x0e\xf6\x80\xfd\xa0\x06\x1c\x01\xc7A38\x03.\x80\xcb\xe0:\xb8\t\xee\x82\xc7\xa0\x17\x0c\x80W`\x04|\x04c\x10\x04\xe1!*D\x87T!m\xc8\x002\x83l \x16\xe4\n", '\xf9@AP\x18\x14\x0b\xc5CI\x90\x08\x92B+\xa0uP\x11T\x02\x95C\xfb\xa0Z\xe8\x18t\x1a\xba\x00]\x85z\xa0\x87P\x1f4\x0c\xbd\x83\xbe\xc2\x08L\x81\x95`M\xd8\x10\x9e\r\xb3`\x0f8\x10\x8e\x80\x17\xc1Ip\x06\x9c\x0b\xe7\xc3\x9b\xe02\xb8\x1a>\x0c7\xc1\x17\xe0\xeb\xf0]\xb8\x17~\x05\x8f"\x00!#\x0cD\x07\xb1@X\x88\x17\x12\x82\xc4!\x89\x88\x04Y\x85\x14"\xa5H5\xd2\x80\xb4"\x9d\xc8m\xa4\x17y\x8d|\xc1\xe00t\x0c\x13c\x81q\xc6\xf8c"1\\L\x06f\x15\xa6\x18S\x8e\xa9\xc14a:0\xb71}\x98\x11\xcc\x0f,\x15\xab\x815\xc3:a\xd9\xd8\x18l\x12v)\xb6\x00[\x8a=\x88=\x85\xbd\x84\xbd\x8b\x1d\xc0~\xc4\xe1p\x0c\x9c\x11\xce\x01\xe7\x8f\x8b\xc5%\xe3\x96\xe3\x8aqU\xb8F\\\x1b\xae\x07\xd7\x8f\x1b\xc5\xe3\xf1\xaax3\xbc\x0b>\x04\xcf\xc1g\xe1\x0b\xf0\xbb\xf0\x87\xf1\xe7\xf1\xb7\xf0\x03\xf8\xcf\x042A\x9b`C\xf0%\xc4\x11D\x84J\xbeB\xee#\x7f\xa1\xd0(\xa6\x14/\xcaB\x8a\x94\xb2\x89r\x88\xd2FyHyO\xa5R\r\xa9\xee\xd48j\x16u\x13\xb5\x96z\x91\xfa\x8c\xfaY\x8e.g)\xc7\x96\xe3\xc9\xad\x96\xab\x90k\x92\xbb%\xf7F\x9e(o \xef!\xbfX>W\xbeT\xfe\x84\xfc\r\xf9\xd7\n', 'D\x05C\x05/\x05\x8e\xc2*\x85\n', '\x85\xd3\n', '\xf7\x15F\x15\xe9\x8a\xd6\x8a!\x8ai\x8a\xc5\x8au\x8aW\x15\x87hx\x9a!\xcd\x87\xc6\xa3\xe5\xd3\xf6\xd3.\xd2\xfa\xe9\x08]\x8f\xeeE\xe7\xd2\xd7\xd1\x0f\xd0/\xd1\x07\x94pJFJl\xa5d\xa5"\xa5#J\xddJ#\xca4\xe59\xcaQ\xca9\xca\x15\xcag\x95{\x19\x08\xc3\x90\xc1f\xa4263\x8e3\xee1\xbe\xce\xd2\x9c\xe51\x8b?k\xe3\xac\x86Y\xb7f}RQWqW\xe1\xab\x14\xaa4\xaa\xdcU\xf9\xaa\xcaT\xf5QMQ\xdd\xaa\xda\xac\xfaT\r\xa3f\xaa6_m\xa9\xdan\xb5Kj\xaf\xd5\x95\xd4\x9d\xd5\xb9\xea\x85\xea\xc7\xd5\x1fi\xc0\x1a\xa6\x1aa\x1a\xcb5\xf6kti\x8cjji\xfai\x8a5wi^\xd4|\xad\xc5\xd0r\xd7J\xd6\xda\xaeuNkX\x9b\xae\xed\xaa-\xd4\xde\xae}^\xfb%S\x99\xe9\xc1Le\x961;\x98#:\x1a:\xfe:R\x9d}:\xdd:c\xbaF\xba\x91\xbay\xba\x8d\xbaO\xf5Hz,\xbdD\xbd\xedz\xedz#\xfa\xda\xfa\xc1\xfa+\xf4\xeb\xf5\x1f\x19\x10\rX\x06\x02\x83\x9d\x06\x9d\x06\x9f\x0c\x8d\x0c\xa3\r7\x186\x1b\x0e\x19\xa9\x18\xb1\x8dr\x8d\xea\x8d\x9e\x18S\x8d\xdd\x8c3\x8c\xab\x8d\xef\x98\xe0LX&)&U&7MaS;S\x81i\x85\xe9\r3\xd8\xcc\xdeLhVe\xd6c\x8e5w4\x17\x99W\x9b\xdf\xb7\xa0XxXd[\xd4[\xf4Y2,\x83,\xf3,\x9b-\xdf\xcc\xd6\x9f\x1d7{\xeb\xec\xce\xd9?\xac\xec\xacR\xad\x0eX=\xb6\xa6Y\x07X\xe7Y\xb7Z\xbf\xb31\xb5\xe1\xdaT\xd8\xdc\xb1\xa5\xda\xfa\xda\xae\xb6m\xb1};\xc7l\x0e\x7f\xce\xee9\x0f\xec\xe8v\xc1v\x1b\xec\xda\xed\xbe\xdb;\xd8K\xec\x1b\xec\x87\x1d\xf4\x1d\xe2\x1d*\x1d\xee\xb3\x94X\xa1\xacb\xd6\x15G\xac\xa3\xa7\xe3j\xc73\x8e_\x9c\xec\x9d\xb2\x9c\x8e;\xfd\xe5l\xe1\x9c\xe2\\\xe7<4\xd7h.\x7f\xee\x81\xb9\xfd.\xba.\x1c\x97}.\xbd\xaeL\xd7x\xd7\xbd\xae\xbdn:n\x1c\xb7j\xb7\xe7\xeez\xee<\xf7\x83\xee\x83\x1e&\x1e\xc9\x1e\x87=\xdexZyJ<Oy~\xf2r\xf2Z\xe9\xd5\xe6\x8dx\xfby\x17zw\xfb\xd0|"}\xca}\x9e\xf9\xea\xfa&\xf9\xd6\xfb\x8e\xf8\xd9\xf9-\xf7k\xf3\xc7\xfa\x07\xfao\xf5\xbf\xcf\xd6ds\xd9\xb5\xec\x91\x00\x87\x80\x95\x01\x1d\x81\x94\xc0\xf0\xc0\xf2\xc0\xe7A\xa6A\x92\xa0\xd6`88 x[\xf0\x93y\x06\xf3D\xf3\x9aC@\x08;d[\xc8\xd3P\xa3\xd0\x8c\xd0_\xe7\xe3\xe6\x87\xce\xaf\x98\xff"\xcc:lEXg8=|Ix]\xf8\xc7\x08\xcf\x88\xcd\x11\x8f#\x8d#\xa5\x91\xedQ\xf2Q\x0b\xa3j\xa3>E{G\x97D\xf7\xc6\xcc\x8eY\x19s=V-V\x18\xdb\x12\x87\x8f\x8b\x8a;\x187\xba\xc0g\xc1\x8e\x05\x03\x0b\xed\x16\x16,\xbc\xb7\xc8hQ\xce\xa2\xab\x8b\xd5\x16\xa7.>\xbbD~\tg\xc9\x89xl|t|]\xfc7N\x08\xa7\x9a3\x9a\xc0N\xa8L\x18\xe1zqwr_\xf1\xdcy\xdby\xc3|\x17~\t\x7f0\xd1%\xb1$q(\xc9%i[\xd2\xb0\xc0MP*x-\xf4\x12\x96\x0b\xdf&\xfb\'\xefI\xfe\x94\x12\x92r(e<5:\xb51\x8d\x90\x16\x9fvZD\x13\xa5\x88:\xd2\xb5\xd2s\xd2{\xc4f\xe2\x02qo\x86S\xc6\x8e\x8c\x11I\xa0\xe4`&\x94\xb9(\xb3%K\t58]Rc\xe9zi_\xb6kvE\xf6\xe7\xa5QKO\xe4(\xe6\x88r\xba\x96\x99.\xdb\xb8l0\xd77\xf7\x97\xe5\x98\xe5\xdc\xe5\xed+tV\xac]\xd1\xb7\xd2c\xe5\xbeU\xd0\xaa\x84U\xed\xab\xf5V\xe7\xaf\x1eX\xe3\xb7\xa6f-im\xca\xda\xdf\xf2\xac\xf2J\xf2>\xac\x8b^\xd7\x9a\xaf\x99\xbf&\xbf\x7f\xbd\xdf\xfa\xfa\x02\xb9\x02I\xc1\xfd\r\xce\x1b\xf6\xfc\x84\xf9I\xf8S\xf7F\xdb\x8d\xbb6\xfe(\xe4\x15^+\xb2**-\xfaV\xcc-\xbe\xf6\xb3\xf5\xcfe?\x8foJ\xdc\xd4\xbd\xd9~\xf3\xee-\xb8-\xa2-\xf7\xb6\xbam\xad)Q,\xc9-\xe9\xdf\x16\xbc\xadi;s{\xe1\xf6\x0f;\x96\xec\xb8Z:\xa7t\xcfN\xd2N\xe9\xce\xde\xb2\xa0\xb2\x96]\xfa\xbb\xb6\xec\xfaV.(\xbf[\xe1Y\xd1X\xa9Q\xb9\xb1\xf2S\x15\xaf\xea\xd6n\xf7\xdd\r{4\xf7\x14\xed\xf9\xbaW\xb8\xf7\xc1>\xbf}M\xd5\x86\xd5\xa5\xfbq\xfb\xb3\xf7\xbf8\x10u\xa0\xf3\x17\xd6/\xb5\x07\xd5\x0e\x16\x1d\xfc~Ht\xa8\xb7&\xac\xa6\xa3\xd6\xa1\xb6\xb6N\xa3ns=\\/\xad\x1f>\xbc\xf0\xf0\xcd#\xdeGZ\x1a,\x1a\xf652\x1a\x8b\x8e\x82\xa3\xd2\xa3/\x8f\xc5\x1f\xbbw<\xf0x\xfb\t\xd6\x89\x86\x93\x06\'+O\xd1O\x156AM\xcb\x9aF\x9a\x05\xcd\xbd-\xb1-=\xa7\x03N\xb7\xb7:\xb7\x9e\xfa\xd5\xf2\xd7Cgt\xceT\x9cU>\xbb\xf9\x1c\xe9\\\xfe\xb9\xf1\xf3\xb9\xe7G\xdb\xc4m\xaf/$]\xe8o_\xd2\xfe\xf8b\xcc\xc5;\x1d\xf3;\xba/\x05^\xbar\xd9\xf7\xf2\xc5N\x8f\xce\xf3W\\\xae\x9c\xb9\xeat\xf5\xf45\xd6\xb5\xe6\xeb\xf6\xd7\x9b\xba\xec\xbaN\xfdf\xf7\xdb\xa9n\xfb\xee\xa6\x1b\x0e7Zn:\xdel\xed\x99\xdbs\xee\x96\xdb\xad\x0b\xb7\xbdo_\xbe\xc3\xbes\xfd\xee\xbc\xbb=\xf7"\xef=\xb8\xbf\xf0~\xef\x03\xde\x83\xa1\x87\xa9\x0f\xdf>\xca~4\xf6x\xcd\x13\xec\x93\xc2\xa7\n', 'OK\x9fi<\xab\xfe\xdd\xe4\xf7\xc6^\xfb\xde\xb3}\xde}]\xcf\xc3\x9f?\xee\xe7\xf6\xbf\xfa#\xf3\x8fo\x03\xf9/\xa8/J\x07\xb5\x07k\x87l\x86\xce\x0c\xfb\x0e\xdf|\xb9\xe0\xe5\xc0+\xf1\xab\xb1\xd7\x05\x7f*\xfeY\xf9\xc6\xf8\xcd\xc9\xbf\xdc\xff\xea\x1a\x89\x19\x19x+y;\xfe\xae\xf8\xbd\xea\xfbC\x1f\xe6|h\x1f\r\x1d}\xf61\xed\xe3\xd8\xa7\xc2\xcf\xaa\x9fk\xbe\xb0\xbet~\x8d\xfe:8\xb6\xf4\x1b\xfe[\xd9w\x93\xef\xad?\x02\x7f<\x19O\x1b\x1f\x17s$\x9cI+\x80\xa0\t\'&\x02\xf0\xee\x10\x00\xd4X\xd4+\xdc\x04\x80$7\xe5\x8b\'\x03\x9a\xf2\xf2\x93\x04\xfe\x8e\xa7\xbc\xf3d\xd8\x03\xb0\xbf\r\xf5"(\x06\xa0^\xa4j\r\x00\x06(\xd3\xd0\x9c\xb0E\x11\xee\x00\xb6\xb5\x95\xe5?#3\xd1\xd6fJ\x8b\x82\xbaK\xec\xe7\xf1\xf1\xf7\x9a\x00\xe0[\x01\xf8.\x19\x1f\x1f\xab\x1a\x1f\xff\x8e\xfao\xe4!\x00m\x19S~|"p\xe8_J\x89:\x0cUyv0\x13\xc1\x7f\xc6?\x00\xea\xa4\xff\x86H\x07*\xad\x00\x00\x01\x9biTXtXML:com.adobe.xmp\x00\x00\x00\x00\x00<x:xmpmeta xmlns:x="adobe:ns:meta/" x:xmptk="XMP Core 5.4.0">\n', '   <rdf:RDF xmlns:rdf="http://www.w3.org/1999/02/22-rdf-syntax-ns#">\n', '      <rdf:Description rdf:about=""\n', '            xmlns:exif="http://ns.adobe.com/exif/1.0/">\n', '         <exif:PixelXDimension>19</exif:PixelXDimension>\n', '         <exif:PixelYDimension>18</exif:PixelYDimension>\n', '      </rdf:Description>\n', '   </rdf:RDF>\n', '</x:xmpmeta>\n', '\x92\xfc\xe9\xf6\x00\x00\x01\xdcIDAT8\x11\xad\x94\xdfM\x1cA\x0c\xc6?\xcf\xcc\xbe\x11@\xa9 u\xa0\x1c\xa2\x03\x8aH\x0b\x89\x94\x16\x82\xeeJ\xa0\x88T\x90\x874\x92\xe7D,\xdc\xf3\xee\x8c\xf9ya\xc2\xe9 \x12\x87\xe2\x95\xd6\xf3\xc7\xfe\xc6\x1e\x7fc\xbb\xbb\xbdu7W\xae\xae)\x15e\xb9Rn\x9a\xbdH6+M\xae6\x984I%\x9bfK\x12\xb6B\xbb5\x15g?\x99Z5\xc6\x8b\xfb\xa4Z\x92\xbe\xfc\x18u\x88\xacW\xa7\x80\x9aR\xe3\xb08\xfbf\xbb\xf5CA\xf6\x0f\xdc\x9c\xbfW\xf6\x16\x19\xd5\xfd\xbd\x83\xe7$\xaaVH\x93+\xfa\x0f\xc2=G\xa6\x1e\xf9"\xd7\x97\x1f\x16\x1d\xbfO\xdf\x7f\xfd\x1d\xf7\xf5\x97\xd6\xba-\xa5\x90G\x01Z\xa6:\x8f\xd2\x1d\x02 \xc6]\xc7v\x1fw\xdd}\x1et\xa2\xcaN\x9a\x94\xb7K\x18\x86t\xd0e\xf2\xf8\xdb_\xdb\xb5\r\x8a\xc0&\n', '\xe0\x0fiv\x90}\xa7\x0e\xd8\x9d\xfb|\xd7\xce=\xc3\xcb\x14<{\x8a\xac\x1bv\x1d\x0e\x1d\xa4;\xbf\xb4\x96\xa2\x88\xfcl\xbc\x19\xfd\xf3\xcfm\xf7\x7f\x93\xde\\\x1c\xa9R\xc8\xd2\xd2\xbf#{-rk\x03\xa4\x85\x1e\xaaI\xeb\x8f\'\xaf\xf5{f\xf7-|\t\xc8\xad*%\xee\xac\xc2\xde\xcd\xeap\xc0\xab\xf3\xd3x\x9aD\x14<\xcb\xb2\xdft\x8d\xb8J\x8eeyM\xac\xe5\x16,6e\x98\x9chK\xd1\xb2\xc28\xee"d}v\xbc\x90(z\x9f\xe1\x14Y\x84\xa5\x91F\x99y\xe2t\r\xfb3\x8e\xd0\x8d-\xc0"\xf7\x16\xa4\xe1\x9d1\xa4\x19\xbaf\x80\x97\xce\xb2DOTX+s\xd9\x14N\x98Y#3\x0e\x8b\xfey\x0f\x08\xf5\xf5\xc8\xe0\xdd\\\x98\x00\x00\x00\x00IEND\xaeB`\x82']:
        image_file.write(line)

R, 189 bytes
image(t(matrix(as.integer(sapply(c(32736,28784,62968,62968,64504,65528,63736,63352,63359,64254,65532,63736,63352,62840,29936,32736),intToBits)[1:16,]),nr=16)),ax=F,col=c("white","#62B0DF"))

With indents for clarity:
image(t(matrix(as.integer(sapply(c(32736,28784,62968,62968,
                                   64504,65528,63736,63352,
                                   63359,64254,65532,63736,
                                   63352,62840,29936,32736),
                                 intToBits)[1:16,]),nr=16)),
      ax=F,col=c("white","#62B0DF"))

I'm shamelessly stealing the method from an old answer of mine: I take the base-2 representation of 16 numbers, make it into a 16x16 matrix of 1s and 0s and plot it as is.

Google Blockly, 140 blocks

Produces

Will add an explanation if requested. Try it here
Suggestions to reduce the massive function on the left are welcome!

Python 2, 211 bytes
from PIL import Image
I=Image.new('P',(16,16))
I.putdata(map(int,bin(eval('0xc003'+'0'*12+'718e4a5072164252418c'+'0'*8+'8001c003ff1fff3fff7f'))[2:]))
I.putpalette([111,174,221]+[255]*3)
I.resize((64,64)).show()

05AB1E, 49 bytes
•(!o4¯ZD5µå¹p‹^Ô%í2\AO-Ö"w™ÈõžvlXäà`AF•bT„.@‡19ô»

Try it online!
...@@@@@@@@@@@@....
.@@@@@@@@@@@@@@@@..
.@@@@@@@@@@@@@@@@..
.@@@@@@@@@@@@@@@@..
.@...@@@..@@@...@..
.@.@@.@.@@.@.@@@@..
.@...@@.@@@@.@..@..
.@.@@@@.@@.@.@@.@..
.@.@@@@@..@@@..@@..
.@@@@@@@@@@@@@@@@..
..@@@@@@@@@@@@@@...
...@@@@@@@@@@@@....
.........@@@.......
.........@@........
.........@.........

Hm. Assuming that ASCII characters are standing in for pixels here, this isn't "at least 64x64 pixels."

Excel VBA, 252 246 245 237 Bytes
Saved 6 bytes thanks to Taylor Scott.
Saved another 8 bytes thanks to inspiration from Taylor Scott
Sub p()
Set s=Shapes.AddShape(106,0,0,99,82)
With s.TextEffect
.Text="PCG
.FontSize=56
.Alignment=2
End With
s.TextFrame2.WordWrap=0
s.Adjustments.Item(1)=.1
s.Adjustments.Item(2)=.9
s.Line.Visible=0
s.Fill.ForeColor.RGB=14659682
End Sub

The code must be run from a worksheet's code page and will add the shape to that worksheet. It's nothing fancy but it does directly use the rounded rectangular callout upon which the icon is based. (For AddShape, 106 corresponds to msoShapeRoundedRectangularCallout.)

Formatting doesn't add much but it does make it easier to read:
Sub p()
    Set s = Shapes.AddShape(106, 0, 0, 99, 82)
    With s.TextEffect
        .Text = "PCG"
        .FontSize = 56
        .Alignment = 2
    End With
    s.TextFrame2.WordWrap = 0
    s.Adjustments.Item(1) = 0.1
    s.Adjustments.Item(2) = 0.9
    s.Line.Visible = 0
    s.Fill.ForeColor.RGB = 14659682
End Sub

There's also a one-line solution meant to be run in the immediate window that is 1 byte longer:
Set s=Sheet1.Shapes.AddShape(106,0,0,99,82):s.TextEffect.Text="PCG":s.TextEffect.FontSize=56:s.TextEffect.Alignment=2:s.TextFrame2.WordWrap=0:s.Adjustments.Item(1)=.1:s.Adjustments.Item(2)=.9:s.Line.Visible=0:s.Fill.ForeColor.RGB=14659682

You can get the bytecount down by removing the () in p()  and converting With ActiveSheet. ...  to With[Sheet1]. ...

@TaylorScott Dropping the parentheses is a good point and something I've previously ignored when removing auto-formatting. I'm not sure about assuming that the first sheet is named Sheet1, though. I suppose we can presume the user runs the code in a new file.

I think that because we can already assume that the user is taking input from clear cells or that a variable is uninitialized and at its default state that assuming the user is on the default Sheet1 object should probably be an accepted norm so long as you mention that that is part of the input/output condition as part of your solution

So apparently there is a Sheet1 object - so you can drop a byte by replacing With[Sheet1]. with With Sheet1.

@TaylorScott Ha, of course there is. If we assume it's a new, blank file, then Sheet1 is just the default code name of the first sheet. That's a nice 0.4% byte reduction.

One More thing, VBA will add on a " to the end of a line if it has an unterminated string, so you can change .text="PCG" to .text="PCG; AND  you can move this subroutine to the Sheet1 CodePane, allowing you to remove the Sheet1. from the code entirely for a total of -8 bytes between the two

MATLAB, 153 150 140 bytes
a=65535;imshow(imresize(dec2bin([16380,a,a,a,36465,46511,36329,48557,48755,a,a,32766,16380,32*[7 6 4]],16)-47,8,'n'),[1 1 1;0.39 0.69 0.88])

The code takes an array of 16bit numbers (sadly there is no way of encoding them that reduces the byte count apart from reading from a presaved binary file). EDIT: With a little bit of creativity in how the array is made, I've saved 3 bytes, and with a little bit more and an extra variable, I can save another 10 on top of that.
With this array, it is converted to a binary string where an ascii '1' represents blue and an ascii '0' is white. The array is 2D at this point because each of the 16 numbers becomes a 16 character string.
I subtract 47 to convert this into an array of 1's and 2's (needed for the next bit), where each element represents one pixel. Again this remains as 2D and is our image data.
The image is then scaled up by a factor of 8 using nearest neighbour to produce an image which is at least the required 64x64px minimum size - in fact it is 128x128 because somehow I divided 64 by 16 to get 8 >_< (don't ask!).
Finally this is displayed using a colour map where any 1 becomes white and any 2 becomes the required #62B0DF shade of blue.
This is the output:

Processing, 211 bytes
noStroke();int[]n={49155,0,173175182,1245866062,12674,-2147418112,-117456893,-16777985};for(int x=0;x<256;x++){if(((n[floor(x/32)]>>(x%32))&1)>0)fill(255);else fill(98,176,223);rect(4*(x%16),4*floor(x/16),4,4);}

Storing the pixels inside signed integers (seems to be the most efficient way, I'll maybe try 2^64 integers) and then printing them in a frame.

Swift (Playground), 599 Bytes
import UIKit;class P:UIView {var b=UIBezierPath();func a(x:CGFloat,y:CGFloat){b.addLineToPoint(CGPoint(x:x,y:y))};override func drawRect(rect:CGRect){UIColor(red:0.384,green:0.690,blue:0.875,alpha:1).setFill();UIBezierPath(roundedRect:CGRectMake(0,0,200,159),cornerRadius:45).fill();b.moveToPoint(CGPoint(x:102, y:146));a(102,y:200);a(157,y:146);a(102,y:146);b.closePath();b.fill();"PCG".drawInRect(CGRectMake(35,41,200,121),withAttributes:[NSFontAttributeName: UIFont(name:".AppleSystemUIFontBold",size: 64)!,NSForegroundColorAttributeName:UIColor.whiteColor()])}}
P(frame: CGRectMake(0,0,200,200))

I decided to give it a go, since drawing in Swift is pretty straightforward, and it's not usually golfed like this. Ended up loosing precious bytes with the text... Damn you NSDescriptiveVariableNames!
Here's how it looks in the playground:

I think I could golf it more by aliasing things like CGRectMake, grouping objects in the a function etc.

Couldn't you remove leading zeroes from floats, like 0.384 to .384? or does swift not support that?

PHP, 145 bytes, not competing
for(;$i<64;)echo strtr(sprintf("%016b\n",[49155,0,0,0,29070,19024,29206,16978,16780,0,0,32769,49155,65311,65343,65407][$i++/4]),["####","    "]);

I should use non-blank and colors instead, but I´m too tired atm.
Guess that will add 10 bytes or so to the count, maybe more.

Why is it non-competing?

@KodosJohnson It has no colors. And the OP said "non-whitespace characters"

Excel VBA, 178 Bytes
Anonymous VBE Immediate window function that takes no input and outputs the PCG Favicon (exactly as in the prompt above) to the range
Cells.RowHeight=48:[C1:N13,A2:P11,B12:O12,I14:I16,J14:J15,K14].Interior.Color=&HDFB062:[B5:B9,C5:D5,C7:D7,E6,G6:G8,H5:I5,J6,J8,H9:I9,L6:L8,O7:O9,M5:O5,M9:N9,N7].Interior.Color=-1

tcl/tk, 113
grid [canvas .c]
.c cr o 2 2 66 48 -f #62B0DF
.c cr t 36 24 -te PCG -fi #FFF
.c cr p 30 66 30 47 44 47 -f #62B0DF

Tcl/tk, 144
grid [canvas .c]
.c create oval 2 2 66 48 -fill #62B0DF
.c create text 36 24 -text PCG -fill #FFF
.c create poly 30 66 30 47 44 47 -fill #62B0DF

C++ with SFML, 607 bytes
#include<SFML\Graphics.hpp>
using namespace sf;using c=Color;using x=Vector2f;RenderWindow w(VideoMode(324,324),"");void p(){RectangleShape r({224.f,144.f});r.setFillColor(c(98,176,223));Vertex v[3]={x(162,324),x(243,224),x(162,224)};for(int i=0;i<3;++i)v[i].color=c(c(98,176,223));Font f;if(!f.loadFromFile("a.ttf"))return;Text t("PCG",f,150);t.setPosition(50,20);while(w.isOpen()){Event e;while(w.pollEvent(e))if(e.type==0)w.close();w.clear(c::White);for(int i=0;i<628;++i){r.setPosition(50+cos(float(i)/100.f)*50,50+sin(float(i)/100.f)*50);w.draw(r);}w.draw(v,3,PrimitiveType(3));w.draw(t);w.display();}}

Code that calls the function :
int main() {
    w.setFramerateLimit(60);
    w.setVerticalSyncEnabled(true);
    p();
}

Requirements :

You need to have a valid ttf file called a.ttf in the current directory where the executable is running, so it can load the fonts to display the text
You need to have the corresponding SFML DLLs in the current directory where the executable is running

Result :

Explanations :
#include<SFML\Graphics.hpp>

using namespace sf;
using c=Color;
using x=Vector2f;

//Create the window that will display stuff. 324x324 dimensions
RenderWindow w(VideoMode(324,324),"");

void p(){

    //Creation of the rectangle
    RectangleShape r({224.f,144.f});
    r.setFillColor(c(98,176,223)); //Logo Color wanted

    //Vertex to draw a blue triangle
    Vertex v[3]={x(162,324),x(243,224),x(162,224)};
    for(int i=0;i<3;++i)
        v[i].color=c(c(98,176,223));

    //Creation an load of the font
    Font f;
    if(!f.loadFromFile("a.ttf"))
        return;

    //Creating the text object that will be used to draw the PCG text
    Text t("PCG",f,150);
    t.setPosition(50,20);

    //Main loop, will run while the window is open
    while(w.isOpen()){
        Event e;
        while(w.pollEvent(e))
            //sf::Event::Close int value is 0
            //It will be triggered if you click on the red cross, or press Alt+F4
            if(e.type==0)
                w.close();

        //Clear the window in white
        w.clear(c::White);

        //6.28 = 2*PI, the number of radians that nearly equals 360 degrees
        for(int i=0;i<628;++i){
            //It draws 628 rectangles, the top left part of the rectangle will do a circle
            //Same for every points of the rectangle
            r.setPosition(50+cos(float(i)/100.f)*50,50+sin(float(i)/100.f)*50);
            w.draw(r);
        }

        //sf::PrimitiveType::Triangle int value is 3
        w.draw(v,3,PrimitiveType(3));
        //Draw the text
        w.draw(t);
        w.display();
    }
}

C (gcc), 188 bytes
y;main(x){int d[]={16380,~0,~0,~0,36465,62893,38833,46525,52861,~0,~0,32766,16380,1792,768,256};for(;y<64;y++){for(x=0;x<16;)printf("\33[48;5;%dm%*s",(d[y/4]>>x++)&1?14:7,8,"");puts("");}}

Try it online!
Uses ANSI escape codes to print 128 horizontal and 64 vertical colored spaces.

(Image resized.)


text:
Sprocket Science: Animating a Chain Drive System
The goal of this challenge is to produce an animation of a chain drive system, comprised of a set of sprocket gears connected together by a chain.
General Requirements
Your program will be given a list of sprockets, specified as (x, y, radius) triplets.
The resulting chain drive system is comprised of these sprockets, connected together by a closed taut chain passing over each of them, in order.
Your goal is to produce an infinitely looping animation, showing the system in motion.
For example, given the input
(0, 0, 16),  (100, 0, 16),  (100, 100, 12),  (50, 50, 24),  (0, 100, 12)

, the output should look something like
.
The coordinate system should be such that the x-axis points right, and the y-axis points up.
You may assume that the radii are even numbers greater than or equal to 8 (we'll see why this matters later.)
You may also assume that there are at least two sprockets, and that the sprockets don't intersect one another.
The units of the input are not too critical.
All the examples and test cases in this post use pixels as the input units (so, for example, the radius of the middle sprocket in the previous figure is 24 pixels;) try not to deviate too much from these units.
In the rest of the challenge, spatial quantities are understood to be given in the same units as the input—make sure to keep the proportions right!
The dimensions of the output should be slightly bigger than the bounding box of all the sprockets, big enough so that the entire system is visible.
In particular, the absolute positions of the sprockets should not affect the output; only their relative positions should (so, for example, if we shifted all the sprockets in the above example by the same amount, the output would remain the same.)
The chain should be tangent to the sprockets it passes over at all points of contact, and straight everywhere else.
The chain should pass over the sprockets such that adjacent chain segments (that is, parts of the chain between two sprockets, that meet at the same sprocket) don't intersect each other.
.
For example, while the left system above is valid, the middle one is not, since the two adjacent chain segments that pass over the bottom left sprocket intersect.
However, note that the right system is valid, since the two intersecting chain segments are not adjacent (this system is produced by a different input than the other two, though.)
To keep things simple(r), you may assume that no sprocket intersects the convex hull of its two neighboring sprockets, or the convex hulls of each of its neighbors and their other neighbor.
In other words, the top sprocket in the diagram below may not intersect any of the shaded regions.

Chain segments may intersect sprockets other than the ones they pass over (such as in the last test case).
In this case, the chain should always appear in front of the sprockets.
Visual Requirements
The chain should consist of a series of links of alternating widths.
The width of the narrow link should be about 2, and the width of the wide link should be about 5.
The length of both types of links should be about equal.
The period of the chain, that is, the total length of a wide/narrow pair of links, should be the closest number to 4π that fits an integer number of times in the length of the chain.
For example, if the length of the chain is 1,000, then its period should be 12.5, which is the closest number to 4π (12.566...) that fits an integer number of times (80) in 1,000.
It's important for the period to fit an integer number of times in the chain's length, so that there are no artifacts at the point where the chain wraps around.

A sprocket of radius R should consist of three concentric parts:
a central axle, which should be a circle of radius about 3;
the sprocket's body, around the axle, which should be a circle of radius about R - 4.5;
and the sprocket's rim, around the body, which should be a circle of radius about  R - 1.5.
The rim should also contain the sprocket's teeth, which should have a width of about 4;
the teeth's size and spacing should match the the sizes of the chain links, so that they enmesh neatly.

The period of the sprocket's teeth, that is, the distance between two consecutive teeth along the circumference of the sprocket, should match the period of the chain.
Since the period is about 4π, and since the radius of the sprocket is guaranteed to be even, the period should fit in the sprocket's circumference an almost-integer number of times, so that there shouldn't be any noticeable artifacts at the point where the sprocket's teeth wrap around.
You may use any combination of colors for the chain, the different parts of the sprocket, and the background, as long as they are easily distinguishable.
The background may be transparent.
The examples in this post use  #202020 for the chain,  #868481 for the sprocket's axle and rim, and  #646361 for the sprocket's body.
Animation Requirements
The first sprocket in the input list should rotate clockwise; the rest of the sprockets should rotate accordingly.
The chain should move at a speed of about 16π (about 50) units per second; the frame rate is up to you, but the animation should look smooth enough.
The animation should loop seamlessly.
Conformance
Some of the visual attributes and proportions are intentionally specified only roughly—you don't have to match them exactly.
Your program's output doesn't have to be a pixel-to-pixel replica of the examples given here, but it should look similar.
In particular, the exact proportions of the chain and the sprockets, and the exact shape of the chain's links and sprocket's teeth, are flexible.
The most important points to follow are these:

The chain should pass over the sprockets, in input order, from the correct direction.
The chain should be tangent to the sprockets at all points of contact.
The links of the chain and the teeth of the sprockets should enmesh neatly, at least up to correct spacing and phase.
The spacing between the links of the chain, and the teeth of the sprockets, should be such that there are no noticeable artifacts at the point where they wrap around.
The sprockets should rotate in the correct direction.
The animation should loop seamlessly.

As a final note, while, technically, the goal of this challenge is to write the shortest code, if you feel like getting creative and producing a more elaborate output, by all means, go for it!
Challenge
Write a program or a function, taking a list of sprockets, and producing a corresponding chain drive system animation, as described above.
Input and Output
You may take the input through the command line, through STDIN, as function arguments, or using an equivalent method.
You may use any convenient format for the input, but make sure to specify it in your post.
As output, you may display the animation directly, produce an animation file (e.g., an animated GIF), or produce a sequence of frame files (however, there's a small penalty in this case; see below.)
If you use file output, make sure the number of frames is reasonable (the examples in this post use very few frames;) the number of frames doesn't have to be minimal, but you shouldn't produce too many superfluous frames.
If you output a sequence of frames, make sure to specify the frame rate in your post.
Score
This is code-golf.
The shortest answer, in bytes, wins.
+10% Penalty
If your program produces a sequence of frames as output, instead of displaying the animation directly or producing a single animation file, add 10% to your score.
Test Cases
Test 1
(0, 0, 26),  (120, 0, 26)

Test 2
(100, 100, 60),  (220, 100, 14)

Test 3
(100, 100, 16),  (100, 0, 24),  (0, 100, 24),  (0, 0, 16)

Test 4
(0, 0, 60),  (44, 140, 16),  (-204, 140, 16),  (-160, 0, 60),  (-112, 188, 12),
(-190, 300, 30),  (30, 300, 30),  (-48, 188, 12)

Test 5
(0, 128, 14),  (46.17, 63.55, 10),  (121.74, 39.55, 14),  (74.71, -24.28, 10),
(75.24, -103.55, 14),  (0, -78.56, 10),  (-75.24, -103.55, 14),  (-74.71, -24.28, 10),
(-121.74, 39.55, 14),  (-46.17, 63.55, 10)

Test 6
(367, 151, 12),  (210, 75, 36),  (57, 286, 38),  (14, 181, 32),  (91, 124, 18),
(298, 366, 38),  (141, 3, 52),  (80, 179, 26),  (313, 32, 26),  (146, 280, 10),
(126, 253, 8),  (220, 184, 24),  (135, 332, 8),  (365, 296, 50),  (248, 217, 8),
(218, 392, 30)

These gifs are very satisfying +1

I will be impressed if anyone answers this successfully with any amount of code.

How did you make the gifs? And how long has this been in the works?

@JAtkin Same way everyone else should: I wrote a solution :) If you're asking about the specifics, I used Cairo for the individual frames, and then used ImageMagick to create the gifs (BTW, if anyone wants to produce the animation this way, i.e., by first generating the frames and then using an external tool to turn them into animation, I'm totally fine with that, as long as you specify the dependency on the tool in your post. Just to be clear, it's your program that should invoke the tool, not the user.)

Jesus...this would be a fairly large project I'd be hard pressed to make this one work in my favorite language(powershell) I'd have to use third party image manipulation stuff which is not code-golfy at all. The only viable language to golf this in would be Java with its extensive libraries.

How should three equally-sized sprockets in a straight line look? Does the chain cross twice, once or no times? Wait—it loops completely around the middle one, right? This is doing my head in already.

@Anko The good news is that you don't have to worry about it: this situation is guaranteed not to happen in the input; see the "no sprocket intersects the convex hull..." part, the one with the image with the three shaded regions. More generally, the chain crosses each sprocket only once, according to the sprockets' order, even if it looks like it passes near a sprocket more more than once.

@Ell Congratulations on winning the "Labour of Love" category for "Best of PPCG 2015" with this challenge! Unfortunately, questions can't be awarded bounties (yet), so would it be possible for you to post a golfed version of your implementation to award a bounty to? We'd love to see it, considering the effort you put into this challenge :)

@Sp3000 All the other entries were so much awesomer! My implementation is neither particularly golfed, nor coherent, but I'll try to post something :)

I never noticed this in the dozens of times I have looked at this challenge, but the chain and sprocket in the point of the exclamation mark are slightly off and now I can't unsee it. T_T Note to self: don't stare at colourful GIFs for too long.

@MartinBüttner Dammit, I hoped no one would notice ;) That's because

@MartinBüttner Hit enter too soon... TBH, I can't remember why exactly this happens right now. It has to do with the fact that, since the chain is so short in this case, the approximation of 4π is way off. But I can't remember why it affects the entire sprocket, and not just the wrap-around point.

JavaScript (ES6), 2557 1915 1897 1681 bytes
This isn't super-duper golfed really; it's minified - partly by hand - but that's nothing special. It could no doubt be shorter if I'd golfed it more before minifying, but I've spent (more than) enough time on this already.
Edit: Ok, so I spent more time on it and golfed the code more before minifying (very manually this time). The code's still using the same approach and overall structure, but even so I still ended up saving 642 bytes. Not too shabby, if I do say so myself. Probably missed some byte-saving opportunities, but at this point even I'm not sure how it works anymore. The only thing that's different in terms of output, is that it now uses slightly different colors that could be written more tersely.
Edit 2 (much later): Saved 18 bytes. Thanks to ConorO'Brien in the comments for pointing out the blindingly obvious that I'd totally missed.
Edit 3: So, I figured I'd reverse engineer my own code, because, frankly, I couldn't remember how I'd done it, and I lost the ungolfed versions. So I went through, and lo and behold found another 316 bytes to save by restructuring and doing some micro-golfing.
R=g=>{with(Math){V=(x,y,o)=>o={x,y,l:sqrt(x*x+y*y),a:v=>V(x+v.x,y+v.y),s:v=>o.a(v.m(-1)),m:f=>V(x*f,y*f),t:r=>V(x*cos(r)-y*sin(r),x*sin(r)+y*cos(r)),c:v=>x*v.y-y*v.x,toString:_=>x+','+y};a='appendChild',b='setAttribute';S=(e,a)=>Object.keys(a).map(n=>e[b](n,a[n]))&&e;T=(t,a)=>S(k.createElementNS('http://www.w3.org/2000/svg',t),a);C=(e,a)=>S(e.cloneNode(),a);P=a=>T('path',(a.fill='none',a));w=h=-(x=y=1/0);G=g.map((a,g)=>(g=V(...a))&&(u=(g.r=a[2])+5,x=min(x,g.x-u),y=min(y,g.y-u),w=max(w,g.x+u),h=max(h,g.y+u))&&g);k=document;I=k[a].bind(k.body[a](T('svg',{width:w-x,height:h-y}))[a](T('g',{transform:`translate(${-x},${h})scale(1,-1)`})));L=(c)=>(h=G.length)&&G.map((g,i)=>c(G[i],G[i?i-1:h-1],G[(i+1)%h]))&&L;l='';L((g,p,n)=>g.f=p.s(g).c(n.s(g))>0)((g,a,n)=>{d=g.s(n),y=x=1/d.l;g.f!=n.f?(a=asin((g.r+n.r)*x),g.f?(x=-x,a=-a):(y=-y)):(a=asin((g.r-n.r)*x),g.f&&(x=y=-x,a=-a));t=d.t(a+PI/2);g.o=t.m(x*g.r).a(g);n.i=t.m(y*n.r).a(n)})((g,p,n)=>{z='#888';d=(l,s,e)=>`A${g.r},${g.r} 0 ${1*l},${1*s} ${e}`;e=(f,r)=>T('circle',{cx:g.x,cy:g.y,r,fill:f});g.k=p.o.s(n.i).l<g.i.s(g.o).l;w=d(g.k,!g.f,g.o);g.j=`${w}L${n.i}`;l+=g.j;I(e(z,g.r-1.5));g.g=I(P({d:`M${g.i}${w}${d(!g.k,!g.f,g.i)}`,stroke:z,'stroke-width':5}));g.h=I(C(g.g,{d:`M${g.i}${g.j}`,stroke:'#222'}));I(e('#666',g.r-4.5));I(e(z,3))});t=e=>e.getTotalLength(),u='stroke-dasharray',v='stroke-dashoffset',f=G[0];l=I(C(f.h,{d:'M'+f.i+l,'stroke-width':2}));s=f.w=t(l)/round(t(l)/(4*PI))/2;X=8*s;Y=f.v=0;L((g,p)=>{g.g[b](u,s);g.h[b](u,s);g==f||(g.w=p.w+t(p.h),g.v=p.v+t(p.h));g.g[b](v,g.w);g.h[b](v,g.v);g.h[a](C(g.g[a](T('animate',{attributeName:v,from:g.w+X,to:g.w+Y,repeatCount:'indefinite',dur:'1s'})),{from:g.v+X,to:g.v+Y}))})}}

The function above appends an SVG element (including animations) to the document. E.g. to display the 2nd test case:
R([[100, 100, 60],  [220, 100, 14]]);

Seems to work a treat - at least here in Chrome.
Try it in the snippet below (clicking the buttons will draw each of OP's test cases).

R=g=>{with(Math){V=(x,y,o)=>o={x,y,l:sqrt(x*x+y*y),a:v=>V(x+v.x,y+v.y),s:v=>o.a(v.m(-1)),m:f=>V(x*f,y*f),t:r=>V(x*cos(r)-y*sin(r),x*sin(r)+y*cos(r)),c:v=>x*v.y-y*v.x,toString:_=>x+','+y};a='appendChild',b='setAttribute';S=(e,a)=>Object.keys(a).map(n=>e[b](n,a[n]))&&e;T=(t,a)=>S(k.createElementNS('http://www.w3.org/2000/svg',t),a);C=(e,a)=>S(e.cloneNode(),a);P=a=>T('path',(a.fill='none',a));w=h=-(x=y=1/0);G=g.map((a,g)=>(g=V(...a))&&(u=(g.r=a[2])+5,x=min(x,g.x-u),y=min(y,g.y-u),w=max(w,g.x+u),h=max(h,g.y+u))&&g);k=document;I=k[a].bind(k.body[a](T('svg',{width:w-x,height:h-y}))[a](T('g',{transform:`translate(${-x},${h})scale(1,-1)`})));L=(c)=>(h=G.length)&&G.map((g,i)=>c(G[i],G[i?i-1:h-1],G[(i+1)%h]))&&L;l='';L((g,p,n)=>g.f=p.s(g).c(n.s(g))>0)((g,a,n)=>{d=g.s(n),y=x=1/d.l;g.f!=n.f?(a=asin((g.r+n.r)*x),g.f?(x=-x,a=-a):(y=-y)):(a=asin((g.r-n.r)*x),g.f&&(x=y=-x,a=-a));t=d.t(a+PI/2);g.o=t.m(x*g.r).a(g);n.i=t.m(y*n.r).a(n)})((g,p,n)=>{z='#888';d=(l,s,e)=>`A${g.r},${g.r} 0 ${1*l},${1*s} ${e}`;e=(f,r)=>T('circle',{cx:g.x,cy:g.y,r,fill:f});g.k=p.o.s(n.i).l<g.i.s(g.o).l;w=d(g.k,!g.f,g.o);g.j=`${w}L${n.i}`;l+=g.j;I(e(z,g.r-1.5));g.g=I(P({d:`M${g.i}${w}${d(!g.k,!g.f,g.i)}`,stroke:z,'stroke-width':5}));g.h=I(C(g.g,{d:`M${g.i}${g.j}`,stroke:'#222'}));I(e('#666',g.r-4.5));I(e(z,3))});t=e=>e.getTotalLength(),u='stroke-dasharray',v='stroke-dashoffset',f=G[0];l=I(C(f.h,{d:'M'+f.i+l,'stroke-width':2}));s=f.w=t(l)/round(t(l)/(4*PI))/2;X=8*s;Y=f.v=0;L((g,p)=>{g.g[b](u,s);g.h[b](u,s);g==f||(g.w=p.w+t(p.h),g.v=p.v+t(p.h));g.g[b](v,g.w);g.h[b](v,g.v);g.h[a](C(g.g[a](T('animate',{attributeName:v,from:g.w+X,to:g.w+Y,repeatCount:'indefinite',dur:'1s'})),{from:g.v+X,to:g.v+Y}))})}}

// ========================
// Test code

var testCases = [
  [[0, 0, 16],  [100, 0, 16],  [100, 100, 12],  [50, 50, 24],  [0, 100, 12]],
  [[0, 0, 26],  [120, 0, 26]],
  [[100, 100, 60],  [220, 100, 14]],
  [[100, 100, 16],  [100, 0, 24],  [0, 100, 24],  [0, 0, 16]],
  [[0, 0, 60],  [44, 140, 16],  [-204, 140, 16],  [-160, 0, 60],  [-112, 188, 12], [-190, 300, 30],  [30, 300, 30],  [-48, 188, 12]],
  [[0, 128, 14],  [46.17, 63.55, 10],  [121.74, 39.55, 14],  [74.71, -24.28, 10], [75.24, -103.55, 14],  [0, -78.56, 10],  [-75.24, -103.55, 14],  [-74.71, -24.28, 10], [-121.74, 39.55, 14],  [-46.17, 63.55, 10]],
  [[367, 151, 12],  [210, 75, 36],  [57, 286, 38],  [14, 181, 32],  [91, 124, 18], [298, 366, 38],  [141, 3, 52],  [80, 179, 26],  [313, 32, 26],  [146, 280, 10], [126, 253, 8],  [220, 184, 24],  [135, 332, 8],  [365, 296, 50],  [248, 217, 8], [218, 392, 30]]
];

function clear() {
  var buttons = document.createElement('div');
  document.body.innerHTML = "";
  document.body.appendChild(buttons);
  testCases.forEach(function (data, i) {
    var button = document.createElement('button');
    button.innerHTML = String(i);
    button.onclick = function () {
      clear();
      R(data);
      return false;
    };
    buttons.appendChild(button);
  });
}

clear();

The code draws the chain and gear teeth as a dashed strokes. It then uses animate elements to animate the stroke-dashoffset attribute. The resulting SVG element is self-contained; there's no JS-driven animation or CSS styling.
To make things line up nicely, each gear's ring of teeth is actually drawn as a path consisting of two arcs, so the path can start right at the tangent point where the chain touches. This makes it a lot simpler to line it up.
Furthermore, it seems there's a lot of rounding errors when using SVG's dashed strokes. At least, that's what I saw; the longer the chain, the worse it'd mesh with each successive gear. So to minimize the issue, the chain is actually made up of several paths. Each path consists of an arcing segment around one gear and a straight line to the next gear. Their dash-offsets are calculated to match. The thin "inner" part of the chain, however, is just a single looping path, since it isn't animated.

Looks great! Kudos for answering an old(ish) challenge!

@Ell Thanks! Came across it randomly; wish I'd seen it back when it was fresh :) Neat challenge though, so I couldn't resist.

Works fine in Firefox too!

-2 bytes: R=g=>...

@ConorO'Brien Dammit... alright, alright, I'll update when I'm not on my phone

@Flambino, I like your solution for this challenge and I was really sorry that you lost the original source, I made some reverse enginnering to recover it, it can be found here: https://gist.github.com/micnic/6aec085d63320229a778c6775ec7f9aa
also I minified it manually to 1665 bytes (it can be minified more, but I am lazy today)

@micnic Thanks! I'll have to check that out! And don't worry, I managed to reverse engineer it too, so I do have a more readable version. But, dang, 16 bytes less? Kudos! I'll definitely give it a look when I can find the time

@Flambino, essentially the bigest impact on file size was the svg structure, I did not put evething in a <g>, but put it directly in the svg root. Also found a place where you transformed sweep flag and large arc flag from boolean to number using 1*x, but you could use +x

@micnic Ah! I remember trying to get rid of the , but ended up worse off I think. Hadn't even thought of the +1 trick though :P Well played!

@Flambino, I did it again :D I found a bug in my minified version and reminified it again and got in the end 1647 bytes, gist updated

@micnic Stop, dang it! You're making me look bad! :P  Honestly though, you should post it here: it is, by definition, the winning code! Make me officially look bad :D  By the way, I haven't had a chance to look at your gist - a lot of work happened very suddenly and is still happening, but I'm really happy to know you found it fun to pick apart my code. Just, y'know, don't do so well next time ;)

@Flambino, posted, today I was not lazy, I could obtain 1626 bytes, sorry, for keeping you upset :D

@micnic Grr... have an angry upvote! :) But seriously, nicely done!

You can save more than 250 bytes using this tool.

C# 3566 bytes
Not golfed at all, but works (I think)
Ungolfed in edit history.
Uses Magick.NET to render gif.
class S{public float x,y,r;public bool c;public double i,o,a=0,l=0;public S(float X,float Y,float R){x=X;y=Y;r=R;}}class P{List<S>q=new List<S>();float x=float.MaxValue,X=float.MinValue,y=float.MaxValue,Y=float.MinValue,z=0,Z=0,N;int w=0,h=0;Color c=Color.FromArgb(32,32,32);Pen p,o;Brush b,n,m;List<PointF>C;double l;void F(float[][]s){p=new Pen(c,2);o=new Pen(c,5);b=new SolidBrush(c);n=new SolidBrush(Color.FromArgb(134,132,129));m=new SolidBrush(Color.FromArgb(100,99,97));for(int i=0;i<s.Length;i++){float[]S=s[i];q.Add(new S(S[0],S[1],S[2]));if(S[0]-S[2]<x)x=S[0]-S[2];if(S[1]-S[2]<y)y=S[1]-S[2];if(S[0]+S[2]>X)X=S[0]+S[2];if(S[1]+S[2]>Y)Y=S[1]+S[2];}q[0].c=true;z=-x+16;Z=-y+16;w=(int)(X-x+32);h=(int)(Y-y+32);for(int i=0;i<=q.Count;i++)H(q[i%q.Count],q[(i+1)%q.Count],q[(i+2)%q.Count]);C=new List<PointF>();for(int i=0;i<q.Count;i++){S g=q[i],k=q[(i+1)%q.Count];if(g.c)for(double a=g.i;a<g.i+D(g.o,g.i);a+=Math.PI/(2*g.r)){C.Add(new PointF((float)(g.x+z+g.r*Math.Cos(a)),(float)(g.y+Z+g.r*Math.Sin(a))));}else
for(double a=g.o+D(g.i,g.o);a>g.o;a-=Math.PI/(2*g.r)){C.Add(new PointF((float)(g.x+z+g.r*Math.Cos(a)),(float)(g.y+Z+g.r*Math.Sin(a))));}C.Add(new PointF((float)(g.x+z+g.r*Math.Cos(g.o)),(float)(g.y+Z+g.r*Math.Sin(g.o))));C.Add(new PointF((float)(k.x+z+k.r*Math.Cos(k.i)),(float)(k.y+Z+k.r*Math.Sin(k.i))));k.l=E(C);}l=E(C);N=(float)(K(l)/10.0);o.DashPattern=new float[]{N,N};double u=q[0].i;for(int i=0;i<q.Count;i++){S g=q[i];double L=g.l/(N*5);g.a=g.i+((1-(L%2))/g.r*Math.PI*2)*(g.c?1:-1);}List<MagickImage>I=new List<MagickImage>();for(int i=0;i<t;i++){using(Bitmap B=new Bitmap(w,h)){using(Graphics g=Graphics.FromImage(B)){g.Clear(Color.White);g.SmoothingMode=System.Drawing.Drawing2D.SmoothingMode.AntiAlias;foreach(S U in q){float R=U.x+z,L=U.y+Z,d=7+2*U.r;PointF[]f=new PointF[4];for(double a=(i*(4.0/t));a<2*U.r;a+=4){double v=U.a+((U.c?-a:a)/U.r*Math.PI),j=Math.PI/U.r*(U.c?1:-1),V=v+j,W=V+j,r=U.r+3.5;f[0]=new PointF(R,L);f[1]=new PointF(R+(float)(r*Math.Cos(v)),L+(float)(r*Math.Sin(v)));f[2]=new PointF(R+(float)(r*Math.Cos(V)),L+(float)(r*Math.Sin(V)));f[3]=new PointF(R+(float)(r*Math.Cos(W)),L+(float)(r*Math.Sin(W)));g.FillPolygon(n,f);}d=2*(U.r-1.5f);g.FillEllipse(n,R-d/2,L-d/2,d,d);d=2*(U.r-4.5f);g.FillEllipse(m,R-d/2,L-d/2,d,d);d=6;g.FillEllipse(n,R-d/2,L-d/2,d,d);}g.DrawLines(p,C.ToArray());o.DashOffset=(N*2.0f/t)*i;g.DrawLines(o,C.ToArray());B.RotateFlip(RotateFlipType.RotateNoneFlipY);B.Save(i+".png",ImageFormat.Png);I.Add(new MagickImage(B));}}}using(MagickImageCollection collection=new MagickImageCollection()){foreach(MagickImage i in I){i.AnimationDelay=5;collection.Add(i);}QuantizeSettings Q=new QuantizeSettings();Q.Colors=256;collection.Quantize(Q);collection.Optimize();collection.Write("1.gif");}}int t=5;double D(double a,double b){double P=Math.PI,r=a-b;while(r<0)r+=2*P;return r%(2*P);}double E(List<PointF> c){double u=0;for(int i=0;i<c.Count-1;i++){PointF s=c[i];PointF t=c[i+1];double x=s.X-t.X,y=s.Y-t.Y;u+=Math.Sqrt(x*x+y*y);}return u;}double K(double L){double P=4*Math.PI;int i=(int)(L/P);float a=(float)L/i,b=(float)L/(i+1);if(Math.Abs(P-a)<Math.Abs(P-b))return a;return b;}void H(S a,S b,S c){double A=0,r=0,d=b.x-a.x,e=b.y-a.y,f=Math.Atan2(e,d)+Math.PI/2,g=Math.Atan2(e,d)-Math.PI/2,h=Math.Atan2(-e,-d)-Math.PI/2,i=Math.Atan2(-e,-d)+Math.PI/2;double k=c.x-b.x,n=c.y-b.y,l=Math.Sqrt(d*d+e*e);A=D(Math.Atan2(n,k),Math.Atan2(-e,-d));bool x=A>Math.PI!=a.c;b.c=x!=a.c;if(a.r!=b.r)r=a.r+(x?b.r:-b.r);f-=Math.Asin(r/l);g+=Math.Asin(r/l);h+=Math.Asin(r/l);i-=Math.Asin(r/l);b.i=x==a.c?h:i;a.o=a.c?g:f;}}

Class P has a function F;
Example:
static void Main(string[]a){
P p=new P();
float[][]s=new float[][]{
new float[]{10,200,20},
new float[]{240,200,20},
new float[]{190,170,10},
new float[]{190,150,10},
new float[]{210,120,20},
new float[]{190,90,10},
new float[]{160,0,20},
new float[]{130,170,10},
new float[]{110,170,10},
new float[]{80,0,20},
new float[]{50,170,10}
};
p.F(s);}

Thanks for posting a golfed version! A minor quibble: the first sprocket in your gif rotates counter-clockwise; the first sprocket should always rotate clockwise.

I have only seen C# in passing, but do you need the public modifier before each field in your class?

@JAtkin indeed, those are all unnecessary as far as I can tell. In other matters, PointF is really System.Drawing.PointF (similar for List, Color, and Math), so the corresponding using clauses should be included, or the types fully qualified when used, and the reference to System.Drawing ought to be noted in the answer (whether it should add to the score I don't know). Impressive answer anyhow.

@JAtkin I have two classes, S and P, so the fields in S are all public. Not sure if they are strictly needed, but I think so..

JavaScript (ES6) 1626 bytes
This solution is the result of reverse engineering of @Flambino's solution, I post it with his accord.
R=g=>{with(Math){v='stroke';j=v+'-dasharray';q=v+'-dashoffset';m='appendChild';n='getTotalLength';b='setAttribute';z='#888';k=document;V=(x,y,r,o)=>o={x,y,r,l:sqrt(x*x+y*y),a:v=>V(x+v.x,y+v.y),s:v=>o.a(v.m(-1)),m:f=>V(x*f,y*f),t:r=>V(x*cos(r)-y*sin(r),x*sin(r)+y*cos(r)),c:v=>x*v.y-y*v.x,toString:_=>x+','+y};S=(e,a)=>Object.keys(a).map(n=>e[b](n,a[n]))&&e;T=(t,a)=>S(k.createElementNS('http://www.w3.org/2000/svg',t),a);C=(e,a)=>S(e.cloneNode(),a);w=h=-(x=y=1/0);G=g.map((a,g)=>(g=V(...a))&&(u=(g.r=a[2])+5,x=min(x,g.x-u),y=min(y,g.y-u),w=max(w,g.x+u),h=max(h,g.y+u))&&g);f=G[0];w-=x;h-=y;s=T('svg',{width:w,height:h,viewBox:x+' '+y+' '+w+' '+h,transform:'scale(1,-1)'});c='';L=(c)=>(h=G.length)&&G.map((g,i)=>c(G[i],G[(h+i-1)%h],G[(i+1)%h]))&&L;L((g,p,n)=>g.w=(p.s(g).c(n.s(g))>0))((g,p,n)=>{d=g.s(n),y=x=1/d.l;g.w!=n.w?(p=asin((g.r+n.r)*x),g.w?(x=-x,p=-p):(y=-y)):(p=asin((g.r-n.r)*x),g.w&&(x=y=-x,p=-p));t=d.t(p+PI/2);g.o=t.m(x*g.r).a(g);n.i=t.m(y*n.r).a(n)})((g,p,n)=>{l=(p.o.s(n.i).l<g.i.s(g.o).l);d=(l,e)=>`A${g.r} ${g.r} 0 ${+l} ${+!g.w} ${e}`;a=d(l,g.o);e=(f,r)=>T('circle',{cx:g.x,cy:g.y,r,fill:f});c+=a+'L'+n.i;s[m](e(z,g.r-1.5));s[m](e('#666',g.r-4.5));s[m](e(z,3));g.p=s[m](C(g.e=s[m](T('path',{d:'M'+g.i+a+d(!l,g.i),fill:'none',[v]:z,[v+'-width']:5})),{d:'M'+g.i+a+'L'+n.i,[v]:'#222'}))});c=C(f.p,{d:'M'+f.i+c,[v+'-width']:2});g=c[n]();y=8*(x=g/round(g/(4*PI))/2);f.g=x;f.h=0;L((g,p)=>{g!=f&&(g.g=p.g+p.p[n](),g.h=p.h+p.p[n]());S(g.p,{[j]:x,[q]:g.h})[m](C(S(g.e,{[j]:x,[q]:g.g})[m](T('animate',{attributeName:[q],from:g.g+y,to:g.g,repeatCount:'indefinite',dur:'1s'})),{from:g.h+y,to:g.h}))});k.body[m](s)[m](c)}}

The ungolfed version:

class Vector {

    constructor(x, y) {
        this.x = x;
        this.y = y;
        this.length = Math.sqrt(x * x + y * y);
    }

    add(vector) {

        return new Vector(this.x + vector.x, this.y + vector.y);
    }

    subtract(vector) {

        return new Vector(this.x - vector.x, this.y - vector.y);
    }

    multiply(scalar) {

        return new Vector(this.x * scalar, this.y * scalar);
    }

    rotate(radians) {

        const cos = Math.cos(radians);
        const sin = Math.sin(radians);

        return new Vector(this.x * cos - this.y * sin, this.x * sin + this.y * cos);
    }

    cross(vector) {

        return this.x * vector.y - this.y * vector.x;
    }

    toString() {

        return `${this.x},${this.y}`;
    }
}

class Gear {

    constructor(x, y, radius) {
        this.x = x;
        this.y = y;
        this.radius = radius;
    }

    getVector() {

        return new Vector(this.x, this.y);
    }
}

const setAttributes = (element, attributes) => {

    Object.keys(attributes).forEach((attribute) => {
        element.setAttribute(attribute, attributes[attribute]);
    });
};

const createElement = (tagName, attributes) => {

    const element = document.createElementNS('http://www.w3.org/2000/svg', tagName);

    setAttributes(element, attributes);

    return element;
};

const cloneElement = (element, attributes) => {

    const clone = element.cloneNode();

    setAttributes(clone, attributes);

    return clone;
};

const createPath = (attributes) => {

    return createElement('path', {
        ...attributes,
        fill: 'none'
    });
};

const createCircle = (cx, cy, r, fill) => {

    return createElement('circle', {
        cx,
        cy,
        r,
        fill
    });
};

const loopGears = (gears, callback) => {

    const length = gears.length;

    gears.forEach((gear, index) => {

        const prevGear = gears[(length + index - 1) % length];
        const nextGear = gears[(index + 1) % length];

        callback(gear, prevGear, nextGear);
    });
};

const arcDescription = (radius, largeArcFlag, sweepFlag, endVector) => {

    return `A${radius} ${radius} 0 ${+largeArcFlag} ${+sweepFlag} ${endVector}`;
};

const renderGears = (data) => {

    let x = Infinity;
    let y = Infinity;
    let w = -Infinity;
    let h = -Infinity;

    const gears = data.map((params) => {

        const gear = new Gear(...params);
        const unit = params[2] + 5;

        x = Math.min(x, gear.x - unit);
        y = Math.min(y, gear.y - unit);
        w = Math.max(w, gear.x + unit);
        h = Math.max(h, gear.y + unit);

        return gear;
    });

    const firstGear = gears[0];

    w -= x;
    h -= y;

    const svg = createElement('svg', {
        width: w,
        height: h,
        viewBox: `${x} ${y} ${w} ${h}`,
        transform: `scale(1,-1)`
    });

    let chainPath = '';

    loopGears(gears, (gear, prevGear, nextGear) => {

        const gearVector = gear.getVector();
        const prevGearVector = prevGear.getVector().subtract(gearVector);
        const nextGearVector = nextGear.getVector().subtract(gearVector);

        gear.sweep = (prevGearVector.cross(nextGearVector) > 0);
    });

    loopGears(gears, (gear, prevGear, nextGear) => {

        const diffVector = gear.getVector().subtract(nextGear.getVector());

        let angle = 0;
        let x = 1 / diffVector.length;
        let y = x;

        if (gear.sweep === nextGear.sweep) {

            angle = Math.asin((gear.radius - nextGear.radius) * x);

            if (gear.sweep) {
                x = -x;
                y = -y;
                angle = -angle;
            }
        } else {

            angle = Math.asin((gear.radius + nextGear.radius) * x);

            if (gear.sweep) {
                x = -x;
                angle = -angle;
            } else {
                y = -y;
            }
        }

        const perpendicularVector = diffVector.rotate(angle + Math.PI / 2);

        gear.out = perpendicularVector.multiply(x * gear.radius).add(gear.getVector());
        nextGear.in = perpendicularVector.multiply(y * nextGear.radius).add(nextGear.getVector());
    });

    loopGears(gears, (gear, prevGear, nextGear) => {

        const largeArcFlag = (prevGear.out.subtract(nextGear.in).length < gear.in.subtract(gear.out).length);
        const arcPath = arcDescription(gear.radius, largeArcFlag, !gear.sweep, gear.out);

        const gearExterior = createCircle(gear.x, gear.y, gear.radius - 1.5, '#888');
        const gearInterior = createCircle(gear.x, gear.y, gear.radius - 4.5, '#666');
        const gearCenter = createCircle(gear.x, gear.y, 3, '#888');

        const gearTeeth = createPath({
            d: `M${gear.in}${arcPath}${arcDescription(gear.radius, !largeArcFlag, !gear.sweep, gear.in)}`,
            stroke: '#888',
            'stroke-width': 5
        });

        const chainParts = cloneElement(gearTeeth, {
            d: `M${gear.in}${arcPath}L${nextGear.in}`,
            stroke: '#222'
        });

        gear.teeth = gearTeeth;
        gear.chainParts = chainParts;

        chainPath += `${arcPath}L${nextGear.in}`;

        svg.appendChild(gearExterior);
        svg.appendChild(gearInterior);
        svg.appendChild(gearCenter);
        svg.appendChild(gearTeeth);
        svg.appendChild(chainParts);
    });

    const chain = cloneElement(firstGear.chainParts, {
        d: 'M' + firstGear.in + chainPath,
        'stroke-width': 2
    });

    const chainLength = chain.getTotalLength();
    const chainUnit = chainLength / Math.round(chainLength / (4 * Math.PI)) / 2;
    const animationOffset = 8 * chainUnit;

    loopGears(gears, (gear, prevGear) => {

        if (gear === firstGear) {
            gear.teethOffset = chainUnit;
            gear.chainOffset = 0;
        } else {
            gear.teethOffset = prevGear.teethOffset + prevGear.chainParts.getTotalLength();
            gear.chainOffset = prevGear.chainOffset + prevGear.chainParts.getTotalLength();
        }

        setAttributes(gear.teeth, {
            'stroke-dasharray': chainUnit,
            'stroke-dashoffset': gear.teethOffset
        });

        setAttributes(gear.chainParts, {
            'stroke-dasharray': chainUnit,
            'stroke-dashoffset': gear.chainOffset
        });

        const animate = createElement('animate', {
            attributeName: 'stroke-dashoffset',
            from: gear.teethOffset + animationOffset,
            to: gear.teethOffset,
            repeatCount: 'indefinite',
            dur: '1s'
        });

        const cloneAnimate = cloneElement(animate, {
            from: gear.chainOffset + animationOffset,
            to: gear.chainOffset
        });

        gear.teeth.appendChild(animate);
        gear.chainParts.appendChild(cloneAnimate);
    });

    svg.appendChild(chain);
    document.body.appendChild(svg);
};

var testCases = [
    [[0, 0, 16],  [100, 0, 16],  [100, 100, 12],  [50, 50, 24],  [0, 100, 12]],
    [[0, 0, 26],  [120, 0, 26]],
    [[100, 100, 60],  [220, 100, 14]],
    [[100, 100, 16],  [100, 0, 24],  [0, 100, 24],  [0, 0, 16]],
    [[0, 0, 60],  [44, 140, 16],  [-204, 140, 16],  [-160, 0, 60],  [-112, 188, 12], [-190, 300, 30],  [30, 300, 30],  [-48, 188, 12]],
    [[0, 128, 14],  [46.17, 63.55, 10],  [121.74, 39.55, 14],  [74.71, -24.28, 10], [75.24, -103.55, 14],  [0, -78.56, 10],  [-75.24, -103.55, 14],  [-74.71, -24.28, 10], [-121.74, 39.55, 14],  [-46.17, 63.55, 10]],
    [[367, 151, 12],  [210, 75, 36],  [57, 286, 38],  [14, 181, 32],  [91, 124, 18], [298, 366, 38],  [141, 3, 52],  [80, 179, 26],  [313, 32, 26],  [146, 280, 10], [126, 253, 8],  [220, 184, 24],  [135, 332, 8],  [365, 296, 50],  [248, 217, 8], [218, 392, 30]]
];

function clear() {
    var buttons = document.createElement('div');
    document.body.innerHTML = "";
    document.body.appendChild(buttons);
    testCases.forEach(function (data, i) {
        var button = document.createElement('button');
        button.innerHTML = String(i);
        button.onclick = function () {
            clear();
            renderGears(data);
            return false;
        };
        buttons.appendChild(button);
    });
}

clear();

You can save more than 250 bytes using this tool.

source: Stack Exchange

license: Creative Commons - Attribution Share-Alike - https://creativecommons.org/licenses/by-sa/4.0/

all_licenses: Creative Commons - Attribution Share-Alike - https://creativecommons.org/licenses/by-sa/3.0/

sort: votes