{"id":24470,"date":"2025-07-07T07:02:19","date_gmt":"2025-07-07T07:02:19","guid":{"rendered":"https:\/\/academy.siteground.com\/en\/?p=24470"},"modified":"2026-06-10T08:16:53","modified_gmt":"2026-06-10T08:16:53","slug":"what-is-favicon","status":"publish","type":"post","link":"https:\/\/academy.siteground.com\/en\/what-is-favicon\/","title":{"rendered":"What Is a Favicon\u2014and Why Does Your Website Need One?"},"content":{"rendered":"\n<p class=\"wp-block-paragraph\">A favicon is the small icon you see in browser tabs, bookmarks, and search results\u2014it&#8217;s your website&#8217;s visual calling card, and it does more for your brand than you might think. A well-designed one makes your site look polished and helps users find their way back to you easily. This guide covers everything you need to know: what favicons are, where they show up, how to create one, and how to add it to your site.<\/p>\n\n\n<div class=\"post-page__colored-blocks post-page__colored-blocks--update\">\n<div class=\"key-takeaways\">\n<h2><span class=\"ez-toc-section\" id=\"key-takeaways\"><\/span><strong>Key takeaways:<\/strong><span class=\"ez-toc-section-end\"><\/span><\/h2>\n<ul>\n<li><strong>Favicons are small but mighty<\/strong> \u2014 that tiny icon in your browser tab plays a big role in brand recognition and user experience.<\/li>\n<li><strong>They show up everywhere<\/strong> \u2014 browser tabs, bookmarks, search results, mobile home screens, and even desktop shortcuts.<\/li>\n<li><strong>Size and format matter<\/strong> \u2014 offering multiple sizes (16\u00d716 up to 72\u00d772) and formats (ICO, PNG, SVG) ensures your favicon looks sharp on every device.<\/li>\n<li><strong>Keep the design simple<\/strong> \u2014 small icons don&#8217;t have room for detail, so stick to clean visuals, brand colors, and no text.<\/li>\n<li><strong>Adding one is easier than you think<\/strong> \u2014 whether you&#8217;re on WordPress, a <a href=\"https:\/\/www.siteground.com\/academy\/website-builder-vs-custom-site\/\" target=\"_blank\" rel=\"noopener\">website builder, or a custom site<\/a>, implementation is just a few steps.<\/li>\n<li><strong>Favicons can indirectly boost SEO<\/strong> \u2014 a recognizable icon can improve click-through rates and signal professionalism to both users and search engines.<\/li>\n<\/ul>\n<\/div>\n<\/div>\n\n\n<h2 id=\"h-what-is-a-favicon-image\" class=\"wp-block-heading\"><span class=\"ez-toc-section\" id=\"what-is-a-favicon-image\"><\/span>What Is a Favicon Image?<span class=\"ez-toc-section-end\"><\/span><\/h2>\n\n\n\n<p class=\"wp-block-paragraph\"><strong>A favicon, short for &#8220;favorite icon,&#8221; is a small (usually 16&#215;16 pixel) image that serves as a visual representation of a brand\u2019s website.<\/strong> It&#8217;s a subtle but important element of <a href=\"https:\/\/www.siteground.com\/academy\/web-design-tips-to-build-a-website\/\" target=\"_blank\" rel=\"noopener\">web design<\/a>, reinforcing brand identity and improving user experience. You\u2019ll typically find them displayed in:&nbsp;&nbsp;<\/p>\n\n\n\n<ul class=\"wp-block-list\">\n<li>Browser tabs&nbsp;<\/li>\n\n\n\n<li>Browser history tabs&nbsp;<\/li>\n\n\n\n<li>Browser bookmarks&nbsp;<\/li>\n\n\n\n<li>Mobile home screens&nbsp;<\/li>\n\n\n\n<li>Search engine results pages&nbsp;<\/li>\n\n\n\n<li>Google search bars&nbsp;<\/li>\n\n\n\n<li>Desktops&nbsp;<\/li>\n<\/ul>\n\n\n\n<p class=\"wp-block-paragraph\">They\u2019ve become so common that you see them everywhere all the time, yet you might not even notice them. The most typical use in practice is as small icons next to the web page titles in browser tabs.&nbsp;<\/p>\n\n\n\n<figure class=\"wp-block-image size-large\"><img loading=\"lazy\" decoding=\"async\" width=\"1024\" height=\"583\" src=\"https:\/\/academy.siteground.com\/en\/wp-content\/uploads\/sites\/2\/2025\/06\/what-is-favicon-1024x583.jpg\" alt=\"screenshot showing what is a favicon and its location in the browser tabs\" class=\"wp-image-24471\" \/><\/figure>\n\n\n\n<p class=\"wp-block-paragraph\">First introduced by Microsoft with the release of Internet Explorer 5 in 1999, favicons originally appeared as small icons in the bookmarks (Favorites) and address bar when a user bookmarked a webpage. The original implementation required the favicon to be named <strong>favicon.ico<\/strong> and placed in the root directory of a website. This simple yet effective feature quickly gained popularity, leading to widespread adoption across various web browsers.<\/p>\n\n\n\n<p class=\"wp-block-paragraph\">Over time, the role of the favicon expanded beyond a bookmark icon. It started appearing in browser tabs, bookmarks, and even search engine results pages. As web design evolved, so did the formats and sizes of favicons, accommodating the needs of modern devices and high-resolution displays. Today, favicons are a standard element of <a href=\"https:\/\/academy.siteground.com\/en\/web-design-tips-to-build-a-website\/\" id=\"11486\" target=\"_blank\" rel=\"noopener\">web design<\/a>, playing a crucial role in site identity and user experience.&nbsp;<\/p>\n\n\n\n<h2 id=\"h-where-are-favicons-used\" class=\"wp-block-heading\"><span class=\"ez-toc-section\" id=\"where-are-favicons-used\"><\/span>Where Are Favicons Used?<span class=\"ez-toc-section-end\"><\/span><\/h2>\n\n\n\n<p class=\"wp-block-paragraph\">Favicons have a broad range of usage in modern devices and applications. Below, we\u2019ll examine the most common places where you\u2019ll encounter them.&nbsp;<\/p>\n\n\n\n<h3 id=\"h-browser-tabs\" class=\"wp-block-heading\">Browser Tabs<\/h3>\n\n\n\n<p class=\"wp-block-paragraph\"><strong>In browser tabs, favicons appear next to the page title<\/strong>, enabling users to identify and differentiate between multiple tabs quickly. This is particularly useful when visitors have numerous tabs open, as the favicon provides <strong>a visual cue that helps them locate the desired tab<\/strong> without having to read the full title.&nbsp;<\/p>\n\n\n\n<figure class=\"wp-block-image size-large\"><img loading=\"lazy\" decoding=\"async\" width=\"1024\" height=\"443\" src=\"https:\/\/academy.siteground.com\/en\/wp-content\/uploads\/sites\/2\/2025\/06\/favicon-in-browser-tabs-1024x443.jpg\" alt=\"Favicons in browser tabs\" class=\"wp-image-24472\" \/><\/figure>\n\n\n\n<p class=\"wp-block-paragraph\">Favicons become even more important when the tabs are stacked next to each other, reducing their area and making the page titles unreadable. The favicon tab icon remains the <strong>last distinguishable part<\/strong> of the tab.&nbsp;&nbsp;&nbsp;<\/p>\n\n\n\n<figure class=\"wp-block-image size-large\"><img loading=\"lazy\" decoding=\"async\" width=\"1024\" height=\"252\" src=\"https:\/\/academy.siteground.com\/en\/wp-content\/uploads\/sites\/2\/2025\/06\/multiple-favicons-in-browser-tabs-1024x252.jpg\" alt=\"Multiple tabs displaying only favicons\" class=\"wp-image-24473\" \/><\/figure>\n\n\n\n<h3 id=\"h-browser-history-tab\" class=\"wp-block-heading\">Browser History Tab<\/h3>\n\n\n\n<p class=\"wp-block-paragraph\">Favicons are also displayed in the browser history tab, which <strong>helps users more easily identify previously visited websites<\/strong>. This visual element makes finding and revisiting websites simple, improving the overall <a href=\"https:\/\/academy.siteground.com\/en\/website-navigation\/\" id=\"25543\" target=\"_blank\" rel=\"noopener\">website navigation<\/a> experience and improving websites\u2019 client retention.&nbsp;<\/p>\n\n\n\n<figure class=\"wp-block-image size-large\"><img loading=\"lazy\" decoding=\"async\" width=\"1024\" height=\"482\" src=\"https:\/\/academy.siteground.com\/en\/wp-content\/uploads\/sites\/2\/2025\/06\/favicon-in-history-1024x482.jpg\" alt=\"Favicons in browser history\" class=\"wp-image-24474\" \/><\/figure>\n\n\n\n<h3 id=\"h-bookmarks\" class=\"wp-block-heading\">Bookmarks<\/h3>\n\n\n\n<p class=\"wp-block-paragraph\">When a user bookmarks a <a href=\"https:\/\/academy.siteground.com\/en\/website-pages\/\" id=\"25165\" target=\"_blank\" rel=\"noopener\">website page<\/a>, the favicon is saved alongside the page title in their bookmarks list. This not only helps users quickly recognize and access their saved sites but also <strong>improves the organization of bookmarks by providing a visual element that stands out<\/strong>.<\/p>\n\n\n\n<figure class=\"wp-block-image size-large\"><img loading=\"lazy\" decoding=\"async\" width=\"1019\" height=\"1024\" src=\"https:\/\/academy.siteground.com\/en\/wp-content\/uploads\/sites\/2\/2025\/06\/favicon-in-bookmarks-1019x1024.jpg\" alt=\"A favicon in bookmarks\" class=\"wp-image-24475\" \/><\/figure>\n\n\n\n<h3 id=\"h-mobile-home-screens\" class=\"wp-block-heading\">Mobile Home Screens<\/h3>\n\n\n\n<p class=\"wp-block-paragraph\">On mobile devices, users have the option to add websites directly to their home screens. In the context of <a href=\"https:\/\/academy.siteground.com\/en\/mobile-web-design\/\" id=\"25521\" target=\"_blank\" rel=\"noopener\">mobile web design<\/a>, favicons function like app icons, <strong>providing a convenient and recognizable shortcut for users to access their favorite sites quickly<\/strong>.&nbsp;<\/p>\n\n\n\n<figure class=\"wp-block-image size-large\"><img loading=\"lazy\" decoding=\"async\" width=\"461\" height=\"1024\" src=\"https:\/\/academy.siteground.com\/en\/wp-content\/uploads\/sites\/2\/2025\/06\/favicon-on-mobile-screen-461x1024.jpeg\" alt=\"A favicon on a mobile device\" class=\"wp-image-24476\" \/><\/figure>\n\n\n\n<h3 id=\"h-serp-search-engine-results-pages\" class=\"wp-block-heading\">SERP (Search Engine Results Pages)<\/h3>\n\n\n\n<p class=\"wp-block-paragraph\">Search engines display favicons alongside search results on the SERPs (Search Engine Result Pages). This visual element can <strong>capture users&#8217; attention, potentially increasing click-through rates by making the website more appealing and trustworthy<\/strong> in SERPs.<\/p>\n\n\n\n<figure class=\"wp-block-image size-large\"><img loading=\"lazy\" decoding=\"async\" width=\"1024\" height=\"319\" src=\"https:\/\/academy.siteground.com\/en\/wp-content\/uploads\/sites\/2\/2025\/06\/favicon-serp-1024x319.jpg\" alt=\"A favicon for a result on a SERP (Search Engine Results Page)\" class=\"wp-image-24477\" \/><\/figure>\n\n\n\n<h3 id=\"h-google-search-bar\" class=\"wp-block-heading\">Google Search Bar<\/h3>\n\n\n\n<p class=\"wp-block-paragraph\">Within the Google search bar, favicons appear next to search suggestions and results. As a result, they <strong>reinforce brand identity and help users quickly identify the websites<\/strong> they\u2019re interested in visiting.&nbsp;&nbsp;<\/p>\n\n\n\n<figure class=\"wp-block-image size-large\"><img loading=\"lazy\" decoding=\"async\" width=\"1024\" height=\"498\" src=\"https:\/\/academy.siteground.com\/en\/wp-content\/uploads\/sites\/2\/2025\/06\/favicon-search-bar-1024x498.jpg\" alt=\"A favicon on a Google search bar\" class=\"wp-image-24478\" \/><\/figure>\n\n\n\n<h3 id=\"h-desktops\" class=\"wp-block-heading\">Desktops<\/h3>\n\n\n\n<p class=\"wp-block-paragraph\">Favicons can be used as desktop shortcuts as well, allowing users to create direct links to websites from their computer desktops. This provides a convenient way for users to access their preferred sites without opening a browser first.<\/p>\n\n\n\n<figure class=\"wp-block-image size-large\"><img loading=\"lazy\" decoding=\"async\" width=\"703\" height=\"1024\" src=\"https:\/\/academy.siteground.com\/en\/wp-content\/uploads\/sites\/2\/2025\/06\/dekstop-favicons-703x1024.jpg\" alt=\"A favicon on a desktop\" class=\"wp-image-24479\" \/><\/figure>\n\n\n\n<h2 id=\"h-what-are-the-favicon-sizes\" class=\"wp-block-heading\"><span class=\"ez-toc-section\" id=\"what-are-the-favicon-sizes\"><\/span>What Are the Favicon Sizes?<span class=\"ez-toc-section-end\"><\/span><\/h2>\n\n\n\n<p class=\"wp-block-paragraph\"><strong>Favicons are available in multiple sizes<\/strong> to ensure compatibility across different devices and platforms, including:<\/p>\n\n\n\n<ul class=\"wp-block-list\">\n<li><strong>16&#215;16<\/strong> &#8211; standard size for <strong>browser tabs, bookmarks, browser history, and search engine results<\/strong>.<\/li>\n\n\n\n<li><strong>32&#215;32<\/strong> &#8211; suitable for <strong>desktop shortcut icons and taskbar shortcut icons<\/strong>.&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;<\/li>\n\n\n\n<li><strong>48&#215;48 pixels<\/strong> &#8211; common for <strong>Windows desktop icons and larger displays<\/strong>.&nbsp;<\/li>\n\n\n\n<li><strong>72&#215;72 and above<\/strong> &#8211; ideal for larger screens like<strong> smart TVs, tablets<\/strong>, etc.&nbsp;<\/li>\n<\/ul>\n\n\n\n<p class=\"wp-block-paragraph\">Providing multiple sizes is crucial for displaying the favicon correctly on all screen types. Additionally, larger sizes may be used for high-resolution displays, ensuring that the favicon remains sharp and clear.&nbsp;&nbsp;<\/p>\n\n\n\n<h2 id=\"h-favicon-file-types\" class=\"wp-block-heading\"><span class=\"ez-toc-section\" id=\"favicon-file-types\"><\/span>Favicon File Types<span class=\"ez-toc-section-end\"><\/span><\/h2>\n\n\n\n<p class=\"wp-block-paragraph\">Favicons support <strong>several file formats.<\/strong> The common favicon file formats include:&nbsp;<\/p>\n\n\n\n<ul class=\"wp-block-list\">\n<li><strong>ICO Format<\/strong> &#8211; The <strong>ICO<\/strong> format is the most widely supported and is ideal for ensuring compatibility with older browsers. It can contain multiple image sizes within a single file, allowing for flexibility in display across different contexts.<\/li>\n\n\n\n<li><strong>PNG Format<\/strong> &#8211; The <strong>PNG<\/strong> file extension offers high-quality images with support for transparency, making it suitable for modern browsers. PNG favicons are often used for their clarity and ability to maintain image quality.<\/li>\n\n\n\n<li><strong>SVG Format<\/strong> &#8211; <strong>SVG (Scalable Vector Graphics)<\/strong> is a format that provides scalability without loss of quality. This makes it perfect for high-resolution displays and responsive designs, as the favicon can be resized without becoming pixelated.&nbsp;&nbsp;<\/li>\n<\/ul>\n\n\n\n<p class=\"wp-block-paragraph\">Favicons in JPG are not quite common, since their lack of detail makes them unsuitable for smaller images.&nbsp;<\/p>\n\n\n\n<h2 id=\"h-how-do-you-create-favicons\" class=\"wp-block-heading\"><span class=\"ez-toc-section\" id=\"how-do-you-create-favicons\"><\/span>How Do You Create Favicons?<span class=\"ez-toc-section-end\"><\/span><\/h2>\n\n\n\n<p class=\"wp-block-paragraph\">Even if you\u2019re not a seasoned designer, there are plenty of graphical software and online favicon generator applications to help you craft your own custom favicon. Adobe Photoshop, <a href=\"https:\/\/www.figma.com\/\" target=\"_blank\" rel=\"noopener nofollow\">Figma<\/a>, and <a href=\"https:\/\/realfavicongenerator.net\/logo-maker\" target=\"_blank\" rel=\"noopener nofollow\">RealFaviconGenerator<\/a> are just a few from the long list of powerful design tools you can choose from.&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;<\/p>\n\n\n\n<p class=\"wp-block-paragraph\">Once you have the design ready, you can upload your file to the RealFaviconGenerator. The tool will convert it into multiple formats, ensuring broad browser compatibility. You can also preview how the favicon appears on different devices and color modes, and generate the HTML code to insert into your index file.&nbsp;&nbsp;&nbsp;<\/p>\n\n\n\n<div class=\"post-page__colored-blocks post-page__colored-blocks--update\"><p class=\"text text--size-medium color-darkest\"><strong>If You&#8217;re a SiteGround Client, Check Out AI Studio<\/strong><br>If you host your website with SiteGround, you also have access to <strong>SiteGround AI Studio<\/strong> \u2014 an all-in-one AI platform designed for small businesses. Among its many tools, the Image Designer agent lets you generate and edit images using natural language, making it a great option for creating favicon concepts without needing a separate design tool. It&#8217;s worth exploring what&#8217;s available to you as a SiteGround client.<br><a href=\"https:\/\/www.siteground.com\/ai-studio\" target=\"_blank\" rel=\"noopener\"><strong>Learn more&gt;&gt;<\/strong><\/a><\/p><\/div>\n\n\n\n<figure class=\"wp-block-image size-large\"><img loading=\"lazy\" decoding=\"async\" width=\"1024\" height=\"562\" src=\"https:\/\/academy.siteground.com\/en\/wp-content\/uploads\/sites\/2\/2025\/06\/favicon-generator-1024x562.jpg\" alt=\"A favicon generated by RealFaviconGenerator\" class=\"wp-image-24480\" \/><\/figure>\n\n\n\n<h2 id=\"h-how-do-you-add-a-favicon-to-your-website-nbsp\" class=\"wp-block-heading\"><span class=\"ez-toc-section\" id=\"how-do-you-add-a-favicon-to-your-website\"><\/span>How Do You Add a Favicon to Your Website?&nbsp;<span class=\"ez-toc-section-end\"><\/span><\/h2>\n\n\n\n<p class=\"wp-block-paragraph\">You\u2019ve designed the perfect favicon and are looking to implement it on your website. So, how do you go about it?&nbsp;<\/p>\n\n\n\n<p class=\"wp-block-paragraph\">Adding a favicon is straightforward, regardless of what application your website is built upon. For some applications, it\u2019s as simple as a few mouse clicks, while others require a few extra steps.&nbsp;<\/p>\n\n\n\n<p class=\"wp-block-paragraph\">Below, we\u2019ll go through some of the more common cases.<\/p>\n\n\n\n<h3 id=\"h-how-to-add-a-favicon-to-a-custom-website\" class=\"wp-block-heading\">How to Add A Favicon to a Custom Website<\/h3>\n\n\n\n<p class=\"wp-block-paragraph\">Generally, you must <strong>upload the favicon file<\/strong> to your website and <strong>configure the index file<\/strong> to display it. This method is valid for all kinds of websites, but with some applications, it\u2019s a matter of a few clicks. However, if you have a custom PHP\/HTML website, you\u2019ll have to do it the old-fashioned way.&nbsp;<\/p>\n\n\n\n<p class=\"wp-block-paragraph\">First, access your website files through <a href=\"https:\/\/www.siteground.com\/tutorials\/ftp\/\" target=\"_blank\" rel=\"noopener\">FTP<\/a> or <a href=\"https:\/\/www.siteground.com\/kb\/manage-files-file-manager\/\" target=\"_blank\" rel=\"noopener\">File Manager<\/a> and upload the favicon file to the root folder (typically <strong>public_html<\/strong>). The file can be named anything you want and in any of the supported formats. The typical naming convention, however, is <strong>favicon.ico (or another extension)<\/strong>.<\/p>\n\n\n\n<figure class=\"wp-block-image size-large\"><img loading=\"lazy\" decoding=\"async\" width=\"1024\" height=\"633\" src=\"https:\/\/academy.siteground.com\/en\/wp-content\/uploads\/sites\/2\/2025\/06\/favicon-in-root-folder-1024x633.jpg\" alt=\"A favicon in a website&apos;s root folder (public_html)\" class=\"wp-image-24481\" \/><\/figure>\n\n\n\n<p class=\"wp-block-paragraph\">Then, open your <strong>index file (index.php <\/strong>or <strong>index.html)<\/strong>, and add the following code in the <strong>&lt;head&gt; <\/strong>section to specify the favicon file.&nbsp;<\/p>\n\n\n\n<pre class=\"wp-block-code\"><code>&lt;head&gt;\n\n&nbsp;&nbsp;&lt;link rel=\"icon\" href=\"\/favicon.ico\" type=\"image\/x-icon\"&gt;\n\n&lt;\/head&gt;<\/code><\/pre>\n\n\n\n<p class=\"wp-block-paragraph\">Here is how this piece of code would look inside the index file.<\/p>\n\n\n\n<figure class=\"wp-block-image size-large\"><img loading=\"lazy\" decoding=\"async\" width=\"1024\" height=\"632\" src=\"https:\/\/academy.siteground.com\/en\/wp-content\/uploads\/sites\/2\/2025\/06\/index-file-code-1024x632.jpg\" alt=\"A favicon element in an index file\" class=\"wp-image-24482\" \/><\/figure>\n\n\n\n<p class=\"wp-block-paragraph\">Note that <strong>the favicon path \/favicon.ico corresponds to the public_html directory<\/strong>. If the file is located in a subfolder, you must specify it in the file path.&nbsp;<\/p>\n\n\n\n<p class=\"wp-block-paragraph\">For example, if your favicon is named <strong>favicon.ico<\/strong> and located in the subfolder <strong>public_html\/images<\/strong>, the file path should be <strong>\/images\/favicon.ico<\/strong>.<\/p>\n\n\n\n<p class=\"wp-block-paragraph\">To ensure that your favicon is rendered correctly on various screen sizes, you can upload several favicon files of different sizes. Then, add multiple <strong>&lt;link&gt;<\/strong> elements to your<strong> <\/strong>HTML file, each assigning the proper file to a different screen size. The code would look similar to this.&nbsp;<\/p>\n\n\n\n<pre class=\"wp-block-code\"><code>&lt;link rel=\"icon\" type=\"image\/png\" href=\"\/favicon-96x96.png\" sizes=\"96x96\" \/&gt;\n\n&lt;link rel=\"icon\" type=\"image\/svg+xml\" href=\"\/favicon.svg\" \/&gt;\n\n&lt;link rel=\"shortcut icon\" href=\"\/favicon.ico\" \/&gt;\n\n&lt;link rel=\"apple-touch-icon\" sizes=\"180x180\" href=\"\/apple-touch-icon.png\" \/&gt;\n\n&lt;link rel=\"manifest\" href=\"\/site.webmanifest\" \/&gt;<\/code><\/pre>\n\n\n\n<h3 id=\"h-how-to-add-a-favicon-in-siteground-website-builder-nbsp\" class=\"wp-block-heading\">How to Add a Favicon in SiteGround Website Builder&nbsp;<\/h3>\n\n\n\n<p class=\"wp-block-paragraph\"><a href=\"https:\/\/www.siteground.com\/website-builder\" target=\"_blank\" rel=\"noopener\">SiteGround Website Builder<\/a> is our own proprietary page builder making crafting web pages a fun and rewarding experience. With its intuitive interface, you can instantly build eye-catching and professional-looking websites without writing a single line of code.&nbsp;<\/p>\n\n\n\n<p class=\"wp-block-paragraph\"><a href=\"https:\/\/www.siteground.com\/kb\/how-to-add-a-favicon\/\" target=\"_blank\" rel=\"noopener\">Adding a favicon to your website<\/a> using our Website Builder is easy and only takes a few clicks, just like many other features.<\/p>\n\n\n\n<p class=\"wp-block-paragraph\">While in the page editor, go to the <strong>Content <\/strong>tab, and click the <strong>Header<\/strong> section at the top of any page.<\/p>\n\n\n\n<figure class=\"wp-block-image size-full\"><img loading=\"lazy\" decoding=\"async\" width=\"1646\" height=\"809\" src=\"https:\/\/academy.siteground.com\/en\/wp-content\/uploads\/sites\/2\/2025\/07\/add-favicon-image-1646x809-1.jpeg\" alt=\"Adding a favicon to the SiteGround Website Builder\" class=\"wp-image-26628\" \/><\/figure>\n\n\n\n<p class=\"wp-block-paragraph\">From the Edit Header menu, navigate to the Favicon section and click on <strong>Add image. <\/strong>Select or upload the image you want to use as your favicon. The favicon will then appear in browser tabs once the changes are saved and the site is updated.<\/p>\n\n\n\n<h3 id=\"h-how-to-add-a-favicon-in-wordpress\" class=\"wp-block-heading\">How to Add a Favicon in WordPress<\/h3>\n\n\n\n<p class=\"wp-block-paragraph\"><strong>WordPress uses the term \u201csite icon\u201d instead of \u201cfavicon,\u201d<\/strong> but both are practically the same. <a href=\"https:\/\/www.siteground.com\/kb\/wordpress-favicon\/\" target=\"_blank\" rel=\"noopener\">Adding a favicon to a WordPress site<\/a> has always been easy, but it&#8217;s become even easier since the release of WordPress 6.5 in April 2025.&nbsp;<\/p>\n\n\n\n<p class=\"wp-block-paragraph\">Previously, you had to use the theme customizer, theme editor, or a plugin. But after the changes introduced in version 6.5, you can simply <strong>add the favicon from the general settings section<\/strong>.<\/p>\n\n\n\n<p class=\"wp-block-paragraph\">To add a favicon, <a href=\"https:\/\/www.siteground.com\/kb\/how-to-login-to-wordpress\/\" target=\"_blank\" rel=\"noopener\">log in to your WordPress dashboard<\/a>. Navigate to the <strong>Settings &gt; General <\/strong>section, and click the <strong>Choose a Site Icon <\/strong>button next to <strong>Site Icon.&nbsp;<\/strong><\/p>\n\n\n\n<figure class=\"wp-block-image size-large\"><img loading=\"lazy\" decoding=\"async\" width=\"1024\" height=\"561\" src=\"https:\/\/academy.siteground.com\/en\/wp-content\/uploads\/sites\/2\/2025\/06\/choose-site-icon-wordpress-1024x561.jpg\" alt=\"Uploading a site icon to a WordPress website\" class=\"wp-image-24486\" \/><\/figure>\n\n\n\n<p class=\"wp-block-paragraph\">In the pop-up window, choose an image file from your computer or your website\u2019s media gallery. The <strong>recommended site icon size is 512&#215;512 pixels at a ratio of 1:1<\/strong>. Once you\u2019re ready, hit the <strong>Save Changes <\/strong>button.&nbsp;<\/p>\n\n\n\n<figure class=\"wp-block-image size-large\"><img loading=\"lazy\" decoding=\"async\" width=\"1024\" height=\"809\" src=\"https:\/\/academy.siteground.com\/en\/wp-content\/uploads\/sites\/2\/2025\/06\/save-favicon-wordpress-1024x809.jpg\" alt=\"Saving a favicon in a WordPress website\" class=\"wp-image-24487\" \/><\/figure>\n\n\n\n<h2 id=\"h-what-are-the-benefits-of-using-favicons\" class=\"wp-block-heading\"><span class=\"ez-toc-section\" id=\"what-are-the-benefits-of-using-favicons\"><\/span>What Are the Benefits of Using Favicons?<span class=\"ez-toc-section-end\"><\/span><\/h2>\n\n\n\n<h3 id=\"h-better-user-experience\" class=\"wp-block-heading\">Better User Experience<\/h3>\n\n\n\n<p class=\"wp-block-paragraph\">Favicons enhance user experience by <strong>providing a visual identifier for websites, making navigation more intuitive and efficient<\/strong>. Web users can quickly locate and switch between tabs, bookmarks, and history entries, improving overall satisfaction and ease of use.<\/p>\n\n\n\n<h3 id=\"h-improved-user-retention\" class=\"wp-block-heading\">Improved User Retention<\/h3>\n\n\n\n<p class=\"wp-block-paragraph\">By helping users easily locate and return to websites, <strong>favicons contribute to improved user retention and engagement<\/strong>. A recognizable favicon can encourage users to spend more time on a site and return more frequently, fostering a loyal user base.<\/p>\n\n\n\n<h3 id=\"h-establishing-brand-identity-and-visibility\" class=\"wp-block-heading\">Establishing Brand Identity and Visibility<\/h3>\n\n\n\n<p class=\"wp-block-paragraph\">Favicons play a crucial role in reinforcing <a href=\"https:\/\/academy.siteground.com\/en\/branding-basics\/\" id=\"25354\" target=\"_blank\" rel=\"noopener\">branding basics<\/a>. They serve as <strong>a constant reminder of the brand<\/strong>, ensuring that a website stands out in users&#8217; minds. A well-designed favicon can enhance brand recognition and make a lasting impression on users.<\/p>\n\n\n\n<h2 id=\"h-what-are-the-best-practices-for-favicons\" class=\"wp-block-heading\"><span class=\"ez-toc-section\" id=\"what-are-the-best-practices-for-favicons\"><\/span>What Are the Best Practices for Favicons?<span class=\"ez-toc-section-end\"><\/span><\/h2>\n\n\n\n<p class=\"wp-block-paragraph\">The best favicon is simple, on-brand, and legible at tiny sizes\u2014think clean shapes, brand colors, and no text. Here are the key design and implementation practices to keep in mind.<\/p>\n\n\n\n<h3 id=\"h-keep-it-simple\" class=\"wp-block-heading\">Keep It Simple<\/h3>\n\n\n\n<p class=\"wp-block-paragraph\">Simplicity is key when designing a favicon. Given the small size, it&#8217;s important to <strong>create a design that is clear and easily recognizable<\/strong>. Avoid intricate details that may become lost or unclear when scaled down.<\/p>\n\n\n\n<h3 id=\"h-use-the-logo-as-a-foundation-but-don-t-duplicate-it\" class=\"wp-block-heading\">Use the Logo as a Foundation, But Don&#8217;t Duplicate It<\/h3>\n\n\n\n<p class=\"wp-block-paragraph\">While it&#8217;s effective to use the logo as a foundation for the favicon, avoid exact duplication. Instead, <strong>create a simplified version that captures the essence of the brand<\/strong> while remaining distinct and recognizable.<\/p>\n\n\n\n<h3 id=\"h-convey-the-brand-identity\" class=\"wp-block-heading\">Convey the Brand Identity<\/h3>\n\n\n\n<p class=\"wp-block-paragraph\">Ensure the favicon reflects the brand&#8217;s identity and values, serving as a visual representation of the company. It should <strong>align with the overall branding strategy and communicate the brand&#8217;s message<\/strong> effectively.<\/p>\n\n\n\n<h3 id=\"h-use-minimum-text\" class=\"wp-block-heading\">Use Minimum Text<\/h3>\n\n\n\n<p class=\"wp-block-paragraph\">Text can become unreadable at small sizes, so it&#8217;s best to <strong>avoid using text<\/strong> in favicons altogether. <strong>Focus on strong visual elements<\/strong> that convey the brand identity without relying on words.<\/p>\n\n\n\n<h3 id=\"h-consider-the-colors\" class=\"wp-block-heading\">Consider the Colors<\/h3>\n\n\n\n<p class=\"wp-block-paragraph\">Choose colors that align with the brand&#8217;s color scheme. Make sure they contrast well to remain visible against various backgrounds. A <strong>well-chosen color palette can enhance the favicon&#8217;s impact and recognition<\/strong>.<\/p>\n\n\n\n<h3 id=\"h-provide-multiple-favicon-sizes-nbsp-nbsp-nbsp-nbsp-nbsp-nbsp\" class=\"wp-block-heading\">Provide Multiple Favicon Sizes&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;<\/h3>\n\n\n\n<p class=\"wp-block-paragraph\">Visitors nowadays access websites from various devices with different screen sizes, so a single default favicon size might not look good on all of them. <strong>Add several files of varying dimensions<\/strong> to ensure your favicon appears clearly on all devices.&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;<\/p>\n\n\n\n<h2 id=\"h-do-favicons-affect-seo-nbsp\" class=\"wp-block-heading\"><span class=\"ez-toc-section\" id=\"do-favicons-affect-seo\"><\/span>Do Favicons Affect SEO?&nbsp;<span class=\"ez-toc-section-end\"><\/span><\/h2>\n\n\n\n<p class=\"wp-block-paragraph\">Favicons can indirectly impact <a href=\"https:\/\/www.siteground.com\/kb\/seo-general-guide\/\" target=\"_blank\" rel=\"noopener\">SEO (Search Engine Optimization)<\/a> by improving user experience and engagement. <strong>A recognizable favicon can <a href=\"https:\/\/developers.google.com\/search\/docs\/appearance\/favicon-in-search\" target=\"_blank\" rel=\"noopener nofollow\">increase click-through rates in search results<\/a> and encourage users to spend more time on a site<\/strong>, both of which can contribute to better search performance. Additionally, favicons contribute to a cohesive and professional online presence, which can enhance a website&#8217;s credibility and trustworthiness.<\/p>\n\n\n\n<p class=\"wp-block-paragraph\">Additionally, favicons contribute to a cohesive and professional online presence, which can enhance a website&#8217;s credibility and trustworthiness.&nbsp;&nbsp;<\/p>\n\n\n\n<h2 id=\"h-final-thoughts-on-favicons\" class=\"wp-block-heading\"><span class=\"ez-toc-section\" id=\"final-thoughts-on-favicons\"><\/span>Final Thoughts on Favicons<span class=\"ez-toc-section-end\"><\/span><\/h2>\n\n\n\n<p class=\"wp-block-paragraph\">Every detail of your website matters, and favicons are no exception. Though small, these icons play an important role in establishing credibility and reinforcing brand identity. By optimizing user experience and improving audience engagement, favicons help your website remain memorable and easily recognizable. Don&#8217;t overlook this essential element\u2014capitalize on its potential to effectively draw and retain visitors&#8217; attention.<\/p>\n\n\n\n<p class=\"wp-block-paragraph\">Ready to put it all together? With the <a href=\"https:\/\/www.siteground.com\/website-builder\" target=\"_blank\" rel=\"noopener\">SiteGround Website Builder<\/a>, adding your favicon is just a few clicks\u2014no code, no hassle. And the same goes for building your entire site. Its intuitive drag-and-drop interface makes it easy to create a professional, polished website without any technical know-how. Give it a try and see how simple it can be.<\/p>\n\n\n\n<div class=\"wp-block-buttons is-layout-flex wp-block-buttons-is-layout-flex\">\n<div class=\"wp-block-button\"><a class=\"wp-block-button__link wp-element-button\" href=\"https:\/\/www.siteground.com\/website-builder\" target=\"_blank\" rel=\"noopener\">Start building your website now<\/a><\/div>\n<\/div>\n\n\n<p>[24]<\/p>\n\n\n\n<h2 id=\"h-favicon-faqs\" class=\"wp-block-heading\"><span class=\"ez-toc-section\" id=\"favicon-faqs\"><\/span>Favicon FAQs<span class=\"ez-toc-section-end\"><\/span><\/h2>\n\n\n\n<div class=\"schema-faq wp-block-yoast-faq-block\"><div class=\"schema-faq-section\" id=\"faq-question-1776672148688\"><strong class=\"schema-faq-question\"><strong>What is a favicon used for?<\/strong><\/strong> <p class=\"schema-faq-answer\">A favicon is used to visually represent your website across browsers and devices\u2014appearing in browser tabs, bookmarks, search results, and mobile home screens. It helps users quickly identify and return to your site, especially when they have multiple tabs open.<\/p> <\/div> <\/div>\n\n\n\n<div class=\"schema-faq wp-block-yoast-faq-block\"><div class=\"schema-faq-section\" id=\"faq-question-1776672165503\"><strong class=\"schema-faq-question\"><strong>Is a favicon the same as a logo?<\/strong><\/strong> <p class=\"schema-faq-answer\">Not exactly. A favicon is often inspired by your logo, but it&#8217;s a simplified version designed to work at very small sizes. Where a logo can include text, detail, and multiple elements, a favicon needs to be instantly readable at 16\u00d716 pixels, so it&#8217;s usually just the most recognizable part of your brand mark.<\/p> <\/div> <\/div>\n\n\n\n<div class=\"schema-faq wp-block-yoast-faq-block\"><div class=\"schema-faq-section\" id=\"faq-question-1776672227946\"><strong class=\"schema-faq-question\"><strong>How do I generate a favicon?<\/strong><\/strong> <p class=\"schema-faq-answer\">There are several easy ways to create a favicon. Free online tools like RealFaviconGenerator let you upload a logo or image and automatically convert it into all the necessary sizes and formats. Design tools like Figma and Adobe Photoshop give you more creative control if you want to build one from scratch. If you&#8217;re a SiteGround client, <a href=\"https:\/\/www.siteground.com\/ai-studio\" target=\"_blank\" rel=\"noopener\">AI Studio<\/a>&#8216;s Image Designer is another great option for generating custom icon concepts using AI.<\/p> <\/div> <\/div>\n\n\n\n<div class=\"schema-faq wp-block-yoast-faq-block\"><div class=\"schema-faq-section\" id=\"faq-question-1776672257041\"><strong class=\"schema-faq-question\"><strong>What is an example of a favicon?<\/strong><\/strong> <p class=\"schema-faq-answer\">Some of the most recognizable favicons are Google&#8217;s multicolored &#8220;G,&#8221; Facebook&#8217;s white &#8220;f&#8221; on a blue background, and Amazon&#8217;s smiling arrow. They all share the same quality: a simple, bold visual that&#8217;s instantly identifiable even at tiny sizes.<\/p> <\/div> <\/div>\n\n\n\n<p class=\"wp-block-paragraph\"><em>This article was originally published in June of 2025, and then updated in April of 2026.<\/em><\/p>\n","protected":false},"excerpt":{"rendered":"<p>A favicon is the small icon you see in browser tabs, bookmarks, and search results\u2014it&#8217;s your website&#8217;s visual calling card, and it does more for your brand than you might think. A well-designed one makes your site look polished and helps users find their way back to you easily. This guide covers everything you need &hellip; <\/p>\n<p class=\"link-more\"><a href=\"https:\/\/academy.siteground.com\/en\/what-is-favicon\/\" class=\"more-link\">Continue reading<span class=\"screen-reader-text\"> &#8220;What Is a Favicon\u2014and Why Does Your Website Need One?&#8221;<\/span><\/a><\/p>\n","protected":false},"author":56,"featured_media":24585,"comment_status":"open","ping_status":"closed","sticky":false,"template":"","format":"standard","meta":{"footnotes":""},"categories":[7],"tags":[],"class_list":["post-24470","post","type-post","status-publish","format-standard","has-post-thumbnail","hentry","category-website-building"],"yoast_head":"<!-- This site is optimized with the Yoast SEO Premium plugin v25.9 (Yoast SEO v28.3) - https:\/\/yoast.com\/product\/yoast-seo-premium-wordpress\/ -->\n<title>What Is a Favicon? Sizes, Formats &amp; How to Add One - SiteGround Academy<\/title>\n<meta name=\"description\" content=\"What is a favicon? It\u2019s the small icon in browser tabs and search results\u2014learn why it matters and how to add one.\" \/>\n<meta name=\"robots\" content=\"index, follow, max-snippet:-1, max-image-preview:large, max-video-preview:-1\" \/>\n<link rel=\"canonical\" href=\"https:\/\/academy.siteground.com\/en\/what-is-favicon\/\" \/>\n<meta property=\"og:locale\" content=\"en_US\" \/>\n<meta property=\"og:type\" content=\"article\" \/>\n<meta property=\"og:title\" content=\"What Is a Favicon\u2014and Why Does Your Website Need One?\" \/>\n<meta property=\"og:description\" content=\"What is a favicon? It\u2019s the small icon in browser tabs and search results\u2014learn why it matters and how to add one.\" \/>\n<meta property=\"og:url\" content=\"https:\/\/academy.siteground.com\/en\/what-is-favicon\/\" \/>\n<meta property=\"og:site_name\" content=\"SiteGround\" \/>\n<meta property=\"article:publisher\" content=\"https:\/\/www.facebook.com\/siteground\" \/>\n<meta property=\"article:published_time\" content=\"2025-07-07T07:02:19+00:00\" \/>\n<meta property=\"article:modified_time\" content=\"2026-06-10T08:16:53+00:00\" \/>\n<meta property=\"og:image\" content=\"https:\/\/academy.siteground.com\/en\/wp-content\/uploads\/sites\/2\/2025\/06\/what-is-favicon-1.jpg\" \/>\n\t<meta property=\"og:image:width\" content=\"1200\" \/>\n\t<meta property=\"og:image:height\" content=\"600\" \/>\n\t<meta property=\"og:image:type\" content=\"image\/jpeg\" \/>\n<meta name=\"author\" content=\"Dimitar Poydovski\" \/>\n<meta name=\"twitter:card\" content=\"summary_large_image\" \/>\n<meta name=\"twitter:creator\" content=\"@siteground\" \/>\n<meta name=\"twitter:site\" content=\"@siteground\" \/>\n<meta name=\"twitter:label1\" content=\"Written by\" \/>\n\t<meta name=\"twitter:data1\" content=\"Dimitar Poydovski\" \/>\n\t<meta name=\"twitter:label2\" content=\"Est. reading time\" \/>\n\t<meta name=\"twitter:data2\" content=\"15 minutes\" \/>\n<script type=\"application\/ld+json\" class=\"yoast-schema-graph\">{\"@context\":\"https:\\\/\\\/schema.org\",\"@graph\":[{\"@type\":\"Article\",\"@id\":\"https:\\\/\\\/academy.siteground.com\\\/en\\\/what-is-favicon\\\/#article\",\"isPartOf\":{\"@id\":\"https:\\\/\\\/academy.siteground.com\\\/en\\\/what-is-favicon\\\/\"},\"author\":{\"name\":\"Dimitar Poydovski\",\"@id\":\"https:\\\/\\\/academy.siteground.com\\\/en\\\/#\\\/schema\\\/person\\\/997002cdb589962cca0c1895ef091521\"},\"headline\":\"What Is a Favicon\u2014and Why Does Your Website Need One?\",\"datePublished\":\"2025-07-07T07:02:19+00:00\",\"dateModified\":\"2026-06-10T08:16:53+00:00\",\"mainEntityOfPage\":{\"@id\":\"https:\\\/\\\/academy.siteground.com\\\/en\\\/what-is-favicon\\\/\"},\"wordCount\":2808,\"commentCount\":0,\"publisher\":{\"@id\":\"https:\\\/\\\/academy.siteground.com\\\/en\\\/#organization\"},\"image\":{\"@id\":\"https:\\\/\\\/academy.siteground.com\\\/en\\\/what-is-favicon\\\/#primaryimage\"},\"thumbnailUrl\":\"https:\\\/\\\/academy.siteground.com\\\/en\\\/wp-content\\\/uploads\\\/sites\\\/2\\\/2025\\\/06\\\/what-is-favicon-1.jpg\",\"articleSection\":[\"Website Building\"],\"inLanguage\":\"en-US\",\"potentialAction\":[{\"@type\":\"CommentAction\",\"name\":\"Comment\",\"target\":[\"https:\\\/\\\/academy.siteground.com\\\/en\\\/what-is-favicon\\\/#respond\"]}]},{\"@type\":[\"WebPage\",\"FAQPage\"],\"@id\":\"https:\\\/\\\/academy.siteground.com\\\/en\\\/what-is-favicon\\\/\",\"url\":\"https:\\\/\\\/academy.siteground.com\\\/en\\\/what-is-favicon\\\/\",\"name\":\"What Is a Favicon? Sizes, Formats & How to Add One - SiteGround Academy\",\"isPartOf\":{\"@id\":\"https:\\\/\\\/academy.siteground.com\\\/en\\\/#website\"},\"primaryImageOfPage\":{\"@id\":\"https:\\\/\\\/academy.siteground.com\\\/en\\\/what-is-favicon\\\/#primaryimage\"},\"image\":{\"@id\":\"https:\\\/\\\/academy.siteground.com\\\/en\\\/what-is-favicon\\\/#primaryimage\"},\"thumbnailUrl\":\"https:\\\/\\\/academy.siteground.com\\\/en\\\/wp-content\\\/uploads\\\/sites\\\/2\\\/2025\\\/06\\\/what-is-favicon-1.jpg\",\"datePublished\":\"2025-07-07T07:02:19+00:00\",\"dateModified\":\"2026-06-10T08:16:53+00:00\",\"description\":\"What is a favicon? It\u2019s the small icon in browser tabs and search results\u2014learn why it matters and how to add one.\",\"breadcrumb\":{\"@id\":\"https:\\\/\\\/academy.siteground.com\\\/en\\\/what-is-favicon\\\/#breadcrumb\"},\"mainEntity\":[{\"@id\":\"https:\\\/\\\/academy.siteground.com\\\/en\\\/what-is-favicon\\\/#faq-question-1776672148688\"},{\"@id\":\"https:\\\/\\\/academy.siteground.com\\\/en\\\/what-is-favicon\\\/#faq-question-1776672165503\"},{\"@id\":\"https:\\\/\\\/academy.siteground.com\\\/en\\\/what-is-favicon\\\/#faq-question-1776672227946\"},{\"@id\":\"https:\\\/\\\/academy.siteground.com\\\/en\\\/what-is-favicon\\\/#faq-question-1776672257041\"}],\"inLanguage\":\"en-US\",\"potentialAction\":[{\"@type\":\"ReadAction\",\"target\":[\"https:\\\/\\\/academy.siteground.com\\\/en\\\/what-is-favicon\\\/\"]}]},{\"@type\":\"ImageObject\",\"inLanguage\":\"en-US\",\"@id\":\"https:\\\/\\\/academy.siteground.com\\\/en\\\/what-is-favicon\\\/#primaryimage\",\"url\":\"https:\\\/\\\/academy.siteground.com\\\/en\\\/wp-content\\\/uploads\\\/sites\\\/2\\\/2025\\\/06\\\/what-is-favicon-1.jpg\",\"contentUrl\":\"https:\\\/\\\/academy.siteground.com\\\/en\\\/wp-content\\\/uploads\\\/sites\\\/2\\\/2025\\\/06\\\/what-is-favicon-1.jpg\",\"width\":1200,\"height\":600,\"caption\":\"What Is a Favicon: Benefits, Best Practices and Usage\u00a0\"},{\"@type\":\"BreadcrumbList\",\"@id\":\"https:\\\/\\\/academy.siteground.com\\\/en\\\/what-is-favicon\\\/#breadcrumb\",\"itemListElement\":[{\"@type\":\"ListItem\",\"position\":1,\"name\":\"Home\",\"item\":\"https:\\\/\\\/academy.siteground.com\\\/en\\\/\"},{\"@type\":\"ListItem\",\"position\":2,\"name\":\"What Is a Favicon\u2014and Why Does Your Website Need One?\"}]},{\"@type\":\"WebSite\",\"@id\":\"https:\\\/\\\/academy.siteground.com\\\/en\\\/#website\",\"url\":\"https:\\\/\\\/academy.siteground.com\\\/en\\\/\",\"name\":\"SiteGround Academy\",\"description\":\"The SiteGround academy provides a wide variety of tips, tools, and resources related to WordPress, web performance, website optimization and site security.\",\"publisher\":{\"@id\":\"https:\\\/\\\/academy.siteground.com\\\/en\\\/#organization\"},\"potentialAction\":[{\"@type\":\"SearchAction\",\"target\":{\"@type\":\"EntryPoint\",\"urlTemplate\":\"https:\\\/\\\/academy.siteground.com\\\/en\\\/?s={search_term_string}\"},\"query-input\":{\"@type\":\"PropertyValueSpecification\",\"valueRequired\":true,\"valueName\":\"search_term_string\"}}],\"inLanguage\":\"en-US\"},{\"@type\":\"Organization\",\"@id\":\"https:\\\/\\\/academy.siteground.com\\\/en\\\/#organization\",\"name\":\"SiteGround\",\"url\":\"https:\\\/\\\/academy.siteground.com\\\/en\\\/\",\"logo\":{\"@type\":\"ImageObject\",\"inLanguage\":\"en-US\",\"@id\":\"https:\\\/\\\/academy.siteground.com\\\/en\\\/#\\\/schema\\\/logo\\\/image\\\/\",\"url\":\"https:\\\/\\\/academy.siteground.com\\\/en\\\/wp-content\\\/uploads\\\/sites\\\/2\\\/2025\\\/01\\\/Siteground-Logo-on-white.jpg\",\"contentUrl\":\"https:\\\/\\\/academy.siteground.com\\\/en\\\/wp-content\\\/uploads\\\/sites\\\/2\\\/2025\\\/01\\\/Siteground-Logo-on-white.jpg\",\"width\":1200,\"height\":400,\"caption\":\"SiteGround\"},\"image\":{\"@id\":\"https:\\\/\\\/academy.siteground.com\\\/en\\\/#\\\/schema\\\/logo\\\/image\\\/\"},\"sameAs\":[\"https:\\\/\\\/www.facebook.com\\\/siteground\",\"https:\\\/\\\/x.com\\\/siteground\",\"https:\\\/\\\/www.instagram.com\\\/siteground\\\/\",\"https:\\\/\\\/www.youtube.com\\\/@siteground\"],\"description\":\"The SiteGround academy provides a wide variety of tips, tools, and resources related to WordPress, web performance, website optimization and site security.\",\"foundingDate\":\"2004-03-22\",\"numberOfEmployees\":{\"@type\":\"QuantitativeValue\",\"minValue\":\"501\",\"maxValue\":\"1000\"}},{\"@type\":\"Person\",\"@id\":\"https:\\\/\\\/academy.siteground.com\\\/en\\\/#\\\/schema\\\/person\\\/997002cdb589962cca0c1895ef091521\",\"name\":\"Dimitar Poydovski\",\"image\":{\"@type\":\"ImageObject\",\"inLanguage\":\"en-US\",\"@id\":\"https:\\\/\\\/secure.gravatar.com\\\/avatar\\\/8df4995c1809ef93098367691413462a461e9217569588ff103c83c359a82f3a?s=96&d=mm&r=g\",\"url\":\"https:\\\/\\\/secure.gravatar.com\\\/avatar\\\/8df4995c1809ef93098367691413462a461e9217569588ff103c83c359a82f3a?s=96&d=mm&r=g\",\"contentUrl\":\"https:\\\/\\\/secure.gravatar.com\\\/avatar\\\/8df4995c1809ef93098367691413462a461e9217569588ff103c83c359a82f3a?s=96&d=mm&r=g\",\"caption\":\"Dimitar Poydovski\"},\"sameAs\":[\"https:\\\/\\\/www.linkedin.com\\\/in\\\/dimitar-poydovski-032462175\\\/\"],\"url\":\"https:\\\/\\\/academy.siteground.com\\\/en\\\/author\\\/dimitarpoydovski\\\/\"},{\"@type\":\"Question\",\"@id\":\"https:\\\/\\\/academy.siteground.com\\\/en\\\/what-is-favicon\\\/#faq-question-1776672148688\",\"position\":1,\"url\":\"https:\\\/\\\/academy.siteground.com\\\/en\\\/what-is-favicon\\\/#faq-question-1776672148688\",\"name\":\"What is a favicon used for?\",\"answerCount\":1,\"acceptedAnswer\":{\"@type\":\"Answer\",\"text\":\"A favicon is used to visually represent your website across browsers and devices\u2014appearing in browser tabs, bookmarks, search results, and mobile home screens. It helps users quickly identify and return to your site, especially when they have multiple tabs open.\",\"inLanguage\":\"en-US\"},\"inLanguage\":\"en-US\"},{\"@type\":\"Question\",\"@id\":\"https:\\\/\\\/academy.siteground.com\\\/en\\\/what-is-favicon\\\/#faq-question-1776672165503\",\"position\":2,\"url\":\"https:\\\/\\\/academy.siteground.com\\\/en\\\/what-is-favicon\\\/#faq-question-1776672165503\",\"name\":\"Is a favicon the same as a logo?\",\"answerCount\":1,\"acceptedAnswer\":{\"@type\":\"Answer\",\"text\":\"Not exactly. A favicon is often inspired by your logo, but it's a simplified version designed to work at very small sizes. Where a logo can include text, detail, and multiple elements, a favicon needs to be instantly readable at 16\u00d716 pixels, so it's usually just the most recognizable part of your brand mark.\",\"inLanguage\":\"en-US\"},\"inLanguage\":\"en-US\"},{\"@type\":\"Question\",\"@id\":\"https:\\\/\\\/academy.siteground.com\\\/en\\\/what-is-favicon\\\/#faq-question-1776672227946\",\"position\":3,\"url\":\"https:\\\/\\\/academy.siteground.com\\\/en\\\/what-is-favicon\\\/#faq-question-1776672227946\",\"name\":\"How do I generate a favicon?\",\"answerCount\":1,\"acceptedAnswer\":{\"@type\":\"Answer\",\"text\":\"There are several easy ways to create a favicon. Free online tools like RealFaviconGenerator let you upload a logo or image and automatically convert it into all the necessary sizes and formats. Design tools like Figma and Adobe Photoshop give you more creative control if you want to build one from scratch. If you're a SiteGround client, <a href=\\\"https:\\\/\\\/www.siteground.com\\\/ai-studio\\\" target=\\\"_blank\\\" rel=\\\"noreferrer noopener\\\">AI Studio<\\\/a>'s Image Designer is another great option for generating custom icon concepts using AI.\",\"inLanguage\":\"en-US\"},\"inLanguage\":\"en-US\"},{\"@type\":\"Question\",\"@id\":\"https:\\\/\\\/academy.siteground.com\\\/en\\\/what-is-favicon\\\/#faq-question-1776672257041\",\"position\":4,\"url\":\"https:\\\/\\\/academy.siteground.com\\\/en\\\/what-is-favicon\\\/#faq-question-1776672257041\",\"name\":\"What is an example of a favicon?\",\"answerCount\":1,\"acceptedAnswer\":{\"@type\":\"Answer\",\"text\":\"Some of the most recognizable favicons are Google's multicolored \\\"G,\\\" Facebook's white \\\"f\\\" on a blue background, and Amazon's smiling arrow. They all share the same quality: a simple, bold visual that's instantly identifiable even at tiny sizes.\",\"inLanguage\":\"en-US\"},\"inLanguage\":\"en-US\"}]}<\/script>\n<!-- \/ Yoast SEO Premium plugin. -->","yoast_head_json":{"title":"What Is a Favicon? Sizes, Formats & How to Add One - SiteGround Academy","description":"What is a favicon? It\u2019s the small icon in browser tabs and search results\u2014learn why it matters and how to add one.","robots":{"index":"index","follow":"follow","max-snippet":"max-snippet:-1","max-image-preview":"max-image-preview:large","max-video-preview":"max-video-preview:-1"},"canonical":"https:\/\/academy.siteground.com\/en\/what-is-favicon\/","og_locale":"en_US","og_type":"article","og_title":"What Is a Favicon\u2014and Why Does Your Website Need One?","og_description":"What is a favicon? It\u2019s the small icon in browser tabs and search results\u2014learn why it matters and how to add one.","og_url":"https:\/\/academy.siteground.com\/en\/what-is-favicon\/","og_site_name":"SiteGround","article_publisher":"https:\/\/www.facebook.com\/siteground","article_published_time":"2025-07-07T07:02:19+00:00","article_modified_time":"2026-06-10T08:16:53+00:00","og_image":[{"width":1200,"height":600,"url":"https:\/\/academy.siteground.com\/en\/wp-content\/uploads\/sites\/2\/2025\/06\/what-is-favicon-1.jpg","type":"image\/jpeg"}],"author":"Dimitar Poydovski","twitter_card":"summary_large_image","twitter_creator":"@siteground","twitter_site":"@siteground","twitter_misc":{"Written by":"Dimitar Poydovski","Est. reading time":"15 minutes"},"schema":{"@context":"https:\/\/schema.org","@graph":[{"@type":"Article","@id":"https:\/\/academy.siteground.com\/en\/what-is-favicon\/#article","isPartOf":{"@id":"https:\/\/academy.siteground.com\/en\/what-is-favicon\/"},"author":{"name":"Dimitar Poydovski","@id":"https:\/\/academy.siteground.com\/en\/#\/schema\/person\/997002cdb589962cca0c1895ef091521"},"headline":"What Is a Favicon\u2014and Why Does Your Website Need One?","datePublished":"2025-07-07T07:02:19+00:00","dateModified":"2026-06-10T08:16:53+00:00","mainEntityOfPage":{"@id":"https:\/\/academy.siteground.com\/en\/what-is-favicon\/"},"wordCount":2808,"commentCount":0,"publisher":{"@id":"https:\/\/academy.siteground.com\/en\/#organization"},"image":{"@id":"https:\/\/academy.siteground.com\/en\/what-is-favicon\/#primaryimage"},"thumbnailUrl":"https:\/\/academy.siteground.com\/en\/wp-content\/uploads\/sites\/2\/2025\/06\/what-is-favicon-1.jpg","articleSection":["Website Building"],"inLanguage":"en-US","potentialAction":[{"@type":"CommentAction","name":"Comment","target":["https:\/\/academy.siteground.com\/en\/what-is-favicon\/#respond"]}]},{"@type":["WebPage","FAQPage"],"@id":"https:\/\/academy.siteground.com\/en\/what-is-favicon\/","url":"https:\/\/academy.siteground.com\/en\/what-is-favicon\/","name":"What Is a Favicon? Sizes, Formats & How to Add One - SiteGround Academy","isPartOf":{"@id":"https:\/\/academy.siteground.com\/en\/#website"},"primaryImageOfPage":{"@id":"https:\/\/academy.siteground.com\/en\/what-is-favicon\/#primaryimage"},"image":{"@id":"https:\/\/academy.siteground.com\/en\/what-is-favicon\/#primaryimage"},"thumbnailUrl":"https:\/\/academy.siteground.com\/en\/wp-content\/uploads\/sites\/2\/2025\/06\/what-is-favicon-1.jpg","datePublished":"2025-07-07T07:02:19+00:00","dateModified":"2026-06-10T08:16:53+00:00","description":"What is a favicon? It\u2019s the small icon in browser tabs and search results\u2014learn why it matters and how to add one.","breadcrumb":{"@id":"https:\/\/academy.siteground.com\/en\/what-is-favicon\/#breadcrumb"},"mainEntity":[{"@id":"https:\/\/academy.siteground.com\/en\/what-is-favicon\/#faq-question-1776672148688"},{"@id":"https:\/\/academy.siteground.com\/en\/what-is-favicon\/#faq-question-1776672165503"},{"@id":"https:\/\/academy.siteground.com\/en\/what-is-favicon\/#faq-question-1776672227946"},{"@id":"https:\/\/academy.siteground.com\/en\/what-is-favicon\/#faq-question-1776672257041"}],"inLanguage":"en-US","potentialAction":[{"@type":"ReadAction","target":["https:\/\/academy.siteground.com\/en\/what-is-favicon\/"]}]},{"@type":"ImageObject","inLanguage":"en-US","@id":"https:\/\/academy.siteground.com\/en\/what-is-favicon\/#primaryimage","url":"https:\/\/academy.siteground.com\/en\/wp-content\/uploads\/sites\/2\/2025\/06\/what-is-favicon-1.jpg","contentUrl":"https:\/\/academy.siteground.com\/en\/wp-content\/uploads\/sites\/2\/2025\/06\/what-is-favicon-1.jpg","width":1200,"height":600,"caption":"What Is a Favicon: Benefits, Best Practices and Usage\u00a0"},{"@type":"BreadcrumbList","@id":"https:\/\/academy.siteground.com\/en\/what-is-favicon\/#breadcrumb","itemListElement":[{"@type":"ListItem","position":1,"name":"Home","item":"https:\/\/academy.siteground.com\/en\/"},{"@type":"ListItem","position":2,"name":"What Is a Favicon\u2014and Why Does Your Website Need One?"}]},{"@type":"WebSite","@id":"https:\/\/academy.siteground.com\/en\/#website","url":"https:\/\/academy.siteground.com\/en\/","name":"SiteGround Academy","description":"The SiteGround academy provides a wide variety of tips, tools, and resources related to WordPress, web performance, website optimization and site security.","publisher":{"@id":"https:\/\/academy.siteground.com\/en\/#organization"},"potentialAction":[{"@type":"SearchAction","target":{"@type":"EntryPoint","urlTemplate":"https:\/\/academy.siteground.com\/en\/?s={search_term_string}"},"query-input":{"@type":"PropertyValueSpecification","valueRequired":true,"valueName":"search_term_string"}}],"inLanguage":"en-US"},{"@type":"Organization","@id":"https:\/\/academy.siteground.com\/en\/#organization","name":"SiteGround","url":"https:\/\/academy.siteground.com\/en\/","logo":{"@type":"ImageObject","inLanguage":"en-US","@id":"https:\/\/academy.siteground.com\/en\/#\/schema\/logo\/image\/","url":"https:\/\/academy.siteground.com\/en\/wp-content\/uploads\/sites\/2\/2025\/01\/Siteground-Logo-on-white.jpg","contentUrl":"https:\/\/academy.siteground.com\/en\/wp-content\/uploads\/sites\/2\/2025\/01\/Siteground-Logo-on-white.jpg","width":1200,"height":400,"caption":"SiteGround"},"image":{"@id":"https:\/\/academy.siteground.com\/en\/#\/schema\/logo\/image\/"},"sameAs":["https:\/\/www.facebook.com\/siteground","https:\/\/x.com\/siteground","https:\/\/www.instagram.com\/siteground\/","https:\/\/www.youtube.com\/@siteground"],"description":"The SiteGround academy provides a wide variety of tips, tools, and resources related to WordPress, web performance, website optimization and site security.","foundingDate":"2004-03-22","numberOfEmployees":{"@type":"QuantitativeValue","minValue":"501","maxValue":"1000"}},{"@type":"Person","@id":"https:\/\/academy.siteground.com\/en\/#\/schema\/person\/997002cdb589962cca0c1895ef091521","name":"Dimitar Poydovski","image":{"@type":"ImageObject","inLanguage":"en-US","@id":"https:\/\/secure.gravatar.com\/avatar\/8df4995c1809ef93098367691413462a461e9217569588ff103c83c359a82f3a?s=96&d=mm&r=g","url":"https:\/\/secure.gravatar.com\/avatar\/8df4995c1809ef93098367691413462a461e9217569588ff103c83c359a82f3a?s=96&d=mm&r=g","contentUrl":"https:\/\/secure.gravatar.com\/avatar\/8df4995c1809ef93098367691413462a461e9217569588ff103c83c359a82f3a?s=96&d=mm&r=g","caption":"Dimitar Poydovski"},"sameAs":["https:\/\/www.linkedin.com\/in\/dimitar-poydovski-032462175\/"],"url":"https:\/\/academy.siteground.com\/en\/author\/dimitarpoydovski\/"},{"@type":"Question","@id":"https:\/\/academy.siteground.com\/en\/what-is-favicon\/#faq-question-1776672148688","position":1,"url":"https:\/\/academy.siteground.com\/en\/what-is-favicon\/#faq-question-1776672148688","name":"What is a favicon used for?","answerCount":1,"acceptedAnswer":{"@type":"Answer","text":"A favicon is used to visually represent your website across browsers and devices\u2014appearing in browser tabs, bookmarks, search results, and mobile home screens. It helps users quickly identify and return to your site, especially when they have multiple tabs open.","inLanguage":"en-US"},"inLanguage":"en-US"},{"@type":"Question","@id":"https:\/\/academy.siteground.com\/en\/what-is-favicon\/#faq-question-1776672165503","position":2,"url":"https:\/\/academy.siteground.com\/en\/what-is-favicon\/#faq-question-1776672165503","name":"Is a favicon the same as a logo?","answerCount":1,"acceptedAnswer":{"@type":"Answer","text":"Not exactly. A favicon is often inspired by your logo, but it's a simplified version designed to work at very small sizes. Where a logo can include text, detail, and multiple elements, a favicon needs to be instantly readable at 16\u00d716 pixels, so it's usually just the most recognizable part of your brand mark.","inLanguage":"en-US"},"inLanguage":"en-US"},{"@type":"Question","@id":"https:\/\/academy.siteground.com\/en\/what-is-favicon\/#faq-question-1776672227946","position":3,"url":"https:\/\/academy.siteground.com\/en\/what-is-favicon\/#faq-question-1776672227946","name":"How do I generate a favicon?","answerCount":1,"acceptedAnswer":{"@type":"Answer","text":"There are several easy ways to create a favicon. Free online tools like RealFaviconGenerator let you upload a logo or image and automatically convert it into all the necessary sizes and formats. Design tools like Figma and Adobe Photoshop give you more creative control if you want to build one from scratch. If you're a SiteGround client, <a href=\"https:\/\/www.siteground.com\/ai-studio\" target=\"_blank\" rel=\"noreferrer noopener\">AI Studio<\/a>'s Image Designer is another great option for generating custom icon concepts using AI.","inLanguage":"en-US"},"inLanguage":"en-US"},{"@type":"Question","@id":"https:\/\/academy.siteground.com\/en\/what-is-favicon\/#faq-question-1776672257041","position":4,"url":"https:\/\/academy.siteground.com\/en\/what-is-favicon\/#faq-question-1776672257041","name":"What is an example of a favicon?","answerCount":1,"acceptedAnswer":{"@type":"Answer","text":"Some of the most recognizable favicons are Google's multicolored \"G,\" Facebook's white \"f\" on a blue background, and Amazon's smiling arrow. They all share the same quality: a simple, bold visual that's instantly identifiable even at tiny sizes.","inLanguage":"en-US"},"inLanguage":"en-US"}]}},"_links":{"self":[{"href":"https:\/\/academy.siteground.com\/en\/wp-json\/wp\/v2\/posts\/24470","targetHints":{"allow":["GET"]}}],"collection":[{"href":"https:\/\/academy.siteground.com\/en\/wp-json\/wp\/v2\/posts"}],"about":[{"href":"https:\/\/academy.siteground.com\/en\/wp-json\/wp\/v2\/types\/post"}],"author":[{"embeddable":true,"href":"https:\/\/academy.siteground.com\/en\/wp-json\/wp\/v2\/users\/56"}],"replies":[{"embeddable":true,"href":"https:\/\/academy.siteground.com\/en\/wp-json\/wp\/v2\/comments?post=24470"}],"version-history":[{"count":9,"href":"https:\/\/academy.siteground.com\/en\/wp-json\/wp\/v2\/posts\/24470\/revisions"}],"predecessor-version":[{"id":27181,"href":"https:\/\/academy.siteground.com\/en\/wp-json\/wp\/v2\/posts\/24470\/revisions\/27181"}],"wp:featuredmedia":[{"embeddable":true,"href":"https:\/\/academy.siteground.com\/en\/wp-json\/wp\/v2\/media\/24585"}],"wp:attachment":[{"href":"https:\/\/academy.siteground.com\/en\/wp-json\/wp\/v2\/media?parent=24470"}],"wp:term":[{"taxonomy":"category","embeddable":true,"href":"https:\/\/academy.siteground.com\/en\/wp-json\/wp\/v2\/categories?post=24470"},{"taxonomy":"post_tag","embeddable":true,"href":"https:\/\/academy.siteground.com\/en\/wp-json\/wp\/v2\/tags?post=24470"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}