{"id":720,"date":"2019-11-14T06:57:44","date_gmt":"2019-11-14T06:57:44","guid":{"rendered":"http:\/\/blog.hostinger.io\/hostinger-tutorials\/uncategorized\/how-to-add-favicon-to-website\/"},"modified":"2026-03-09T19:19:25","modified_gmt":"2026-03-09T19:19:25","slug":"how-to-add-favicon-to-website","status":"publish","type":"post","link":"\/ng\/tutorials\/how-to-add-favicon-to-website","title":{"rendered":"How to add a favicon to your website"},"content":{"rendered":"<?xml encoding=\"utf-8\" ?><p>A favicon is a small icon that serves as your website&rsquo;s visual identity in browser tabs, bookmarks, and history logs. It helps users recognize your site among other pages and enhances your branding. You can add it to your website using these methods:<\/p><ol class=\"wp-block-list\">\n<li><strong>Writing HTML code.<\/strong> This method involves manually uploading your image file to your host server and adding a specific code snippet to the header of your website.<\/li>\n\n\n\n<li><strong>Utilizing WordPress features.<\/strong> You can upload your icon directly through the WordPress Gutenberg editor, Customizer, or a plugin without needing to edit any code.<\/li>\n\n\n\n<li><strong>Using Hostinger Website Builder.<\/strong> This platform provides a built-in interface in the general settings to upload and update your favicon. <\/li>\n<\/ol><p>Favicons in browser tabs are <strong>16&times;16 px,<\/strong> while those in taskbar shortcuts are <strong>32&times;32 px<\/strong>. They are commonly in <strong>.ico<\/strong> format, but you can also use <strong>.svg<\/strong> files for better scalability. Regardless, it&rsquo;s best to keep favicons simple and maintain visibility by using mid-tone colors or borders.<\/p><p>\n\n\n\n<\/p><h2 class=\"wp-block-heading\" id=\"h-how-to-add-your-website-s-favicon-using-html\"><strong>How to add your website&rsquo;s favicon using HTML<\/strong><\/h2><p>To add a favicon using HTML, you need to add a custom tag to your site&rsquo;s <strong>index.html <\/strong>or <strong>header file<\/strong>. This manual method is best if you custom-code and <a href=\"\/ng\/tutorials\/how-to-design-a-website\">design your website<\/a> from scratch.<\/p><p>Before proceeding, ensure you have access to your website&rsquo;s root folder and can edit the necessary files. Also, prepare a <strong>64&times;64 px<\/strong> image called <strong>favicon.ico<\/strong>, <strong>favicon.svg<\/strong>,<strong> <\/strong>or<strong> favicon.png<\/strong>, depending on your preferred format. Then, follow these steps:<\/p><ol class=\"wp-block-list\">\n<li>Open your site&rsquo;s project directory <strong>using an FTP client like FileZilla <\/strong>or your <a href=\"\/ng\/support\/4548688-basic-actions-in-the-file-manager-in-hostinger\/\">hosting provider&rsquo;s file manager<\/a>.<\/li>\n\n\n\n<li>Go to the root directory, which is typically <strong>\/public_html<\/strong> or <strong>\/var\/www<\/strong>. <\/li>\n\n\n\n<li>Upload the favicon image file to the root folder of your website, in the same directory as your <strong>HTML<\/strong> file. <\/li>\n<\/ol><div class=\"wp-block-image\"><figure data-wp-context='{\"imageId\":\"69e2224b244db\"}' data-wp-interactive=\"core\/image\" class=\"aligncenter size-large wp-lightbox-container\"><img loading=\"lazy\" decoding=\"async\" width=\"2318\" height=\"608\" data-wp-class--hide=\"state.isContentHidden\" data-wp-class--show=\"state.isContentVisible\" data-wp-init=\"callbacks.setButtonStyles\" data-wp-on-async--click=\"actions.showLightbox\" data-wp-on-async--load=\"callbacks.setButtonStyles\" data-wp-on-async-window--resize=\"callbacks.setButtonStyles\" src=\"https:\/\/imagedelivery.net\/LqiWLm-3MGbYHtFuUbcBtA\/wp-content\/uploads\/sites\/2\/2019\/11\/a-website-root-folder-with-index-html-and-favicon-file.png\/public\" alt=\"A website's root folder with an index.html and a favicon file\" class=\"wp-image-137140\" srcset=\"https:\/\/imagedelivery.net\/LqiWLm-3MGbYHtFuUbcBtA\/wp-content\/uploads\/sites\/2\/2019\/11\/a-website-root-folder-with-index-html-and-favicon-file.png\/w=2318,fit=scale-down 2318w, https:\/\/imagedelivery.net\/LqiWLm-3MGbYHtFuUbcBtA\/wp-content\/uploads\/sites\/2\/2019\/11\/a-website-root-folder-with-index-html-and-favicon-file.png\/w=300,fit=scale-down 300w, https:\/\/imagedelivery.net\/LqiWLm-3MGbYHtFuUbcBtA\/wp-content\/uploads\/sites\/2\/2019\/11\/a-website-root-folder-with-index-html-and-favicon-file.png\/w=1024,fit=scale-down 1024w, https:\/\/imagedelivery.net\/LqiWLm-3MGbYHtFuUbcBtA\/wp-content\/uploads\/sites\/2\/2019\/11\/a-website-root-folder-with-index-html-and-favicon-file.png\/w=150,fit=scale-down 150w, https:\/\/imagedelivery.net\/LqiWLm-3MGbYHtFuUbcBtA\/wp-content\/uploads\/sites\/2\/2019\/11\/a-website-root-folder-with-index-html-and-favicon-file.png\/w=768,fit=scale-down 768w, https:\/\/imagedelivery.net\/LqiWLm-3MGbYHtFuUbcBtA\/wp-content\/uploads\/sites\/2\/2019\/11\/a-website-root-folder-with-index-html-and-favicon-file.png\/w=1536,fit=scale-down 1536w, https:\/\/imagedelivery.net\/LqiWLm-3MGbYHtFuUbcBtA\/wp-content\/uploads\/sites\/2\/2019\/11\/a-website-root-folder-with-index-html-and-favicon-file.png\/w=2048,fit=scale-down 2048w\" sizes=\"auto, (max-width: 2318px) 100vw, 2318px\" \/><button class=\"lightbox-trigger\" type=\"button\" aria-haspopup=\"dialog\" aria-label=\"Enlarge\" data-wp-init=\"callbacks.initTriggerButton\" data-wp-on-async--click=\"actions.showLightbox\" data-wp-style--right=\"state.imageButtonRight\" data-wp-style--top=\"state.imageButtonTop\">\n\t\t\t<svg xmlns=\"http:\/\/www.w3.org\/2000\/svg\" width=\"12\" height=\"12\" fill=\"none\" viewbox=\"0 0 12 12\">\n\t\t\t\t<path fill=\"#fff\" d=\"M2 0a2 2 0 0 0-2 2v2h1.5V2a.5.5 0 0 1 .5-.5h2V0H2Zm2 10.5H2a.5.5 0 0 1-.5-.5V8H0v2a2 2 0 0 0 2 2h2v-1.5ZM8 12v-1.5h2a.5.5 0 0 0 .5-.5V8H12v2a2 2 0 0 1-2 2H8Zm2-12a2 2 0 0 1 2 2v2h-1.5V2a.5.5 0 0 0-.5-.5H8V0h2Z\"><\/path>\n\t\t\t<\/svg>\n\t\t<\/button><\/figure><\/div><ol start=\"4\" class=\"wp-block-list\">\n<li>Open your <strong>index.html <\/strong>file and paste the following code snippet inside the <strong>&lt;head&gt; &lt;\/head&gt;<\/strong> tags. Add <strong>one of these code snippets <\/strong>based on your image format:<\/li>\n<\/ol><pre class=\"EnlighterJSRAW\" data-enlighter-language=\"generic\" data-enlighter-theme=\"\" data-enlighter-highlight=\"\" data-enlighter-linenumbers=\"\" data-enlighter-lineoffset=\"\" data-enlighter-title=\"\" data-enlighter-group=\"\">&lt;!-- For an ICO image --&gt;\n\n&lt;link rel=\"icon\" type=\"image\/x-icon\" href=\"favicon.ico\"&gt;<\/pre><pre class=\"EnlighterJSRAW\" data-enlighter-language=\"generic\" data-enlighter-theme=\"\" data-enlighter-highlight=\"\" data-enlighter-linenumbers=\"\" data-enlighter-lineoffset=\"\" data-enlighter-title=\"\" data-enlighter-group=\"\">&lt;!-- For an SVG image --&gt;\n\n&lt;link rel=\"icon\" type=\"image\/svg+xml\" href=\"favicon.svg\"&gt;<\/pre><pre class=\"EnlighterJSRAW\" data-enlighter-language=\"generic\" data-enlighter-theme=\"\" data-enlighter-highlight=\"\" data-enlighter-linenumbers=\"\" data-enlighter-lineoffset=\"\" data-enlighter-title=\"\" data-enlighter-group=\"\">&lt;!-- For a PNG image --&gt;\n\n&lt;link rel=\"icon\" type=\"image\/png\" href=\"favicon.png\"&gt;<\/pre><ol start=\"5\" class=\"wp-block-list\">\n<li>Save the file and reload your website. <\/li>\n<\/ol><p>The favicon should appear in the browser tab. If not, check your code and try accessing the website in incognito mode to bypass the cache.<\/p><div class=\"wp-block-image\"><figure data-wp-context='{\"imageId\":\"69e2224b2933e\"}' data-wp-interactive=\"core\/image\" class=\"aligncenter size-full wp-lightbox-container\"><img loading=\"lazy\" decoding=\"async\" width=\"580\" height=\"83\" data-wp-class--hide=\"state.isContentHidden\" data-wp-class--show=\"state.isContentVisible\" data-wp-init=\"callbacks.setButtonStyles\" data-wp-on-async--click=\"actions.showLightbox\" data-wp-on-async--load=\"callbacks.setButtonStyles\" data-wp-on-async-window--resize=\"callbacks.setButtonStyles\" src=\"https:\/\/imagedelivery.net\/LqiWLm-3MGbYHtFuUbcBtA\/wp-content\/uploads\/sites\/2\/2019\/11\/a-favicon-of-a-website.png\/public\" alt=\"A favicon of a website\" class=\"wp-image-137141\" srcset=\"https:\/\/imagedelivery.net\/LqiWLm-3MGbYHtFuUbcBtA\/wp-content\/uploads\/sites\/2\/2019\/11\/a-favicon-of-a-website.png\/w=580,fit=scale-down 580w, https:\/\/imagedelivery.net\/LqiWLm-3MGbYHtFuUbcBtA\/wp-content\/uploads\/sites\/2\/2019\/11\/a-favicon-of-a-website.png\/w=300,fit=scale-down 300w, https:\/\/imagedelivery.net\/LqiWLm-3MGbYHtFuUbcBtA\/wp-content\/uploads\/sites\/2\/2019\/11\/a-favicon-of-a-website.png\/w=150,fit=scale-down 150w\" sizes=\"auto, (max-width: 580px) 100vw, 580px\" \/><button class=\"lightbox-trigger\" type=\"button\" aria-haspopup=\"dialog\" aria-label=\"Enlarge\" data-wp-init=\"callbacks.initTriggerButton\" data-wp-on-async--click=\"actions.showLightbox\" data-wp-style--right=\"state.imageButtonRight\" data-wp-style--top=\"state.imageButtonTop\">\n\t\t\t<svg xmlns=\"http:\/\/www.w3.org\/2000\/svg\" width=\"12\" height=\"12\" fill=\"none\" viewbox=\"0 0 12 12\">\n\t\t\t\t<path fill=\"#fff\" d=\"M2 0a2 2 0 0 0-2 2v2h1.5V2a.5.5 0 0 1 .5-.5h2V0H2Zm2 10.5H2a.5.5 0 0 1-.5-.5V8H0v2a2 2 0 0 0 2 2h2v-1.5ZM8 12v-1.5h2a.5.5 0 0 0 .5-.5V8H12v2a2 2 0 0 1-2 2H8Zm2-12a2 2 0 0 1 2 2v2h-1.5V2a.5.5 0 0 0-.5-.5H8V0h2Z\"><\/path>\n\t\t\t<\/svg>\n\t\t<\/button><\/figure><\/div><h2 class=\"wp-block-heading\" id=\"h-how-to-add-a-favicon-to-a-wordpress-website\"><strong>How to add a favicon to a WordPress website<\/strong><\/h2><p>There are different ways to add a favicon to a WordPress website. For example, you can do this with the <strong>Gutenberg editor<\/strong> by adding the image using the<strong> Site Logo<\/strong> block and enabling the <strong>Use as site icon<\/strong> option.<\/p><p>You can also add a favicon by going to your <strong>admin<\/strong> <strong>dashboard&rsquo;s <\/strong><strong>sidebar <\/strong>&rarr; <strong>Appearance<\/strong> &rarr; <strong>Customize<\/strong> &rarr; <strong>Site Identity<\/strong> and uploading your image. If you want more customization and insertion options, you can also install a plugin like<strong> RealFaviconGenerator<\/strong>.<\/p><p>For more details about all the methods, check out our guide on <a href=\"\/ng\/tutorials\/wordpress-favicon\">adding a favicon in WordPress<\/a>.<\/p><h2 class=\"wp-block-heading\" id=\"h-how-to-add-a-favicon-in-hostinger-website-builder\"><strong>How to add a favicon in Hostinger Website Builder<\/strong><\/h2><p>In <a href=\"\/ng\/website-builder\">Hostinger Website Builder<\/a>, adding a favicon is a streamlined process because we offer a feature built into the tool. All you need to do is upload the file, and the builder handles the technical implementation for you.<\/p><p>Here&rsquo;s how to add a favicon in Hostinger Website Builder:<\/p><ol class=\"wp-block-list\">\n<li>Log in to <strong>hPanel<\/strong> and go to the <strong>sidebar<\/strong> &rarr; <strong>Websites<\/strong> &rarr; <strong>Websites list<\/strong>. <\/li>\n\n\n\n<li>Click <strong>Edit website <\/strong>on the website where<strong> <\/strong>you want to add a favicon.<\/li>\n\n\n\n<li>Navigate to the sidebar and click the <strong>three-dot icon<\/strong> &rarr; <strong>General settings<\/strong>.<\/li>\n<\/ol><div class=\"wp-block-image\"><figure data-wp-context='{\"imageId\":\"69e2224b2c70f\"}' data-wp-interactive=\"core\/image\" class=\"aligncenter size-full wp-lightbox-container\"><img loading=\"lazy\" decoding=\"async\" width=\"710\" height=\"1016\" data-wp-class--hide=\"state.isContentHidden\" data-wp-class--show=\"state.isContentVisible\" data-wp-init=\"callbacks.setButtonStyles\" data-wp-on-async--click=\"actions.showLightbox\" data-wp-on-async--load=\"callbacks.setButtonStyles\" data-wp-on-async-window--resize=\"callbacks.setButtonStyles\" src=\"https:\/\/imagedelivery.net\/LqiWLm-3MGbYHtFuUbcBtA\/wp-content\/uploads\/sites\/2\/2019\/11\/hostinger-website-builder-website-general-setting.png\/public\" alt=\"Hostinger website builder's Website General Settings\" class=\"wp-image-137142\" srcset=\"https:\/\/imagedelivery.net\/LqiWLm-3MGbYHtFuUbcBtA\/wp-content\/uploads\/sites\/2\/2019\/11\/hostinger-website-builder-website-general-setting.png\/w=710,fit=scale-down 710w, https:\/\/imagedelivery.net\/LqiWLm-3MGbYHtFuUbcBtA\/wp-content\/uploads\/sites\/2\/2019\/11\/hostinger-website-builder-website-general-setting.png\/w=210,fit=scale-down 210w, https:\/\/imagedelivery.net\/LqiWLm-3MGbYHtFuUbcBtA\/wp-content\/uploads\/sites\/2\/2019\/11\/hostinger-website-builder-website-general-setting.png\/w=105,fit=scale-down 105w\" sizes=\"auto, (max-width: 710px) 100vw, 710px\" \/><button class=\"lightbox-trigger\" type=\"button\" aria-haspopup=\"dialog\" aria-label=\"Enlarge\" data-wp-init=\"callbacks.initTriggerButton\" data-wp-on-async--click=\"actions.showLightbox\" data-wp-style--right=\"state.imageButtonRight\" data-wp-style--top=\"state.imageButtonTop\">\n\t\t\t<svg xmlns=\"http:\/\/www.w3.org\/2000\/svg\" width=\"12\" height=\"12\" fill=\"none\" viewbox=\"0 0 12 12\">\n\t\t\t\t<path fill=\"#fff\" d=\"M2 0a2 2 0 0 0-2 2v2h1.5V2a.5.5 0 0 1 .5-.5h2V0H2Zm2 10.5H2a.5.5 0 0 1-.5-.5V8H0v2a2 2 0 0 0 2 2h2v-1.5ZM8 12v-1.5h2a.5.5 0 0 0 .5-.5V8H12v2a2 2 0 0 1-2 2H8Zm2-12a2 2 0 0 1 2 2v2h-1.5V2a.5.5 0 0 0-.5-.5H8V0h2Z\"><\/path>\n\t\t\t<\/svg>\n\t\t<\/button><\/figure><\/div><ol start=\"4\" class=\"wp-block-list\">\n<li>Expand the <strong>Favicon<\/strong> menu and click <strong>Add image<\/strong>.<\/li>\n\n\n\n<li>In the media library, select the image you want to use as a favicon or upload one. <\/li>\n\n\n\n<li>Hit <strong>Save changes<\/strong>.<\/li>\n<\/ol><div class=\"wp-block-image\"><figure data-wp-context='{\"imageId\":\"69e2224b2f43c\"}' data-wp-interactive=\"core\/image\" class=\"aligncenter size-large wp-lightbox-container\"><img loading=\"lazy\" decoding=\"async\" width=\"2120\" height=\"794\" data-wp-class--hide=\"state.isContentHidden\" data-wp-class--show=\"state.isContentVisible\" data-wp-init=\"callbacks.setButtonStyles\" data-wp-on-async--click=\"actions.showLightbox\" data-wp-on-async--load=\"callbacks.setButtonStyles\" data-wp-on-async-window--resize=\"callbacks.setButtonStyles\" src=\"https:\/\/imagedelivery.net\/LqiWLm-3MGbYHtFuUbcBtA\/wp-content\/uploads\/sites\/2\/2019\/11\/hostinger-website-builder-favicon-configuration-menu.png\/public\" alt=\"Hostinger Website Builder's favicon configuration menu\" class=\"wp-image-137143\" srcset=\"https:\/\/imagedelivery.net\/LqiWLm-3MGbYHtFuUbcBtA\/wp-content\/uploads\/sites\/2\/2019\/11\/hostinger-website-builder-favicon-configuration-menu.png\/w=2120,fit=scale-down 2120w, https:\/\/imagedelivery.net\/LqiWLm-3MGbYHtFuUbcBtA\/wp-content\/uploads\/sites\/2\/2019\/11\/hostinger-website-builder-favicon-configuration-menu.png\/w=300,fit=scale-down 300w, https:\/\/imagedelivery.net\/LqiWLm-3MGbYHtFuUbcBtA\/wp-content\/uploads\/sites\/2\/2019\/11\/hostinger-website-builder-favicon-configuration-menu.png\/w=1024,fit=scale-down 1024w, https:\/\/imagedelivery.net\/LqiWLm-3MGbYHtFuUbcBtA\/wp-content\/uploads\/sites\/2\/2019\/11\/hostinger-website-builder-favicon-configuration-menu.png\/w=150,fit=scale-down 150w, https:\/\/imagedelivery.net\/LqiWLm-3MGbYHtFuUbcBtA\/wp-content\/uploads\/sites\/2\/2019\/11\/hostinger-website-builder-favicon-configuration-menu.png\/w=768,fit=scale-down 768w, https:\/\/imagedelivery.net\/LqiWLm-3MGbYHtFuUbcBtA\/wp-content\/uploads\/sites\/2\/2019\/11\/hostinger-website-builder-favicon-configuration-menu.png\/w=1536,fit=scale-down 1536w, https:\/\/imagedelivery.net\/LqiWLm-3MGbYHtFuUbcBtA\/wp-content\/uploads\/sites\/2\/2019\/11\/hostinger-website-builder-favicon-configuration-menu.png\/w=2048,fit=scale-down 2048w\" sizes=\"auto, (max-width: 2120px) 100vw, 2120px\" \/><button class=\"lightbox-trigger\" type=\"button\" aria-haspopup=\"dialog\" aria-label=\"Enlarge\" data-wp-init=\"callbacks.initTriggerButton\" data-wp-on-async--click=\"actions.showLightbox\" data-wp-style--right=\"state.imageButtonRight\" data-wp-style--top=\"state.imageButtonTop\">\n\t\t\t<svg xmlns=\"http:\/\/www.w3.org\/2000\/svg\" width=\"12\" height=\"12\" fill=\"none\" viewbox=\"0 0 12 12\">\n\t\t\t\t<path fill=\"#fff\" d=\"M2 0a2 2 0 0 0-2 2v2h1.5V2a.5.5 0 0 1 .5-.5h2V0H2Zm2 10.5H2a.5.5 0 0 1-.5-.5V8H0v2a2 2 0 0 0 2 2h2v-1.5ZM8 12v-1.5h2a.5.5 0 0 0 .5-.5V8H12v2a2 2 0 0 1-2 2H8Zm2-12a2 2 0 0 1 2 2v2h-1.5V2a.5.5 0 0 0-.5-.5H8V0h2Z\"><\/path>\n\t\t\t<\/svg>\n\t\t<\/button><\/figure><\/div><ol start=\"7\" class=\"wp-block-list\">\n<li>Click <strong>Update<\/strong> <strong>website <\/strong>on the top right to push the changes live.<\/li>\n<\/ol><p>Your website&rsquo;s favicon should now be updated.<\/p><?xml encoding=\"utf-8\" ?><div class=\"wp-block-image\"><figure class=\"aligncenter size-full\"><a class=\"hgr-tutorials-cta hgr-tutorials-cta-website-builder\" href=\"\/ng\/website-builder\" target=\"_blank\" rel=\"noreferrer noopener\"><img loading=\"lazy\" decoding=\"async\" width=\"1024\" height=\"300\" src=\"https:\/\/imagedelivery.net\/LqiWLm-3MGbYHtFuUbcBtA\/wp-content\/uploads\/sites\/2\/2023\/12\/Website-Builder_in-text-banner.png\/public\" alt=\"\" class=\"wp-image-100488\" srcset=\"https:\/\/imagedelivery.net\/LqiWLm-3MGbYHtFuUbcBtA\/wp-content\/uploads\/sites\/2\/2023\/12\/Website-Builder_in-text-banner.png\/w=1024,fit=scale-down 1024w, https:\/\/imagedelivery.net\/LqiWLm-3MGbYHtFuUbcBtA\/wp-content\/uploads\/sites\/2\/2023\/12\/Website-Builder_in-text-banner.png\/w=300,fit=scale-down 300w, https:\/\/imagedelivery.net\/LqiWLm-3MGbYHtFuUbcBtA\/wp-content\/uploads\/sites\/2\/2023\/12\/Website-Builder_in-text-banner.png\/w=150,fit=scale-down 150w, https:\/\/imagedelivery.net\/LqiWLm-3MGbYHtFuUbcBtA\/wp-content\/uploads\/sites\/2\/2023\/12\/Website-Builder_in-text-banner.png\/w=768,fit=scale-down 768w\" sizes=\"auto, (max-width: 1024px) 100vw, 1024px\" \/><\/a><\/figure><\/div><h2 class=\"wp-block-heading\" id=\"h-best-practices-for-adding-a-website-favicon\"><strong>Best practices for adding a website favicon<\/strong><\/h2><p>Following best practices when adding a website favicon ensures your icon is easily identifiable and serves as an effective branding tool. Here are several aspects to consider when adding a favicon:<\/p><ul class=\"wp-block-list\">\n<li><strong>Use the correct image format.<\/strong> While <strong>.ico<\/strong> offers the best compatibility, other <a href=\"\/ng\/tutorials\/best-image-formats\">image formats <\/a>might work better. For example, <strong>.svg<\/strong> is superior for modern browsers because it scales indefinitely without losing quality, while <strong>.png<\/strong> is a safe middle ground that balances visual clarity and compatibility.<\/li>\n\n\n\n<li><strong>Create multiple sizes.<\/strong> If you aren&rsquo;t using <strong>SVG<\/strong> or <strong>ICO<\/strong>, prepare favicons in <strong>16&times;16 px<\/strong>, <strong>32&times;32 px<\/strong>, and <strong>192&times;192 px<\/strong> to cover tabs, taskbars, and mobile shortcuts. While your browser can adjust the size automatically, having different dimensions will result in a sharper image.<\/li>\n\n\n\n<li><strong>Keep it simple.<\/strong> Since favicons are tiny, avoid complex text or detailed illustrations because they won&rsquo;t be visible. Instead, use a simplified version of your logo or a single initial.<\/li>\n\n\n\n<li><strong>Check contrast.<\/strong> Ensure your icon is visible on both light and dark browser modes. Use a transparent background with colors that contrast both themes, such as medium-toned blues, greens, or reds, or add a border for visibility<\/li>\n\n\n\n<li><strong>Optimize file size.<\/strong> Keep the file size small, ideally less than <strong>100 KB<\/strong>, to minimize its impact on your page load time. Check our guide to learn more about <a href=\"\/ng\/tutorials\/complete-guide-to-image-optimization\">optimizing images for your website<\/a>.<\/li>\n<\/ul><h2 class=\"wp-block-heading\" id=\"h-troubleshooting-common-favicon-issues\"><strong>Troubleshooting common favicon issues<\/strong><\/h2><p>When adding a favicon to your website, several issues may arise that prevent the icon from showing or appearing correctly. Here are some of the most common technical issues, their causes, and solutions.<\/p><h3 class=\"wp-block-heading\" id=\"h-browser-caching\"><strong>Browser caching<\/strong><\/h3><p>Web browsers temporarily store data about your website as cache to save bandwidth and speed up load time. If your favicon is not showing, it&rsquo;s likely that your browser is still using the old version of your site.<\/p><p>This issue is on the user end, meaning there&rsquo;s nothing wrong with your favicon or your website. To verify if the error is cache-related, access your website in incognito mode or hard reload the page by pressing <strong>Ctrl + Shift + R<\/strong> or <strong>Cmd + Shift + R<\/strong> on your browser.<\/p><p>Typically, browser caching problems will resolve automatically. If this issue persists after a few hours, consider <a href=\"\/ng\/tutorials\/website-cache\">flushing your website cache<\/a> to force browsers to fetch the updated information.<\/p><h3 class=\"wp-block-heading\" id=\"h-incorrect-file-path\"><strong>Incorrect file path<\/strong><\/h3><p>If you set an incorrect file path inside your custom HTML code, web browsers won&rsquo;t be able to find your image. Consider this snippet:<\/p><pre class=\"EnlighterJSRAW\" data-enlighter-language=\"generic\" data-enlighter-theme=\"\" data-enlighter-highlight=\"\" data-enlighter-linenumbers=\"\" data-enlighter-lineoffset=\"\" data-enlighter-title=\"\" data-enlighter-group=\"\">&lt;link rel=\"icon\" type=\"image\/x-icon\" href=\"favicon.ico\"&gt;<\/pre><p>The example above tells your web browser to look for an image called <strong>favicon.ico <\/strong>in the current folder. For example, if you add the code in <strong>index.html<\/strong>, the favicon should be located in the same directory as the HTML file.<\/p><p>To resolve this, simply specify the correct path to the file. For instance, if your <strong>index.html<\/strong> is located in <strong>\/var\/www\/index.html <\/strong>and your favicon is inside<strong> \/var\/www\/images\/favicon.ico<\/strong>, the correct code would be:<\/p><pre class=\"EnlighterJSRAW\" data-enlighter-language=\"generic\" data-enlighter-theme=\"\" data-enlighter-highlight=\"\" data-enlighter-linenumbers=\"\" data-enlighter-lineoffset=\"\" data-enlighter-title=\"\" data-enlighter-group=\"\">&lt;link rel=\"icon\" type=\"image\/x-icon\" href=\"images\/favicon.ico\"&gt;<\/pre><p>Also, the path and file name are case-sensitive. This means<strong> Favicon.ico <\/strong>is different from <strong>favicon.ico<\/strong>.<\/p><h3 class=\"wp-block-heading\" id=\"h-syntax-errors-in-html\"><strong>Syntax errors in HTML<\/strong><\/h3><p>A syntax error, like a missing quote or incorrect attribute in your link tag, can prevent your favicon from displaying correctly. Additionally, error messages may occasionally appear due to this issue.<\/p><p>Here are several issues that can cause syntax errors:<\/p><ul class=\"wp-block-list\">\n<li><strong>Missing closing tags<\/strong>. Syntax errors commonly happen because your code is not enclosed properly. For example, <strong>rel=&rdquo;icon<\/strong> causes an issue because of the missing quotation mark at the end. <\/li>\n\n\n\n<li><strong>Invalid rel values<\/strong>. The <strong>rel <\/strong>attribute determines the relationship between the current HTML document and a linked resource. Since the values for the rel attribute are pre-determined, a typo like <strong>rel=&rdquo;icons&rdquo; <\/strong>can render your code invalid. <\/li>\n\n\n\n<li><strong>Wrong code placement. <\/strong>Your favicon code must be placed inside the<strong> &lt;head&gt; &lt;\/head&gt; <\/strong>tags of your HTML code. Putting it inside other parts of your website, such as<strong> &lt;body&gt; &lt;\/body&gt;<\/strong>, will cause an error. <\/li>\n<\/ul><p>You can check for syntax errors manually or use an online validation tool. After identifying the problem, simply update your code and save your HTML file.<\/p><p><div><p class=\"important\"><strong>Important!<\/strong> Syntax errors rarely occur if you set up a favicon using the built-in feature of WordPress, a plugin, or a website builder because the process is automated and validated. If it happens, ask the developer for assistance since you can&rsquo;t revise the code manually.<\/p><\/div>\n\n\n\n<\/p><h2 class=\"wp-block-heading\" id=\"h-next-steps-make-your-website-discoverable\"><strong>Next steps: Make your website discoverable<\/strong><\/h2><p>A favicon serves as the visual identifier of your website in search results, establishing branding and helping it stand out from other sites. With that in mind, the next step after finalizing the design of your site is to submit it to search engines.<\/p><p>Submitting <a href=\"\/ng\/tutorials\/submit-website-to-search-engines\">your website to search engines<\/a> allows platforms like Google to crawl your site&rsquo;s content, including its new favicon, and display it on the search results page.<\/p><p>Although this procedure is automatic, manual submission may be necessary to speed up the process and help search engines index your web pages more accurately.<\/p><p>The steps for submitting your website vary depending on the search engine. Generally, you need to <a href=\"\/ng\/tutorials\/what-is-a-sitemap\">generate a sitemap<\/a> and upload it to a search engine indexing platform, such as <strong>Google Search Console <\/strong>or <strong>Bing Webmaster Tools<\/strong>.<\/p>\n","protected":false},"excerpt":{"rendered":"<p>A favicon is a small icon that serves as your website&rsquo;s visual identity in browser tabs, bookmarks, and history logs. It helps users recognize your site among other pages and enhances your branding. You can add it to your website using these methods: Favicons in browser tabs are 16&times;16 px, while those in taskbar shortcuts [&#8230;]<\/p>\n<p><a class=\"btn btn-secondary understrap-read-more-link\" href=\"\/ng\/tutorials\/how-to-add-favicon-to-website\">Read More&#8230;<\/a><\/p>\n","protected":false},"author":337,"featured_media":0,"comment_status":"open","ping_status":"open","sticky":false,"template":"","format":"standard","meta":{"rank_math_title":"Add Favicon: A Beginner's Guide to Add an Icon to Your Website","rank_math_description":"Learn how to add a favicon to your website using different methods, the best practices for doing it, and solutions to common errors.","rank_math_focus_keyword":"add favicon","footnotes":""},"categories":[22601],"tags":[],"class_list":["post-720","post","type-post","status-publish","format-standard","hentry","category-website"],"hreflangs":[{"locale":"en-US","link":"https:\/\/www.hostinger.com\/tutorials\/how-to-add-favicon-to-website","default":0},{"locale":"pt-BR","link":"https:\/\/www.hostinger.com\/br\/tutoriais\/como-adicionar-favicon-no-site","default":0},{"locale":"fr-FR","link":"https:\/\/www.hostinger.com\/fr\/tutoriels\/favicon","default":0},{"locale":"es-ES","link":"https:\/\/www.hostinger.com\/es\/tutoriales\/anadir-favicon","default":0},{"locale":"en-UK","link":"https:\/\/www.hostinger.com\/uk\/tutorials\/how-to-add-favicon-to-website","default":0},{"locale":"en-MY","link":"https:\/\/www.hostinger.com\/my\/tutorials\/how-to-add-favicon-to-website","default":0},{"locale":"en-PH","link":"https:\/\/www.hostinger.com\/ph\/tutorials\/how-to-add-favicon-to-website","default":0},{"locale":"pt-PT","link":"https:\/\/www.hostinger.com\/pt\/tutoriais\/como-adicionar-favicon-no-site","default":0},{"locale":"en-IN","link":"https:\/\/www.hostinger.com\/in\/tutorials\/how-to-add-favicon-to-website","default":0},{"locale":"en-CA","link":"https:\/\/www.hostinger.com\/ca\/tutorials\/how-to-add-favicon-to-website","default":0},{"locale":"es-AR","link":"https:\/\/www.hostinger.com\/ar\/tutoriales\/anadir-favicon","default":0},{"locale":"es-MX","link":"https:\/\/www.hostinger.com\/mx\/tutoriales\/anadir-favicon","default":0},{"locale":"es-CO","link":"https:\/\/www.hostinger.com\/co\/tutoriales\/anadir-favicon","default":0},{"locale":"en-AU","link":"https:\/\/www.hostinger.com\/au\/tutorials\/how-to-add-favicon-to-website","default":0},{"locale":"en-NG","link":"https:\/\/www.hostinger.com\/ng\/tutorials\/how-to-add-favicon-to-website","default":0}],"_links":{"self":[{"href":"https:\/\/www.hostinger.com\/ng\/tutorials\/wp-json\/wp\/v2\/posts\/720","targetHints":{"allow":["GET"]}}],"collection":[{"href":"https:\/\/www.hostinger.com\/ng\/tutorials\/wp-json\/wp\/v2\/posts"}],"about":[{"href":"https:\/\/www.hostinger.com\/ng\/tutorials\/wp-json\/wp\/v2\/types\/post"}],"author":[{"embeddable":true,"href":"https:\/\/www.hostinger.com\/ng\/tutorials\/wp-json\/wp\/v2\/users\/337"}],"replies":[{"embeddable":true,"href":"https:\/\/www.hostinger.com\/ng\/tutorials\/wp-json\/wp\/v2\/comments?post=720"}],"version-history":[{"count":31,"href":"https:\/\/www.hostinger.com\/ng\/tutorials\/wp-json\/wp\/v2\/posts\/720\/revisions"}],"predecessor-version":[{"id":144951,"href":"https:\/\/www.hostinger.com\/ng\/tutorials\/wp-json\/wp\/v2\/posts\/720\/revisions\/144951"}],"wp:attachment":[{"href":"https:\/\/www.hostinger.com\/ng\/tutorials\/wp-json\/wp\/v2\/media?parent=720"}],"wp:term":[{"taxonomy":"category","embeddable":true,"href":"https:\/\/www.hostinger.com\/ng\/tutorials\/wp-json\/wp\/v2\/categories?post=720"},{"taxonomy":"post_tag","embeddable":true,"href":"https:\/\/www.hostinger.com\/ng\/tutorials\/wp-json\/wp\/v2\/tags?post=720"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}