{"id":12883,"date":"2019-08-09T07:36:45","date_gmt":"2019-08-09T05:36:45","guid":{"rendered":"https:\/\/www.markhendriksen.com\/?p=12883"},"modified":"2025-04-24T06:39:56","modified_gmt":"2025-04-24T04:39:56","slug":"how-to-add-a-favicon-to-your-divi-website","status":"publish","type":"post","link":"https:\/\/www.markhendriksen.com\/how-to-add-a-favicon-to-your-divi-website\/","title":{"rendered":"How to Add a Favicon to Your Divi Website"},"content":{"rendered":"\n<p>A favicon is that little thumbnail that you find in your tab before your website title.<\/p>\n\n\n\n<figure class=\"wp-block-image\"><img loading=\"lazy\" decoding=\"async\" width=\"517\" height=\"76\" src=\"https:\/\/mk0markhendriks8nxd9.kinstacdn.com\/wp-content\/uploads\/2019\/08\/Favicon-placement.jpg\" alt=\"Favicon placement in tab\" class=\"wp-image-12888\" srcset=\"https:\/\/www.markhendriksen.com\/wp-content\/uploads\/2019\/08\/Favicon-placement.jpg 517w, https:\/\/www.markhendriksen.com\/wp-content\/uploads\/2019\/08\/Favicon-placement-380x56.jpg 380w, https:\/\/www.markhendriksen.com\/wp-content\/uploads\/2019\/08\/Favicon-placement-510x75.jpg 510w, https:\/\/www.markhendriksen.com\/wp-content\/uploads\/2019\/08\/Favicon-placement-300x44.jpg 300w\" sizes=\"(max-width: 517px) 100vw, 517px\" \/><\/figure>\n\n\n\n<p>Favicons will help to increase your branding and it is always a good practice to add one to your site.<\/p>\n\n\n\n<h2>Best size for your favicon<\/h2>\n\n\n\n<p>The favicon size for your browser is 16\u00d716 pixel however WordPress recommends a size of 512\u00d7512 pixels. The reason for this is that the favicon is not only used for tabs but also for bookmarks and those require a bigger image size.<\/p>\n\n\n\n<h2>How to create a favicon<\/h2>\n\n\n\n<p>I create my favicons in Photoshop but in case you don\u2019t have this there are more ways to create one.<\/p>\n\n\n\n<ol class=\"wp-block-list\"><li>You can use any of the free favicons generators<\/li><li>You can use a free icon on iconfinder<\/li><\/ol>\n\n\n\n<p><strong>Free favicon generators<\/strong><\/p>\n\n\n\n<p>If you search for free favicon generator then you will find tons of them. Find one that has the ability to create from scratch. For example&nbsp;<a href=\"http:\/\/www.xiconeditor.com\/\" target=\"_blank\" rel=\"noreferrer noopener\">X-icon<\/a>.<\/p>\n\n\n\n<p><strong>Use a free icon<\/strong><\/p>\n\n\n\n<p>You can go to&nbsp;<a href=\"https:\/\/www.iconfinder.com\/\" target=\"_blank\" rel=\"noreferrer noopener\">iconfinder<\/a>&nbsp;and search for a free icon. Take one that is not too detailed because the icon in the tab is only 16\u00d716 pixels. If you use one that is very busy the icon will end up very blurry.<\/p>\n\n\n\n<h2>How to Install a Favicon<\/h2>\n\n\n\n<p>in a recent update the location the upload your favicon has changed. Before you could upload it in Divi &gt; Theme Options under your&nbsp;<a href=\"https:\/\/www.markhendriksen.com\/how-to-change-the-divi-logo\/\">divi logo<\/a>.<\/p>\n\n\n\n<p>The new location to upload you favicon is:<\/p>\n\n\n\n<p>&nbsp;Divi &gt; Theme Customizer &gt; General Settings &gt; Site identity &gt; Site Icon.<\/p>\n\n\n\n<p>In WordPress, favicons are called site icons.<\/p>\n\n\n\n<p>You can use the following file formats .ico, .png, .jpg.<\/p>\n\n\n\n<p>If you uploaded a favicon size of 512\u00d7512 pixels WordPress will generate the approximal size for each case needed.<\/p>\n","protected":false},"excerpt":{"rendered":"","protected":false},"author":1,"featured_media":12885,"comment_status":"open","ping_status":"open","sticky":false,"template":"","format":"standard","meta":{"footnotes":""},"categories":[29],"tags":[],"class_list":["post-12883","post","type-post","status-publish","format-standard","has-post-thumbnail","hentry","category-divi-tutorials"],"yoast_head":"<!-- This site is optimized with the Yoast SEO plugin v26.1.1 - https:\/\/yoast.com\/wordpress\/plugins\/seo\/ -->\n<title>How to Add a Favicon to Your Divi Website | MarkHendriksen.com<\/title>\n<meta name=\"description\" content=\"A favicon is that little thumbnail that you find in your tab before your website title. It is very easy to install a favicon to your Divi website.\" \/>\n<meta name=\"robots\" content=\"index, follow, max-snippet:-1, max-image-preview:large, max-video-preview:-1\" \/>\n<link rel=\"canonical\" href=\"https:\/\/www.markhendriksen.com\/how-to-add-a-favicon-to-your-divi-website\/\" \/>\n<meta property=\"og:locale\" content=\"en_US\" \/>\n<meta property=\"og:type\" content=\"article\" \/>\n<meta property=\"og:title\" content=\"How to Add a Favicon to Your Divi Website | MarkHendriksen.com\" \/>\n<meta property=\"og:description\" content=\"A favicon is that little thumbnail that you find in your tab before your website title. It is very easy to install a favicon to your Divi website.\" \/>\n<meta property=\"og:url\" content=\"https:\/\/www.markhendriksen.com\/how-to-add-a-favicon-to-your-divi-website\/\" \/>\n<meta property=\"og:site_name\" content=\"Mark Hendriksen\" \/>\n<meta property=\"article:publisher\" content=\"https:\/\/www.facebook.com\/madebymarkhendriksen\" \/>\n<meta property=\"article:published_time\" content=\"2019-08-09T05:36:45+00:00\" \/>\n<meta property=\"article:modified_time\" content=\"2025-04-24T04:39:56+00:00\" \/>\n<meta property=\"og:image\" content=\"https:\/\/www.markhendriksen.com\/wp-content\/uploads\/2019\/08\/How-to-add-a-favicon-to-your-Divi-website.jpg\" \/>\n\t<meta property=\"og:image:width\" content=\"720\" \/>\n\t<meta property=\"og:image:height\" content=\"400\" \/>\n\t<meta property=\"og:image:type\" content=\"image\/jpeg\" \/>\n<meta name=\"author\" content=\"Mark Hendriksen\" \/>\n<meta name=\"twitter:card\" content=\"summary_large_image\" \/>\n<meta name=\"twitter:label1\" content=\"Written by\" \/>\n\t<meta name=\"twitter:data1\" content=\"Mark Hendriksen\" \/>\n\t<meta name=\"twitter:label2\" content=\"Est. reading time\" \/>\n\t<meta name=\"twitter:data2\" content=\"1 minute\" \/>\n<script type=\"application\/ld+json\" class=\"yoast-schema-graph\">{\"@context\":\"https:\/\/schema.org\",\"@graph\":[{\"@type\":\"Article\",\"@id\":\"https:\/\/www.markhendriksen.com\/how-to-add-a-favicon-to-your-divi-website\/#article\",\"isPartOf\":{\"@id\":\"https:\/\/www.markhendriksen.com\/how-to-add-a-favicon-to-your-divi-website\/\"},\"author\":{\"name\":\"Mark Hendriksen\",\"@id\":\"https:\/\/www.markhendriksen.com\/#\/schema\/person\/d40c4ac37512479c71b48ad2879fb765\"},\"headline\":\"How to Add a Favicon to Your Divi Website\",\"datePublished\":\"2019-08-09T05:36:45+00:00\",\"dateModified\":\"2025-04-24T04:39:56+00:00\",\"mainEntityOfPage\":{\"@id\":\"https:\/\/www.markhendriksen.com\/how-to-add-a-favicon-to-your-divi-website\/\"},\"wordCount\":301,\"commentCount\":0,\"publisher\":{\"@id\":\"https:\/\/www.markhendriksen.com\/#organization\"},\"image\":{\"@id\":\"https:\/\/www.markhendriksen.com\/how-to-add-a-favicon-to-your-divi-website\/#primaryimage\"},\"thumbnailUrl\":\"https:\/\/www.markhendriksen.com\/wp-content\/uploads\/2019\/08\/How-to-add-a-favicon-to-your-Divi-website.jpg\",\"articleSection\":[\"Divi tutorials\"],\"inLanguage\":\"en-US\",\"potentialAction\":[{\"@type\":\"CommentAction\",\"name\":\"Comment\",\"target\":[\"https:\/\/www.markhendriksen.com\/how-to-add-a-favicon-to-your-divi-website\/#respond\"]}]},{\"@type\":\"WebPage\",\"@id\":\"https:\/\/www.markhendriksen.com\/how-to-add-a-favicon-to-your-divi-website\/\",\"url\":\"https:\/\/www.markhendriksen.com\/how-to-add-a-favicon-to-your-divi-website\/\",\"name\":\"How to Add a Favicon to Your Divi Website | MarkHendriksen.com\",\"isPartOf\":{\"@id\":\"https:\/\/www.markhendriksen.com\/#website\"},\"primaryImageOfPage\":{\"@id\":\"https:\/\/www.markhendriksen.com\/how-to-add-a-favicon-to-your-divi-website\/#primaryimage\"},\"image\":{\"@id\":\"https:\/\/www.markhendriksen.com\/how-to-add-a-favicon-to-your-divi-website\/#primaryimage\"},\"thumbnailUrl\":\"https:\/\/www.markhendriksen.com\/wp-content\/uploads\/2019\/08\/How-to-add-a-favicon-to-your-Divi-website.jpg\",\"datePublished\":\"2019-08-09T05:36:45+00:00\",\"dateModified\":\"2025-04-24T04:39:56+00:00\",\"description\":\"A favicon is that little thumbnail that you find in your tab before your website title. It is very easy to install a favicon to your Divi website.\",\"breadcrumb\":{\"@id\":\"https:\/\/www.markhendriksen.com\/how-to-add-a-favicon-to-your-divi-website\/#breadcrumb\"},\"inLanguage\":\"en-US\",\"potentialAction\":[{\"@type\":\"ReadAction\",\"target\":[\"https:\/\/www.markhendriksen.com\/how-to-add-a-favicon-to-your-divi-website\/\"]}]},{\"@type\":\"ImageObject\",\"inLanguage\":\"en-US\",\"@id\":\"https:\/\/www.markhendriksen.com\/how-to-add-a-favicon-to-your-divi-website\/#primaryimage\",\"url\":\"https:\/\/www.markhendriksen.com\/wp-content\/uploads\/2019\/08\/How-to-add-a-favicon-to-your-Divi-website.jpg\",\"contentUrl\":\"https:\/\/www.markhendriksen.com\/wp-content\/uploads\/2019\/08\/How-to-add-a-favicon-to-your-Divi-website.jpg\",\"width\":720,\"height\":400,\"caption\":\"How to Add a Favicon to Your Divi Website\"},{\"@type\":\"BreadcrumbList\",\"@id\":\"https:\/\/www.markhendriksen.com\/how-to-add-a-favicon-to-your-divi-website\/#breadcrumb\",\"itemListElement\":[{\"@type\":\"ListItem\",\"position\":1,\"name\":\"Home\",\"item\":\"https:\/\/www.markhendriksen.com\/\"},{\"@type\":\"ListItem\",\"position\":2,\"name\":\"Divi tutorials\",\"item\":\"https:\/\/www.markhendriksen.com\/divi-tutorials\/\"},{\"@type\":\"ListItem\",\"position\":3,\"name\":\"How to Add a Favicon to Your Divi Website\"}]},{\"@type\":\"WebSite\",\"@id\":\"https:\/\/www.markhendriksen.com\/#website\",\"url\":\"https:\/\/www.markhendriksen.com\/\",\"name\":\"Mark Hendriksen\",\"description\":\"\",\"publisher\":{\"@id\":\"https:\/\/www.markhendriksen.com\/#organization\"},\"potentialAction\":[{\"@type\":\"SearchAction\",\"target\":{\"@type\":\"EntryPoint\",\"urlTemplate\":\"https:\/\/www.markhendriksen.com\/?s={search_term_string}\"},\"query-input\":{\"@type\":\"PropertyValueSpecification\",\"valueRequired\":true,\"valueName\":\"search_term_string\"}}],\"inLanguage\":\"en-US\"},{\"@type\":\"Organization\",\"@id\":\"https:\/\/www.markhendriksen.com\/#organization\",\"name\":\"Mark Hendriksen\",\"url\":\"https:\/\/www.markhendriksen.com\/\",\"logo\":{\"@type\":\"ImageObject\",\"inLanguage\":\"en-US\",\"@id\":\"https:\/\/www.markhendriksen.com\/#\/schema\/logo\/image\/\",\"url\":\"https:\/\/www.markhendriksen.com\/wp-content\/uploads\/2021\/01\/Mark-Hendriksen-Logo.png\",\"contentUrl\":\"https:\/\/www.markhendriksen.com\/wp-content\/uploads\/2021\/01\/Mark-Hendriksen-Logo.png\",\"width\":354,\"height\":40,\"caption\":\"Mark Hendriksen\"},\"image\":{\"@id\":\"https:\/\/www.markhendriksen.com\/#\/schema\/logo\/image\/\"},\"sameAs\":[\"https:\/\/www.facebook.com\/madebymarkhendriksen\"]},{\"@type\":\"Person\",\"@id\":\"https:\/\/www.markhendriksen.com\/#\/schema\/person\/d40c4ac37512479c71b48ad2879fb765\",\"name\":\"Mark Hendriksen\",\"image\":{\"@type\":\"ImageObject\",\"inLanguage\":\"en-US\",\"@id\":\"https:\/\/www.markhendriksen.com\/#\/schema\/person\/image\/\",\"url\":\"https:\/\/secure.gravatar.com\/avatar\/1416c89ed4da57b902960a21b7fa25cb91558d39eff48c8b5017bd4c9bcc59a9?s=96&d=mm&r=g\",\"contentUrl\":\"https:\/\/secure.gravatar.com\/avatar\/1416c89ed4da57b902960a21b7fa25cb91558d39eff48c8b5017bd4c9bcc59a9?s=96&d=mm&r=g\",\"caption\":\"Mark Hendriksen\"},\"url\":\"https:\/\/www.markhendriksen.com\/author\/twopixels\/\"}]}<\/script>\n<!-- \/ Yoast SEO plugin. -->","yoast_head_json":{"title":"How to Add a Favicon to Your Divi Website | MarkHendriksen.com","description":"A favicon is that little thumbnail that you find in your tab before your website title. It is very easy to install a favicon to your Divi website.","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:\/\/www.markhendriksen.com\/how-to-add-a-favicon-to-your-divi-website\/","og_locale":"en_US","og_type":"article","og_title":"How to Add a Favicon to Your Divi Website | MarkHendriksen.com","og_description":"A favicon is that little thumbnail that you find in your tab before your website title. It is very easy to install a favicon to your Divi website.","og_url":"https:\/\/www.markhendriksen.com\/how-to-add-a-favicon-to-your-divi-website\/","og_site_name":"Mark Hendriksen","article_publisher":"https:\/\/www.facebook.com\/madebymarkhendriksen","article_published_time":"2019-08-09T05:36:45+00:00","article_modified_time":"2025-04-24T04:39:56+00:00","og_image":[{"width":720,"height":400,"url":"https:\/\/www.markhendriksen.com\/wp-content\/uploads\/2019\/08\/How-to-add-a-favicon-to-your-Divi-website.jpg","type":"image\/jpeg"}],"author":"Mark Hendriksen","twitter_card":"summary_large_image","twitter_misc":{"Written by":"Mark Hendriksen","Est. reading time":"1 minute"},"schema":{"@context":"https:\/\/schema.org","@graph":[{"@type":"Article","@id":"https:\/\/www.markhendriksen.com\/how-to-add-a-favicon-to-your-divi-website\/#article","isPartOf":{"@id":"https:\/\/www.markhendriksen.com\/how-to-add-a-favicon-to-your-divi-website\/"},"author":{"name":"Mark Hendriksen","@id":"https:\/\/www.markhendriksen.com\/#\/schema\/person\/d40c4ac37512479c71b48ad2879fb765"},"headline":"How to Add a Favicon to Your Divi Website","datePublished":"2019-08-09T05:36:45+00:00","dateModified":"2025-04-24T04:39:56+00:00","mainEntityOfPage":{"@id":"https:\/\/www.markhendriksen.com\/how-to-add-a-favicon-to-your-divi-website\/"},"wordCount":301,"commentCount":0,"publisher":{"@id":"https:\/\/www.markhendriksen.com\/#organization"},"image":{"@id":"https:\/\/www.markhendriksen.com\/how-to-add-a-favicon-to-your-divi-website\/#primaryimage"},"thumbnailUrl":"https:\/\/www.markhendriksen.com\/wp-content\/uploads\/2019\/08\/How-to-add-a-favicon-to-your-Divi-website.jpg","articleSection":["Divi tutorials"],"inLanguage":"en-US","potentialAction":[{"@type":"CommentAction","name":"Comment","target":["https:\/\/www.markhendriksen.com\/how-to-add-a-favicon-to-your-divi-website\/#respond"]}]},{"@type":"WebPage","@id":"https:\/\/www.markhendriksen.com\/how-to-add-a-favicon-to-your-divi-website\/","url":"https:\/\/www.markhendriksen.com\/how-to-add-a-favicon-to-your-divi-website\/","name":"How to Add a Favicon to Your Divi Website | MarkHendriksen.com","isPartOf":{"@id":"https:\/\/www.markhendriksen.com\/#website"},"primaryImageOfPage":{"@id":"https:\/\/www.markhendriksen.com\/how-to-add-a-favicon-to-your-divi-website\/#primaryimage"},"image":{"@id":"https:\/\/www.markhendriksen.com\/how-to-add-a-favicon-to-your-divi-website\/#primaryimage"},"thumbnailUrl":"https:\/\/www.markhendriksen.com\/wp-content\/uploads\/2019\/08\/How-to-add-a-favicon-to-your-Divi-website.jpg","datePublished":"2019-08-09T05:36:45+00:00","dateModified":"2025-04-24T04:39:56+00:00","description":"A favicon is that little thumbnail that you find in your tab before your website title. It is very easy to install a favicon to your Divi website.","breadcrumb":{"@id":"https:\/\/www.markhendriksen.com\/how-to-add-a-favicon-to-your-divi-website\/#breadcrumb"},"inLanguage":"en-US","potentialAction":[{"@type":"ReadAction","target":["https:\/\/www.markhendriksen.com\/how-to-add-a-favicon-to-your-divi-website\/"]}]},{"@type":"ImageObject","inLanguage":"en-US","@id":"https:\/\/www.markhendriksen.com\/how-to-add-a-favicon-to-your-divi-website\/#primaryimage","url":"https:\/\/www.markhendriksen.com\/wp-content\/uploads\/2019\/08\/How-to-add-a-favicon-to-your-Divi-website.jpg","contentUrl":"https:\/\/www.markhendriksen.com\/wp-content\/uploads\/2019\/08\/How-to-add-a-favicon-to-your-Divi-website.jpg","width":720,"height":400,"caption":"How to Add a Favicon to Your Divi Website"},{"@type":"BreadcrumbList","@id":"https:\/\/www.markhendriksen.com\/how-to-add-a-favicon-to-your-divi-website\/#breadcrumb","itemListElement":[{"@type":"ListItem","position":1,"name":"Home","item":"https:\/\/www.markhendriksen.com\/"},{"@type":"ListItem","position":2,"name":"Divi tutorials","item":"https:\/\/www.markhendriksen.com\/divi-tutorials\/"},{"@type":"ListItem","position":3,"name":"How to Add a Favicon to Your Divi Website"}]},{"@type":"WebSite","@id":"https:\/\/www.markhendriksen.com\/#website","url":"https:\/\/www.markhendriksen.com\/","name":"Mark Hendriksen","description":"","publisher":{"@id":"https:\/\/www.markhendriksen.com\/#organization"},"potentialAction":[{"@type":"SearchAction","target":{"@type":"EntryPoint","urlTemplate":"https:\/\/www.markhendriksen.com\/?s={search_term_string}"},"query-input":{"@type":"PropertyValueSpecification","valueRequired":true,"valueName":"search_term_string"}}],"inLanguage":"en-US"},{"@type":"Organization","@id":"https:\/\/www.markhendriksen.com\/#organization","name":"Mark Hendriksen","url":"https:\/\/www.markhendriksen.com\/","logo":{"@type":"ImageObject","inLanguage":"en-US","@id":"https:\/\/www.markhendriksen.com\/#\/schema\/logo\/image\/","url":"https:\/\/www.markhendriksen.com\/wp-content\/uploads\/2021\/01\/Mark-Hendriksen-Logo.png","contentUrl":"https:\/\/www.markhendriksen.com\/wp-content\/uploads\/2021\/01\/Mark-Hendriksen-Logo.png","width":354,"height":40,"caption":"Mark Hendriksen"},"image":{"@id":"https:\/\/www.markhendriksen.com\/#\/schema\/logo\/image\/"},"sameAs":["https:\/\/www.facebook.com\/madebymarkhendriksen"]},{"@type":"Person","@id":"https:\/\/www.markhendriksen.com\/#\/schema\/person\/d40c4ac37512479c71b48ad2879fb765","name":"Mark Hendriksen","image":{"@type":"ImageObject","inLanguage":"en-US","@id":"https:\/\/www.markhendriksen.com\/#\/schema\/person\/image\/","url":"https:\/\/secure.gravatar.com\/avatar\/1416c89ed4da57b902960a21b7fa25cb91558d39eff48c8b5017bd4c9bcc59a9?s=96&d=mm&r=g","contentUrl":"https:\/\/secure.gravatar.com\/avatar\/1416c89ed4da57b902960a21b7fa25cb91558d39eff48c8b5017bd4c9bcc59a9?s=96&d=mm&r=g","caption":"Mark Hendriksen"},"url":"https:\/\/www.markhendriksen.com\/author\/twopixels\/"}]}},"_links":{"self":[{"href":"https:\/\/www.markhendriksen.com\/wp-json\/wp\/v2\/posts\/12883","targetHints":{"allow":["GET"]}}],"collection":[{"href":"https:\/\/www.markhendriksen.com\/wp-json\/wp\/v2\/posts"}],"about":[{"href":"https:\/\/www.markhendriksen.com\/wp-json\/wp\/v2\/types\/post"}],"author":[{"embeddable":true,"href":"https:\/\/www.markhendriksen.com\/wp-json\/wp\/v2\/users\/1"}],"replies":[{"embeddable":true,"href":"https:\/\/www.markhendriksen.com\/wp-json\/wp\/v2\/comments?post=12883"}],"version-history":[{"count":2,"href":"https:\/\/www.markhendriksen.com\/wp-json\/wp\/v2\/posts\/12883\/revisions"}],"predecessor-version":[{"id":35667,"href":"https:\/\/www.markhendriksen.com\/wp-json\/wp\/v2\/posts\/12883\/revisions\/35667"}],"wp:featuredmedia":[{"embeddable":true,"href":"https:\/\/www.markhendriksen.com\/wp-json\/wp\/v2\/media\/12885"}],"wp:attachment":[{"href":"https:\/\/www.markhendriksen.com\/wp-json\/wp\/v2\/media?parent=12883"}],"wp:term":[{"taxonomy":"category","embeddable":true,"href":"https:\/\/www.markhendriksen.com\/wp-json\/wp\/v2\/categories?post=12883"},{"taxonomy":"post_tag","embeddable":true,"href":"https:\/\/www.markhendriksen.com\/wp-json\/wp\/v2\/tags?post=12883"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}