August 15, 2011

Custom Favicons

Account Levels: This feature is available to all Pro plans.

A favicon (short for ''favorite icon'') is a small icon (16x16 pixels) used by some web browsers to identify your site. It will appear in the address bar of the browser when you are viewing the site, and if you bookmark the site, it will show up in your Favorites or Bookmarks menu next to the site's name as well.

As of September 2012, Firefox does not display the favicon for websites in the address bar. The favicon will display in the browser tab only when using Firefox.

Create the favicon.ico file

You will need to create the icon and save it in a special file format. First, create a 16 by 16 pixel .gif file using image editing software. You will then need to convert the file to the .ico format. If you are using Windows, you can download IrfanView, a free graphics viewer that can do this type of file conversion.

Another option is to use an online favicon creator like FavIcon from Pics. You can upload any type or size of image file and it will generate an icon file for you in the proper format and with the proper favicon.ico filename (the site will provide you with a compressed zip file containing your new favicon).

Upload favicon.ico to your account

Once you have created your favicon.ico file, you will need to upload it to your Typepad account. To do this, you can use the File Manager by selecting the File Manger link under the Library dropdown in the navigation. Additional information about uploading files is available at Using the File Manager.

Please note that the file MUST be named exactly favicon.ico.

The favicon.ico file should be uploaded to your Home folder. The Home folder is the one that you are in when you first come to the File Manager. The Upload a New File area of the File Manager will tell you what folder you are uploading to, so you can check that to make sure it says "Home" and not the name of a another folder before you upload.

Favicons with domain mapping

If you have set up Domain Mapping to point your domain name to a specific blog on your account rather than to your entire site, then you may need to upload the favicon.ico file to the specific folder for that blog. In this situation, the blog folder is the home or "root" folder for the domain.

View the favicon with your browser

After you have uploaded your favicon, many browsers will find and display the favicon automatically when the site is viewed. Some browsers may require extra steps to be taken before the favicon shows up.

To see a favicon in Internet Explorer for Windows, the site needs to be added to the Favorites menu. After this, the favicon will show up in the Favorites menu next to the site's name, and in the address bar next to the site's URL when visiting the site.

Safari stores favicons in a special cache, so if you are replacing an existing favicon, you will need to clear Safari's icon cache to see the new favicon with that browser. Go to User > Library > Safari > Icons to empty the icon cache.

Other browsers, such as Firefox, may require a hard refresh (Ctrl + F5) that will clear the browser's cache and allow the new favicon to display. See the article on clearing your browser's cookies and cache for information specific to your browser.


Need design help?

Looking to launch a new blog? Have an itch to tweak your design or layout? Want a superior banner or design custom made specifically for your blog? We've got you covered!

Discover Typepad Services