{"id":2909,"date":"2013-10-22T13:22:41","date_gmt":"2013-10-22T13:22:41","guid":{"rendered":"https:\/\/www.inmotionhosting.com\/support\/2013\/10\/22\/custom-favicon\/"},"modified":"2021-08-16T23:10:38","modified_gmt":"2021-08-17T03:10:38","slug":"custom-favicon","status":"publish","type":"post","link":"https:\/\/www.inmotionhosting.com\/support\/edu\/drupal\/custom-favicon\/","title":{"rendered":"Uploading a custom favicon in Drupal 8"},"content":{"rendered":"

One of the minor customizations we get asked about is replacing the stock Drupal favicon with a custom one. The favicon is the small icon that appears next to the site name on the browser tab. See our article here<\/a> for more information on favicons and how to create one. The instructions below demonstrate how to replace this in Drupal 8.<\/p>\n

How to Upload your custom Favicon in Drupal 8<\/h2>\n
    \n
  1. Log into your Drupal 8 admin interface<\/a>.\n
    <\/div>\n<\/li>\n
  2. \"select<\/a>\n
    <\/div>\n

    Select Menu<\/strong> from the top menu bar.<\/p>\n

    <\/div>\n<\/li>\n
  3. \"select<\/a>\n
    <\/div>\n

    Next, click on Appearance<\/strong> from the secondary menu bar.<\/p>\n

    <\/div>\n<\/li>\n
  4. \"the<\/a>\n
    <\/div>\n

    Next you will arrive at the main Appearance<\/em> page. Here you will see all the available active themes listed at the top under Enabled Themes<\/em>. Locate the theme you want to work with and click on the Settings<\/strong> link to its right. We will be using the Bartik<\/em> theme in this example.<\/p>\n

    <\/div>\n<\/li>\n
  5. \"the<\/a>\n
    <\/div>\n

    From the theme settings page, scroll down to the Shortcut Icon Settings<\/em> section where you will at first see a single setting labled Use the default shortcut icon supplied by the theme<\/strong>. Uncheck the checkbox and two new fields will appear. <\/p>\n\n\n\n<\/tr>\n
    Path to custom icon<\/td>\nthe folder path to a icon that has already been uploaded.<\/td>\n<\/tr>
    Upload icon image<\/td>\nThe Browse<\/strong> button to upload an icon from your local machine.<\/td>\n<\/tr>\n\n\n<\/table>\n

    We uploaded a new icon from our local machine for our example. <\/p>\n

    <\/div>\n<\/li>\n
  6. After your new icon has been uploaded, click on the Save Configuration<\/strong> button. This will save and activate the change. Included below is a before and after comparison displaying our favicon change.
    \n\n\n\n<\/tr>\n
    Before<\/th>\nAfter<\/th>\n<\/tr>
    \"the<\/a>\n
    <\/div>\n<\/td>\n
    		\"the<\/a>\n
    <\/div>\n<\/td>\n<\/tr>\n\n\n<\/table>\n
    <\/div>\n<\/li>\n<\/ol>\n","protected":false},"excerpt":{"rendered":"

    One of the minor customizations we get asked about is replacing the stock Drupal favicon with a custom one. The favicon is the small icon that appears next to the site name on the browser tab. See our article here for more information on favicons and how to create one. The instructions below demonstrate how Read More ><\/a><\/p>\n","protected":false},"author":8,"featured_media":0,"comment_status":"open","ping_status":"open","sticky":false,"template":"","format":"standard","meta":{"_acf_changed":false,"_jetpack_memberships_contains_paid_content":false,"footnotes":""},"categories":[372],"tags":[],"class_list":["post-2909","post","type-post","status-publish","format-standard","hentry","category-drupal"],"acf":[],"yoast_head":"\nUploading a custom favicon in Drupal 8 | InMotion Hosting<\/title>\n<meta name=\"description\" content=\"Looking to change the default favicon in your Drupal 8 theme? Check out this article for instructions.\" \/>\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.inmotionhosting.com\/support\/edu\/drupal\/custom-favicon\/\" \/>\n<meta property=\"og:locale\" content=\"en_US\" \/>\n<meta property=\"og:type\" content=\"article\" \/>\n<meta property=\"og:title\" content=\"Uploading a custom favicon in Drupal 8 | InMotion Hosting\" \/>\n<meta property=\"og:description\" content=\"Looking to change the default favicon in your Drupal 8 theme? Check out this article for instructions.\" \/>\n<meta property=\"og:url\" content=\"https:\/\/www.inmotionhosting.com\/support\/edu\/drupal\/custom-favicon\/\" \/>\n<meta property=\"og:site_name\" content=\"InMotion Hosting Support Center\" \/>\n<meta property=\"article:publisher\" content=\"https:\/\/www.facebook.com\/inmotionhosting\/\" \/>\n<meta property=\"article:published_time\" content=\"2013-10-22T13:22:41+00:00\" \/>\n<meta property=\"article:modified_time\" content=\"2021-08-17T03:10:38+00:00\" \/>\n<meta property=\"og:image\" content=\"https:\/\/www.inmotionhosting.com\/support\/wp-content\/uploads\/2013\/06\/edu_Drupal-8__common-images_select-menu.png\" \/>\n<meta name=\"author\" content=\"Scott Mitchell\" \/>\n<meta name=\"twitter:card\" content=\"summary_large_image\" \/>\n<meta name=\"twitter:creator\" content=\"@InMotionHosting\" \/>\n<meta name=\"twitter:site\" content=\"@InMotionHosting\" \/>\n<meta name=\"twitter:label1\" content=\"Written by\" \/>\n\t<meta name=\"twitter:data1\" content=\"Scott Mitchell\" \/>\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.inmotionhosting.com\/support\/edu\/drupal\/custom-favicon\/#article\",\"isPartOf\":{\"@id\":\"https:\/\/www.inmotionhosting.com\/support\/edu\/drupal\/custom-favicon\/\"},\"author\":{\"name\":\"Scott Mitchell\",\"@id\":\"https:\/\/www.inmotionhosting.com\/support\/#\/schema\/person\/d850efb28ef3573db7d24b0d8fa9eaed\"},\"headline\":\"Uploading a custom favicon in Drupal 8\",\"datePublished\":\"2013-10-22T13:22:41+00:00\",\"dateModified\":\"2021-08-17T03:10:38+00:00\",\"mainEntityOfPage\":{\"@id\":\"https:\/\/www.inmotionhosting.com\/support\/edu\/drupal\/custom-favicon\/\"},\"wordCount\":264,\"commentCount\":0,\"publisher\":{\"@id\":\"https:\/\/www.inmotionhosting.com\/support\/#organization\"},\"image\":{\"@id\":\"https:\/\/www.inmotionhosting.com\/support\/edu\/drupal\/custom-favicon\/#primaryimage\"},\"thumbnailUrl\":\"https:\/\/www.inmotionhosting.com\/support\/wp-content\/uploads\/2013\/06\/edu_Drupal-8__common-images_select-menu.png\",\"articleSection\":[\"Drupal\"],\"inLanguage\":\"en-US\",\"potentialAction\":[{\"@type\":\"CommentAction\",\"name\":\"Comment\",\"target\":[\"https:\/\/www.inmotionhosting.com\/support\/edu\/drupal\/custom-favicon\/#respond\"]}]},{\"@type\":\"WebPage\",\"@id\":\"https:\/\/www.inmotionhosting.com\/support\/edu\/drupal\/custom-favicon\/\",\"url\":\"https:\/\/www.inmotionhosting.com\/support\/edu\/drupal\/custom-favicon\/\",\"name\":\"Uploading a custom favicon in Drupal 8 | InMotion Hosting\",\"isPartOf\":{\"@id\":\"https:\/\/www.inmotionhosting.com\/support\/#website\"},\"primaryImageOfPage\":{\"@id\":\"https:\/\/www.inmotionhosting.com\/support\/edu\/drupal\/custom-favicon\/#primaryimage\"},\"image\":{\"@id\":\"https:\/\/www.inmotionhosting.com\/support\/edu\/drupal\/custom-favicon\/#primaryimage\"},\"thumbnailUrl\":\"https:\/\/www.inmotionhosting.com\/support\/wp-content\/uploads\/2013\/06\/edu_Drupal-8__common-images_select-menu.png\",\"datePublished\":\"2013-10-22T13:22:41+00:00\",\"dateModified\":\"2021-08-17T03:10:38+00:00\",\"description\":\"Looking to change the default favicon in your Drupal 8 theme? Check out this article for instructions.\",\"breadcrumb\":{\"@id\":\"https:\/\/www.inmotionhosting.com\/support\/edu\/drupal\/custom-favicon\/#breadcrumb\"},\"inLanguage\":\"en-US\",\"potentialAction\":[{\"@type\":\"ReadAction\",\"target\":[\"https:\/\/www.inmotionhosting.com\/support\/edu\/drupal\/custom-favicon\/\"]}]},{\"@type\":\"ImageObject\",\"inLanguage\":\"en-US\",\"@id\":\"https:\/\/www.inmotionhosting.com\/support\/edu\/drupal\/custom-favicon\/#primaryimage\",\"url\":\"https:\/\/www.inmotionhosting.com\/support\/wp-content\/uploads\/2013\/06\/edu_Drupal-8__common-images_select-menu.png\",\"contentUrl\":\"https:\/\/www.inmotionhosting.com\/support\/wp-content\/uploads\/2013\/06\/edu_Drupal-8__common-images_select-menu.png\",\"width\":429,\"height\":49,\"caption\":\"Click here to view the larger image\"},{\"@type\":\"BreadcrumbList\",\"@id\":\"https:\/\/www.inmotionhosting.com\/support\/edu\/drupal\/custom-favicon\/#breadcrumb\",\"itemListElement\":[{\"@type\":\"ListItem\",\"position\":1,\"name\":\"Home\",\"item\":\"https:\/\/www.inmotionhosting.com\/support\/\"},{\"@type\":\"ListItem\",\"position\":2,\"name\":\"Uploading a custom favicon in Drupal 8\"}]},{\"@type\":\"WebSite\",\"@id\":\"https:\/\/www.inmotionhosting.com\/support\/#website\",\"url\":\"https:\/\/www.inmotionhosting.com\/support\/\",\"name\":\"InMotion Hosting Support Center\",\"description\":\"Web Hosting Support & Tutorials\",\"publisher\":{\"@id\":\"https:\/\/www.inmotionhosting.com\/support\/#organization\"},\"potentialAction\":[{\"@type\":\"SearchAction\",\"target\":{\"@type\":\"EntryPoint\",\"urlTemplate\":\"https:\/\/www.inmotionhosting.com\/support\/?s={search_term_string}\"},\"query-input\":{\"@type\":\"PropertyValueSpecification\",\"valueRequired\":true,\"valueName\":\"search_term_string\"}}],\"inLanguage\":\"en-US\"},{\"@type\":\"Organization\",\"@id\":\"https:\/\/www.inmotionhosting.com\/support\/#organization\",\"name\":\"InMotion Hosting\",\"url\":\"https:\/\/www.inmotionhosting.com\/support\/\",\"logo\":{\"@type\":\"ImageObject\",\"inLanguage\":\"en-US\",\"@id\":\"https:\/\/www.inmotionhosting.com\/support\/#\/schema\/logo\/image\/\",\"url\":\"https:\/\/www.inmotionhosting.com\/support\/wp-content\/uploads\/2023\/02\/inmotion-hosting-logo-yoast.jpg\",\"contentUrl\":\"https:\/\/www.inmotionhosting.com\/support\/wp-content\/uploads\/2023\/02\/inmotion-hosting-logo-yoast.jpg\",\"width\":696,\"height\":696,\"caption\":\"InMotion Hosting\"},\"image\":{\"@id\":\"https:\/\/www.inmotionhosting.com\/support\/#\/schema\/logo\/image\/\"},\"sameAs\":[\"https:\/\/www.facebook.com\/inmotionhosting\/\",\"https:\/\/x.com\/InMotionHosting\"]},{\"@type\":\"Person\",\"@id\":\"https:\/\/www.inmotionhosting.com\/support\/#\/schema\/person\/d850efb28ef3573db7d24b0d8fa9eaed\",\"name\":\"Scott Mitchell\",\"url\":\"https:\/\/www.inmotionhosting.com\/support\/author\/scott\/\"}]}<\/script>\n<!-- \/ Yoast SEO plugin. -->","yoast_head_json":{"title":"Uploading a custom favicon in Drupal 8 | InMotion Hosting","description":"Looking to change the default favicon in your Drupal 8 theme? Check out this article for instructions.","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.inmotionhosting.com\/support\/edu\/drupal\/custom-favicon\/","og_locale":"en_US","og_type":"article","og_title":"Uploading a custom favicon in Drupal 8 | InMotion Hosting","og_description":"Looking to change the default favicon in your Drupal 8 theme? Check out this article for instructions.","og_url":"https:\/\/www.inmotionhosting.com\/support\/edu\/drupal\/custom-favicon\/","og_site_name":"InMotion Hosting Support Center","article_publisher":"https:\/\/www.facebook.com\/inmotionhosting\/","article_published_time":"2013-10-22T13:22:41+00:00","article_modified_time":"2021-08-17T03:10:38+00:00","og_image":[{"url":"https:\/\/www.inmotionhosting.com\/support\/wp-content\/uploads\/2013\/06\/edu_Drupal-8__common-images_select-menu.png","type":"","width":"","height":""}],"author":"Scott Mitchell","twitter_card":"summary_large_image","twitter_creator":"@InMotionHosting","twitter_site":"@InMotionHosting","twitter_misc":{"Written by":"Scott Mitchell","Est. reading time":"1 minute"},"schema":{"@context":"https:\/\/schema.org","@graph":[{"@type":"Article","@id":"https:\/\/www.inmotionhosting.com\/support\/edu\/drupal\/custom-favicon\/#article","isPartOf":{"@id":"https:\/\/www.inmotionhosting.com\/support\/edu\/drupal\/custom-favicon\/"},"author":{"name":"Scott Mitchell","@id":"https:\/\/www.inmotionhosting.com\/support\/#\/schema\/person\/d850efb28ef3573db7d24b0d8fa9eaed"},"headline":"Uploading a custom favicon in Drupal 8","datePublished":"2013-10-22T13:22:41+00:00","dateModified":"2021-08-17T03:10:38+00:00","mainEntityOfPage":{"@id":"https:\/\/www.inmotionhosting.com\/support\/edu\/drupal\/custom-favicon\/"},"wordCount":264,"commentCount":0,"publisher":{"@id":"https:\/\/www.inmotionhosting.com\/support\/#organization"},"image":{"@id":"https:\/\/www.inmotionhosting.com\/support\/edu\/drupal\/custom-favicon\/#primaryimage"},"thumbnailUrl":"https:\/\/www.inmotionhosting.com\/support\/wp-content\/uploads\/2013\/06\/edu_Drupal-8__common-images_select-menu.png","articleSection":["Drupal"],"inLanguage":"en-US","potentialAction":[{"@type":"CommentAction","name":"Comment","target":["https:\/\/www.inmotionhosting.com\/support\/edu\/drupal\/custom-favicon\/#respond"]}]},{"@type":"WebPage","@id":"https:\/\/www.inmotionhosting.com\/support\/edu\/drupal\/custom-favicon\/","url":"https:\/\/www.inmotionhosting.com\/support\/edu\/drupal\/custom-favicon\/","name":"Uploading a custom favicon in Drupal 8 | InMotion Hosting","isPartOf":{"@id":"https:\/\/www.inmotionhosting.com\/support\/#website"},"primaryImageOfPage":{"@id":"https:\/\/www.inmotionhosting.com\/support\/edu\/drupal\/custom-favicon\/#primaryimage"},"image":{"@id":"https:\/\/www.inmotionhosting.com\/support\/edu\/drupal\/custom-favicon\/#primaryimage"},"thumbnailUrl":"https:\/\/www.inmotionhosting.com\/support\/wp-content\/uploads\/2013\/06\/edu_Drupal-8__common-images_select-menu.png","datePublished":"2013-10-22T13:22:41+00:00","dateModified":"2021-08-17T03:10:38+00:00","description":"Looking to change the default favicon in your Drupal 8 theme? Check out this article for instructions.","breadcrumb":{"@id":"https:\/\/www.inmotionhosting.com\/support\/edu\/drupal\/custom-favicon\/#breadcrumb"},"inLanguage":"en-US","potentialAction":[{"@type":"ReadAction","target":["https:\/\/www.inmotionhosting.com\/support\/edu\/drupal\/custom-favicon\/"]}]},{"@type":"ImageObject","inLanguage":"en-US","@id":"https:\/\/www.inmotionhosting.com\/support\/edu\/drupal\/custom-favicon\/#primaryimage","url":"https:\/\/www.inmotionhosting.com\/support\/wp-content\/uploads\/2013\/06\/edu_Drupal-8__common-images_select-menu.png","contentUrl":"https:\/\/www.inmotionhosting.com\/support\/wp-content\/uploads\/2013\/06\/edu_Drupal-8__common-images_select-menu.png","width":429,"height":49,"caption":"Click here to view the larger image"},{"@type":"BreadcrumbList","@id":"https:\/\/www.inmotionhosting.com\/support\/edu\/drupal\/custom-favicon\/#breadcrumb","itemListElement":[{"@type":"ListItem","position":1,"name":"Home","item":"https:\/\/www.inmotionhosting.com\/support\/"},{"@type":"ListItem","position":2,"name":"Uploading a custom favicon in Drupal 8"}]},{"@type":"WebSite","@id":"https:\/\/www.inmotionhosting.com\/support\/#website","url":"https:\/\/www.inmotionhosting.com\/support\/","name":"InMotion Hosting Support Center","description":"Web Hosting Support & Tutorials","publisher":{"@id":"https:\/\/www.inmotionhosting.com\/support\/#organization"},"potentialAction":[{"@type":"SearchAction","target":{"@type":"EntryPoint","urlTemplate":"https:\/\/www.inmotionhosting.com\/support\/?s={search_term_string}"},"query-input":{"@type":"PropertyValueSpecification","valueRequired":true,"valueName":"search_term_string"}}],"inLanguage":"en-US"},{"@type":"Organization","@id":"https:\/\/www.inmotionhosting.com\/support\/#organization","name":"InMotion Hosting","url":"https:\/\/www.inmotionhosting.com\/support\/","logo":{"@type":"ImageObject","inLanguage":"en-US","@id":"https:\/\/www.inmotionhosting.com\/support\/#\/schema\/logo\/image\/","url":"https:\/\/www.inmotionhosting.com\/support\/wp-content\/uploads\/2023\/02\/inmotion-hosting-logo-yoast.jpg","contentUrl":"https:\/\/www.inmotionhosting.com\/support\/wp-content\/uploads\/2023\/02\/inmotion-hosting-logo-yoast.jpg","width":696,"height":696,"caption":"InMotion Hosting"},"image":{"@id":"https:\/\/www.inmotionhosting.com\/support\/#\/schema\/logo\/image\/"},"sameAs":["https:\/\/www.facebook.com\/inmotionhosting\/","https:\/\/x.com\/InMotionHosting"]},{"@type":"Person","@id":"https:\/\/www.inmotionhosting.com\/support\/#\/schema\/person\/d850efb28ef3573db7d24b0d8fa9eaed","name":"Scott Mitchell","url":"https:\/\/www.inmotionhosting.com\/support\/author\/scott\/"}]}},"jetpack_featured_media_url":"","jetpack_sharing_enabled":true,"primary_category":null,"_links":{"self":[{"href":"https:\/\/www.inmotionhosting.com\/support\/wp-json\/wp\/v2\/posts\/2909","targetHints":{"allow":["GET"]}}],"collection":[{"href":"https:\/\/www.inmotionhosting.com\/support\/wp-json\/wp\/v2\/posts"}],"about":[{"href":"https:\/\/www.inmotionhosting.com\/support\/wp-json\/wp\/v2\/types\/post"}],"author":[{"embeddable":true,"href":"https:\/\/www.inmotionhosting.com\/support\/wp-json\/wp\/v2\/users\/8"}],"replies":[{"embeddable":true,"href":"https:\/\/www.inmotionhosting.com\/support\/wp-json\/wp\/v2\/comments?post=2909"}],"version-history":[{"count":2,"href":"https:\/\/www.inmotionhosting.com\/support\/wp-json\/wp\/v2\/posts\/2909\/revisions"}],"predecessor-version":[{"id":84467,"href":"https:\/\/www.inmotionhosting.com\/support\/wp-json\/wp\/v2\/posts\/2909\/revisions\/84467"}],"wp:attachment":[{"href":"https:\/\/www.inmotionhosting.com\/support\/wp-json\/wp\/v2\/media?parent=2909"}],"wp:term":[{"taxonomy":"category","embeddable":true,"href":"https:\/\/www.inmotionhosting.com\/support\/wp-json\/wp\/v2\/categories?post=2909"},{"taxonomy":"post_tag","embeddable":true,"href":"https:\/\/www.inmotionhosting.com\/support\/wp-json\/wp\/v2\/tags?post=2909"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}