diff --git a/asset/css/markbind.css b/asset/css/markbind.css
index 56850ec7cf..bd323dbb86 100644
--- a/asset/css/markbind.css
+++ b/asset/css/markbind.css
@@ -23,6 +23,19 @@ pre > code.hljs {
     outline: none !important;
 }
 
+.fa.fa-anchor {
+    color: #ccc;
+    display: none;
+    font-size: 14px;
+    margin-left: 10px;
+    padding: 3px;
+    text-decoration: none;
+}
+
+.fa.fa-anchor:hover {
+    color: #555;
+}
+
 .markbind-table {
     width: auto;
 }
diff --git a/asset/js/setup.js b/asset/js/setup.js
index 094a68f313..168c00424e 100644
--- a/asset/js/setup.js
+++ b/asset/js/setup.js
@@ -15,9 +15,21 @@ function flattenModals() {
   });
 }
 
+function setupAnchorVisibility() {
+  jQuery('h1, h2, h3, h4, h5, h6').each((index, heading) => {
+    jQuery(heading).on('mouseenter', function () {
+      jQuery(this).children('.fa.fa-anchor').show();
+    });
+    jQuery(heading).on('mouseleave', function () {
+      jQuery(this).children('.fa.fa-anchor').hide();
+    });
+  });
+}
+
 function executeAfterMountedRoutines() {
   flattenModals();
   scrollToUrlAnchorHeading();
+  setupAnchorVisibility();
 }
 
 function setupSiteNav() {
diff --git a/docs/userGuide/contentAuthoring.md b/docs/userGuide/contentAuthoring.md
index 7286c9a715..7ff2df21ae 100644
--- a/docs/userGuide/contentAuthoring.md
+++ b/docs/userGuide/contentAuthoring.md
@@ -589,4 +589,12 @@ Note:
 - Footers should not be nested in other components or HTML tags. If found inside, they will be shifted outside to be rendered properly.
 - [MarkBind components](#use-components) and [includes](#include-contents) are not supported in footers.
 
-</div>
+### Heading Anchors
+
+Your site's readers may want to obtain a link to a heading within a page, to share with someone else for example.
+
+MarkBind automatically generates heading anchors for your page.
+
+When the reader hovers over a heading in your page, a small anchor icon <i class="fas fa-anchor"></i> will become visible next to the heading. Clicking this icon will redirect the page to that heading, producing the desired URL in the URL bar that the reader can share with someone else. Try it with the headings on this page!
+
+</div>
\ No newline at end of file
diff --git a/lib/Page.js b/lib/Page.js
index 3d685dfd21..f819bba803 100644
--- a/lib/Page.js
+++ b/lib/Page.js
@@ -25,6 +25,7 @@ const PAGE_CONTENT_ID = 'page-content';
 const SITE_NAV_ID = 'site-nav';
 const TITLE_PREFIX_SEPARATOR = ' - ';
 
+const ANCHOR_HTML = '<a class="fa fa-anchor" href="#"></a>';
 const DROPDOWN_BUTTON_ICON_HTML = '<i class="dropdown-btn-icon">\n'
   + '<span class="glyphicon glyphicon-menu-down" aria-hidden="true"></span>\n'
   + '</i>';
@@ -219,16 +220,25 @@ Page.prototype.collectHeadingsAndKeywords = function () {
   this.collectHeadingsAndKeywordsInContent($(`#${CONTENT_WRAPPER_ID}`).html(), null);
 };
 
+/**
+ * Generates a heading selector based on the indexing level
+ * @param headingIndexingLevel to generate
+ */
+function generateHeadingSelector(headingIndexingLevel) {
+  let headingsSelector = 'h1';
+  for (let i = 2; i <= headingIndexingLevel; i += 1) {
+    headingsSelector += `, h${i}`;
+  }
+  return headingsSelector;
+}
+
 /**
  * Records headings and keywords inside content into this.headings and this.keywords respectively
  * @param content that contains the headings and keywords
  */
 Page.prototype.collectHeadingsAndKeywordsInContent = function (content, lastHeading) {
   let $ = cheerio.load(content);
-  let headingsSelector = 'h1';
-  for (let i = 2; i <= this.headingIndexingLevel; i += 1) {
-    headingsSelector += `, h${i}`;
-  }
+  const headingsSelector = generateHeadingSelector(this.headingIndexingLevel);
   $('modal').remove();
   $('panel').not('panel panel')
     .each((index, panel) => {
@@ -309,6 +319,21 @@ Page.prototype.concatenateHeadingsAndKeywords = function () {
   });
 };
 
+/**
+ * Adds anchor links to headings in the page
+ * @param content of the page
+ */
+Page.prototype.addAnchors = function (content) {
+  const $ = cheerio.load(content, { xmlMode: false });
+  if (this.headingIndexingLevel > 0) {
+    const headingsSelector = generateHeadingSelector(this.headingIndexingLevel);
+    $(headingsSelector).each((i, heading) => {
+      $(heading).append(ANCHOR_HTML.replace('#', `#${$(heading).attr('id')}`));
+    });
+  }
+  return $.html();
+};
+
 /**
  * Records the dynamic or static included files into this.includedFiles
  * @param dependencies array of maps of the external dependency and where it is included
@@ -471,6 +496,7 @@ Page.prototype.generate = function (builtFiles) {
       .then(result => markbinder.resolveBaseUrl(result, fileConfig))
       .then(result => fs.outputFileAsync(this.tempPath, result))
       .then(() => markbinder.renderFile(this.tempPath, fileConfig))
+      .then(result => this.addAnchors(result))
       .then((result) => {
         this.content = htmlBeautify(result, { indent_size: 2 });
 
diff --git a/test/test_site/expected/bugs/index.html b/test/test_site/expected/bugs/index.html
index 8eba5ec171..3afa0d69a0 100644
--- a/test/test_site/expected/bugs/index.html
+++ b/test/test_site/expected/bugs/index.html
@@ -26,7 +26,7 @@
     </navbar>
   </div>
   <div class="website-content">
-    <h2 id="popover-initiated-by-trigger-honor-trigger-attribute">popover initiated by trigger: honor trigger attribute</h2>
+    <h2 id="popover-initiated-by-trigger-honor-trigger-attribute">popover initiated by trigger: honor trigger attribute<a class="fa fa-anchor" href="#popover-initiated-by-trigger-honor-trigger-attribute"></a></h2>
     <p><a href="https://github.com/MarkBind/markbind/issues/49">Issue #49</a></p>
     <p>Repro:</p>
     <p>
@@ -40,7 +40,7 @@ <h2 id="popover-initiated-by-trigger-honor-trigger-attribute">popover initiated
         </div>
       </div>
     </popover>
-    <h2 id="support-multiple-inclusions-of-a-modal">Support multiple inclusions of a modal</h2>
+    <h2 id="support-multiple-inclusions-of-a-modal">Support multiple inclusions of a modal<a class="fa fa-anchor" href="#support-multiple-inclusions-of-a-modal"></a></h2>
     <p><a href="https://github.com/MarkBind/markbind/issues/107">Issue #107</a></p>
     <p>Repro:</p>
     <div>
@@ -65,7 +65,7 @@ <h2 id="support-multiple-inclusions-of-a-modal">Support multiple inclusions of a
         </div>
       </modal>
     </div>
-    <h2 id="remove-extra-space-in-links">Remove extra space in links</h2>
+    <h2 id="remove-extra-space-in-links">Remove extra space in links<a class="fa fa-anchor" href="#remove-extra-space-in-links"></a></h2>
     <p><a href="https://github.com/MarkBind/markbind/issues/147">Issue #147</a></p>
     <p>Repro:</p>
     <p>This is a link. [
diff --git a/test/test_site/expected/index.html b/test/test_site/expected/index.html
index 4d8acec1c7..4b9b5fc461 100644
--- a/test/test_site/expected/index.html
+++ b/test/test_site/expected/index.html
@@ -26,12 +26,12 @@
   <div id="site-nav">
     <ul style="list-style-type: none; margin-left:-1em">
       <li style="margin-top: 10px">
-        <h2 id="navigation">Navigation</h2>
+        <h2 id="navigation">Navigation<a class="fa fa-anchor" href="#navigation"></a></h2>
       </li>
       <li style="margin-top: 10px"><a href="/test_site/index.html">Home 🏠</a></li>
       <li style="margin-top: 10px"><a href="/test_site/bugs/index.html">Open Bugs 🐛</a></li>
       <li style="margin-top: 10px">
-        <h3 id="testing-site-nav">Testing Site-Nav</h3>
+        <h3 id="testing-site-nav">Testing Site-Nav<a class="fa fa-anchor" href="#testing-site-nav"></a></h3>
       </li>
       <li style="margin-top: 10px"><button class="dropdown-btn dropdown-btn-open"><strong>Dropdown </strong> <span class="glyphicon glyphicon-search" aria-hidden="true"></span> title ✏️ 
  <i class="dropdown-btn-icon rotate-icon">
@@ -134,55 +134,55 @@ <h3 id="testing-site-nav">Testing Site-Nav</h3>
         </navbar>
       </div>
       <div class="website-content">
-        <h1 id="variables-that-reference-another-variable">Variables that reference another variable</h1>
+        <h1 id="variables-that-reference-another-variable">Variables that reference another variable<a class="fa fa-anchor" href="#variables-that-reference-another-variable"></a></h1>
         <p><span class="glyphicon glyphicon-education" aria-hidden="true"></span></p>
         <p>This variable can be referenced.</p>
         <p>References can be several levels deep.</p>
-        <h1 id="heading-with-multiple-keywords">Heading with multiple keywords</h1>
+        <h1 id="heading-with-multiple-keywords">Heading with multiple keywords<a class="fa fa-anchor" href="#heading-with-multiple-keywords"></a></h1>
         <p><span class="keyword">keyword 1</span>
           <span class="keyword">keyword 2</span></p>
-        <h1 id="heading-with-keyword-in-panel">Heading with keyword in panel</h1>
+        <h1 id="heading-with-keyword-in-panel">Heading with keyword in panel<a class="fa fa-anchor" href="#heading-with-keyword-in-panel"></a></h1>
         <panel header="Panel with keyword" expanded="">
           <span class="keyword">panel keyword</span></panel>
-        <h1 id="heading-with-included-keyword">Heading with included keyword</h1>
+        <h1 id="heading-with-included-keyword">Heading with included keyword<a class="fa fa-anchor" href="#heading-with-included-keyword"></a></h1>
         <div>
           <p><span class="keyword">included keyword</span></p>
         </div>
-        <h1 id="heading-with-nested-keyword">Heading with nested keyword</h1>
+        <h1 id="heading-with-nested-keyword">Heading with nested keyword<a class="fa fa-anchor" href="#heading-with-nested-keyword"></a></h1>
         <div>
           <div>
             <div>
               <span class="keyword">nested keyword</span></div>
           </div>
         </div>
-        <h1 id="normal-include">Normal include</h1>
+        <h1 id="normal-include">Normal include<a class="fa fa-anchor" href="#normal-include"></a></h1>
         <div>
-          <h3 id="establishing-requirements">Establishing Requirements</h3>
+          <h3 id="establishing-requirements">Establishing Requirements<a class="fa fa-anchor" href="#establishing-requirements"></a></h3>
           <p>
             <seg id="preview">Requirements gathering, requirements elicitation, requirements analysis, requirements capture are some of the terms commonly <strong>and</strong> interchangeably used to represent the activity of understanding what a software product should
               do.</seg>
           </p>
           <p>There are many techniques used during a requirements gathering. The following are some of the techniques.</p>
-          <h4 id="brainstorming">Brainstorming</h4>
+          <h4 id="brainstorming">Brainstorming<a class="fa fa-anchor" href="#brainstorming"></a></h4>
           <p>Brainstorming is a group activity designed to generate a large number of diverse and creative ideas for the solution of a problem. In a brainstorming session there are no &quot;bad&quot; ideas. The aim is to generate ideas; not to validate them.
             Brainstorming encourages you to &quot;think outside the box&quot; and put &quot;crazy&quot; ideas on the table without fear of rejection.</p>
-          <h4 id="user-surveys">User surveys</h4>
+          <h4 id="user-surveys">User surveys<a class="fa fa-anchor" href="#user-surveys"></a></h4>
           <p>Carefully designed questionnaires can be used to solicit responses and opinions from a large number of users regarding any current system or a new innovation.</p>
-          <h4 id="focus-groups">Focus groups</h4>
+          <h4 id="focus-groups">Focus groups<a class="fa fa-anchor" href="#focus-groups"></a></h4>
           <p>Focus groups are a kind of informal interview within an interactive group setting. A
             <tooltip content="e.g. potential users, beta testers">group of people</tooltip>
             are asked about their understanding of a specific issue or a process. Focus groups can bring out undiscovered conflicts and misunderstandings among stakeholder interests which can then be resolved or clarified as necessary.</p>
         </div>
-        <h1 id="include-segment">Include segment</h1>
+        <h1 id="include-segment">Include segment<a class="fa fa-anchor" href="#include-segment"></a></h1>
         <div>
           <p>Requirements gathering, requirements elicitation, requirements analysis, requirements capture are some of the terms commonly <strong>and</strong> interchangeably used to represent the activity of understanding what a software product should
             do.</p>
         </div>
-        <h1 id="dynamic-include">Dynamic include</h1>
+        <h1 id="dynamic-include">Dynamic include<a class="fa fa-anchor" href="#dynamic-include"></a></h1>
         <p>
           <panel src="/test_site\requirements\SpecifyingRequirements._include_.html" name="Dynamic Include" no-close="true" no-switch="true" header="Dynamic Include"></panel>
         </p>
-        <h1 id="boilerplate-include">Boilerplate include</h1>
+        <h1 id="boilerplate-include">Boilerplate include<a class="fa fa-anchor" href="#boilerplate-include"></a></h1>
         <div name="Boilerplate Referencing">
           <p>
             <panel src="/test_site\requirements\UserStories._include_.html" header="Boilerplate Includes" no-close=""></panel>
@@ -191,7 +191,7 @@ <h1 id="boilerplate-include">Boilerplate include</h1>
         <p>
           <panel src="/test_site\requirements\notInside._include_.html" name="Referencing specified path in boilerplate" no-close="true" no-switch="true" header="Referencing specified path in boilerplate"></panel>
         </p>
-        <h1 id="nested-include">Nested include</h1>
+        <h1 id="nested-include">Nested include<a class="fa fa-anchor" href="#nested-include"></a></h1>
         <div>
           <ol>
             <li><strong>Establishing requirements</strong>: <span>Requirements gathering, requirements elicitation, requirements analysis,
@@ -203,22 +203,22 @@ <h1 id="nested-include">Nested include</h1>
 specification that specifies how the product will address the requirements. </span></li>
           </ol>
         </div>
-        <h1 id="html-include">HTML include</h1>
+        <h1 id="html-include">HTML include<a class="fa fa-anchor" href="#html-include"></a></h1>
         <div>
           <p>This is a HTML document</p>
           <p><span>It is <strong>possible</strong> to use Markdown in HTML</span></p>
         </div>
-        <h1 id="mbd-mbdf-include">Mbd, Mbdf include</h1>
+        <h1 id="mbd-mbdf-include">Mbd, Mbdf include<a class="fa fa-anchor" href="#mbd-mbdf-include"></a></h1>
         <div>
           <p><em>MarkBind supports .mbd files.</em></p>
         </div>
         <div>
           <p><code>MarkBind supports .mbdf files.</code></p>
         </div>
-        <h1 id="include-from-another-markbind-site">Include from another Markbind site</h1>
+        <h1 id="include-from-another-markbind-site">Include from another Markbind site<a class="fa fa-anchor" href="#include-from-another-markbind-site"></a></h1>
         <div>
           <p>This is a page from another Markbind site.</p>
-          <h2 id="feature-list">Feature list</h2>
+          <h2 id="feature-list">Feature list<a class="fa fa-anchor" href="#feature-list"></a></h2>
           <p>It is a list of features (or functionalities) grouped according to some criteria such as priority (e.g. must-have, nice-to-have, etc. ), order of delivery, object or process related (e.g. order-related, invoice-related, etc.). Here is a sample
             feature list from Minesweeper (only a brief description has been provided to save space).</p>
           <ol>
@@ -228,45 +228,45 @@ <h2 id="feature-list">Feature list</h2>
             <li>Timer – Additional fixed time restriction on the player.</li>
           </ol>
           <img src="/test_site/sub_site/images/I'm not allowed to use my favorite tool.png"></div>
-        <h1 id="panel-without-src">Panel without src</h1>
+        <h1 id="panel-without-src">Panel without src<a class="fa fa-anchor" href="#panel-without-src"></a></h1>
         <panel header="## Panel without src header" expanded="">
           <div>
-            <h3 id="panel-without-src-content-heading">Panel without src content heading</h3>
+            <h3 id="panel-without-src-content-heading">Panel without src content heading<a class="fa fa-anchor" href="#panel-without-src-content-heading"></a></h3>
           </div>
         </panel>
-        <h1 id="panel-with-normal-src">Panel with normal src</h1>
+        <h1 id="panel-with-normal-src">Panel with normal src<a class="fa fa-anchor" href="#panel-with-normal-src"></a></h1>
         <panel header="## Panel with normal src header" src="/test_site\testPanels\PanelNormalSource._include_.html" expanded=""></panel>
-        <h1 id="panel-with-src-from-a-page-segment">Panel with src from a page segment</h1>
+        <h1 id="panel-with-src-from-a-page-segment">Panel with src from a page segment<a class="fa fa-anchor" href="#panel-with-src-from-a-page-segment"></a></h1>
         <panel header="## Panel with src from a page segment header" src="/test_site\testPanels\PanelSourceContainsSegment._include_.html#segment" expanded="" fragment="segment"></panel>
-        <h1 id="panel-with-boilerplate">Panel with boilerplate</h1>
+        <h1 id="panel-with-boilerplate">Panel with boilerplate<a class="fa fa-anchor" href="#panel-with-boilerplate"></a></h1>
         <panel header="## Boilerplate referencing" src="/test_site\testPanels\boilerTestPanel._include_.html" expanded=""></panel>
         <panel header="## Referencing specified path in boilerplate" src="/test_site\testPanels\notInside._include_.html" expanded=""></panel>
-        <h1 id="nested-panel">Nested panel</h1>
+        <h1 id="nested-panel">Nested panel<a class="fa fa-anchor" href="#nested-panel"></a></h1>
         <panel header="## Outer nested panel" src="/test_site\testPanels\NestedPanel._include_.html" expanded=""></panel>
-        <h1 id="nested-panel-without-src">Nested panel without src</h1>
+        <h1 id="nested-panel-without-src">Nested panel without src<a class="fa fa-anchor" href="#nested-panel-without-src"></a></h1>
         <panel header="## Outer nested panel without src" expanded="">
-          <h2 id="panel-content-of-outer-nested-panel">Panel content of outer nested panel</h2>
+          <h2 id="panel-content-of-outer-nested-panel">Panel content of outer nested panel<a class="fa fa-anchor" href="#panel-content-of-outer-nested-panel"></a></h2>
           <panel header="## Inner panel header without src" expanded="">
-            <h2 id="panel-content-of-inner-nested-panel">Panel content of inner nested panel</h2>
+            <h2 id="panel-content-of-inner-nested-panel">Panel content of inner nested panel<a class="fa fa-anchor" href="#panel-content-of-inner-nested-panel"></a></h2>
           </panel>
         </panel>
-        <h1 id="panel-with-src-from-another-markbind-site">Panel with src from another Markbind site</h1>
+        <h1 id="panel-with-src-from-another-markbind-site">Panel with src from another Markbind site<a class="fa fa-anchor" href="#panel-with-src-from-another-markbind-site"></a></h1>
         <panel header="## Panel with src from another Markbind site header" src="/test_site\sub_site\index._include_.html" expanded=""></panel>
       </div>
-      <h1 id="modal-with-panel-inside">Modal with panel inside</h1>
+      <h1 id="modal-with-panel-inside">Modal with panel inside<a class="fa fa-anchor" href="#modal-with-panel-inside"></a></h1>
       <p>
         <trigger for="modal-with-panel">trigger</trigger>
       </p>
       <modal title="modal title with panel inside" id="modal-with-panel">
         <panel header="## Panel inside modal" expanded="">
-          <h2 id="panel-content-inside-modal">Panel content inside modal</h2>
+          <h2 id="panel-content-inside-modal">Panel content inside modal<a class="fa fa-anchor" href="#panel-content-inside-modal"></a></h2>
         </panel>
       </modal>
-      <h1 id="unexpanded-panel">Unexpanded panel</h1>
+      <h1 id="unexpanded-panel">Unexpanded panel<a class="fa fa-anchor" href="#unexpanded-panel"></a></h1>
       <panel header="## Unexpanded panel header">
-        <h2 id="panel-content-of-unexpanded-panel-should-not-appear-in-search-data">Panel content of unexpanded panel should not appear in search data</h2>
+        <h2 id="panel-content-of-unexpanded-panel-should-not-appear-in-search-data">Panel content of unexpanded panel should not appear in search data<a class="fa fa-anchor" href="#panel-content-of-unexpanded-panel-should-not-appear-in-search-data"></a></h2>
         <panel header="## Panel header inside unexpanded panel should not appear in search data" expanded="">
-          <h2 id="panel-content-inside-unexpanded-panel-should-not-appear-in-search-data">Panel content inside unexpanded panel should not appear in search data</h2>
+          <h2 id="panel-content-inside-unexpanded-panel-should-not-appear-in-search-data">Panel content inside unexpanded panel should not appear in search data<a class="fa fa-anchor" href="#panel-content-inside-unexpanded-panel-should-not-appear-in-search-data"></a></h2>
         </panel>
       </panel>
     </div>
@@ -274,7 +274,7 @@ <h2 id="panel-content-inside-unexpanded-panel-should-not-appear-in-search-data">
 </div>
 <div id="flex-div"></div>
 <footer>
-  <h1 id="heading-in-footer-should-not-be-indexed">Heading in footer should not be indexed</h1>
+  <h1 id="heading-in-footer-should-not-be-indexed">Heading in footer should not be indexed<a class="fa fa-anchor" href="#heading-in-footer-should-not-be-indexed"></a></h1>
   <div class="text-center">
     This is a dynamic height footer that supports variables <span class="glyphicon glyphicon-tags" aria-hidden="true"></span> and markdown <span>😄</span>!
   </div>
diff --git a/test/test_site/expected/markbind/css/markbind.css b/test/test_site/expected/markbind/css/markbind.css
index 56850ec7cf..bd323dbb86 100644
--- a/test/test_site/expected/markbind/css/markbind.css
+++ b/test/test_site/expected/markbind/css/markbind.css
@@ -23,6 +23,19 @@ pre > code.hljs {
     outline: none !important;
 }
 
+.fa.fa-anchor {
+    color: #ccc;
+    display: none;
+    font-size: 14px;
+    margin-left: 10px;
+    padding: 3px;
+    text-decoration: none;
+}
+
+.fa.fa-anchor:hover {
+    color: #555;
+}
+
 .markbind-table {
     width: auto;
 }
diff --git a/test/test_site/expected/markbind/js/setup.js b/test/test_site/expected/markbind/js/setup.js
index 28e842c44e..168c00424e 100644
--- a/test/test_site/expected/markbind/js/setup.js
+++ b/test/test_site/expected/markbind/js/setup.js
@@ -9,6 +9,29 @@ function scrollToUrlAnchorHeading() {
   }
 }
 
+function flattenModals() {
+  jQuery('.modal').each((index, modal) => {
+    jQuery(modal).detach().appendTo(jQuery('#app'));
+  });
+}
+
+function setupAnchorVisibility() {
+  jQuery('h1, h2, h3, h4, h5, h6').each((index, heading) => {
+    jQuery(heading).on('mouseenter', function () {
+      jQuery(this).children('.fa.fa-anchor').show();
+    });
+    jQuery(heading).on('mouseleave', function () {
+      jQuery(this).children('.fa.fa-anchor').hide();
+    });
+  });
+}
+
+function executeAfterMountedRoutines() {
+  flattenModals();
+  scrollToUrlAnchorHeading();
+  setupAnchorVisibility();
+}
+
 function setupSiteNav() {
   // Add event listener for site-nav-btn to toggle itself and site navigation elements.
   const siteNavBtn = document.getElementById('site-nav-btn');
@@ -37,7 +60,7 @@ function setup() {
   const vm = new Vue({
     el: '#app',
     mounted() {
-      scrollToUrlAnchorHeading();
+      executeAfterMountedRoutines();
     },
   });
   setupSiteNav();
@@ -64,7 +87,7 @@ function setupWithSearch(siteData) {
       },
     },
     mounted() {
-      scrollToUrlAnchorHeading();
+      executeAfterMountedRoutines();
     },
   });
   setupSiteNav();
diff --git a/test/test_site/expected/sub_site/index.html b/test/test_site/expected/sub_site/index.html
index 3a6a0653bf..a3053f2a7c 100644
--- a/test/test_site/expected/sub_site/index.html
+++ b/test/test_site/expected/sub_site/index.html
@@ -20,7 +20,7 @@
 <div id="app">
     <div id="content-wrapper">
   <p>This is a page from another Markbind site.</p>
-  <h2 id="feature-list">Feature list</h2>
+  <h2 id="feature-list">Feature list<a class="fa fa-anchor" href="#feature-list"></a></h2>
   <p>It is a list of features (or functionalities) grouped according to some criteria such as priority (e.g. must-have, nice-to-have, etc. ), order of delivery, object or process related (e.g. order-related, invoice-related, etc.). Here is a sample feature
     list from Minesweeper (only a brief description has been provided to save space).</p>
   <ol>
diff --git a/test/test_site/expected/test_md_fragment.html b/test/test_site/expected/test_md_fragment.html
index 3ece571e18..4a12cfe4cb 100644
--- a/test/test_site/expected/test_md_fragment.html
+++ b/test/test_site/expected/test_md_fragment.html
@@ -19,7 +19,7 @@
 <body>
 <div id="app">
     <div id="content-wrapper">
-  <h1 id="some-heading">Some heading</h1>
+  <h1 id="some-heading">Some heading<a class="fa fa-anchor" href="#some-heading"></a></h1>
   <p>The <strong>quick</strong> brown fox jumps <em>over</em> the lazy dog.</p>
 </div>
 </div>