Resources ⮞ Icons

This page discusses the various icons used to represent websites.

Ideally a standard would exist which prescribes a small number of icons which could represent websites on all platforms and by all browsers. Unfortunately, no such standard exists, so it is necessary to create different sets of icons to cater to all the differing demands, which drives up the cost of creating websites. Each set of icons is discussed here in a different section:

Note : many details about website icons appear in Audrey Roy Greenfeld’s CheatSheet.

Note : this page does not discuss icon or emoji fonts, i.e. fonts containing icons or emojis.

Favicon.ico Icons 

All websites should have favicon.ico icons.

This traditional set of icons needed by Microsoft browsers since Internet Explorer 5 — and compatible with all current browsers — must be saved in an ICO file, typically with the name favicon.ico. This file will contain one or more images in one or more image formats.

Note : with browsers which support HTML 5, it is possible to put each image in a separate PNG file; this is discussed below in Favicon.ico HTML 5 Images.

Note : many programs can create favicon.ico files. For simple needs I recommend an old free version of IcoFx, which is available at FileHippo. For the needs of professional website designers, I recommend the current paid version of IcoFx, which is available at IcoFx.ro.

Favicon.ico ICO File 

An ICO file contains one or more icons of different sizes and formats. For example, the favicon.ico file used by this website contains these five icons:

16x16 Logo 24x24 Logo 32x32 Logo 48x48 Logo 64x64 Logo

The default is to name the ICO file favicon.ico and to put this icon file in the website’s root directory. The file, however, can have any name with the extension .ico if the pathname of the icon is specified in a <link> tag. The format of the tag has varied over the years, but the following is best for compatibility with both ancient and modern versions of the various browsers:

<link rel="shortcut icon" type="image/x-icon" href="pathname">

For example, on this site I have named the file favicon.ico, put this file in the http:/​/www.upsdell.com/ root directory, and put the following tag in the Browser News pages, which are stored in http://​www.upsdell.com/​BrowserNews/:

<link rel="shortcut icon" type="image/x-icon" href="../favicon.ico">

Favicon.ico Images & Image Formats 

The ideal favicon.ico file will contain both different sizes and different formats of icons. The sizes should be:

The ideal favicon.ico file will contain images in these formats:

Note : originally the images in the ICO files had to be BMP images, but starting with Internet Explorer for Windows Vista, the images can be the more compact PNG images. Because Windows Vista and older versions of Windows are no longer supported, it can be acceptable to put only PNG images in today’s ICO files.

Favicon.ico HTML 5 Images 

With HTML 5 it is possible to put the icons in separate PNG files by adding <link> tags to specify pathnames to the icons:

<link rel="icon" type="image/png" sizes="16x16" href="pathname_to_16x16.png">
<link rel="icon" type="image/png" sizes="32x32" href="pathname_to_32x32.png">
<link rel="icon" type="image/png" sizes="64x64" href="pathname_to_64x64.png">
<link rel="icon" type="image/png" sizes="96x96" href="pathname_to_96x96.png">

If you do this, however, you must still create a favicon.ico file to support older browsers.

Apple Touch Icons 

Only websites which should be accessed using Apple iOS Add to Home Screen, working as apps, need these icons.

Apple Touch - The Icons 

PNG files in these icon sizes are required:

Apple Touch - The Tags 

In addition, with HTML 5 these <link> tags should appear in the pages, the first for 120x120 pixel icons:

<link rel="apple-touch-icon" href="pathname_to_120x120_icon.png">
<link rel="apple-touch-icon" sizes="180x180" href="pathname_to_180x180_icon.png">
<link rel="apple-touch-icon" sizes="152x152" href="pathname_to_152x152_icon.png">
<link rel="apple-touch-icon" sizes="167x167" href="pathname_to_167x167_icon.png">

If the <link> tags cannot be found, the device will search the website’s root directory for files whose names begin with apple-touch-icon, for example apple-touch-icon.png and apple-touch-icon-80x80.png.

Windows Metro Icons 

Only websites which should be accessed through Windows Metro, working as apps, need these icons.

Windows Metro requires, ideally, five additional metro tiles, a Metro XML file, and bits of Metro HTML.

Note : Microsoft offers a page about creating custom tiles for IE11 websites.

Metro Tiles 

The icons for the tiles must be in separate PNG files, with sizes:

For example, here are my metro 70x70 small and 310x150 wide tiles:

70x70 Tile 310x150 Tile

Metro XML File 

There must also be a file whose default name is browserconfig.xml in the website’s root directory, giving the pathnames to the icons, as well as a background tile colour. In this website, for example, the XML file contains:

<?xml version="1.0" encoding="utf-8"?>
<browserconfig>
    <msapplication>
        <tile>
            <square70x70logo   src="http://www.upsdell.com/ico/metro70x70.png" />
            <square150x150logo src="http://www.upsdell.com/ico/metro150x150.png" />
            <square310x310logo src="http://www.upsdell.com/ico/metro310x310.png" />
            <wide310x150logo   src="http://www.upsdell.com/ico/metro310x150.png" />
            <TileColor>#191970</TileColor>
        </tile>
     </msapplication>
</browserconfig>
	

Metro HTML 

Internet Explorer 10

For IE 10 Metro there must be <meta> tags in each page working as an app, giving a background tile colour and a pathname to one of the tile’s PNG files. In this website, for example, the <meta> tags are:

<meta name="msapplication-TileColor" content="#191970">
<meta name="msapplication-TileImage" content="http://www.upsdell.com/ico/metro144x144.png">

And, in this website, the tile is:

144x144 Tile

Internet Explorer 11

For IE 11 Metro there must be <meta> tags in each page working as an app, giving an app name, a tooltip, and the location of the browserconfig.xml file:

<meta name="application-name" content="app_name">
<meta name="msapplication-tooltip" content="app_tooltip">
<meta name="msapplication-config" content="pathname_to_browserconfig.xml">

Web Manifest Icons 

Icon names and sizes may be specified in a Web App Manifest file.

You can find details about this file in the Mozilla Development Network’s Web App Manifest page.

Note that this does not prescribe any new icons: it merely describes a mechanism whereby web apps can discover how they should launch and where their icons may be found.

Android Adaptive Icons 

Google has prescribed ‘adaptive icons’ for use with Android O, and proffers software to create them.

For details, see Adaptive Icons.

Miscellaneous Icons I 

PNG files in these sizes are commonly needed:

With HTML 5, for each of these which you create — but not the Apple icon — you should also add a <link> tag like this:

<link rel="icon" type="image/png" sizes="sizes" href="pathname_to_icon.png">

For example:

<link rel="icon" type="image/png" sizes="128x128" href="http://www.upsdell.com/ico/icon128x128.png">

For the Apple precomposed icon, you should instead add:

<link rel="apple-touch-icon-precomposed" href="http://www.upsdell.com/ico/icon152x152.png">

Miscellaneous Icons II 

PNG files in these sizes are sometimes needed:

With HTML 5, for each of these which you create — but not the Apple icons — you should also add a <link> tag like this:

<link rel="icon" type="image/png" sizes="sizes" href="pathname_to_icon.png">

For the Apple icons, you should instead add:

<link rel="apple-touch-icon" sizes="sizes" href="pathname_to_icon.png">

For example:

<link rel="apple-touch-icon" sizes="57x57" href="http://www.upsdell.com/apple-touch-icon-57x57.png">

 

 Top of Page         Legal Notices