What’s a “Favicon” you ask? The term refers to the icon you see at the left of the page URL in your Safari window before the actual URL of the page on the website you are visiting.
For example, if you go to www.apple.com, and look to the left side of the word ‘Apple’ when you arrive at the home page, you’ll see an icon sized version of the Apple logo.
You can add one to your website pages, too, if you would like to. We walk through the ins and outs of setting up ‘Favicons’ on a Sandvox website in this short article. Read on to find out how it is done!
First things first, why is it called a favicon? You guessed correctly! It is short for favorite icon. A “favicon” is a small image that represents your website. Depending on the browser your visitors use, it may be located on the left of the URL field or in a tab. It also appears next to the site title or URL when viewed in a browser’s history or when added to the bookmarks or favorites folder (hence the “favorite” icon!).
By default, Sandvox sites have the sand castle from the Sandvox logo as their favicon. If you want to change that, you can do it—easily! The hard thing to do is to arrive at an image that works at an icon size that fits your website. You’d want it to stand out, and be easily recognizable.
Here are some favicon basics:
Setting a favicon. As with many aspects of website creation, setting a favicon in Sandvox is easy. Simply go to the Appearance Tab of the Document Inspector. Under the Favicon dropdown, choose “Image Fill” and locate the image you want from your local disk. A larger version of the favicon will appear next to the Home Page in the Site Navigator.
Size and Aspect Ratio. While the favicon is sized at 16x16 pixels, you don’t have to reduce yours to that size. In fact, if you want your favicon to look good on Retina displays, you need to supply an image that’s at least 32x32 pixels. Sandvox reduces the image to the correct size, so you don’t need to worry about that. You do have to make sure your image still looks good when scaled down to favicon size. That means the image must be extremely simple. A letter of the alphabet, a recognizable shape, or a splash of color. A digital photo of your friends is probably not going to be recognizable at such a tiny size!
Much more important than the size is the aspect ratio. The favicon is a square, so if you provide Sandvox with an image with a different width to length ratio, it will be cropped either vertically or horizontally. We recommend you do the cropping yourself so you have control of exactly what is shown as your favicon.
If you want to use part of an image as your favicon, you can use the Preview app to extract it quickly and easily. With your image open in the Preview app — duplicate it first so you don’t overwrite the original — draw a square using the Rectangular Selection tool (which is enabled by default). Hold down the shift key to constrain your selection to a square shape. Don’t worry about getting the square at the correct place and with the correct size, as it’s very easy to drag and resize it. The app will tell you the size of the square as you draw it!
Once you’re satisfied with the square that you’ve drawn, choose “Show Edit Toolbar” under the View menu, then click the crop icon. Now you have a source image suitable for a favicon!
Check to see how your favicon looks on as many browsers as possible to gauge how your visitors will see it. The way a favicon is displayed and utilized varies across web browsers. In Safari, for example, the favicon is shown at the left of the address bar before the URL, visible only when your website is shown. In Firefox and Chrome, it’s part of the tab itself, visible all the time. These three browsers also use the favicon in their browser history and bookmarks folders.
While the favicon may be the smallest element of your site, it is important in making your website recognizable and memorable. If you have the resources, we recommend creating your own favicon, or at least very thoughtfully considering what favicon you use.