Disclaimer: Any products/services mentioned or recommended below are suggestions based on our own experiences. We have no affiliation with any of the products or services mentioned and you should always thoroughly and independently research your options to decide what is best for you.
One thing that many website owners and even website developers forget, or simply aren’t aware of, is just how many different variations of your logo you should be uploading to your website, to cover a range of different purposes.
For example, when a visitor saves your website to their bookmark bar or favourites, their browser will automatically look for a “favicon” on your website, to save as the image next to your website’s name. This favicon isn’t automatically generated from your main logo. That means, you or your developer should be specifically designing a version of your logo at the correct size for a favicon, and uploading this to your website.
Likewise, iOS devices call for a range of different icons for when visitors save your website to their phone or tablet home-screens. As different device sizes and resolutions have come out over the years, there are presently 4 main sizes that are called for, depending on which model of device the visitor is using.
Below, we’ve put together a list of the most common logo variations and icons you should be creating and uploading to your website, to cover your main bases. Keep in mind that just uploading these icons and logos is generally only half of the job done. You also have to assign these logos to their purpose. Oftentimes, high-quality themes will have built-in options for you to set your favicon and iOS icons, but if your theme doesn’t provide this, you can either grab a dedicated favicon plugin for this purpose or manually add some code into your website’s header.
Favicon
Icon Size: 32px x 32px
Manual code to add to website header (if opting for this method, else, use a plugin):
<link rel=”shortcut icon” href=”LINKTOYOURFAVICONHERE” type=”image/x-icon” />
We’d recommend leaving no blank space around the edges of your favicon, as they are never displayed hard up against any edges. As such, you should take advantage of all the space possible and completely fill the area with your graphic.
iOS Icons
Icon size for Apple iPhone: 57px x 57px
Icon size for Apple iPhone Retina: 114px x 114px
Icon size for Apple iPad: 72px x 72px
Icon size for Apple iPad Retina: 144px x 144px
Be sure to leave some empty space around the edges for these ones, to avoid text or images being hard up against the edges.
Manual code to add to website header (if opting for this method, else, use a plugin):
<!– For iPhone –>
<link rel=”apple-touch-icon” href=”LINKTOYOUR57X57ICONHERE”>
<!– For iPhone Retina display –>
<link rel=”apple-touch-icon” sizes=”114×114″ href=”LINKTOYOUR114X114ICONHERE”>
<!– For iPad –>
<link rel=”apple-touch-icon” sizes=”72×72″ href=”LINKTOYOUR72X72ICONHERE”>
<!– For iPad Retina display –>
<link rel=”apple-touch-icon” sizes=”144×144″ href=”LINKTOYOUR144X144ICONHERE”>
Facebook Meta Logo
By default, Facebook looks for a meta image to load into post previews whenever someone shares a link to your website on their platform. To avoid Facebook choosing random, ill-fitting images off your website’s pages, it’s a good idea to design a meta image to the correct dimensions and tell Facebook to always use that image.
Meta Logo Size: 1200px wide x 630px high. Be sure to leave some empty space around the edges too, to avoid text or images being hard up against the edge.
Manual code to add to website header (if opting for this method, else, use a plugin such as Yoast):
<meta property=”og:locale” content=”en_AU” />
<meta property=”og:type” content=”website” />
<meta property=”og:title” content=”WEBSITE TITLE HERE” />
<meta property=”og:description” content=”WEBSITE DESCRIPTION HERE” />
<meta property=”og:url” content=”FULL WEBSITE URL INCLUDING HTTPS:// HERE” />
<meta property=”og:site_name” content=”WEBSITE NAME HERE” />
<meta property=”og:image” content=”LINK TO FACEBOOK META LOGO HERE INCLUDING HTTPS://” />
<meta property=”og:image:secure_url” content=”LINK TO FACEBOOK META LOGO HERE INCLUDING HTTPS://” />
<meta property=”og:image:width” content=”1200″ />
<meta property=”og:image:height” content=”630″ />
Main Website Logo – Standard & Retina Versions
For these logos, we are referring to the ones that actually display on your website’s pages, typically in your header/main navigation area. Many websites will use at least 2 variations, and load in one or the other depending on whether the website visitor is using a retina (high resolution) screen, or a standard resolution screen. Your website’s theme is generally responsible for providing a place for you to assign your standard and your retina logo. If it doesn’t however, and only provides one place for a logo to be assigned, make sure you upload a logo that is at least twice the resolution of the dimensions at which you want it to display. You should then be able to limit the width and height of your logo to bring it back down to the correct dimensions. By preparing your logo this way, it will look nice and sharp on both standard and double-resolution (retina) screens.
We’d recommend leaving no blank space around your main website logos (essentially, hard crop them), to ensure you have ultimate control over how they are aligned with the rest of your website elements.
Organisation Logo
Last but not least, you’ll want to generate a variation of your logo to serve as your “organisation logo”, which is sometimes used to populate certain areas of Google’s search results for your website.
This image should be at least 1200px wide, and we’d also recommend making it square. Be sure to leave some empty space around the edges too, to avoid text or images being hard up against the edge.
The Yoast SEO for WordPress plugin offers a way for you to assign your organisation logo. Simply install the plugin and head to SEO > Search Appearance > Organization Logo. Here, you can nominate your organisation name and logo as you want it to appear.
That’s it! With those 9 different sizes and variations complete, you’ll be fairly well set when it comes to website logos and icons. Of course, there are various others to consider, such as default Twitter meta images, and various other devices that may call for their own optimised sizes, but having the above completed puts you in an excellent place with all of your main bases covered.
As always, if you have any questions about this post or our shared hosting, VPS, reseller or dedicated server plans, simply call us on 1300 MY HOST (694 678) during business hours, or submit a ticket through our Support Portal and one of the crew will be in touch!
