A favorites icon – also known as a favicon, shortcut icon, or website icon – is an icon that appears in the page tab and address bar of your browser when a particular site is displayed.
On Google Chrome, the favorites icon only appears on the page tab, not on the address bar.
Wild Apricot allows you to display a custom icon for your site in place of the default one. This allows you to display an icon that incorporates your organization's logo.
There are two ways to display your own custom favicon: 1) using a online favicon generator, and 2) a do-it yourself approach.
Using an online favicon generator
To generate the image files and HTML code you need to display your own custom favicon, follow these steps:
- Go to https://realfavicongenerator.net.
- Click the Select your Favicon image button and choose the image file you want to use as the basis for your favicon.
Typically, you will use a file containing your organization's logo, or a portion of it. For optimal results, your image file should be square (or almost square) and at least 260 x 260 pixels. - You'll be asked to confirm the image you chose. If the image isn't equally square, transparent margins will be automatically added.
If you are ready to proceed with the image as displayed, click the Continue with this picture button. - On the screen that appears, you can preview how your favicon will appear on different platforms.
- Scroll down to the Favicon Generator Options section at the bottom of this screen.
- Click the radio button labeled I cannot or I do not want to place favicon files at the root of my web site.
- In the field below that radio button, enter /Resources/Pictures/Favicon.
- Click the Generate your Favicons and HTML code button.
- From the Install your favicon screen, click the Favicon package button to download a zip file containing multiple favicon images.
Unzip the zip file to a temporary location on your computer.
Select and copy the HTML code appearing on this screen.
You might want to save the code temporarily in a text file.Using the Files screen in Wild Apricot or WebDAV, create a folder under Resources\Pictures called Favicon and upload the unzipped files to that folder. Ignore the warning if one or more files cannot be uploaded because of their file type.
Within the Website module on Wild Apricot, click the Settings option.
Click the Meta-tags option (under Site settings).
In the Raw Headers section of the Meta-tags screen, paste the code you copied.
Click the Reset all pages to use this button – unless you have raw headers defined for individual pages that you don't want to overwrite.
If you have raw headers defined for individual pages that you don't want to overwrite, then you need to copy and paste the link code into the Raw Headers section of individual page settings.Click the Save button to save your changes.
Log out of your account to reload your site and see the results. If the favicon doesn't appear, try closing then reopening your browser.
Doing it yourself
To create and display your own favicon, you need to create the favicon image file then upload the file and insert the code to display it.
Icon file requirements
Your favorites icon must satisfy the following requirements:
- File type: .ico
- Image size: 32x32 or 16x16 pixels
There are many free online .ico converters that can convert other image formats into an .ico file (e.g. http://www.icoconverter.com).
Uploading and linking to the favorites icon
Follow these steps to upload and link to your favorite icon:
- Within the Website module, click the Files option at the top of the screen.
- Upload your favorites icon to the Pictures folder.
- Click the Settings menu, then choose the Meta-tags option (under Site settings).
- In the Raw Headers section, paste the following code:
<link rel="shortcut icon" type="image/ico" href="/Resources/Pictures/filename" />
replacing filename with the name of the icon file. For example, if your icon file was named favicon.ico, then the link code would appear as:<link rel="shortcut icon" type="image/ico" href="/Resources/Pictures/favicon.ico" /> - Click the Reset all pages to use this button – unless you have raw headers defined for individual pages that you don't want to overwrite.
If you have raw headers defined for individual pages that you don't want to overwrite, then you need to copy and paste the link code into the Raw Headers section of individual page settings. - Click the Save button to save your changes.
- Log out of your account to reload your site and see the results. If the favicon doesn't appear, try closing then reopening your browser.
