Search code examples
htmliconsmetafavicon

Best practice for ordering icon <link> tags in HTML head

I want to include <link> tags in my HTML head to various icons of different sizes. What are the best practices for ordering icon <link>s in the <head> tag? Does it matter what order I include them in? Smallest to largest? Largest to smallest?

Solution

  • I think you want to know the information only about favicons because your question has the tag favicon. In other case I can write a book about it. :-) I did not find the information about the order of the sizes, but I would do it from smallest to largest order because of saving from server resources.

    Internet Explorer 9 uses site icons in the following places:

    • Address bar (16x16)
    • New Tab page (32x32)
    • Taskbar button (32x32)
    • Pinned site browser UI (24x24)

    As you create your Pinned site, you might need additional icons to use in the following ways:

    • Jump List tasks (16x16)
    • Thumbnail Toolbar buttons (16x16)
    • Overlay icons (16x16)

    To achieve the best experience in Internet Explorer 9, your icons should support the following image sizes:

    • Recommended 16x16, 32x32, 48x48
    • Optimal 16x16, 24x24, 32x32, 64x64

    An ICO file can contain several pictures and Microsoft recommends to put 16x16, 32x32 and 48x48 versions of the icon in favicon.ico. For example, IE will use the 16x16 version for the address bar, and the 32x32 for a task bar shortcut.

    You can write the favicon like follows:

    <link rel="icon" href="/path/to/icons/favicon.ico">

    Modern desktop browsers (IE11, Chrome, Opera, Firefox...) prefer to use PNG icons. The usual expected sizes are 16x16, 32x32 and "as big as possible". For example, MacOS/Safari uses the 196x196 icon if it is the biggest it can find.

    The PNG icons are declared with:

    <link rel="icon" type="image/png" href="/path/to/icons/favicon-16x16.png" sizes="16x16">
<link rel="icon" type="image/png" href="/path/to/icons/favicon-32x32.png" sizes="32x32">
...

    Documentation: <link>: The External Resource Link element on MDN.

    What are the recommended sizes? Pick your favorite platforms:

    The additional information about classic and not classic favicons: