FAVICONS

Prerequisite-reading: Web Standards & FTP

Desktop Favicons

Desktop favicons are the little 16x16 pixel icons next to the URL. Favicons also appear on browser tabs. An example of a favicon is shown below. These little images can help to reinforce your brand identity and help your users distinguish between tabs. Websites built to standards include this detail.

Favicon Tabs

Create a desktop favicon:

You can make a desktop favicon in 4 easy steps.

Favicons are 16x16 pixels, which means your may need to be creative in how your final design looks.

  1. You can create a 16x16 pixel image to be your favicon. There are services like favicon.cc that can assist you in making the favicon image. Save the image as “favicon.ico”.
  2. Upload the favicon.ico you just created to the root folder of your domain via your FTP client.
  3. In the head section of your HTML, place the following code:
	                <link rel="shortcut icon" href="favicon.ico">
                    <link rel="icon" href="favicon.ico">
                  
  1. Refresh your browser and ensure the favicon is updated and how you want it to appear to the user.

Mobile Favicons or "Touch Icons"

Mobile favicons will be displayed if a person saves your website to their home screen on a mobile device. Note: If you don’t have a mobile favicon defined then the phone OS automatically designates a screenshot of your webpage to be displayed as the icon. Websites built to standards include this detail.

Mobile Favicon

For a more in-depth look at mobile favicons, check out this link http://mathiasbynens.be/notes/touch-icons.

Create a mobile favicon:

You can make a desktop favicon in 4 easy steps.

The dimensions for your mobile favicon should be 144 × 144 pixels and these can be implemented just like regular favicons. You may want to use the same image as your desktop favicon, but you will still want to create a larger version for mobile.

Note: This will work for Apple and Android devices. It is big enough for high-resolution iPad and iPhone ‘Retina’ displays and it will scale down for lower resolution devices.

  1. Create a 144x144 pixel image to be your mobile favicon and save the image as “mobile_favicon.png”.
  2. Upload the mobile_favicon.png you just created to the root folder of your domain via your FTP client.
  3. In the head section of your HTML, place the following code:
	                <link rel="apple-touch-icon" href="mobile_favicon.png">
                  

Note: Again, this will work for Apple and Android devices.

  1. Refresh your browser and ensure the favicon is updated and how you want it to appear to the user.