{"id":10593,"date":"2019-06-03T10:37:37","date_gmt":"2019-06-03T10:37:37","guid":{"rendered":"https:\/\/ampforwp.com\/tutorials\/?post_type=ht_kb&#038;p=10593"},"modified":"2019-06-03T10:38:22","modified_gmt":"2019-06-03T10:38:22","slug":"how-to-add-favicon-in-amp","status":"publish","type":"ht_kb","link":"https:\/\/ampforwp.com\/tutorials\/article\/how-to-add-favicon-in-amp\/","title":{"rendered":"How to add Favicon in AMP"},"content":{"rendered":"\n<p> A favicon, also known as a shortcut icon, website icon, tab icon, URL icon, or bookmark icon, is a file containing one or more small icons, associated with a particular website or web page.\u00a0 <\/p>\n\n\n\n<p><strong>Follow the simple steps  to Add Favicon in AMP:<\/strong><\/p>\n\n\n\n<p><strong>Step 1:<\/strong> You can add a favicon or site icon from the <strong>WordPress Dashboard<\/strong> -> <strong>Appearance -> Customize<\/strong> <\/p>\n\n\n\n<div class=\"wp-block-image\"><figure class=\"aligncenter\"><img decoding=\"async\" loading=\"lazy\" width=\"330\" height=\"190\" src=\"https:\/\/ampforwp.com\/tutorials\/wp-content\/uploads\/2019\/06\/customize-1.png\" alt=\"\" class=\"wp-image-10595\" srcset=\"https:\/\/ampforwp.com\/tutorials\/wp-content\/uploads\/2019\/06\/customize-1.png 330w, https:\/\/ampforwp.com\/tutorials\/wp-content\/uploads\/2019\/06\/customize-1-300x173.png 300w, https:\/\/ampforwp.com\/tutorials\/wp-content\/uploads\/2019\/06\/customize-1-50x29.png 50w, https:\/\/ampforwp.com\/tutorials\/wp-content\/uploads\/2019\/06\/customize-1-60x35.png 60w, https:\/\/ampforwp.com\/tutorials\/wp-content\/uploads\/2019\/06\/customize-1-100x58.png 100w\" sizes=\"(max-width: 330px) 100vw, 330px\" \/><\/figure><\/div>\n\n\n\n<p> <strong>Step 2:<\/strong> Click on the &#8220;<strong>Site Identify<\/strong>&#8221; tab.  <\/p>\n\n\n\n<div class=\"wp-block-image\"><figure class=\"aligncenter\"><img decoding=\"async\" loading=\"lazy\" width=\"307\" height=\"442\" src=\"https:\/\/ampforwp.com\/tutorials\/wp-content\/uploads\/2019\/06\/customize-2.png\" alt=\"\" class=\"wp-image-10598\" srcset=\"https:\/\/ampforwp.com\/tutorials\/wp-content\/uploads\/2019\/06\/customize-2.png 307w, https:\/\/ampforwp.com\/tutorials\/wp-content\/uploads\/2019\/06\/customize-2-208x300.png 208w, https:\/\/ampforwp.com\/tutorials\/wp-content\/uploads\/2019\/06\/customize-2-35x50.png 35w, https:\/\/ampforwp.com\/tutorials\/wp-content\/uploads\/2019\/06\/customize-2-42x60.png 42w, https:\/\/ampforwp.com\/tutorials\/wp-content\/uploads\/2019\/06\/customize-2-69x100.png 69w\" sizes=\"(max-width: 307px) 100vw, 307px\" \/><\/figure><\/div>\n\n\n\n<p><strong>Step 3:<\/strong> The site identity section in customizer allows you to upload your site icon. Simply click on the select file button and then upload the image you want to use as a site icon.  <\/p>\n\n\n\n<div class=\"wp-block-image\"><figure class=\"aligncenter\"><img decoding=\"async\" loading=\"lazy\" width=\"300\" height=\"656\" src=\"https:\/\/ampforwp.com\/tutorials\/wp-content\/uploads\/2019\/06\/customize-6.png\" alt=\"\" class=\"wp-image-10610\" srcset=\"https:\/\/ampforwp.com\/tutorials\/wp-content\/uploads\/2019\/06\/customize-6.png 300w, https:\/\/ampforwp.com\/tutorials\/wp-content\/uploads\/2019\/06\/customize-6-137x300.png 137w, https:\/\/ampforwp.com\/tutorials\/wp-content\/uploads\/2019\/06\/customize-6-23x50.png 23w, https:\/\/ampforwp.com\/tutorials\/wp-content\/uploads\/2019\/06\/customize-6-27x60.png 27w, https:\/\/ampforwp.com\/tutorials\/wp-content\/uploads\/2019\/06\/customize-6-46x100.png 46w\" sizes=\"(max-width: 300px) 100vw, 300px\" \/><\/figure><\/div>\n\n\n\n<p><strong>Step 4: <\/strong>Click on the &#8220;Publish&#8221; button. <\/p>\n\n\n\n<h4>The output of Favicon in AMP<\/h4>\n\n\n\n<figure class=\"wp-block-image\"><img decoding=\"async\" loading=\"lazy\" width=\"1024\" height=\"403\" src=\"https:\/\/ampforwp.com\/tutorials\/wp-content\/uploads\/2019\/06\/customize-7-1024x403.png\" alt=\"\" class=\"wp-image-10612\" srcset=\"https:\/\/ampforwp.com\/tutorials\/wp-content\/uploads\/2019\/06\/customize-7-1024x403.png 1024w, https:\/\/ampforwp.com\/tutorials\/wp-content\/uploads\/2019\/06\/customize-7-300x118.png 300w, https:\/\/ampforwp.com\/tutorials\/wp-content\/uploads\/2019\/06\/customize-7-768x302.png 768w, https:\/\/ampforwp.com\/tutorials\/wp-content\/uploads\/2019\/06\/customize-7-50x20.png 50w, https:\/\/ampforwp.com\/tutorials\/wp-content\/uploads\/2019\/06\/customize-7-60x24.png 60w, https:\/\/ampforwp.com\/tutorials\/wp-content\/uploads\/2019\/06\/customize-7-100x39.png 100w, https:\/\/ampforwp.com\/tutorials\/wp-content\/uploads\/2019\/06\/customize-7.png 1352w\" sizes=\"(max-width: 1024px) 100vw, 1024px\" \/><\/figure>\n\n\n\n<p><strong>That\u2019s it for this tutorial!<\/strong><\/p>\n\n\n\n<p>We hope it helped you. If you have any feedback or questions, then please share them in the comments section below.<\/p>\n<div id=\"div-1\" class=\"hkb-feedback\">\n\t\t\t<strong class=\"ht-mobile-exit__title\">Ask your Questions Directly!<\/strong><br>\n\t\t\t<div class=\"hkb_widget_exit__content\" style=\"font-size: 14px;\">If you can't find the solutions in this article, then just ask us in the comments and we will answer it for you!<\/div>\n\t\t\t<a href=\"https:\/\/ampforwp.com\/support\/#contact\" id=\"button\" target=\"_blank\" rel=\"noopener noreferrer\"><button>Yes, I have a Question<\/button><\/a>\n\t\t<\/div>","protected":false},"excerpt":{"rendered":"<p>A favicon, also known as a shortcut icon, website icon, tab icon, URL icon, or bookmark icon, is a file containing one or more small icons, associated with a particular website or web page.\u00a0 Follow the simple steps to Add Favicon in AMP: Step 1: You can add a favicon&#8230;<\/p>\n","protected":false},"author":18,"comment_status":"open","ping_status":"closed","template":"","format":"standard","meta":[],"ht-kb-category":[34],"ht-kb-tag":[],"_links":{"self":[{"href":"https:\/\/ampforwp.com\/tutorials\/wp-json\/wp\/v2\/ht-kb\/10593"}],"collection":[{"href":"https:\/\/ampforwp.com\/tutorials\/wp-json\/wp\/v2\/ht-kb"}],"about":[{"href":"https:\/\/ampforwp.com\/tutorials\/wp-json\/wp\/v2\/types\/ht_kb"}],"author":[{"embeddable":true,"href":"https:\/\/ampforwp.com\/tutorials\/wp-json\/wp\/v2\/users\/18"}],"replies":[{"embeddable":true,"href":"https:\/\/ampforwp.com\/tutorials\/wp-json\/wp\/v2\/comments?post=10593"}],"version-history":[{"count":14,"href":"https:\/\/ampforwp.com\/tutorials\/wp-json\/wp\/v2\/ht-kb\/10593\/revisions"}],"predecessor-version":[{"id":10614,"href":"https:\/\/ampforwp.com\/tutorials\/wp-json\/wp\/v2\/ht-kb\/10593\/revisions\/10614"}],"wp:attachment":[{"href":"https:\/\/ampforwp.com\/tutorials\/wp-json\/wp\/v2\/media?parent=10593"}],"wp:term":[{"taxonomy":"ht_kb_category","embeddable":true,"href":"https:\/\/ampforwp.com\/tutorials\/wp-json\/wp\/v2\/ht-kb-category?post=10593"},{"taxonomy":"ht_kb_tag","embeddable":true,"href":"https:\/\/ampforwp.com\/tutorials\/wp-json\/wp\/v2\/ht-kb-tag?post=10593"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}