How to Create and Upload a Custom Logo and Favicon

December 7th, 2021

Transcript

In this video, I’m going to show you how to create a custom logo and favicon and then upload it to your Zenfolio site.

Now before we get started, I want to give you some tips and file specifics to keep in mind when creating your logo and favicon. First, I would recommend that you create a horizontally orientated logo. This will allow you to maximize the size of your logo in the space provided. Also, you’ll want to create two logo files you’ll want to create, one that’s going to work well for lighter colored backgrounds and one that’s going to work well for dark backgrounds. When you save your logo file you want to save it as a png file with the transparency turned on, the minimum size of your logo is 180 by 180 pixels, and the largest size your logo can be is 480 pixels by 180 pixels. Now let’s go ahead and jump into Photoshop and get started. In Photoshop, I’m going to create a new document that is 480 pixels by 180 pixels. This is the maximum logo size and I recommend creating your logo at the max size. Zenfolio does have some scaling options that you can use after you upload your logo.

Now once you’ve designed your logo, before you export it I recommend turning off any background layers and then cropping in really nice and tight to your logo. You can do this by holding command, clicking on your logo layer,and then selecting the cropping tool and hitting enter. Now it’s time to export our logo as a png file. Now I’m using Photoshop CC so I can use the quick export as a png as long as my settings have the transparency option turned on. If you’re using an older version of Photoshop, then you’re going to want to use the save for web option. In the little drop-down, make sure that you select png 24 and make sure that the transparency box is checked, then click Save.

Now that we have a logo file that will work really well for light backgrounds. We still need to create one that will work well for dark backgrounds. One of the easiest ways to do this is to double click on your logo layer and then under layer styles check the box that says color overlay and then change the color to a lighter color and then hit OK. Once you’re happy with the way your logo looks, go ahead and export it just like we did the previous logo. Finally, we’re going to create our favicon. Now, you might want to think of this as a web browser icon: this is the image that appears in the top left corner of your browser tabs. Now the max size for your favicon is 32 pixels by 32 pixels and I recommend designing your favicon at that max size since this is a very small logo. I would not recommend that you resize your main logo, but create a logo specifically with this size in mind. Now, again keep in mind it’s very small so you want to keep it simple and easy to read. Once you have the favicon created go ahead and export it just like we did with our previous logos.

Now in your Zenfolio account click on the drop-down in the top right corner, then click Account Settings. Now over on the left-hand side click on Logo and Branding, here you will see the option to upload a primary logo a secondary logo, and your favicon. Now I recommend uploading the logo that you created specifically for lighter backgrounds as your primary logo, as your primary logo will be applied to the email templates that go out to your clients and since the background of these email templates is white a darker logo is going to work best. Upload your lighter-colored logo as your secondary and then go ahead and upload your favicon. Now let’s go back to the dashboard and then click on Website to access your website editor. Go ahead and click on your header and if you don’t see your logo make sure that you set your logo to show. Here you can also choose whether you want to use your primary logo or your secondary and you can also control this size. If you’d like to change the background color of your header you can do that here as well.

Click the Preview button to take a look at what your website looks like with the new logos applied. Once you’re happy with everything, all you have to do is click that Publish button to make these changes live.

*Promotion valid until January 25, 2022 at 11:59 p.m. PST. Promotional discount off the subscription price of a new ProSuite annual plan will be automatically applied at checkout with code ZFSAVE50. Discount applies to the first year only. Cannot be combined with any other promotion. Portfolio, Portfolio Plus and ProSuite plans are currently available to customers in the United States and United Kingdom only.