Best practice for ordering icon tags in HTML head












2















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?










share|improve this question



























    2















    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?










    share|improve this question

























      2












      2








      2








      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?










      share|improve this question














      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






      share|improve this question













      share|improve this question











      share|improve this question




      share|improve this question










      asked Nov 25 '18 at 4:32









      Julian LachnietJulian Lachniet

      38116




      38116
























          3 Answers
          3






          active

          oldest

          votes


















          0





          +150









          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






          share|improve this answer
























          • 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



















          1














          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!






          share|improve this answer































            0














            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.






            share|improve this answer























              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
              });


              }
              });














              draft saved

              draft discarded


















              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









              0





              +150









              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






              share|improve this answer
























              • 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
















              0





              +150









              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






              share|improve this answer
























              • 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














              0





              +150







              0





              +150



              0




              +150





              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






              share|improve this answer













              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







              share|improve this answer












              share|improve this answer



              share|improve this answer










              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



















              • 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













              1














              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!






              share|improve this answer




























                1














                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!






                share|improve this answer


























                  1












                  1








                  1







                  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!






                  share|improve this answer













                  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!







                  share|improve this answer












                  share|improve this answer



                  share|improve this answer










                  answered Nov 29 '18 at 4:03









                  Dipen ShahDipen Shah

                  7,18011529




                  7,18011529























                      0














                      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.






                      share|improve this answer




























                        0














                        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.






                        share|improve this answer


























                          0












                          0








                          0







                          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.






                          share|improve this answer













                          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.







                          share|improve this answer












                          share|improve this answer



                          share|improve this answer










                          answered Nov 25 '18 at 4:59









                          tshimkustshimkus

                          807919




                          807919






























                              draft saved

                              draft discarded




















































                              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.




                              draft saved


                              draft discarded














                              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





















































                              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







                              Popular posts from this blog

                              Feedback on college project

                              Futebolista

                              Albești (Vaslui)