SmartGenFree copy-paste HTML & CSS snippets
GitHub
Image Code

HTML Favicon Code

A favicon is the small icon shown in browser tabs and bookmarks — one line of HTML in your <head> adds it.

Live Tool
favicon.html Live 

          

            
          

        

        

          
Preview

          

        

      

    


  

    
1How To Use

    
Follow these steps — no coding experience needed.

    
  1. Add your icon filePlace a small square image (ideally an .ico or .svg) at the root of your site.
  2. Paste the link tagsAdd them inside your , alongside your .</span></div></li><li><div class="step-body"><strong>Add an SVG version too</strong><span>Modern browsers prefer a scalable SVG favicon when both are available.</span></div></li></ol>
  </section>

  <section class="section">
    <h2><span class="section-num">2</span>Example Output</h2>
    <p class="section-hint">What this code looks like once it's on a real page.</p>
    <div class="panel"><p>Favicons make it much easier for visitors to find your tab among a dozen open ones — a small detail worth the one line of HTML.</p></div>
  </section>

  <section class="section">
    <h2><span class="section-num">3</span>Browser Compatibility</h2>
    <div class="table-wrap"><table class="compat-table">
    <thead><tr><th>Browser</th><th>Support</th><th>Notes</th></tr></thead>
    <tbody><tr><td>Chrome</td><td class="support-yes">✓ Supported</td><td>Full support</td></tr><tr><td>Firefox</td><td class="support-yes">✓ Supported</td><td>Full support</td></tr><tr><td>Safari</td><td class="support-yes">✓ Supported</td><td>Full support</td></tr><tr><td>Edge</td><td class="support-yes">✓ Supported</td><td>Full support</td></tr><tr><td>Opera</td><td class="support-yes">✓ Supported</td><td>Full support</td></tr><tr><td>Mobile browsers</td><td class="support-yes">✓ Supported</td><td>Full support, iOS & Android</td></tr></tbody></table></div>
    <p class="section-hint" style="margin-top:10px;">Supported in every current browser — Chrome, Firefox, Safari, Edge and Opera all render this identically, on both desktop and mobile.</p>
  </section>

  <section class="section">
      <h2><span class="section-num">→</span>Related Pages</h2>
      <p class="section-hint">More tools that pair naturally with this one.</p>
      <div class="related-grid"><a class="related-card" href="html5-frames.html"><span class="cat">HTML Templates</span><span class="ttl">HTML5 Page Frames</span></a><a class="related-card" href="image-code-generator.html"><span class="cat">HTML Generators</span><span class="ttl">Image Code Generator</span></a><a class="related-card" href="layout-templates.html"><span class="cat">HTML Templates</span><span class="ttl">HTML Layout Templates</span></a><a class="related-card" href="html-image-borders.html"><span class="cat">Image Codes</span><span class="ttl">HTML Image Border Code</span></a></div>
    </section>
</main>
<footer class="site-footer">
  <div class="container">
    <div class="footer-grid">
      <div class="footer-col footer-brand">
        <a class="brand" href="index.html"><span class="mark"><svg viewBox="0 0 24 24" fill="none" xmlns="http://www.w3.org/2000/svg" stroke="currentColor" stroke-width="1.7" stroke-linecap="round" stroke-linejoin="round" ><path d="M8 6L3 12l5 6"/><path d="M16 6l5 6-5 6"/><path d="M14 4l-4 16"/></svg></span><span>SmartGen</span></a>
        <p>An open, beta code library of free HTML & CSS generators, editors and copy-paste snippets, built and maintained by SmartGen.</p>
      </div>
      <div class="footer-col"><h4>Categories</h4><ul><li><a href="index.html#generators">HTML Generators</a></li><li><a href="index.html#editors">HTML Editors</a></li><li><a href="index.html#templates">HTML Templates</a></li><li><a href="index.html#text-codes">Text Codes</a></li><li><a href="index.html#tables">HTML Tables</a></li><li><a href="index.html#links">Link Codes</a></li><li><a href="index.html#images">Image Codes</a></li></ul></div>
      <div class="footer-col"><h4>More Categories</h4><ul><li><a href="index.html#marquee">Marquee Codes</a></li><li><a href="index.html#backgrounds">Background Codes</a></li><li><a href="index.html#scrollbox">Scrollbox Codes</a></li><li><a href="index.html#textbox">Textbox Codes</a></li><li><a href="index.html#colors">Color Codes</a></li><li><a href="index.html#characters">Character Codes</a></li><li><a href="index.html#reference">Reference</a></li></ul></div>
      <div class="footer-col"><h4>Project</h4><ul>
        <li><a href="https://github.com/bayzed123/smartgen-horizon/tree/main" target="_blank" rel="noopener">Source on GitHub</a></li>
        <li><a href="https://smartgentools.com" target="_blank" rel="noopener">SmartGen Tools</a></li>
        <li><a href="index.html">All tools</a></li>
      </ul></div>
    </div>
    <div class="footer-bottom">
      <span>© <span id="cur-year">2026</span> SmartGen. Code samples on this site are free to use in your own projects.</span>
      <span class="status-dot"><span class="dot"></span> Beta v1.0.0 · Active testing</span>
    </div>
  </div>
</footer>
<script>document.getElementById('cur-year').textContent = new Date().getFullYear();</script>
<script src="assets/js/Htmlapps.js"></script>
<script>(function(){
  function q(s){return document.querySelector(s);}
  function esc(s){return SGT.escapeHtml(s);}
  function update(){
    const path = esc(q('#fv-path').value.trim() || '/favicon.ico');
    const code = `<link rel="icon" href="${path}" type="image/x-icon">\n<link rel="icon" href="favicon.svg" type="image/svg+xml">\n<link rel="apple-touch-icon" href="apple-touch-icon.png">`;
    SGT.setCode(q('#code-out'), code);
    q('#preview-out').innerHTML = '<div style="display:flex;align-items:center;gap:8px;background:#fff;border:1px solid #E3E6F0;border-radius:8px 8px 0 0;padding:8px 14px;font-size:0.82rem;"><span style="width:14px;height:14px;border-radius:3px;background:#2451EA;display:inline-block;"></span> Your Page Title</div>';
  }
  SGT.bindTool(['#fv-path'], update);
})();</script>
</body>
</html>