When accessing various websites you may have noticed a custom icon and text associated with that page. The icon is called a favicon (short for favorite icon). Favicons will display in the address bar (sometimes in the history as well) and next to the page's name in a bookmark list. If the browser supports tabs, it will also show a page's favicon next to the page's title on the tab. A custom favicon is another easy way to brand your survey and make sure it represents your specific vision.
Follow these quick steps to create your own favicon, upload it to Alchemer, and insert the necessary code.
Create an .ico File
The image that you want to use as a favicon will need to have a .ico file extension (this file type ensures the greatest compatibility with ALL browsers, as Internet Explorer will not support other file types). There are many online tools that will convert your image files to .ico like http://convertico.com/. Most of these tools require that your file is a .png and very small before they are converted to .ico. Keep in mind when creating your icon that it will be sized down to 16x16 pixels and that square images always look best.
Once your file is converted, you need to upload it to your Alchemer library, check out our File Library Tutorial for the steps to do so. Once the file is uploaded, edit the file and copy the File URL. Paste it somewhere like an email/text file so you can grab it again in a moment.
Insert the Code
- On the Style tab scroll to the bottom of the survey preview and click the link to access the HTML/CSS Editor.
- In the field on the Custom <HEAD> tab, paste the below code.
<link rel="shortcut icon" href="https://YourFaviconLinkHere.ico" type="image/x-icon"/> - You will then replace the
YourFaviconLinkHere.icoportion with the File URL you copied earlier. Leave all the other parts of the code in place, including the quotation marks around "https://YourFaviconLinkHere.ico". - Last, it's a good practice to clear your link caches via Tools > Clear Link Cache. This will force these updates to your survey's live link(s).
Once that is complete, you will have something that looks like this when you create a bookmark or look at the icon in a browser tab:
Compatibility
This solution is not supported in Offline Mode.
