2. Use favicon_link_tag helper. Default image name : favicon.ico.
<%= favicon_link_tag %>
<%= favicon_link_tag 'apple-touch-icon-57x57.png', rel: 'apple-touch-icon', type: 'image/png', sizes: "57x57" %>
<%= favicon_link_tag 'apple-touch-icon-60x60.png', rel: 'apple-touch-icon', type: 'image/png', sizes: "60x60" %>
<%= favicon_link_tag 'apple-touch-icon-72x72.png', rel: 'apple-touch-icon', type: 'image/png', sizes: "72x72" %>
<%= favicon_link_tag 'apple-touch-icon-76x76.png', rel: 'apple-touch-icon', type: 'image/png', sizes: "76x76" %>
<%= favicon_link_tag 'apple-touch-icon-114x114.png', rel: 'apple-touch-icon', type: 'image/png', sizes: "114x114" %>
<%= favicon_link_tag 'apple-touch-icon-120x120.png', rel: 'apple-touch-icon', type: 'image/png', sizes: "120x120" %>
<%= favicon_link_tag 'apple-touch-icon-144x144.png', rel: 'apple-touch-icon', type: 'image/png', sizes: "144x144" %>
<%= favicon_link_tag 'apple-touch-icon-152x152.png', rel: 'apple-touch-icon', type: 'image/png', sizes: "152x152" %>
<%= favicon_link_tag 'apple-touch-icon-180x180.png', rel: 'apple-touch-icon', type: 'image/png', sizes: "180x180" %>
<%= favicon_link_tag 'favicon-32x32.png', rel: 'icon', type: 'image/png', sizes: "32x32" %>
<%= favicon_link_tag 'android-chrome-192x192.png', rel: 'icon', type: 'image/png', sizes: "192x192" %>
<%= favicon_link_tag 'favicon-96x96.png', rel: 'icon', type: 'image/png', sizes: "96x96" %>
<%= favicon_link_tag 'favicon-16x16.png', rel: 'icon', type: 'image/png', sizes: "16x16" %>
3. Verify by viewing the page source.
<link rel="shortcut icon" type="image/x-icon" href="https://d1b5oz78c0udqh.cloudfront.net/assets/favicon-0784d42434f39fe96f3736f3e47d1e9f.ico" /> <link rel="apple-touch-icon" type="image/png" href="https://d1b5oz78c0udqh.cloudfront.net/assets/apple-touch-icon-57x57-1f87fa73399b81c63cf77fee620b3f25.png" sizes="57x57" /> <link rel="apple-touch-icon" type="image/png" href="https://d1b5oz78c0udqh.cloudfront.net/assets/apple-touch-icon-60x60-421e797d9dc30906f3876c0bf72c8e98.png" sizes="60x60" /> <link rel="apple-touch-icon" type="image/png" href="https://d1b5oz78c0udqh.cloudfront.net/assets/apple-touch-icon-72x72-53f33feccdeb7a9428d3bfd3f9fdcb5c.png" sizes="72x72" /> <link rel="apple-touch-icon" type="image/png" href="https://d1b5oz78c0udqh.cloudfront.net/assets/apple-touch-icon-76x76-8d6db4af70c6c952ffbc34e742035187.png" sizes="76x76" /> <link rel="apple-touch-icon" type="image/png" href="https://d1b5oz78c0udqh.cloudfront.net/assets/apple-touch-icon-114x114-308d3819dfb621285ab6368f672a72fb.png" sizes="114x114" /> <link rel="apple-touch-icon" type="image/png" href="https://d1b5oz78c0udqh.cloudfront.net/assets/apple-touch-icon-120x120-15eedd3461f483a5b27828fa9ed789de.png" sizes="120x120" /> <link rel="apple-touch-icon" type="image/png" href="https://d1b5oz78c0udqh.cloudfront.net/assets/apple-touch-icon-144x144-5759a401867e2dfe239149695d7cd081.png" sizes="144x144" /> <link rel="apple-touch-icon" type="image/png" href="https://d1b5oz78c0udqh.cloudfront.net/assets/apple-touch-icon-152x152-9f15e1c9218a79ee781a128e8bfba79a.png" sizes="152x152" /> <link rel="apple-touch-icon" type="image/png" href="https://d1b5oz78c0udqh.cloudfront.net/assets/apple-touch-icon-180x180-2fc81325eec91ad63efb7d10ae0e1089.png" sizes="180x180" /> <link rel="icon" type="image/png" href="https://d1b5oz78c0udqh.cloudfront.net/assets/favicon-32x32-e6eebf5633792e63508f58260cfc98c6.png" sizes="32x32" /> <link rel="icon" type="image/png" href="https://d1b5oz78c0udqh.cloudfront.net/assets/android-chrome-192x192-b03a39be430b547b8448857ef3ed1960.png" sizes="192x192" /> <link rel="icon" type="image/png" href="https://d1b5oz78c0udqh.cloudfront.net/assets/favicon-96x96-93f5bc8d5e587ff2a07f4f6ea8349b09.png" sizes="96x96" /> <link rel="icon" type="image/png" href="https://d1b5oz78c0udqh.cloudfront.net/assets/favicon-16x16-ecb043d6bec4bf88aa1435bfa04000c2.png" sizes="16x16" />This should take the CDN for all static assets score from 90/100 to 100/100 on WebPageTest.
No comments:
Post a Comment