HomeTips & tricks › Adding a favourites icon (favicon)

Adding a favourites icon (favicon)

A favicon (short for favorites icon) is displayed in the browser’s address bar, in a list of bookmarks and on a tab.

Favicon - browser

The favicon allows you to customize the site in the Web browser. It was named the favicon because it was first developed in Internet Explorer, which calls bookmarked sites "favorites" and this icon was displayed in the favorites menu.

Most site favicons are designed as a small rendition of their logo or other branding mechanism. The example on the right shows a favicon being as it appears in a browser's address bar an tab:

Creating your favicon image

YWD provides two ways for you to add your favicon. You can either use a 16x16 GIF image (which you must call favicon.gif) or a 16x16 ICO image (which you must call favicon.ico). The issue with using a GIF image is that although it works with Firefox, Chrome or Safari, it's ignored by Internet Explorer. So if you would like your favicon to be displayed by all major browsers including IE, we suggest that you use favicon.ico

Preferred method: favicon.ico
(works in all modern browsers)

  1. Create the 16x16 image using your favourite image editing software (e.g. Photoshop) and export it as a GIF image
  2. Convert your image to the ICO format. There are plenty of free online image converters that will generate it for you, this is one of them. Some programs will even allow you to create your favicon.ico file directly i.e. without the need to generate an image first.
    Make sure you name the converted image favicon.ico
  3. In YWD, click on 'Assets', then on the left select 'Icon (favicon.ico)'. Locate your favicon.ico file and upload it
    Make you upload your file to Icon (favicon.ico) and not to Images
  4. That's it! The live website will start displaying your favicon (in some cases that may only happen the next time the web browser is launched)

Alternative method: favicon.gif
(ignored by Internet Explorer)

  1. Create the 16x16 image using your favourite image editing software (e.g. Photoshop) and export it as a GIF image.
    Make sure you name the converted image favicon.gif
  2. In YWD, click on 'Assets', then on the left select 'Icon (favicon.ico)'. Locate your favicon.ico file and upload it
  3. That's it! The live website will start displaying your favicon (except for visitors using Internet Explorer)

 

Note:
If you replace your favicon, refresh the page and/or clear the browser’s cache to see the changes reflected.

Top of page