Step 3 - Design and Integrate Your Logo

Every website needs a brand. Whether it be in the header or as a Favicon.

Your Main Logo

Firstly, I have to make a confession. I class myself as Design Dyslexic (my own invention of an undiagnosed disorder) - In other words I have no design sense or taste (just ask my wife!).

For the purpose of this site I went with a free logo design website in the hope that I could cobble together a logo that doesn't poke you in the eye with its lack of taste - you will need to be the judge for obvious reasons.

Many sites offer a free service which can be upgraded to a fee paying service for high definition Logos. My idea was to go with a free service and if necessary re-brand with a paid service if required later.

You will find that logo design sites will offer you a selection of downloadable files of various sizes for different purposes. Frankly, the more you have the easier your life becomes. You can of course resize using the most basic of software or, use a free web based service. Resizing to a smaller format makes the image load faster on the page (none of us like to wait ages for a page to load) but it can look very fuzzy (pixelated) on large screens.

An image with a transparent background is a must. These are usually in a .png format and have tons of uses.

Suggested Logo Sizes - All size are quoted in px. (px = pixels. So 250 x 150 is 250 pixels wide x 150 pixels high or 250px x 250px).
Facebook Profile 170 х 170 Cover 820 х 312 Link 1200 x 628 Image 1200 x 630
Favicon 16 x 16 32 x 32 48 x 48  
Instagram Profile 110 x 110 Stories 1080 x 1920 Image 1080 x 1080  
LinkedIn Profile 300 х 300 Cover 1536 x 768 Link 1200 х 628 Image 1200 x 1200
Pinterest Profile 165 x 165 Pin 236 x 236 Image 1000 x 1500  
Tik Tok Profile 200 x 200 Video 1080 x 1920    
Twitter Profile 400 x 400 Cover 1500 х 500 Image 1024 x 675  
Website Vertical(square) 160 x 160 Horizontal – 250 x 150 or 350 x 75 or 400 x 100    
YouTube Profile 800 x 800 Cover 2560 x 1440 Thumbnail 1280 x 720  

A term that you will come across frequently is RWD (Responsive Web Design). This refers to the ability of the image to scale correctly on mobiles and tablets. Remeber that you have no control on who looks at your site or on what device - what you have to do is make the image look good on every device - sometimes you can scale an image to look smaller on small devices, othertime you will be better having different sizes available for different device screen sizes (we will go into this in great detail later.

Select the best online Logo Design software

There are many Logo design companies on the internet who offer all singing and dancing packages at a premium price. What we are looking for is a budget offering that allows us to upgrade once the site is up and running.

List of Recommended Domain Hosts.
I earn commissions from qualifying purchases marked with . This means that if you click on an affiliate link and purchase the item, I will receive an affiliate commission. The price of the item is the same whether it is an affiliate link or not. Regardless, I only recommend products or services I believe will add value to The Web Toolbox readers. By using the affiliate links, you are helping support The Web Toolbox, and I genuinely appreciate your support. To read more please see How we earn money.
Host Click on Banner to View Website Vote