Skip to main content

Favorite Icon for your SwimTopia Site (Favicon)

Paige Hansen
  • Updated

Favicons (a.k.a. favorite icon, website icon, tab icon, shortcut icon, or app icon), is the small icon that appears in browser tabs, bookmarks, and search results to visually identify your site. Favicons strengthen your brand, improves the user experience across all devices, and make your website appear more professional.

PREMIUM

This feature is available to our Premium customers.

Covered in this Article:

 

FAVICON.png

 

Benefits of Using a Favicon on Your Website

➧ Branding

Favicons are an extension of your brand's identity, and should be designed to stand out, increasing the likelihood that users will click on your link over competitors. This builds brand recognition and reinforces your brand identity, to maintain brand consistency across devices. 

➧ Professionalism

Having a favicon makes a website look more complete. It also makes the site appear more credible. Visitors are more likely to interact when they feel a site is trustworthy.

➧ User Experience

Admit it, you probably have 10-20 tabs open at any given moment! Favicons help users quickly locate your website in a sea of tabs. Using a consistent visual cue across all platforms makes your website easily recognizable and encourages visitors to return.

➧ Mobile Experience

Favicons make it easier for users to find your website on their phones and tablets. They play an important role in the mobile experience and can make visitors more likely to stay on your site.

 

Implement a Favicon on Your Website

➧ Step 1: Create your favicon

A favicon could be your logo, initials, symbol, or any graphic that effectively captures your brand identity. Use graphics software or web tools to create your icon, or hire someone to do this for you. 

➞ Examples of available tools:

  • Adobe Photoshop: Designers can open their full logo in Photoshop, zoom in to identify a distinctive section, use the crop or selection tools to extract it, and then resize and export the section as a favicon.
  • favicon.io: Allows users to upload an image and generates favicons in various sizes and formats.
  • favicon-generator.org: Similar to favicon.io, users can upload their logo to favicon-generator.org, choose a section of the logo, and the tool will generate favicons suitable for various platforms.

➞ Common file formats: ICO and PNG

Your icon should be square. We suggest using a transparent background, so your favicon shows up against all background colors.

➞ Standard pixel sizes:

  • 16x16: For browser tabs or bookmarked lists
  • 32x32: For taskbar shortcuts
  • 96x96: For desktop shortcuts

➧ Step 2: Upload your favicon to your site

Go to your uploaded files area (Manage Team > Settings > Uploaded Files) and upload your icon. 

SETTINGS-UPLOADED_FILES.png

Click on the file name of the icon you uploaded and copy the URL to this file to use it in the next section.

SETTINGS-UPLOADED_FILES-COPY_URL.png

➧ Step 3: Display your favicon on your site

Go to your Manage Team > Website > Site Settings > Advanced page:

WEBSITE-SITE_SETTINGS_ADV-HEADER.png

In the Additional Header Content area, add one of the below lines, replacing the entire URL portion (between the quotes) with the one you just copied in the previous step. Scroll to the bottom and Save.

<link rel="icon" type="image/png" href="https://***.cloudfront.net/***/files/myicon.png">

OR

<link rel="shortcut icon" href="https://***.cloudfront.net/***/files/myicon.ico">

 

Then, you can click the "View Site" link to see your Favicon displayed:

VIEW_SITE.png
FAVICON.png

Voila!

 

 

Related articles

Comments

0 comments

Article is closed for comments.