E. ReitmanSquarespace Favicon Makeover
For those of you who have spent some time using Squarespace, you've likely noticed that we pride ourselves in always paying attention to the little details. Details in the design of our website, details in the design of our platform, and even the details in the design of our slick little Squarespace favicon.
We admired the icon design work of the team at Techlogica, and when they approached us with the idea of refining our favicon, we were anxious to see what they would come up with.
We asked Techlogica's Kyle White to share a bit about his motivation as well as the icon design process:
"Squarespace always struck us as a high quality, next-gen web design framework (as it likely does for most).
However, we noticed the favicon being used didn't make use of the alpha channel, and was 15 pixel on one dimension (itwas an ICO with a 15x16 inner icon entry of type 32bit XP format). This left it up to the browser itself to either resample it, or show it 1:1. While the cube being shown is the best object to represent the framework, we thought there could be some areas for improvement.
The newly designed icon is still a black cube, but we made use of the full 16x16 canvas, shading all three visible sides with different gradient fills. You'll notice an inner stroke drawn at about a 30% opacity value over the inner shape, as well as an outer border of a dark gray tone. The edges of the icon are anti-aliased as well. All in all, we think the result is a more modernized take on what was already a great idea, and we believe it suits the Squarespace framework well."
Agreed--we all love it too!
You can see the progression of the Squarespace favicon designs in the image above. What do you guys think?
Reader Comments (23)
i think i would rather you guys spend less time on the favicon and more time on twitter integration and an iphone app. :)
i'm totally kidding. the details you guys look at are AMAZING. this is way i trust you guys to take care of my business. everything is important to you and no stone is left unturned.
I agree with Alex 100%
"i think i would rather you guys spend less time on the favicon and more time on twitter integration and an iphone app. :)"
I think I've commented on things like this before -- but Squarespace is no longer a small team. The individuals working on things like the iPhone app and core releases are not the same as the ones doing these designs.
But, in this case, it goes even further -- this was contributed by someone who doesn't even work at Squarespace :)
I totally had my doubts about this new favicon, but golly-gee, that's one awesome looking favicon. Much improved. Thanks for sharing this.
How 'bout having Techlogica come up with icons and graphics files for Squarespace's upcoming Twitter-integration, which I hope to manage via my dandy Squarespace iPhone app?
Much cleaner, sharper, and well defined.... I like it! Sometimes it's the small things that mean a lot and lead up to bigger things. Keep up the awesome work! I'm so glad that Squarespace has so many people wanting to contribute to the company and it's evolution. I've been highly impressed with the company with it's simple & innovative service. I can't wait to do more!
I think I'm finally happy with my website company! Glad to be here. : )
Nice idea, but isnt the perspective off?.. kinda looks a bit skewed and weird.. just saying.
I guess it looks like a dark box. A multi-colored bright thing is a better idea.
It's the little things that count - this one is much better, in leaps and bounds.
Pride in the little details? Like the correct spelling of your company name? LOL
nah, I'm just giving you a hard time.
5 well spent design minutes. The result-like those identical square glass cubes we call architecture, probably took lots of time and layers upon layers of approval. I'd like to see the designs Squarespace rejected.
While it does look updated, Ian is right.
I immediately saw the corner mis-align and the perspective being 'off'.
I'm sure you're already fixing it, though, as it's a much nicer size than 15x16, har.
Also, i thought this was a fake post once i saw the first comment!
Keep it goin' full steam!
Also, "Create Post" for adding comments?
Actually, it looks like your designers encountered a problem of perspective, isometric angles, as well as offset path and inset width problems. That is why the shine up top looks not to line up.
Making the block isometric or just a standard hexagon would make the shine line up much easier, but would remove the depth of the block.
This would be a fitting icon for Cubespace. ;-)
It does seem "off" to me as well.
As a designer of a few favicons myself, I like it. Simple yet elegant. Good job.
I like it - simplicity and understaed is hard. It looks polished.
Well done!
How do I change that icon for my website?
I mean, the cube is cool, but I would like my own.
I love Squarespace, but this, sadly, is not an improvement.
The new favicon has lost its isometric angles, the top and bottom angles match neither isometric nor true 3D perspective, the shading is off, and in the high rez version, you can see that the inner cube no longer aligns properly with the outer, enclosing cube. I see where you were going with this, but as it stands, I prefer the old one.
any chance .. to have a competission? ...
like... we are looking the best squarespace favicon?
or... squarespace needs an favicon!!
the first place, win an "one year free account"
:D
... good idea or not? is meny designers in here... dont u think? =)
desarrollo@ms.com.py .........my email..
To the critics, may I just say this: Sure, in the large size you can clearly see some differences in lengths on some of the sides (about 1/3rd the area of a pixel on the 16x16 size). Sure, you can also see the inner stroke corner isn't angular aligned with the top face (Making it perfectly aligned will unalign the top stroke).
Designing 16x16's is all about the end resulting icon. In this case, the resulting 16x16 clearly looks fine. The area where those point out it being wrong in the corners, is actually a BRIGHTER color.. The resulting AVERAGE color in each grid space fills it out to be a smooth corner. Can you honestly say you would be criticizing it as much if all you had to go by was the 16x16 itself, and not that massive raster? I seriously doubt it.
That larger preview is not the favicon. If you're judging it based on that, you're judging the wrong image. You certainly don't judge the latest fashion dress under a microscope to inspect thread fibers.
Don't forget, the digg man has a thick leg due to 16x16 division problems. (Yea it's entirely likely their branding is built around this issue). That's a full 1 pixel of fill in the wrong place, yet no ones bothered. They're pretty successful last I heard as well.
Even though this has just been a contribution from us, I already submitted another one with some proportional correcting implemented. I'm always up for changing, correcting, because nothings ever perfect (and of course I feel guilty as well when squarespace users get upset). Last I heard SquareSpace was fine with the look of this one (There was actually 6 different ones at different angles and shades).
If they ever want a contest or something, we'll submit a ton more. =] We aren't partial to any style. We can design anything from Isometric to Mac style (goto variety.png on techlogica.us).
"There is no excellent beauty that hath not some strangeness in the proportion."
--Sir Francis Bacon
Kyle White
Last favicon is nice and more real
Looking just skewed.... but nice idea, thanks for sharing