Completely Free Course

Or log in with email below...

Forgot my password

Reset Your Password

Enter your email address below. We'll look for your account and send you a password reset email.

Don't Have An Account? Sign Up Free

Completely Free

Or sign up with email below...

By signing up to create an account I accept LaunchParty’s Terms of Use and Privacy Policy.

Already Registered? Log In Here

Day 2: Design Your Website

How To Design Your Own Website Logo

Action Plan

Step 1: Create Your Logo Using The Free Logo Creator Ucraft

Visit Ucraft

Ucraft is our favorite free logo creator. This easy-to-use online tool makes creating a logo super easy, even for complete beginners that have never designed a logo before.

Watch Our Video Tutorial For This Step

This video will walk you through how to design a simple logo using Ucraft and then download your finished logo in transparent PNG format.

Video Summary

  • Visit Ucraft
  • Click “Create A Free Logo” (0:12)
  • Add text and enter your company name (0:20)
  • Resize the text (0:30)
  • How change your font and add Google Fonts to the menu (0:53)
  • Search for icons to get ideas (1:50)
  • Click any icon to add it to your logo (2:38)
  • Click and drag over the icon and font box to align them horizontally or vertically (2:50)
  • Click the “Preview” button to view your logo on different mockups (3:20)
  • Click the “background” toggle to make the background dark (3:50)
  • Change the icon and font colors (4:00)
  • In your WordPress dashboard go to Elementor > My Templates and search for “settings” and view the “LP-SETTINGS-colors” template (4:38)
  • Select a color from your color scheme (5:00)
  • Paste in the 6-digit hexidecimal color code in Ucraft to change the color (5:20)
  • Create a centered logo (5:40)
  • Add another text box if your company name has multiple words (5:55)
  • Center icon and text (6:48)
  • Use shapes to add a background to your icons (7:16)
  • Move layers to the front or back (7:38)
  • Sign up for a free account and download your logo (8:40)
  • Choose the free PNG with transparent background download option (9:18)

(I designed and downloaded my new logo)

Step 2: Resize And Upload Your Logo To Your Website

Why This Step Is Important

The logo we downloaded in the previous step is going to be a little too large for your website’s header. We need to resize it to the correct size so that it doesn’t slow down your website. We also want to create a retina version of your logo so that your logo doesn’t look blurry on high-density displays and mobile devices.

Visit BeFunky

Watch Our Video Tutorial For This Step

This video will walk you through how to choose the correct width (in pixels) for your logo, how to resize your logo with BeFunky, how to create a retina version of your logo for high density displays, and how to upload your logo to your website’s header using Elementor and Astra. You’re also going to learn how to add a “favicon” or “site icon” that appears in browsers next to your site name.

Video Summary

  • In your WordPress dashboard go to Templates > Theme Builder > Header (0:54)
  • Use the “Instances” column to find the header template you are using and click “Edit with Elementor” (1:13)
  • Add the “Site Logo” widget to your header (1:56)
  • Visit the Customizer by going to Appearance > Customize (2:34)
  • Go to Header > Site Identity (2:52)
  • Check box “Different logo for retina devices” (3:02)
  • The retina logo size is always twice the size of your regular logo (3:25)
  • Visit BeFunky to resize your logo (3:40)
  • Open your logo file in BeFunky (3:50)
  • Go to Edit > Resize to change the width for your regular logo and retina logo (4:09)
  • Save as a “PNG” file (4:32)
  • You can use TinyPNG for compressing PNG files (5:28)
  • Use the standard file naming format “@2x” for your retina logo (6:15)
  • Keep your original logo file somewhere safe since we will use it again in future tutorials (6:35)
  • Upload both newly resized logos to your site in the WordPress Customizer (6:42)
  • Click “Publish” to save changes (7:30)
  • Open your Header template in Elementor and adjust your logo size on tablet and mobile (7:38)
  • Make sure your logo is aligned correctly on tablet and mobile
  • Use a different logo width on different devices (9:34)
  • Click “Update” to save your header and have it updated on your website (9:47)
  • Create your “favicon” or “site icon” in BeFunky (10:05)
  • Upload your site icon in the WordPress Customizer (12:00)

(I uploaded my logo to my website)

Continue To The Next Tutorial Below

Day 2

Design Your Website

Elementor Pro is required for many of our tutorials in Day 2. The small commission we receive from your purchase helps us keep our tutorials completely free.
Your Progress

How Can This Be Free?

All of our tutorials are supported by the small affiliate commission we receive when you purchase SiteGround Hosting and Elementor Pro. We are not associated with SiteGround or Elementor in any way.