The 5 logo assets you need for your website
Chances are, if you have a business, you already have a logo. But is your one and only logo doing its job? Does it “look” or “fit” better in some places than others?
Maybe your logo needs some cousins. Having a few variations of your logo (horizontal, one color, icon, etc) can help you cover your various design needs, and create a cohesive look for your brand on-screen and off.
I include these 5 different logo assets in my branding package, because I have found each one to be essential in completing any web design project. Not only that, they also offer flexibility in designing other aspects of your business - from signage to business cards to social media covers - you name it!
So what are these magical 5 logos…? Read on!
Pin this!
Save this article to read later
#1 Full Color Logo
This is the logo you most likely already have - if you have one. A good logo design should always hold up as one color (we’ll get to that in #2), but when you’re afforded the option to show your true colors - like on screens or in full-color printed materials - it’s nice to have this option!
Depending on the height of your logo, and how you’d like to lay out your site, you can use this for the main logo on your website. Plug it in and see how it looks… or read on to see if another option might be a better fit.
#2 One Color Logo
Having a one-color logo can come in handy if you choose to overlay your logo over an image, a block of color, or just want a simpler look. Here’s the test: if you turn your logo to one color, is it still readable and recognizable? If not, it might be time to take another look.
#3 Horizontal Logo
Perhaps you love the way your main logo looks on your desktop site, but on mobile, it’s taking up WAY too much screen real-estate. This is where your horizontal logo comes in. This option might simply be your brand name without extra decoration.
PS- In Squarespace 7.1, you can easily select a different logo option for your mobile and desktop sites - no code needed!
#4 Favicon Logo
AKA your browser icon. Want to know how you can spot a DIY Squarespace website in the wild? That little black box in your browser tab. Yep that one right there. That’s the default favicon - and it’s so easy to change it in Squarespace, so why not do it? Same goes for sites built on other platforms. You may see a gray globe icon, a Wix icon, etc. Your site will look so much more professional if you don’t skip this step!
Now this puppy is SMALL. It displays at only 16x16 px, so truly, this logo can’t be your full color logo. It’s just not going to look good or readable.
Come up with a complementary little graphic or even take the initials or your business and place it in your font/color scheme to coordinate with your site. Squarespace recommends uploading a 100px-300px square image saved as either a .ico or .png.
#5 Shortcut Logo
Even more overlooked than the favicon is the shortcut logo. You may have noticed this in your smart phone browser as a frequently visited or favorited website - and noticed your site may be a boring gray letter where major brands have “pretty” custom versions. Create a .png file that is 144px square, and again, keeping the small size in mind, select a graphic or monogram that coordinates with the rest of your branding. See below for instructions for installing this little code snippet on both Squarespace and Shopify.
Quick web tip:
Adding a Browser Shortcut Image to Squarespace
Add the following snippet of code to your header (go to settings > advanced > code injection). You’ll need to replace the “/shortcutimage.png” with your own image which you can upload under design > custom css > manage custom files and grab the url. Your shortcut image should be simple, coordinate with your brand, and be a 144px square .png file.
<link rel="apple-touch-icon" href="/shortcutimage.png"/>
<link rel="apple-touch-icon-precomposed" href="/shortcutimage.png"/>.png"/>
Adding a Browser Shortcut Image to Shopify
Add the following snippet of code to the <head> section of your “theme.liquid” file (go to online store > actions > edit code). You’ll need to replace the “/shortcutimage.png” with your own image which you can upload under settings > files and grab the url. Your shortcut image should be simple, coordinate with your brand, and be a 144px square .png file.
<link rel="apple-touch-icon" href="/shortcutimage.png"/>
<link rel="apple-touch-icon-precomposed" href="/shortcutimage.png"/>.png"/>
Need a little help?
Maybe you have only one logo option and are not sure how to break it down into a favicon, etc. Or maybe you feel your brand is in need of a makeover altogether. I live for this stuff! Book a discovery call to learn more about my branding packages, or shoot me an email and tell me about your business - I’d love to help. Chat soon!
