Best Size, Format, and Procedure for Creating WordPress Website Logo

[philips67178736]

I am a newbie and can't seem to find an answer in the manual or in the Community so please bear with me.  I am creating a WordPress website and can't seem to create the correct size logo in Illustrator.  Here is my procedure, but it's just trial and error over and over and I can't get the logo sizing right, so I thought there must be a better way.  My logo ends up either huge or tiny, and the cropping feature in WordPress doesn't seem to help.  Here is my procedure, I'm using the latest version of Illustrator CC:

1. Scale my image in Illustrator to a size I think is correct, like 100 x 50 px.  FYI - it's RGB.

2. Copy the image.

3. Go to File | New and Select Web and type in a Width and Height slightly bigger than my image size and hit Create.

4. Paste my image into the new Artboard and center it.

5. Go to File | Export | Export for Screens and click on the Settings wheel and choose PNG format and:

     a. Anti-aliasing: Art Optimized (Supersampling)

     b. Background Color: Transparent

6. Hit Export Artboard

From WordPress, in the Customize area, I go to Customize | Header | Logo and hit Select Logo and Upload my file and select it.  Then the WordPress cropping screen appears, and no matter what I choose, it always seems wrong, either the logo is too big, cut off, or too small, and the bouding box size seemsdifferent every time.

Please help.  Thanks.

[Monika Gause]

I don't understand why you need to crop it in Wordpress.

WHy don't you export it at just the desried size and then just upload it as is.

Apart from that: In Wordpress forums people might be better able to answer Wordpress related questions.

[philips67178736]

Thank you for the quick reply.  I don't understand either, I've just cropped it to test if that could help.  Even when I try to set the Illustrator image size exactly, it still is either too small or too large upon import to WordPress.  Can you tell me if the rest of my procedures are OK?  Is it necessary to create an Artboard that is only slightly larger than the image size and copy my image into it and then do the export (otherwise I end up with white space around the image)?  Is there a quicker way for those steps?  Thanks.

[Monika Gause]

You don't need to adjust the artboard size. If there is only the artwork you want to export in your file, then don't check the option to "Export Artboards" and Illustrator will create a file of exactly the size of the artwork.

[JonathanArias]

why don't you give them .svg format? you will not have to worry about any of this if you export .svg

[KShinabery212]

So I created my logo in Adobe Illustrator and several other logos in the past.  I know depending where you want to place your logo... be it online or even on a print document, it might need to be resized.

What I do, and some people may or may not agree with me is.... I open up Photoshop and create a blank document with a transparent background in the size I need for what ever I am doing.  I then in Illustrator  and select all and then copy.  I then paste it into Photoshop as a Smart Object.  Then I save it as a PNG.

What I am very happy to hear is that you created your logo in ILLUSTRATOR!!!!!  That is the smartest way to begin!!!!  As you never know how big you might need your logo in the future, so creating it in Illustrator as vector graphic is the best way to go to keep it scalable!  So you are already on the right path!!!!!!