Fav It!
Contents
Fav It!
Fav It! allows you to upload a browser icon (also called a favicon) image file to your site, along with a mobile device touch icon file. Solo Build It! does the rest.
When you have successfully uploaded the image files, SBI! will rebuild your site and automatically code the icons.
Your visitors will then see the browser icon in the browser's address bar when they visit and when they bookmark any page on your site.
A browser icon lets your site stand out a bit more in a list of bookmarks and in RSS readers. People trust you easier... all with the help of your tiny browser icon.
And for visitors who save a link to your site on their mobile device home screen, the touch icon will represent your site on the screen.
What Are Browser Icons and Mobile Device Touch Icons?
A browser icon is a small image (an icon) associated with a website, or a particular subdomain or page of a site. You'll see them in three locations...
-
In the address bar, where the URL of the current page appears (see the screenshot below).
-
In the list of bookmarks/favorites in your browser (see the screenshot below).
-
Next to the page title in any tabs you may have open (see the screenshot below). This feature is not available in Safari.
A touch icon is an icon that displays on visitors' phone and tablet home screens when they add a link to your site to a device. Below is an example on an iPhone.
Browser Icons
Your browser icon will display in some browsers at 16x16 pixels. It's hard to design anything at that small size, so we set the size that the system will accept to 48x48 pixels. The image must be square.
Creating and Uploading a Browser Icon
- Click on Upload Browser Icon Image.
- Select your browser icon file. The image will upload automatically.
You can create your icon from scratch, or modify an existing image. For either one, ensure that it looks good at 16x16 pixels, and that it will work well to brand your website.
Use the same color scheme that you used with your site. If you can, use the font from the header logo as the font for the browser icon. If you have a logo image, make it square and 48x48 pixels (but be sure it looks good at 16x16).
The image can be in JPG (.jpg), PNG (.png) or GIF (.gif) format.
Once you're satisfied with your image, upload it...
-
Click on the Upload Browser Icon Image button to upload the image.
-
Select the image you want to upload. The image will upload automatically.
You'll then see 3 versions of your browser icon to the left of the headline, replacing the screenshot that was there. You'll also see two new buttons -- a gray Delete This Icon and a blue Upload a New Image.
After 10-15 minutes, load a page of your site into your browser. Check that the icon displays well and gives a good sense of your brand.
If you don't see your browser icon, or you see an older one (which you replaced with the one you just uploaded), refresh the page. If you still see the old icon, clear the browser's cache of your site's pages, quit the browser, then launch it again.
Deleting or Changing a Browser Icon
- Click on Upload a New Image to replace the existing browser icon image with a new one.
- You'll see the Upload Browser Icon Image button. Click on it and select the new image to upload. The image will upload automatically.
- If you don't want a browser icon for your site, click on the Delete This Icon button.
After uploading, the page changes. You can delete the existing browser icon (which results in your site having no browser icon at all), or upload a new icon to replace the existing one.
Click on Delete This Icon to delete the icon and have no browser icon. The 3 images on the left will be replaced by the default screenshot.
If you want to replace the existing image, click on Upload a New Image. Then click on the Upload Browser Icon Image button. Select the image you want to upload. The image will upload automatically.
You'll see the three versions of your new image to the left of the text.
Mobile Touch Icons
Your touch icon will display at 120x120 pixels on newer iPhones, 152x152 on newer iPads, and 192x192 on Android tablets, along with several other sizes for various other mobile devices.
Creating and Uploading a Mobile Touch Icon
- Click on Upload Touch Icon Image.
- Select your touch icon file. The file will upload automatically.
Design your image at 192x192 pixels. The image must be square.
You can create your icon from scratch, or modify an existing image. For either one, ensure that it looks good at 120x120, 152x152, and 192x192 pixels, and that it will work well to brand your website when viewed on a mobile device.
Use the same color scheme that you used with your site. If you can, use the font from the header logo as the font for the browser icon. If you have a logo image, make it square and ensure that it looks good at 192x192 pixels.
The image can be in JPG (.jpg), PNG (.png) or GIF (.gif) format.
Once you're satisfied with your image, upload it...
-
Click on the Upload Touch Icon Image button to upload the image.
-
Select the image you want to upload. The image will upload automatically.
You'll then see a version of your touch icon to the left of the headline, replacing the screenshot that was there. You'll also see a link ("Click here to see them all") to view all of the touch icon sizes in an overlay. And you'll also see two new buttons -- a gray Delete This Icon and a blue Upload a New Image.
After 10-15 minutes, load a page of your site into your phone or tablet's browser. Add the touch icon to the home screen. Check that the icon displays well and gives a good sense of your brand.
Deleting or Changing a Touch Icon
- Click on Upload a New Image to replace the existing touch icon image with a new one.
- You'll see the Upload Touch Icon Image button. Click on it and select the new image to upload. The image will upload automatically.
- If you don't want a touch icon for your site, click on the Delete This Icon button.
After uploading, the page changes. You can delete the existing touch icon (which results in your site having no touch icon at all), or upload a new icon to replace the existing one.
Click on Delete This Icon to delete the icon and have no touch icon. The image on the left will be replaced by the default screenshot. And the link to view the overlay will disappear.
If you want to replace the existing image, click on Upload a New Image. Then click on the Upload Touch Icon Image button. Select the image you want to upload. The image will upload automatically.
You'll see the version of your new image to the left of the text, plus the link to view the overlay of all the various sizes of the touch icon.