A favicon is a small image displayed next to the page title in the browser tab.
Tip:
A favicon is a small image, so it should be a simple image with high contrast. You can generate the icons and codes by following the instruction from Favicon generator . The most common favicon formats are ICO, PNG, and SVG, JPEG, GIF.
To add a favicon to your website, either save your favicon image to the root directory of your webserver, or create a folder in the root directory called images, and save your favicon image in this folder. A common name for a favicon image is “favicon.ico”.
Next, add a
element, like this:</p>
<pre tabindex="0"><code><link rel="icon" href="https://example.com/image.ico">
<link rel="icon" type="image/gif" href="https://example.com/image.gif">
<link rel="icon" type="image/png" href="https://example.com/image.png">
// All browser except Safari
<link rel="icon" type="image/svg+xml" href="https://example.com/image.svg">
// For Safari only
<link rel="mask-icon" href="https://example.com/image.svg" color="red">
</code></pre>
</div>
</article>
<div class="updated-badge-container">
<span title="Updated @ 2025-01-28 13:10:42 -0800" style="cursor:help">
<svg xmlns="http://www.w3.org/2000/svg" width="130" height="20" class="updated-badge"><linearGradient id="b" x2="0" y2="100%"><stop offset="0" stop-color="#bbb" stop-opacity=".1"/><stop offset="1" stop-opacity=".1"/></linearGradient><clipPath id="a"><rect width="130" height="20" rx="3" fill="#fff"/></clipPath><g clip-path="url(#a)"><path class="updated-badge-left" d="M0 0h55v20H0z"/><path class="updated-badge-right" d="M55 0h75v20H55z"/><path fill="url(#b)" d="M0 0h130v20H0z"/></g><g fill="#fff" text-anchor="middle" font-size="110"><text x="285" y="150" fill="#010101" fill-opacity=".3" textLength="450" transform="scale(.1)">updated</text><text x="285" y="140" textLength="450" transform="scale(.1)">updated</text><text x="915" y="150" fill="#010101" fill-opacity=".3" textLength="650" transform="scale(.1)">2025-01-28</text><text x="915" y="140" textLength="650" transform="scale(.1)">2025-01-28</text></g></svg>
</span></div>
<div class="related-posts">
<h2 class="related-title">See Also:<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 512 512" class="icon related-icon"><path d="M256 8C119 8 8 119 8 256s111 248 248 248 248-111 248-248S393 8 256 8zm144 276c0 6.6-5.4 12-12 12h-92v92c0 6.6-5.4 12-12 12h-56c-6.6 0-12-5.4-12-12v-92h-92c-6.6 0-12-5.4-12-12v-56c0-6.6 5.4-12 12-12h92v-92c0-6.6 5.4-12 12-12h56c6.6 0 12 5.4 12 12v92h92c6.6 0 12 5.4 12 12v56z"/></svg></h2>
<ul class="related-list">
<li class="related-item">
<a href="../../../posts/2022/notes---hugo-relearn-theme-usage/" class="related-link">Notes - Hugo Relearn Theme Usage</a>
</li>
<li class="related-item">
<a href="../../../posts/2020/deploying-static-website-to-netlify/" class="related-link">Deploying Static Website to Netlify</a>
</li>
<li class="related-item">
<a href="../../../posts/2020/creating-a-blog-using-hugo/" class="related-link">Creating A Blog Using Hugo</a>
</li>
</ul>
</div>
<div class="post-tags">
<a href="../../../tags/hugo/" rel="tag" class="post-tags-link"><svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 512 512" class="icon tag-icon"><path d="M0 252.118V48C0 21.49 21.49 0 48 0h204.118a48 48 0 0 1 33.941 14.059l211.882 211.882c18.745 18.745 18.745 49.137 0 67.882L293.823 497.941c-18.745 18.745-49.137 18.745-67.882 0L14.059 286.059A48 48 0 0 1 0 252.118zM112 64c-26.51 0-48 21.49-48 48s21.49 48 48 48 48-21.49 48-48-21.49-48-48-48z"/></svg>Hugo</a>
<a href="../../../tags/blog/" rel="tag" class="post-tags-link"><svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 512 512" class="icon tag-icon"><path d="M0 252.118V48C0 21.49 21.49 0 48 0h204.118a48 48 0 0 1 33.941 14.059l211.882 211.882c18.745 18.745 18.745 49.137 0 67.882L293.823 497.941c-18.745 18.745-49.137 18.745-67.882 0L14.059 286.059A48 48 0 0 1 0 252.118zM112 64c-26.51 0-48 21.49-48 48s21.49 48 48 48 48-21.49 48-48-21.49-48-48-48z"/></svg>Blog</a>
<a href="../../../tags/website/" rel="tag" class="post-tags-link"><svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 512 512" class="icon tag-icon"><path d="M0 252.118V48C0 21.49 21.49 0 48 0h204.118a48 48 0 0 1 33.941 14.059l211.882 211.882c18.745 18.745 18.745 49.137 0 67.882L293.823 497.941c-18.745 18.745-49.137 18.745-67.882 0L14.059 286.059A48 48 0 0 1 0 252.118zM112 64c-26.51 0-48 21.49-48 48s21.49 48 48 48 48-21.49 48-48-21.49-48-48-48z"/></svg>Website</a>
</div>
<ul class="post-nav">
<li class="post-nav-prev">
<a href="../../../posts/2025/notes---misc-for-work/" rel="prev">< Notes - Misc for Work</a>
</li>
<li class="post-nav-next">
<a href="../../../posts/2024/notes---hugo-website-on-vps/" rel="next">Notes - Hugo website on VPS ></a>
</li>
</ul>
</div>
</main>
<div id="back-to-top" class="back-to-top">
<a href="#"><svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 448 512" class="icon arrow-up"><path d="M34.9 289.5l-22.2-22.2c-9.4-9.4-9.4-24.6 0-33.9L207 39c9.4-9.4 24.6-9.4 33.9 0l194.3 194.3c9.4 9.4 9.4 24.6 0 33.9L413 289.4c-9.5 9.5-25 9.3-34.3-.4L264 168.6V456c0 13.3-10.7 24-24 24h-32c-13.3 0-24-10.7-24-24V168.6L69.2 289.1c-9.3 9.8-24.8 10-34.3.4z"/></svg></a>
</div>
<footer id="footer" class="footer">
<div class="footer-inner">
<div class="site-info">© 2025 <svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 512 512" class="icon footer-icon"><path d="M462.3 62.6C407.5 15.9 326 24.3 275.7 76.2L256 96.5l-19.7-20.3C186.1 24.3 104.5 15.9 49.7 62.6c-62.8 53.6-66.1 149.8-9.9 207.9l193.5 199.8c12.5 12.9 32.8 12.9 45.3 0l193.5-199.8c56.3-58.1 53-154.3-9.8-207.9z"/></svg></div><div class="powered-by">Powered by <a href="https://github.com/gohugoio/hugo" target="_blank" rel="noopener">Hugo</a> | Theme is <a href="https://github.com/reuixiy/hugo-theme-meme" target="_blank" rel="noopener">MemE</a></div>
</div>
</footer>
</div>
<script src="https://cdn.jsdelivr.net/npm/medium-zoom@latest/dist/medium-zoom.min.js"></script>
<script>
let imgNodes = document.querySelectorAll('div.post-body img');
imgNodes = Array.from(imgNodes).filter(node => node.parentNode.tagName !== "A");
mediumZoom(imgNodes, {
background: 'hsla(var(--color-bg-h), var(--color-bg-s), var(--color-bg-l), 0.95)'
})
</script>
<script src="https://cdn.jsdelivr.net/npm/instant.page@5.1.0/instantpage.min.js" type="module" defer></script>
</body>
</html>