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?
Best practice for ordering icon <link> tags in HTML head [closed]
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:
- Most desktop browsers:
16x16,32x32, "as big as possible" - Android Chrome:
192x192(Add to Homescreen on smartphones) - Google TV:
96x96
The additional information about classic and not classic favicons:
- Favicons - Best practices (A lot of information a not classic favicons)
- Creating custom tiles for IE11 websites on MSDN
- Here's Everything You Need to Know About Favicons in 2017
- Configuring Web Applications
- Microsoft defines the tile picture
- Favicon Generator
This doesn't answer my question about the order of icon sizes, which is what I asked. What order should I declare the icons in? –
Sherillsherilyn
@JulianLachniet, like I already wrote: if you want to save the server resources, then I would prefer to use from smallest to largest order. But if you want to give the users best quality icons then use from largest to smallest order. –
Unseasonable
From the HTML5 specs:
The specified resource is an icon representing the page or site, and should be used by the user agent when representing the page in the user interface.
Icons could be auditory icons, visual icons, or other kinds of icons. If multiple icons are provided, the user agent must select the most appropriate icon according to the type, media, and sizes attributes. If there are multiple equally appropriate icons, user agents must use the last one declared in tree order at the time that the user agent collected the list of icons. If the user agent tries to use an icon but that icon is determined, upon closer examination, to in fact be inappropriate (e.g. because it uses an unsupported format), then the user agent must try the next-most-appropriate icon as determined by the attributes.
It really depends on web browser to determine which icon to use, so in my opinion ordering should not be that much of an issue. I would suggest you to follow same approach as in the example in the specs.
<link rel=icon href=mac.icns sizes="128x128 512x512 8192x8192 32768x32768">
Hope this helps!
I would recommend going from largest to smallest for each rel tag. The device or user agent should then use the highest resolution image that it can support.
According to Mathias Bynens, browsers that don't recognize the sizes attribute will use the last icon listed. You may want to order your icons from largest to smallest like so:
<link rel="icon" type="image/png" href="/favicon-32x32.png" sizes="32x32">
<link rel="icon" type="image/png" href="/favicon-16x16.png" sizes="16x16">
That way older devices don't waste bandwidth downloading higher resolutions than they can display.
Although you didn't ask, you might want to support Apple touchscreen devices like the iPhone and iPad, like so:
<link rel="apple-touch-icon" href="/apple-touch-icon-180x180.png" sizes="180x180">
You must either set the rel attribute to apple-touch-icon (in which case you can name the file how you like), or put a file named apple-touch-icon.png in your document root, and the device will find it even without a link tag.
Thankfully we now live in an era where software that doesn't support the sizes attribute or PNG files are rare. However, SVG files are still not supported by some browsers, notably Safari.
© 2022 - 2024 — McMap. All rights reserved.