Best practice for ordering icon 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?
html html5 icons meta favicon
add a comment |
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?
html html5 icons meta favicon
add a comment |
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?
html html5 icons meta favicon
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?
html html5 icons meta favicon
html html5 icons meta favicon
asked Nov 25 '18 at 4:32
Julian LachnietJulian Lachniet
38116
38116
add a comment |
add a comment |
3 Answers
3
active
oldest
votes
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?
– Julian Lachniet
Nov 27 '18 at 17:45
@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.
– Bharata
Nov 27 '18 at 21:07
add a comment |
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!
add a comment |
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.
add a comment |
Your Answer
StackExchange.ifUsing("editor", function () {
StackExchange.using("externalEditor", function () {
StackExchange.using("snippets", function () {
StackExchange.snippets.init();
});
});
}, "code-snippets");
StackExchange.ready(function() {
var channelOptions = {
tags: "".split(" "),
id: "1"
};
initTagRenderer("".split(" "), "".split(" "), channelOptions);
StackExchange.using("externalEditor", function() {
// Have to fire editor after snippets, if snippets enabled
if (StackExchange.settings.snippets.snippetsEnabled) {
StackExchange.using("snippets", function() {
createEditor();
});
}
else {
createEditor();
}
});
function createEditor() {
StackExchange.prepareEditor({
heartbeatType: 'answer',
autoActivateHeartbeat: false,
convertImagesToLinks: true,
noModals: true,
showLowRepImageUploadWarning: true,
reputationToPostImages: 10,
bindNavPrevention: true,
postfix: "",
imageUploader: {
brandingHtml: "Powered by u003ca class="icon-imgur-white" href="https://imgur.com/"u003eu003c/au003e",
contentPolicyHtml: "User contributions licensed under u003ca href="https://creativecommons.org/licenses/by-sa/3.0/"u003ecc by-sa 3.0 with attribution requiredu003c/au003e u003ca href="https://stackoverflow.com/legal/content-policy"u003e(content policy)u003c/au003e",
allowUrls: true
},
onDemand: true,
discardSelector: ".discard-answer"
,immediatelyShowMarkdownHelp:true
});
}
});
Sign up or log in
StackExchange.ready(function () {
StackExchange.helpers.onClickDraftSave('#login-link');
});
Sign up using Google
Sign up using Facebook
Sign up using Email and Password
Post as a guest
Required, but never shown
StackExchange.ready(
function () {
StackExchange.openid.initPostLogin('.new-post-login', 'https%3a%2f%2fstackoverflow.com%2fquestions%2f53464667%2fbest-practice-for-ordering-icon-link-tags-in-html-head%23new-answer', 'question_page');
}
);
Post as a guest
Required, but never shown
3 Answers
3
active
oldest
votes
3 Answers
3
active
oldest
votes
active
oldest
votes
active
oldest
votes
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?
– Julian Lachniet
Nov 27 '18 at 17:45
@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.
– Bharata
Nov 27 '18 at 21:07
add a comment |
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?
– Julian Lachniet
Nov 27 '18 at 17:45
@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.
– Bharata
Nov 27 '18 at 21:07
add a comment |
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
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
answered Nov 27 '18 at 16:39
BharataBharata
9,21261432
9,21261432
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?
– Julian Lachniet
Nov 27 '18 at 17:45
@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.
– Bharata
Nov 27 '18 at 21:07
add a comment |
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?
– Julian Lachniet
Nov 27 '18 at 17:45
@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.
– Bharata
Nov 27 '18 at 21:07
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?
– Julian Lachniet
Nov 27 '18 at 17:45
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?
– Julian Lachniet
Nov 27 '18 at 17:45
@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.
– Bharata
Nov 27 '18 at 21:07
@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.
– Bharata
Nov 27 '18 at 21:07
add a comment |
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!
add a comment |
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!
add a comment |
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!
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!
answered Nov 29 '18 at 4:03
Dipen ShahDipen Shah
7,18011529
7,18011529
add a comment |
add a comment |
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.
add a comment |
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.
add a comment |
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.
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.
answered Nov 25 '18 at 4:59
tshimkustshimkus
807919
807919
add a comment |
add a comment |
Thanks for contributing an answer to Stack Overflow!
- Please be sure to answer the question. Provide details and share your research!
But avoid …
- Asking for help, clarification, or responding to other answers.
- Making statements based on opinion; back them up with references or personal experience.
To learn more, see our tips on writing great answers.
Sign up or log in
StackExchange.ready(function () {
StackExchange.helpers.onClickDraftSave('#login-link');
});
Sign up using Google
Sign up using Facebook
Sign up using Email and Password
Post as a guest
Required, but never shown
StackExchange.ready(
function () {
StackExchange.openid.initPostLogin('.new-post-login', 'https%3a%2f%2fstackoverflow.com%2fquestions%2f53464667%2fbest-practice-for-ordering-icon-link-tags-in-html-head%23new-answer', 'question_page');
}
);
Post as a guest
Required, but never shown
Sign up or log in
StackExchange.ready(function () {
StackExchange.helpers.onClickDraftSave('#login-link');
});
Sign up using Google
Sign up using Facebook
Sign up using Email and Password
Post as a guest
Required, but never shown
Sign up or log in
StackExchange.ready(function () {
StackExchange.helpers.onClickDraftSave('#login-link');
});
Sign up using Google
Sign up using Facebook
Sign up using Email and Password
Post as a guest
Required, but never shown
Sign up or log in
StackExchange.ready(function () {
StackExchange.helpers.onClickDraftSave('#login-link');
});
Sign up using Google
Sign up using Facebook
Sign up using Email and Password
Sign up using Google
Sign up using Facebook
Sign up using Email and Password
Post as a guest
Required, but never shown
Required, but never shown
Required, but never shown
Required, but never shown
Required, but never shown
Required, but never shown
Required, but never shown
Required, but never shown
Required, but never shown