{"id":6065,"date":"2024-10-21T10:17:16","date_gmt":"2024-10-21T10:17:16","guid":{"rendered":"https:\/\/mobo.co.uk\/news\/?p=6065"},"modified":"2024-10-21T10:20:48","modified_gmt":"2024-10-21T10:20:48","slug":"maximising-your-websites-favicon-for-google-search-results","status":"publish","type":"post","link":"https:\/\/mobo.co.uk\/news\/maximising-your-websites-favicon-for-google-search-results\/","title":{"rendered":"Maximising Your Website’s Favicon for Google Search Results"},"content":{"rendered":"\n

In the ever-evolving landscape of digital marketing, every detail counts when it comes to enhancing your website’s visibility. One often overlooked element is the favicon\u2014the small icon that represents your website in browser tabs, bookmarks, and, importantly, in Google search results. In this blog post, we’ll delve into the best practices for creating and implementing favicons that not only look sharp across devices but also adhere to Google’s guidelines, ensuring your site stands out in search listings.<\/p>\n\n\n\n

Why Favicons Matter<\/strong><\/h2>\n\n\n\n

Favicons play a crucial role in branding and user experience. They help users quickly identify your website among multiple open tabs and enhance the aesthetic appeal of your site in bookmarks and search results. Since July 2019, Google has been displaying favicons alongside search results on mobile devices, making it even more important to optimise your favicon for maximum visibility.<\/p>\n\n\n\n

Google’s Favicon Guidelines<\/strong><\/h2>\n\n\n\n

To ensure your favicon appears correctly in Google search results, it’s essential to follow Google’s specific guidelines:<\/p>\n\n\n\n

    \n
  • Size<\/strong>: Use a favicon that’s at least 48\u00d748 pixels<\/strong>.<\/li>\n\n\n\n
  • Format<\/strong>: Supported formats include PNG<\/strong>, SVG<\/strong>, GIF<\/strong>, ICO<\/strong>, and JPEG<\/strong>. PNG is preferred for its transparency support and high quality.<\/li>\n\n\n\n
  • Aspect Ratio<\/strong>: Favicons should be square to prevent distortion or cropping.<\/li>\n\n\n\n
  • Accessibility<\/strong>: The favicon file must be accessible to Googlebot and not blocked by robots.txt<\/code>.<\/li>\n<\/ul>\n\n\n\n

    Best Practices for Favicon Implementation<\/strong><\/h2>\n\n\n\n

    1. Use a High-Quality, Simple Design<\/strong><\/h3>\n\n\n\n

    A favicon is displayed at a very small size, so simplicity is key. Use a design that is:<\/p>\n\n\n\n

      \n
    • Recognisable<\/strong>: Incorporate elements of your brand identity.<\/li>\n\n\n\n
    • Clear<\/strong>: Avoid intricate details that may not be visible at smaller sizes.<\/li>\n\n\n\n
    • Contrasting<\/strong>: Use contrasting colours to make your favicon stand out against different backgrounds.<\/li>\n<\/ul>\n\n\n\n

      2. Create Multiple Icon Sizes<\/strong><\/h3>\n\n\n\n

      While Google requires a minimum size of 48\u00d748 pixels, it’s beneficial to provide favicons in multiple sizes to cater to different devices and platforms:<\/p>\n\n\n\n

        \n
      • 16\u00d716 pixels<\/strong>: Standard favicon size for browser tabs.<\/li>\n\n\n\n
      • 32\u00d732 pixels<\/strong>: Used in taskbar shortcuts.<\/li>\n\n\n\n
      • 48\u00d748 pixels and above<\/strong>: For high-resolution displays and Google search results.<\/li>\n<\/ul>\n\n\n\n

        3. Implement SVG Favicons<\/strong><\/h3>\n\n\n\n

        Scalable Vector Graphics (SVG) favicons are resolution-independent and ensure your icon looks crisp on all devices:<\/p>\n\n\n\n

        htmlCopy code<link rel=\"icon\" href=\"\/favicon.svg\" type=\"image\/svg+xml\">\n<\/code><\/pre>\n\n\n\n
        4. Specify the Favicon in Your HTML<\/strong><\/h3>\n\n\n\n
        Place the favicon link in the <head><\/code> section of your HTML:<\/p>\n\n\n\n
        htmlCopy code<link rel=\"icon\" href=\"\/favicon-48x48.png\" sizes=\"48x48\" type=\"image\/png\">\n<\/code><\/pre>\n\n\n\n
        5. Optimise for Different Platforms<\/strong><\/h3>\n\n\n\n
        Apple Touch Icons for iOS Devices<\/strong><\/h4>\n\n\n\n
        To support users who add your website to their iOS home screen:<\/p>\n\n\n\n
        htmlCopy code<link rel=\"apple-touch-icon\" sizes=\"180x180\" href=\"\/apple-icon-180x180.png\">\n<\/code><\/pre>\n\n\n\n
        Manifest for Android and PWA<\/strong><\/h4>\n\n\n\n
        For Android devices and Progressive Web Apps:<\/p>\n\n\n\n
        htmlCopy code<link rel=\"manifest\" href=\"\/manifest.json\">\n<meta name=\"theme-colour\" content=\"#ffffff\">\n<\/code><\/pre>\n\n\n\n
        Microsoft Tiles<\/strong><\/h4>\n\n\n\n
        For Windows tiles:<\/p>\n\n\n\n
        htmlCopy code<meta name=\"msapplication-TileColour\" content=\"#ffffff\">\n<meta name=\"msapplication-TileImage\" content=\"\/ms-icon-144x144.png\">\n<\/code><\/pre>\n\n\n\n
        Avoiding Common Mistakes<\/strong><\/h2>\n\n\n\n
          \n
        • Multiple Favicon Declarations<\/strong>: Having multiple <link rel=\"icon\"><\/code> tags can confuse browsers and Google’s crawlers. Stick to a single declaration for your primary favicon.<\/li>\n\n\n\n
        • Incorrect File Paths<\/strong>: Ensure the paths to your favicon files are correct and that the files are uploaded to your server.<\/li>\n\n\n\n
        • Blocking with Robots.txt<\/strong>: Do not block your favicon files from crawlers; they need to be accessible to be displayed in search results.<\/li>\n<\/ul>\n\n\n\n
          Testing Your Favicon<\/strong><\/h2>\n\n\n\n
          After implementing your favicon:<\/p>\n\n\n\n
            \n
          • Check in Different Browsers<\/strong>: Ensure it displays correctly in Chrome, Firefox, Safari, Edge, etc.<\/li>\n\n\n\n
          • View on Various Devices<\/strong>: Test on desktop, tablet, and mobile devices.<\/li>\n\n\n\n
          • Use Google’s Rich Results Test<\/strong>: Verify that your favicon is correctly recognised by Google.<\/li>\n<\/ul>\n\n\n\n
            Sample Code Implementation<\/strong><\/h2>\n\n\n\n
            Here’s how your HTML <head><\/code> section might look after optimising your favicon:<\/p>\n\n\n\n
            htmlCopy code<head>\n    <!-- Primary Favicon -->\n    <link rel=\"icon\" href=\"\/favicon-48x48.png\" sizes=\"48x48\" type=\"image\/png\">\n\n    <!-- SVG Favicon (Alternative) -->\n    <!-- <link rel=\"icon\" href=\"\/favicon.svg\" type=\"image\/svg+xml\"> -->\n\n    <!-- Apple Touch Icon -->\n    <link rel=\"apple-touch-icon\" sizes=\"180x180\" href=\"\/apple-icon-180x180.png\">\n\n    <!-- Manifest for Android and PWA -->\n    <link rel=\"manifest\" href=\"\/manifest.json\">\n    <meta name=\"theme-colour\" content=\"#ffffff\">\n\n    <!-- Microsoft Tiles -->\n    <meta name=\"msapplication-TileColour\" content=\"#ffffff\">\n    <meta name=\"msapplication-TileImage\" content=\"\/ms-icon-144x144.png\">\n<\/head>\n<\/code><\/pre>\n\n\n\n
            Conclusion<\/strong><\/h2>\n\n\n\n
            Optimising your favicon is a small but significant step in enhancing your website’s presence in Google search results and across various devices. By following the guidelines outlined above, you ensure that your favicon is displayed correctly, helping users recognise and trust your website.<\/p>\n\n\n\n
            Remember, attention to detail can set your website apart from the competition. So take the time to create a high-quality favicon that represents your brand and complies with Google’s requirements.<\/p>\n
            <\/div>","protected":false},"excerpt":{"rendered":"
            In the ever-evolving landscape of digital marketing, every detail counts when it comes to enhancing…<\/p>\n","protected":false},"author":1,"featured_media":5920,"comment_status":"closed","ping_status":"closed","sticky":false,"template":"","format":"standard","meta":{"footnotes":""},"categories":[32,97,29,34],"tags":[],"class_list":["post-6065","post","type-post","status-publish","format-standard","has-post-thumbnail","hentry","category-all","category-news","category-seo-news","category-technology"],"yoast_head":"\nFavicon Guidelines: Maximising Your Website's Favicon for Google Search Results<\/title>\n<meta name=\"description\" content=\"Discover how to optimise your favicon for Google search results, ensuring your website stands out with a clear, high-quality icon that follows Google's guidelines.\" \/>\n<meta name=\"robots\" content=\"index, follow, max-snippet:-1, max-image-preview:large, max-video-preview:-1\" \/>\n<link rel=\"canonical\" href=\"https:\/\/mobo.co.uk\/news\/maximising-your-websites-favicon-for-google-search-results\/\" \/>\n<meta property=\"og:locale\" content=\"en_GB\" \/>\n<meta property=\"og:type\" content=\"article\" \/>\n<meta property=\"og:title\" content=\"Favicon Guidelines: Maximising Your Website's Favicon for Google Search Results\" \/>\n<meta property=\"og:description\" content=\"Discover how to optimise your favicon for Google search results, ensuring your website stands out with a clear, high-quality icon that follows Google's guidelines.\" \/>\n<meta property=\"og:url\" content=\"https:\/\/mobo.co.uk\/news\/maximising-your-websites-favicon-for-google-search-results\/\" \/>\n<meta property=\"og:site_name\" content=\"MOBO Media\" \/>\n<meta property=\"article:published_time\" content=\"2024-10-21T10:17:16+00:00\" \/>\n<meta property=\"article:modified_time\" content=\"2024-10-21T10:20:48+00:00\" \/>\n<meta property=\"og:image\" content=\"https:\/\/mobo.co.uk\/news\/wp-content\/uploads\/2020\/08\/Software-Developer-scaled.jpg\" \/>\n\t<meta property=\"og:image:width\" content=\"2560\" \/>\n\t<meta property=\"og:image:height\" content=\"1707\" \/>\n\t<meta property=\"og:image:type\" content=\"image\/jpeg\" \/>\n<meta name=\"author\" content=\"MOBO Media\" \/>\n<meta name=\"twitter:card\" content=\"summary_large_image\" \/>\n<meta name=\"twitter:creator\" content=\"@mobo\" \/>\n<meta name=\"twitter:label1\" content=\"Written by\" \/>\n\t<meta name=\"twitter:data1\" content=\"MOBO Media\" \/>\n\t<meta name=\"twitter:label2\" content=\"Estimated reading time\" \/>\n\t<meta name=\"twitter:data2\" content=\"3 minutes\" \/>\n<script type=\"application\/ld+json\" class=\"yoast-schema-graph\">{\"@context\":\"https:\/\/schema.org\",\"@graph\":[{\"@type\":\"WebPage\",\"@id\":\"https:\/\/mobo.co.uk\/news\/maximising-your-websites-favicon-for-google-search-results\/\",\"url\":\"https:\/\/mobo.co.uk\/news\/maximising-your-websites-favicon-for-google-search-results\/\",\"name\":\"Favicon Guidelines: Maximising Your Website's Favicon for Google Search Results\",\"isPartOf\":{\"@id\":\"https:\/\/mobo.co.uk\/news\/#website\"},\"primaryImageOfPage\":{\"@id\":\"https:\/\/mobo.co.uk\/news\/maximising-your-websites-favicon-for-google-search-results\/#primaryimage\"},\"image\":{\"@id\":\"https:\/\/mobo.co.uk\/news\/maximising-your-websites-favicon-for-google-search-results\/#primaryimage\"},\"thumbnailUrl\":\"https:\/\/mobo.co.uk\/news\/wp-content\/uploads\/2020\/08\/Software-Developer-scaled.jpg\",\"datePublished\":\"2024-10-21T10:17:16+00:00\",\"dateModified\":\"2024-10-21T10:20:48+00:00\",\"author\":{\"@id\":\"https:\/\/mobo.co.uk\/news\/#\/schema\/person\/72b273b420536a42d8b34ca25bd92add\"},\"description\":\"Discover how to optimise your favicon for Google search results, ensuring your website stands out with a clear, high-quality icon that follows Google's guidelines.\",\"breadcrumb\":{\"@id\":\"https:\/\/mobo.co.uk\/news\/maximising-your-websites-favicon-for-google-search-results\/#breadcrumb\"},\"inLanguage\":\"en-GB\",\"potentialAction\":[{\"@type\":\"ReadAction\",\"target\":[\"https:\/\/mobo.co.uk\/news\/maximising-your-websites-favicon-for-google-search-results\/\"]}]},{\"@type\":\"ImageObject\",\"inLanguage\":\"en-GB\",\"@id\":\"https:\/\/mobo.co.uk\/news\/maximising-your-websites-favicon-for-google-search-results\/#primaryimage\",\"url\":\"https:\/\/mobo.co.uk\/news\/wp-content\/uploads\/2020\/08\/Software-Developer-scaled.jpg\",\"contentUrl\":\"https:\/\/mobo.co.uk\/news\/wp-content\/uploads\/2020\/08\/Software-Developer-scaled.jpg\",\"width\":2560,\"height\":1707},{\"@type\":\"BreadcrumbList\",\"@id\":\"https:\/\/mobo.co.uk\/news\/maximising-your-websites-favicon-for-google-search-results\/#breadcrumb\",\"itemListElement\":[{\"@type\":\"ListItem\",\"position\":1,\"name\":\"Home\",\"item\":\"https:\/\/mobo.co.uk\/news\/\"},{\"@type\":\"ListItem\",\"position\":2,\"name\":\"Maximising Your Website’s Favicon for Google Search Results\"}]},{\"@type\":\"WebSite\",\"@id\":\"https:\/\/mobo.co.uk\/news\/#website\",\"url\":\"https:\/\/mobo.co.uk\/news\/\",\"name\":\"MOBO Media\",\"description\":\"Latest tech news and blogs from MOBO\",\"potentialAction\":[{\"@type\":\"SearchAction\",\"target\":{\"@type\":\"EntryPoint\",\"urlTemplate\":\"https:\/\/mobo.co.uk\/news\/?s={search_term_string}\"},\"query-input\":{\"@type\":\"PropertyValueSpecification\",\"valueRequired\":true,\"valueName\":\"search_term_string\"}}],\"inLanguage\":\"en-GB\"},{\"@type\":\"Person\",\"@id\":\"https:\/\/mobo.co.uk\/news\/#\/schema\/person\/72b273b420536a42d8b34ca25bd92add\",\"name\":\"MOBO Media\",\"image\":{\"@type\":\"ImageObject\",\"inLanguage\":\"en-GB\",\"@id\":\"https:\/\/mobo.co.uk\/news\/#\/schema\/person\/image\/\",\"url\":\"https:\/\/secure.gravatar.com\/avatar\/a65966a6a00ce2b8725e6b4ec0936b9907e4a38302d1aab03dc4220530be74d0?s=96&d=mm&r=g\",\"contentUrl\":\"https:\/\/secure.gravatar.com\/avatar\/a65966a6a00ce2b8725e6b4ec0936b9907e4a38302d1aab03dc4220530be74d0?s=96&d=mm&r=g\",\"caption\":\"MOBO Media\"},\"sameAs\":[\"https:\/\/mobo.co.uk\",\"https:\/\/www.instagram.com\/mobomedia\/\",\"https:\/\/x.com\/mobo\"],\"url\":\"https:\/\/mobo.co.uk\/news\/author\/admin\/\"}]}<\/script>\n<!-- \/ Yoast SEO plugin. -->","yoast_head_json":{"title":"Favicon Guidelines: Maximising Your Website's Favicon for Google Search Results","description":"Discover how to optimise your favicon for Google search results, ensuring your website stands out with a clear, high-quality icon that follows Google's guidelines.","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:\/\/mobo.co.uk\/news\/maximising-your-websites-favicon-for-google-search-results\/","og_locale":"en_GB","og_type":"article","og_title":"Favicon Guidelines: Maximising Your Website's Favicon for Google Search Results","og_description":"Discover how to optimise your favicon for Google search results, ensuring your website stands out with a clear, high-quality icon that follows Google's guidelines.","og_url":"https:\/\/mobo.co.uk\/news\/maximising-your-websites-favicon-for-google-search-results\/","og_site_name":"MOBO Media","article_published_time":"2024-10-21T10:17:16+00:00","article_modified_time":"2024-10-21T10:20:48+00:00","og_image":[{"width":2560,"height":1707,"url":"https:\/\/mobo.co.uk\/news\/wp-content\/uploads\/2020\/08\/Software-Developer-scaled.jpg","type":"image\/jpeg"}],"author":"MOBO Media","twitter_card":"summary_large_image","twitter_creator":"@mobo","twitter_misc":{"Written by":"MOBO Media","Estimated reading time":"3 minutes"},"schema":{"@context":"https:\/\/schema.org","@graph":[{"@type":"WebPage","@id":"https:\/\/mobo.co.uk\/news\/maximising-your-websites-favicon-for-google-search-results\/","url":"https:\/\/mobo.co.uk\/news\/maximising-your-websites-favicon-for-google-search-results\/","name":"Favicon Guidelines: Maximising Your Website's Favicon for Google Search Results","isPartOf":{"@id":"https:\/\/mobo.co.uk\/news\/#website"},"primaryImageOfPage":{"@id":"https:\/\/mobo.co.uk\/news\/maximising-your-websites-favicon-for-google-search-results\/#primaryimage"},"image":{"@id":"https:\/\/mobo.co.uk\/news\/maximising-your-websites-favicon-for-google-search-results\/#primaryimage"},"thumbnailUrl":"https:\/\/mobo.co.uk\/news\/wp-content\/uploads\/2020\/08\/Software-Developer-scaled.jpg","datePublished":"2024-10-21T10:17:16+00:00","dateModified":"2024-10-21T10:20:48+00:00","author":{"@id":"https:\/\/mobo.co.uk\/news\/#\/schema\/person\/72b273b420536a42d8b34ca25bd92add"},"description":"Discover how to optimise your favicon for Google search results, ensuring your website stands out with a clear, high-quality icon that follows Google's guidelines.","breadcrumb":{"@id":"https:\/\/mobo.co.uk\/news\/maximising-your-websites-favicon-for-google-search-results\/#breadcrumb"},"inLanguage":"en-GB","potentialAction":[{"@type":"ReadAction","target":["https:\/\/mobo.co.uk\/news\/maximising-your-websites-favicon-for-google-search-results\/"]}]},{"@type":"ImageObject","inLanguage":"en-GB","@id":"https:\/\/mobo.co.uk\/news\/maximising-your-websites-favicon-for-google-search-results\/#primaryimage","url":"https:\/\/mobo.co.uk\/news\/wp-content\/uploads\/2020\/08\/Software-Developer-scaled.jpg","contentUrl":"https:\/\/mobo.co.uk\/news\/wp-content\/uploads\/2020\/08\/Software-Developer-scaled.jpg","width":2560,"height":1707},{"@type":"BreadcrumbList","@id":"https:\/\/mobo.co.uk\/news\/maximising-your-websites-favicon-for-google-search-results\/#breadcrumb","itemListElement":[{"@type":"ListItem","position":1,"name":"Home","item":"https:\/\/mobo.co.uk\/news\/"},{"@type":"ListItem","position":2,"name":"Maximising Your Website’s Favicon for Google Search Results"}]},{"@type":"WebSite","@id":"https:\/\/mobo.co.uk\/news\/#website","url":"https:\/\/mobo.co.uk\/news\/","name":"MOBO Media","description":"Latest tech news and blogs from MOBO","potentialAction":[{"@type":"SearchAction","target":{"@type":"EntryPoint","urlTemplate":"https:\/\/mobo.co.uk\/news\/?s={search_term_string}"},"query-input":{"@type":"PropertyValueSpecification","valueRequired":true,"valueName":"search_term_string"}}],"inLanguage":"en-GB"},{"@type":"Person","@id":"https:\/\/mobo.co.uk\/news\/#\/schema\/person\/72b273b420536a42d8b34ca25bd92add","name":"MOBO Media","image":{"@type":"ImageObject","inLanguage":"en-GB","@id":"https:\/\/mobo.co.uk\/news\/#\/schema\/person\/image\/","url":"https:\/\/secure.gravatar.com\/avatar\/a65966a6a00ce2b8725e6b4ec0936b9907e4a38302d1aab03dc4220530be74d0?s=96&d=mm&r=g","contentUrl":"https:\/\/secure.gravatar.com\/avatar\/a65966a6a00ce2b8725e6b4ec0936b9907e4a38302d1aab03dc4220530be74d0?s=96&d=mm&r=g","caption":"MOBO Media"},"sameAs":["https:\/\/mobo.co.uk","https:\/\/www.instagram.com\/mobomedia\/","https:\/\/x.com\/mobo"],"url":"https:\/\/mobo.co.uk\/news\/author\/admin\/"}]}},"_links":{"self":[{"href":"https:\/\/mobo.co.uk\/news\/wp-json\/wp\/v2\/posts\/6065","targetHints":{"allow":["GET"]}}],"collection":[{"href":"https:\/\/mobo.co.uk\/news\/wp-json\/wp\/v2\/posts"}],"about":[{"href":"https:\/\/mobo.co.uk\/news\/wp-json\/wp\/v2\/types\/post"}],"author":[{"embeddable":true,"href":"https:\/\/mobo.co.uk\/news\/wp-json\/wp\/v2\/users\/1"}],"replies":[{"embeddable":true,"href":"https:\/\/mobo.co.uk\/news\/wp-json\/wp\/v2\/comments?post=6065"}],"version-history":[{"count":1,"href":"https:\/\/mobo.co.uk\/news\/wp-json\/wp\/v2\/posts\/6065\/revisions"}],"predecessor-version":[{"id":6066,"href":"https:\/\/mobo.co.uk\/news\/wp-json\/wp\/v2\/posts\/6065\/revisions\/6066"}],"wp:featuredmedia":[{"embeddable":true,"href":"https:\/\/mobo.co.uk\/news\/wp-json\/wp\/v2\/media\/5920"}],"wp:attachment":[{"href":"https:\/\/mobo.co.uk\/news\/wp-json\/wp\/v2\/media?parent=6065"}],"wp:term":[{"taxonomy":"category","embeddable":true,"href":"https:\/\/mobo.co.uk\/news\/wp-json\/wp\/v2\/categories?post=6065"},{"taxonomy":"post_tag","embeddable":true,"href":"https:\/\/mobo.co.uk\/news\/wp-json\/wp\/v2\/tags?post=6065"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}