{"id":335073,"date":"2022-05-15T04:13:35","date_gmt":"2022-05-15T04:13:35","guid":{"rendered":"https:\/\/webkul.com\/blog\/?p=335073"},"modified":"2024-06-19T07:08:56","modified_gmt":"2024-06-19T07:08:56","slug":"how-to-set-logo-in-admin-configuration-tab-in-magento-2","status":"publish","type":"post","link":"https:\/\/webkul.com\/blog\/how-to-set-logo-in-admin-configuration-tab-in-magento-2\/","title":{"rendered":"How to set logo in admin configuration tab in Magento 2"},"content":{"rendered":"\n

Hello Friends!!!
In this article, we will learn how we can add a logo in the admin configuration tab for our custom module.
To achieve the required result, we will follow the below steps:<\/p>\n\n\n\n

1. We will create a CSS file named configtab.css<\/em> inside the app\/code\/Vendor\/Module\/view\/adminhtml\/web\/css<\/em> directory. <\/strong><\/p>\n\n\n\n

.admin__page-nav.wk-config-tab-class._collapsed._show ._collapsible strong:before {\n  content: "";\n  background: url(..\/images\/configtab\/logo.png) no-repeat scroll 0 0 transparent;\n  width: 100%;\n  height: 26px;\n  display: inline-block;\n  vertical-align: bottom;\n}\n.admin__page-nav.wk-config-tab-class._collapsed._show ._collapsible strong {\n  font-size: 0;\n}<\/pre>\n\n\n\n
In the above CSS code, in background<\/em><\/strong> property, we have used logo image file URL. The logo.png <\/em><\/strong>is exist inside the app\/code\/Vendor\/Module\/view\/adminhtml\/web\/images\/configtab<\/em><\/strong> directory.<\/p>\n\n\n\n
2. Now, we will add the .wk-config-tab-class <\/em>CSS class in the class attribute of the tab<\/em> tag in the  app\/code\/Vendor\/Module\/etc\/adminhtml\/system.xml<\/em> file as the following image: <\/strong><\/p>\n\n\n\n
\"way1\"
Add class in tab tag<\/figcaption><\/figure>\n\n\n\n
Now, see the result in the following image:<\/p>\n\n\n\n
\"result-2\"<\/figure>\n\n\n\n
Hope this will be helpful.
Thanks \ud83d\ude42<\/p>\n","protected":false},"excerpt":{"rendered":"
Hello Friends!!!In this article, we will learn how we can add a logo in the admin configuration tab for our custom module.To achieve the required result, we will follow the below steps: 1. We will create a CSS file named configtab.css inside the app\/code\/Vendor\/Module\/view\/adminhtml\/web\/css directory. In the above CSS code, in background property, we have […]<\/a><\/p>\n","protected":false},"author":249,"featured_media":0,"comment_status":"open","ping_status":"open","sticky":false,"template":"","format":"standard","meta":{"footnotes":""},"categories":[9121],"tags":[12736,12737,12739,12738,12734,12733,12735],"class_list":["post-335073","post","type-post","status-publish","format-standard","hentry","category-magento-2","tag-add-image-in-admin-configuration-tab","tag-add-logo-in-admin-configuration-tab","tag-add-logo-in-admin-configuration-tab-in-magento-2-4","tag-admin-configuration-tab","tag-how-to-add-logo-in-admin-configuration-tab-in-magento-2","tag-how-to-set-logo-in-admin-configuration-tab-in-magento-2","tag-image-in-admin-configuration-tag"],"yoast_head":"\nHow to set logo in admin configuration tab in Magento 2 - Webkul Blog<\/title>\n<meta name=\"robots\" content=\"index, follow, max-snippet:-1, max-image-preview:large, max-video-preview:-1\" \/>\n<link rel=\"canonical\" href=\"https:\/\/webkul.com\/blog\/how-to-set-logo-in-admin-configuration-tab-in-magento-2\/\" \/>\n<meta property=\"og:locale\" content=\"en_US\" \/>\n<meta property=\"og:type\" content=\"article\" \/>\n<meta property=\"og:title\" content=\"How to set logo in admin configuration tab in Magento 2 - Webkul Blog\" \/>\n<meta property=\"og:description\" content=\"Hello Friends!!!In this article, we will learn how we can add a logo in the admin configuration tab for our custom module.To achieve the required result, we will follow the below steps: 1. We will create a CSS file named configtab.css inside the app\/code\/Vendor\/Module\/view\/adminhtml\/web\/css directory. In the above CSS code, in background property, we have [...]\" \/>\n<meta property=\"og:url\" content=\"https:\/\/webkul.com\/blog\/how-to-set-logo-in-admin-configuration-tab-in-magento-2\/\" \/>\n<meta property=\"og:site_name\" content=\"Webkul Blog\" \/>\n<meta property=\"article:publisher\" content=\"https:\/\/www.facebook.com\/webkul\/\" \/>\n<meta property=\"article:published_time\" content=\"2022-05-15T04:13:35+00:00\" \/>\n<meta property=\"article:modified_time\" content=\"2024-06-19T07:08:56+00:00\" \/>\n<meta property=\"og:image\" content=\"https:\/\/webkul.com\/blog\/wp-content\/uploads\/2022\/05\/way1-1200x542.png\" \/>\n<meta name=\"author\" content=\"Khushboo Sahu\" \/>\n<meta name=\"twitter:card\" content=\"summary_large_image\" \/>\n<meta name=\"twitter:creator\" content=\"@webkul\" \/>\n<meta name=\"twitter:site\" content=\"@webkul\" \/>\n<meta name=\"twitter:label1\" content=\"Written by\" \/>\n\t<meta name=\"twitter:data1\" content=\"Khushboo Sahu\" \/>\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:\/\/webkul.com\/blog\/how-to-set-logo-in-admin-configuration-tab-in-magento-2\/#article\",\"isPartOf\":{\"@id\":\"https:\/\/webkul.com\/blog\/how-to-set-logo-in-admin-configuration-tab-in-magento-2\/\"},\"author\":{\"name\":\"Khushboo Sahu\",\"@id\":\"https:\/\/webkul.com\/blog\/#\/schema\/person\/f94b8f53397bf85810761d76c98fadca\"},\"headline\":\"How to set logo in admin configuration tab in Magento 2\",\"datePublished\":\"2022-05-15T04:13:35+00:00\",\"dateModified\":\"2024-06-19T07:08:56+00:00\",\"mainEntityOfPage\":{\"@id\":\"https:\/\/webkul.com\/blog\/how-to-set-logo-in-admin-configuration-tab-in-magento-2\/\"},\"wordCount\":146,\"commentCount\":0,\"publisher\":{\"@id\":\"https:\/\/webkul.com\/blog\/#organization\"},\"image\":{\"@id\":\"https:\/\/webkul.com\/blog\/how-to-set-logo-in-admin-configuration-tab-in-magento-2\/#primaryimage\"},\"thumbnailUrl\":\"https:\/\/webkul.com\/blog\/wp-content\/uploads\/2022\/05\/way1-1200x542.png\",\"keywords\":[\"add image in admin configuration tab\",\"add logo in admin configuration tab\",\"add logo in admin configuration tab in Magento 2.4\",\"admin configuration tab\",\"How to add logo in admin configuration tab in Magento 2\",\"How to set logo in admin configuration tab in Magento 2\",\"image in admin configuration tag\"],\"articleSection\":[\"Magento 2\"],\"inLanguage\":\"en-US\",\"potentialAction\":[{\"@type\":\"CommentAction\",\"name\":\"Comment\",\"target\":[\"https:\/\/webkul.com\/blog\/how-to-set-logo-in-admin-configuration-tab-in-magento-2\/#respond\"]}]},{\"@type\":\"WebPage\",\"@id\":\"https:\/\/webkul.com\/blog\/how-to-set-logo-in-admin-configuration-tab-in-magento-2\/\",\"url\":\"https:\/\/webkul.com\/blog\/how-to-set-logo-in-admin-configuration-tab-in-magento-2\/\",\"name\":\"How to set logo in admin configuration tab in Magento 2 - Webkul Blog\",\"isPartOf\":{\"@id\":\"https:\/\/webkul.com\/blog\/#website\"},\"primaryImageOfPage\":{\"@id\":\"https:\/\/webkul.com\/blog\/how-to-set-logo-in-admin-configuration-tab-in-magento-2\/#primaryimage\"},\"image\":{\"@id\":\"https:\/\/webkul.com\/blog\/how-to-set-logo-in-admin-configuration-tab-in-magento-2\/#primaryimage\"},\"thumbnailUrl\":\"https:\/\/webkul.com\/blog\/wp-content\/uploads\/2022\/05\/way1-1200x542.png\",\"datePublished\":\"2022-05-15T04:13:35+00:00\",\"dateModified\":\"2024-06-19T07:08:56+00:00\",\"breadcrumb\":{\"@id\":\"https:\/\/webkul.com\/blog\/how-to-set-logo-in-admin-configuration-tab-in-magento-2\/#breadcrumb\"},\"inLanguage\":\"en-US\",\"potentialAction\":[{\"@type\":\"ReadAction\",\"target\":[\"https:\/\/webkul.com\/blog\/how-to-set-logo-in-admin-configuration-tab-in-magento-2\/\"]}]},{\"@type\":\"ImageObject\",\"inLanguage\":\"en-US\",\"@id\":\"https:\/\/webkul.com\/blog\/how-to-set-logo-in-admin-configuration-tab-in-magento-2\/#primaryimage\",\"url\":\"https:\/\/cdnblog.webkul.com\/blog\/wp-content\/uploads\/2022\/05\/way1.png\",\"contentUrl\":\"https:\/\/cdnblog.webkul.com\/blog\/wp-content\/uploads\/2022\/05\/way1.png\",\"width\":1561,\"height\":705,\"caption\":\"way1\"},{\"@type\":\"BreadcrumbList\",\"@id\":\"https:\/\/webkul.com\/blog\/how-to-set-logo-in-admin-configuration-tab-in-magento-2\/#breadcrumb\",\"itemListElement\":[{\"@type\":\"ListItem\",\"position\":1,\"name\":\"Home\",\"item\":\"https:\/\/webkul.com\/blog\/\"},{\"@type\":\"ListItem\",\"position\":2,\"name\":\"How to set logo in admin configuration tab in Magento 2\"}]},{\"@type\":\"WebSite\",\"@id\":\"https:\/\/webkul.com\/blog\/#website\",\"url\":\"https:\/\/webkul.com\/blog\/\",\"name\":\"Webkul Blog\",\"description\":\"\",\"publisher\":{\"@id\":\"https:\/\/webkul.com\/blog\/#organization\"},\"potentialAction\":[{\"@type\":\"SearchAction\",\"target\":{\"@type\":\"EntryPoint\",\"urlTemplate\":\"https:\/\/webkul.com\/blog\/?s={search_term_string}\"},\"query-input\":{\"@type\":\"PropertyValueSpecification\",\"valueRequired\":true,\"valueName\":\"search_term_string\"}}],\"inLanguage\":\"en-US\"},{\"@type\":\"Organization\",\"@id\":\"https:\/\/webkul.com\/blog\/#organization\",\"name\":\"WebKul Software Private Limited\",\"url\":\"https:\/\/webkul.com\/blog\/\",\"logo\":{\"@type\":\"ImageObject\",\"inLanguage\":\"en-US\",\"@id\":\"https:\/\/webkul.com\/blog\/#\/schema\/logo\/image\/\",\"url\":\"https:\/\/cdnblog.webkul.com\/blog\/wp-content\/uploads\/2021\/08\/webkul-logo-accent-sq.png\",\"contentUrl\":\"https:\/\/cdnblog.webkul.com\/blog\/wp-content\/uploads\/2021\/08\/webkul-logo-accent-sq.png\",\"width\":380,\"height\":380,\"caption\":\"WebKul Software Private Limited\"},\"image\":{\"@id\":\"https:\/\/webkul.com\/blog\/#\/schema\/logo\/image\/\"},\"sameAs\":[\"https:\/\/www.facebook.com\/webkul\/\",\"https:\/\/x.com\/webkul\",\"https:\/\/www.instagram.com\/webkul\/\",\"https:\/\/www.linkedin.com\/company\/webkul\",\"https:\/\/www.youtube.com\/user\/webkul\/\"]},{\"@type\":\"Person\",\"@id\":\"https:\/\/webkul.com\/blog\/#\/schema\/person\/f94b8f53397bf85810761d76c98fadca\",\"name\":\"Khushboo Sahu\",\"image\":{\"@type\":\"ImageObject\",\"inLanguage\":\"en-US\",\"@id\":\"https:\/\/webkul.com\/blog\/#\/schema\/person\/image\/\",\"url\":\"https:\/\/secure.gravatar.com\/avatar\/cabac965df656d114e6bf340df07518c990eda03bb09265dbd5c17f1097adaae?s=96&d=https%3A%2F%2Fcdnblog.webkul.com%2Fblog%2Fwp-content%2Fuploads%2F2019%2F10%2Feva.png&r=g\",\"contentUrl\":\"https:\/\/secure.gravatar.com\/avatar\/cabac965df656d114e6bf340df07518c990eda03bb09265dbd5c17f1097adaae?s=96&d=https%3A%2F%2Fcdnblog.webkul.com%2Fblog%2Fwp-content%2Fuploads%2F2019%2F10%2Feva.png&r=g\",\"caption\":\"Khushboo Sahu\"},\"url\":\"https:\/\/webkul.com\/blog\/author\/khushboo-sahu062\/\"}]}<\/script>\n<!-- \/ Yoast SEO plugin. -->","yoast_head_json":{"title":"How to set logo in admin configuration tab in Magento 2 - Webkul Blog","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:\/\/webkul.com\/blog\/how-to-set-logo-in-admin-configuration-tab-in-magento-2\/","og_locale":"en_US","og_type":"article","og_title":"How to set logo in admin configuration tab in Magento 2 - Webkul Blog","og_description":"Hello Friends!!!In this article, we will learn how we can add a logo in the admin configuration tab for our custom module.To achieve the required result, we will follow the below steps: 1. We will create a CSS file named configtab.css inside the app\/code\/Vendor\/Module\/view\/adminhtml\/web\/css directory. In the above CSS code, in background property, we have [...]","og_url":"https:\/\/webkul.com\/blog\/how-to-set-logo-in-admin-configuration-tab-in-magento-2\/","og_site_name":"Webkul Blog","article_publisher":"https:\/\/www.facebook.com\/webkul\/","article_published_time":"2022-05-15T04:13:35+00:00","article_modified_time":"2024-06-19T07:08:56+00:00","og_image":[{"url":"https:\/\/webkul.com\/blog\/wp-content\/uploads\/2022\/05\/way1-1200x542.png","type":"","width":"","height":""}],"author":"Khushboo Sahu","twitter_card":"summary_large_image","twitter_creator":"@webkul","twitter_site":"@webkul","twitter_misc":{"Written by":"Khushboo Sahu","Est. reading time":"1 minute"},"schema":{"@context":"https:\/\/schema.org","@graph":[{"@type":"Article","@id":"https:\/\/webkul.com\/blog\/how-to-set-logo-in-admin-configuration-tab-in-magento-2\/#article","isPartOf":{"@id":"https:\/\/webkul.com\/blog\/how-to-set-logo-in-admin-configuration-tab-in-magento-2\/"},"author":{"name":"Khushboo Sahu","@id":"https:\/\/webkul.com\/blog\/#\/schema\/person\/f94b8f53397bf85810761d76c98fadca"},"headline":"How to set logo in admin configuration tab in Magento 2","datePublished":"2022-05-15T04:13:35+00:00","dateModified":"2024-06-19T07:08:56+00:00","mainEntityOfPage":{"@id":"https:\/\/webkul.com\/blog\/how-to-set-logo-in-admin-configuration-tab-in-magento-2\/"},"wordCount":146,"commentCount":0,"publisher":{"@id":"https:\/\/webkul.com\/blog\/#organization"},"image":{"@id":"https:\/\/webkul.com\/blog\/how-to-set-logo-in-admin-configuration-tab-in-magento-2\/#primaryimage"},"thumbnailUrl":"https:\/\/webkul.com\/blog\/wp-content\/uploads\/2022\/05\/way1-1200x542.png","keywords":["add image in admin configuration tab","add logo in admin configuration tab","add logo in admin configuration tab in Magento 2.4","admin configuration tab","How to add logo in admin configuration tab in Magento 2","How to set logo in admin configuration tab in Magento 2","image in admin configuration tag"],"articleSection":["Magento 2"],"inLanguage":"en-US","potentialAction":[{"@type":"CommentAction","name":"Comment","target":["https:\/\/webkul.com\/blog\/how-to-set-logo-in-admin-configuration-tab-in-magento-2\/#respond"]}]},{"@type":"WebPage","@id":"https:\/\/webkul.com\/blog\/how-to-set-logo-in-admin-configuration-tab-in-magento-2\/","url":"https:\/\/webkul.com\/blog\/how-to-set-logo-in-admin-configuration-tab-in-magento-2\/","name":"How to set logo in admin configuration tab in Magento 2 - Webkul Blog","isPartOf":{"@id":"https:\/\/webkul.com\/blog\/#website"},"primaryImageOfPage":{"@id":"https:\/\/webkul.com\/blog\/how-to-set-logo-in-admin-configuration-tab-in-magento-2\/#primaryimage"},"image":{"@id":"https:\/\/webkul.com\/blog\/how-to-set-logo-in-admin-configuration-tab-in-magento-2\/#primaryimage"},"thumbnailUrl":"https:\/\/webkul.com\/blog\/wp-content\/uploads\/2022\/05\/way1-1200x542.png","datePublished":"2022-05-15T04:13:35+00:00","dateModified":"2024-06-19T07:08:56+00:00","breadcrumb":{"@id":"https:\/\/webkul.com\/blog\/how-to-set-logo-in-admin-configuration-tab-in-magento-2\/#breadcrumb"},"inLanguage":"en-US","potentialAction":[{"@type":"ReadAction","target":["https:\/\/webkul.com\/blog\/how-to-set-logo-in-admin-configuration-tab-in-magento-2\/"]}]},{"@type":"ImageObject","inLanguage":"en-US","@id":"https:\/\/webkul.com\/blog\/how-to-set-logo-in-admin-configuration-tab-in-magento-2\/#primaryimage","url":"https:\/\/cdnblog.webkul.com\/blog\/wp-content\/uploads\/2022\/05\/way1.png","contentUrl":"https:\/\/cdnblog.webkul.com\/blog\/wp-content\/uploads\/2022\/05\/way1.png","width":1561,"height":705,"caption":"way1"},{"@type":"BreadcrumbList","@id":"https:\/\/webkul.com\/blog\/how-to-set-logo-in-admin-configuration-tab-in-magento-2\/#breadcrumb","itemListElement":[{"@type":"ListItem","position":1,"name":"Home","item":"https:\/\/webkul.com\/blog\/"},{"@type":"ListItem","position":2,"name":"How to set logo in admin configuration tab in Magento 2"}]},{"@type":"WebSite","@id":"https:\/\/webkul.com\/blog\/#website","url":"https:\/\/webkul.com\/blog\/","name":"Webkul Blog","description":"","publisher":{"@id":"https:\/\/webkul.com\/blog\/#organization"},"potentialAction":[{"@type":"SearchAction","target":{"@type":"EntryPoint","urlTemplate":"https:\/\/webkul.com\/blog\/?s={search_term_string}"},"query-input":{"@type":"PropertyValueSpecification","valueRequired":true,"valueName":"search_term_string"}}],"inLanguage":"en-US"},{"@type":"Organization","@id":"https:\/\/webkul.com\/blog\/#organization","name":"WebKul Software Private Limited","url":"https:\/\/webkul.com\/blog\/","logo":{"@type":"ImageObject","inLanguage":"en-US","@id":"https:\/\/webkul.com\/blog\/#\/schema\/logo\/image\/","url":"https:\/\/cdnblog.webkul.com\/blog\/wp-content\/uploads\/2021\/08\/webkul-logo-accent-sq.png","contentUrl":"https:\/\/cdnblog.webkul.com\/blog\/wp-content\/uploads\/2021\/08\/webkul-logo-accent-sq.png","width":380,"height":380,"caption":"WebKul Software Private Limited"},"image":{"@id":"https:\/\/webkul.com\/blog\/#\/schema\/logo\/image\/"},"sameAs":["https:\/\/www.facebook.com\/webkul\/","https:\/\/x.com\/webkul","https:\/\/www.instagram.com\/webkul\/","https:\/\/www.linkedin.com\/company\/webkul","https:\/\/www.youtube.com\/user\/webkul\/"]},{"@type":"Person","@id":"https:\/\/webkul.com\/blog\/#\/schema\/person\/f94b8f53397bf85810761d76c98fadca","name":"Khushboo Sahu","image":{"@type":"ImageObject","inLanguage":"en-US","@id":"https:\/\/webkul.com\/blog\/#\/schema\/person\/image\/","url":"https:\/\/secure.gravatar.com\/avatar\/cabac965df656d114e6bf340df07518c990eda03bb09265dbd5c17f1097adaae?s=96&d=https%3A%2F%2Fcdnblog.webkul.com%2Fblog%2Fwp-content%2Fuploads%2F2019%2F10%2Feva.png&r=g","contentUrl":"https:\/\/secure.gravatar.com\/avatar\/cabac965df656d114e6bf340df07518c990eda03bb09265dbd5c17f1097adaae?s=96&d=https%3A%2F%2Fcdnblog.webkul.com%2Fblog%2Fwp-content%2Fuploads%2F2019%2F10%2Feva.png&r=g","caption":"Khushboo Sahu"},"url":"https:\/\/webkul.com\/blog\/author\/khushboo-sahu062\/"}]}},"amp_enabled":true,"_links":{"self":[{"href":"https:\/\/webkul.com\/blog\/wp-json\/wp\/v2\/posts\/335073","targetHints":{"allow":["GET"]}}],"collection":[{"href":"https:\/\/webkul.com\/blog\/wp-json\/wp\/v2\/posts"}],"about":[{"href":"https:\/\/webkul.com\/blog\/wp-json\/wp\/v2\/types\/post"}],"author":[{"embeddable":true,"href":"https:\/\/webkul.com\/blog\/wp-json\/wp\/v2\/users\/249"}],"replies":[{"embeddable":true,"href":"https:\/\/webkul.com\/blog\/wp-json\/wp\/v2\/comments?post=335073"}],"version-history":[{"count":2,"href":"https:\/\/webkul.com\/blog\/wp-json\/wp\/v2\/posts\/335073\/revisions"}],"predecessor-version":[{"id":448662,"href":"https:\/\/webkul.com\/blog\/wp-json\/wp\/v2\/posts\/335073\/revisions\/448662"}],"wp:attachment":[{"href":"https:\/\/webkul.com\/blog\/wp-json\/wp\/v2\/media?parent=335073"}],"wp:term":[{"taxonomy":"category","embeddable":true,"href":"https:\/\/webkul.com\/blog\/wp-json\/wp\/v2\/categories?post=335073"},{"taxonomy":"post_tag","embeddable":true,"href":"https:\/\/webkul.com\/blog\/wp-json\/wp\/v2\/tags?post=335073"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}