|Favicons, or the icons in the corner of your browser tab, provide a great visual element to your landing page.
With SharpSpring's landing page builder, you can add favicons to pages after a little bit of coding.
This article will detail how to add favicons to landing pages.
Uploading Favicons to the File Manager
Favicons require URLs to be added to a landing page in SharpSpring. If you do not have an uploaded favicon with its own URL available, you will need to upload a favicon image file to either an external image hosting website or to SharpSpring's File Manager.
While there is no problem with using favicons hosted on external image hosting websites, SharpSpring recommends uploading the favicon image to the File Manager. Using the uploaded file URL adds some security and stability to your favicon, as SharpSpring has no control over images uploaded to external image hosting sites.
To upload an image file to the File Manager to use as a favicon, do the following:
When uploading image files, consider the following:
- Favicon image dimensions vary by browser. Generally, the favicon image size must not exceed 16 pixels in height or width. However, there is not one uniform image size or file type standard to adhere to when adding favicons to pages. Different browsers—whether desktop or mobile—have different sizes and types that they use. Using images that are larger or smaller than the browser dimensions allow will distort the appearance of the favicon in browser tabs.
- Your favicon will break if the image is removed from its host website. If you are using an external website to host your favicon image, deleting the image there will make the favicon file URL invalid, and the file link will be broken. If you remove the favicon image from SharpSpring's File Manager, the favicon file link will break as well.
To add an uploaded favicon to a landing page, do the following:
Note: SharpSpring offers Professional Services to assist with custom coding.
When adding favicons, consider the following:
- Match the image file type with the code. Favicons will not function properly if their file type does not match with the
typeportion of the code in the above code snippet. For example, if you are using a .JPG image, then
type="image/png"should instead be
type="image/jpg"for the favicon to work.
- Only valid image file formats are accepted. You cannot set a non-image file format as a favicon. For example, you cannot set .DOC, .PDF, and .PPT file types as a favicon.
Favicon Generation and Information
Due to the differences in favicon size restrictions across browsers and platforms, SharpSpring recommends utilizing the services of a favicon generator.
For more information on favicon generation and favicons in general, refer to the following external websites: