How can I add an icon for my website? [FAQ]


Having a custom icon (otherwise known as a Favicon) for your church's website can add a touch of personalization to your church's website. The steps below walk through how to get this set up both for web browser tabs and for mobile phone icons:

First, you'll need to have the image you want to use for your Favicon uploaded to your site. You can follow the instructions at the link below if you're not sure how to get this added. Note, that the image does not actually have to appear anywhere on your site permanently, the image just has to be uploaded:

Upload an Image

After you've uploaded the image, you will temporarily want to add it to a page. At the upload window, just click on the image you want to use and click the blue select button, and save your page. Then, right click (for Mac users, hold down the Control key on your keyboard, then click on the image), and choose "Open image in a new tab". This will open up the image on its own, and in the address bar, you will see the web address for that image. Copy this link down, you will need it for later in this process. At this point, however, the image can be removed from the page, if you no longer want it there. Do not, however remove it from the upload window.

Next, on Church360 Unite, click on the "Themes" tab, and then go into the "Advanced" section. In the "Custom Header" section, enter the following:

<link rel="shortcut icon" type="image/png" href=""/>

Within that code, replace the website address you see with the website address of the image you wanted to use. Keep the quotation marks, however. Also, make sure in the "type" part of the code that the type matches the file type of the image you used. So, if you used a png, you can keep the code the same but if you used another file type, like jpg, instead you would type in "image/jpg".

For Android devices, if a person creates a home screen shortcut to your church website, it will use the Favicon you created for your website, but accomodate iOS users, an additional line of code needs to be added to the code above. With this line of code, the final result in the custom headers section will look like this:

<link rel="shortcut icon" type="image/png" href=""/>
<link rel="apple-touch-icon" sizes="180x180" href="">

Just like with the previous line of code, the part that goes after the href is the web address of your image, and you will still want to keep the quotation marks. This will make sure the icon you set up will be used as the icon for the home screen shortcut.