Upload Your Secondary Logos
When building a website, it’s very easy to think about the logo you see in the Header or Footer of your site because of how visible they are. But there are two other logos that can be easily missed that can add a nice touch to complete your website. So if you want to add some final touches to your website, read on, website building expert 🤓
In this guide, we'll cover the following topics. Click on any one to jump ahead.
What Is A Favicon?
Favicon. Perhaps a silly name, but probably something you see all the time when you’re surfing the web and you didn’t even realize they had a name.
Favicons are those tiny icons or logos you see in the tabs of your browser that help indicate the various websites you’re currently viewing (apart from the SEO name that also appears in each tab). They also typically show up whenever you bookmark or save a website.
While not necessary, favicons are just a small detail that most websites use, so you don’t want to be the odd one out and not have one.
Note: If you choose not to upload a favicon, it will default to the Nucleus logo.
What Is An App-Style Icon?
One aspect of Nucleus that’s different from other church website builders is that we do not offer an app version of your website that people can download on your smartphone device.
While we have an entire blog devoted to explaining why most churches don’t need an app for their church (Don’t Get A Church App In 2023), one of the reasons is that every device has limited real estate and storage space on their device, so the barrier to entry is greater than just visiting your church’s website on their device’s web browser.
BUT - what if you could open your church’s website as if you were opening an app, without actually needing to download anything?
Did you know you can save a web page on your smartphone’s homepage that, when clicked, makes it feel like you’re opening an app, but in reality it’s just opening your device’s browser to that specific website?
To learn how to do this, we have an entire guide that walks you through on how to do this for both Apple and Android devices: Add Nucleus Web To Mobile Device Home Screen.
But to make this experience as best as it can be, you’ll want to make sure you have a logo for the app-icon that saves on a person’s smartphone homescreen. That’s where the App-Style Icon comes into play.
Upload Your Secondary Logos
To upload your Favicon and your App-Style Icon, in Nucleus Web, click on Manage and select Site Settings. Then choose Favicon. Click here for a quick link.
Then, simply drag and drop an image from your device into the Favicon and/or App-Style Icon block, or click + Add Image to open a browser to locate your desired image. The image must be 50 MB or smaller, but unless you’re uploading a RAW image file, you should be safe.
Because of how small Favicons are, there’s no need for it to be very large at all. In fact, anything between 32px x 32px and 512px x 512px is all you need.
On the flip side, because apps show much larger than Favicons, it’s recommended that 512px x 512px is the minimum dimensions for your App-Style Icon.
For best logo practices (i.e. the type of image file, sizes, dimensions, etc.), we’ll cover this in the next section. Click here for a quick shortcut.
Note: While we recommend uploading an image with a transparent background for your regular logos and your Favicon, it’s best to upload a logo with an opaque background for your App-Style Icon. (Alternatively, you can upload the light version of your logo with a transparent background.) This is because on some devices, the background of the “app” button will appear in black, so if you have a dark logo, it might not show up well.
After your logos have been uploaded, click Save Changes.
Best Logo Practices
While Nucleus does its best to present whatever logo you upload in the best way possible, there are some general guidelines to uploading logos that will be super helpful to ensure your logos look great no matter what.
Type Of Image File
When choosing which logo to upload, it’s best to upload a .png file, not a .jpg file. A .png file allows for an invisible layer to be saved, whereas a .jpg file will interpret any invisible layer as white. (See below for example.)
If you need to change the format of your current logo from a .jpg to a .png, you can quickly Google “convert jpg to png” and use any one of the search results. Or, if you need to remove the background from your logo, check out Adobe Express. It’s free and Adobe is a trusted company when it comes to all things visual.
Size Of Image File
While Nucleus allows you to upload up to a maximum of 50 MB, we recommend using a compressed or smaller file size. If you’re working with a large file size, before uploading the logo to your Launcher, you can always compress it using TinyPNG.
What Next?
While these are just little details, it’s all the little details that can take someone’s experience on your website from great to fantastic. And with a Nucleus Website, our goal is to help make sure that you make a great first impression every single time - Favicons and all 😎
And while you’re at it, why don’t you go ahead and double check that you have these other site settings set up correctly: