{"id":2037733,"date":"2021-04-30T11:56:46","date_gmt":"2021-04-30T11:56:46","guid":{"rendered":"https:\/\/toolset.com\/course-lesson\/wordpress-site-identity\/"},"modified":"2021-05-11T07:02:19","modified_gmt":"2021-05-11T07:02:19","slug":"wordpress-site-identity","status":"publish","type":"course-lesson","link":"https:\/\/toolset.com\/fr\/course-lesson\/wordpress-site-identity\/","title":{"rendered":"WordPress Site Identity"},"content":{"rendered":"\n<h2 class=\"wp-block-heading\">Site Identity tab in Customizer<\/h2>\n\n\n\n<p>The <strong>Site Identity<\/strong> tab allows you to differentiate your brand against competitors by creating a more professional first impression to users.<\/p>\n\n\n\n<p>To access the tab go to <strong>Appearance<\/strong> \u2192<strong> Customize<\/strong> and search for the <strong>Site Identity <\/strong>panel on the left sidebar.<\/p>\n\n\n<div class=\"wp-block-image\">\n<figure class=\" tb-image tb-image-dynamic aligncenter\" data-toolset-blocks-image=\"30712dcac75debe5223a465a3f06ce6d\"><img decoding=\"async\" width=\"373\" height=\"773\" loading=\"lazy\" src=\"https:\/\/toolset.com\/wp-content\/uploads\/2021\/05\/toolset-design-course-site-identity-tab-1.png\" alt=\"\" class=\"wp-image-2040961\" srcset=\"https:\/\/toolset.com\/wp-content\/uploads\/2021\/05\/toolset-design-course-site-identity-tab-1.png 373w, https:\/\/toolset.com\/wp-content\/uploads\/2021\/05\/toolset-design-course-site-identity-tab-1-145x300.png 145w, https:\/\/toolset.com\/wp-content\/uploads\/2021\/05\/toolset-design-course-site-identity-tab-1-72x150.png 72w, https:\/\/toolset.com\/wp-content\/uploads\/2021\/05\/toolset-design-course-site-identity-tab-1-251x520.png 251w, https:\/\/toolset.com\/wp-content\/uploads\/2021\/05\/toolset-design-course-site-identity-tab-1-300x622.png 300w\" sizes=\"auto, (max-width: 373px) 100vw, 373px\" \/><div class=\"tb-image-caption\"><figcaption>Adding a Site Title in the the Site Identity tab<\/figcaption><\/div><\/figure>\n<\/div>\n\n\n<p>The theme of your site affects the design output of these features. While some themes can have more customization features than the above example, others might not even allow you to access the <strong>Site Identity<\/strong> panel.<\/p>\n\n\n\n<p>If your theme is missing features from the<strong> Site Identity<\/strong> tab, you can install a plugin that enables the ones you need.<\/p>\n\n\n\n<p>Before designing your site, make sure to read your theme documentation to understand what is available, and where, in your Customizer. You can also contact the theme developer or support team for more information.&nbsp;<\/p>\n\n\n\n<h2 class=\"wp-block-heading\">Designing your logo and favicon<\/h2>\n\n\n\n<p>The first question you should ask yourself is who should design your logo and favicon. Designing takes talent, practice, and knowledge to get right.<\/p>\n\n\n\n<p>If you&#8217;re not a designer yourself and you have the budget, you should hire a designer to design your logo, favicon, and brand identity.&nbsp;<\/p>\n\n\n\n<p>And of course, if you don&#8217;t have the budget or feel confident enough, you can always do it yourself.<\/p>\n\n\n\n<h3 class=\"wp-block-heading\">How to Make a Modern Logo<\/h3>\n\n\n\n<p>A logo is a graphic symbol that helps users and clients recognize your brand, and it improves the way users view your content while strengthening your brand identity.&nbsp;<\/p>\n\n\n\n<p>It\u2019s important to make sure your logo design is:<\/p>\n\n\n\n<ul class=\"wp-block-list\"><li>Simple: It uses no more than 3 colors or 2 font types (typography)<\/li><li>Relevant: The design is closely connected to your brand identity<\/li><li>Memorable: Not another clich\u00e9 design, something unique to your business&nbsp;<\/li><li>Timeless: It ignores short-living trends, unclear fonts, and uncoordinated colors<\/li><li>Versatile: It looks good on large and small screens<\/li><\/ul>\n\n\n\n<div class=\"wp-block-toolset-blocks-grid tb-grid\" data-toolset-blocks-grid=\"4b9e8457fcad5b84e8000624433f2bb9\">\n<div class=\"wp-block-toolset-blocks-grid-column tb-grid-column tb-grid-align-top\" data-toolset-blocks-grid-column=\"3034fbe886c11054e95b46b09d3e4112\">\n<p><strong>An example of a logo using outdated design techniques<\/strong><\/p>\n\n\n<div class=\"wp-block-image\">\n<figure class=\" tb-image tb-image-dynamic aligncenter\" data-toolset-blocks-image=\"472f81064cef9accd6ee94bc1623ca76\"><img decoding=\"async\" loading=\"lazy\" src=\"https:\/\/toolset.com\/wp-content\/uploads\/2021\/05\/toolset-design-course-3d-logo-182x175.png\" alt=\"\" class=\"wp-image-2040979\"\/><\/figure>\n<\/div><\/div>\n\n\n\n<div class=\"wp-block-toolset-blocks-grid-column tb-grid-column tb-grid-align-top\" data-toolset-blocks-grid-column=\"3034fbe886c11054e95b46b09d3e4112\">\n<p><strong>An example of a logo using modern design techniques<\/strong><\/p>\n\n\n<div class=\"wp-block-image\">\n<figure class=\" tb-image tb-image-dynamic aligncenter\" data-toolset-blocks-image=\"35fcb30838f7cca15fe5a5d07bd68507\"><img decoding=\"async\" loading=\"lazy\" src=\"https:\/\/toolset.com\/wp-content\/uploads\/2021\/05\/toolset-design-course-2d-logo-175x175.png\" alt=\"\" class=\"wp-image-2040989\"\/><\/figure>\n<\/div><\/div>\n<\/div>\n\n\n\n<p>You can easily make a design using online sources such as <a href=\"https:\/\/www.freelogodesign.org\/\">FreeLogo Design<\/a>, <a href=\"https:\/\/www.buildmylogo.co\/\">BuildMyLogo<\/a>, or <a href=\"https:\/\/www.tailorbrands.com\/\">Tailor Brands<\/a>. If you want to make it completely from scratch, you can also use Adobe Photoshop or Figma to create your logo.<\/p>\n\n\n\n<p>Please note that WordPress accepts JPG, JPEG, PNG, and ICO image formats by default. If you would like to upload SVG file types you need to install a plugin such as <a href=\"https:\/\/wordpress.org\/plugins\/safe-svg\/\">Safe SVG<\/a>.<\/p>\n\n\n\n<p>If you don\u2019t want to create your logo from scratch or hire a designer, using a tool like <a href=\"https:\/\/www.tailorbrands.com\/lp-home\">tailorbrands.com<\/a> helps you create a simple logo according to your answers in the wizard:<\/p>\n\n\n<div class=\"wp-block-image\">\n<figure class=\" tb-image tb-image-dynamic aligncenter\" data-toolset-blocks-image=\"a88686023b7c9c3ce32839aa9424021f\"><a href=\"https:\/\/toolset.com\/wp-content\/uploads\/2021\/05\/toolset-design-course-logo-service.png\"><img decoding=\"async\" loading=\"lazy\" src=\"https:\/\/toolset.com\/wp-content\/uploads\/2021\/05\/toolset-design-course-logo-service-500x245.png\" alt=\"\" class=\"wp-image-2041039\"\/><\/a><div class=\"tb-image-caption\"><figcaption>An example of an online logo-maker<\/figcaption><\/div><\/figure>\n<\/div>\n\n\n<h3 class=\"wp-block-heading\">How to Make a Favicon (Site icon)<\/h3>\n\n\n\n<p>A favicon, or site icon, is a small graphic image that represents your brand identity. The favicon symbol is important because it helps users quickly identify your website from others in the browser tabs. This creates a smoother experience for your clients and helps create a better first impression, which makes your site appear more professional and attractive.&nbsp;<\/p>\n\n\n<div class=\"wp-block-image\">\n<figure class=\" tb-image tb-image-dynamic aligncenter\" data-toolset-blocks-image=\"b476f2960cddd7deaed82fbaaec8d39c\"><a href=\"https:\/\/toolset.com\/wp-content\/uploads\/2021\/05\/toolset-design-course-favorite-icon-1.png\"><img decoding=\"async\" loading=\"lazy\" src=\"https:\/\/toolset.com\/wp-content\/uploads\/2021\/05\/toolset-design-course-favorite-icon-1-500x92.png\" alt=\"\" class=\"wp-image-2041059\"\/><\/a><div class=\"tb-image-caption\"><figcaption>The Toolset website on the front-end<\/figcaption><\/div><\/figure>\n<\/div>\n\n\n<p>To make a good favicon, there are some requirements you should follow.&nbsp;<\/p>\n\n\n\n<p>Make sure that your favicon is:<\/p>\n\n\n\n<ul class=\"wp-block-list\"><li>Square<\/li><li>At least 512&#215;512 pixels<\/li><li>Relevant to your brand identity, logo, and site design<\/li><li>Simple&nbsp;<\/li><\/ul>\n\n\n\n<div class=\"wp-block-toolset-blocks-grid tb-grid\" data-toolset-blocks-grid=\"4b9e8457fcad5b84e8000624433f2bb9\">\n<div class=\"wp-block-toolset-blocks-grid-column tb-grid-column tb-grid-align-top\" data-toolset-blocks-grid-column=\"3034fbe886c11054e95b46b09d3e4112\">\n<p><strong>A website displaying a favicon that is the same as its logo<\/strong><\/p>\n\n\n<div class=\"wp-block-image\">\n<figure class=\" tb-image tb-image-dynamic aligncenter\" data-toolset-blocks-image=\"e7bf0e97901258c28ef2a19c6a9bcb29\"><a href=\"https:\/\/toolset.com\/wp-content\/uploads\/2021\/05\/toolset-design-course-icon-1.png\"><img decoding=\"async\" loading=\"lazy\" src=\"https:\/\/toolset.com\/wp-content\/uploads\/2021\/05\/toolset-design-course-icon-1-400x224.png\" alt=\"\" class=\"wp-image-2041073\"\/><\/a><\/figure>\n<\/div><\/div>\n\n\n\n<div class=\"wp-block-toolset-blocks-grid-column tb-grid-column tb-grid-align-top\" data-toolset-blocks-grid-column=\"3034fbe886c11054e95b46b09d3e4112\">\n<p><strong>A website displaying a favicon that is a simpler version of their logo<\/strong><\/p>\n\n\n<div class=\"wp-block-image\">\n<figure class=\" tb-image tb-image-dynamic aligncenter\" data-toolset-blocks-image=\"e6636672d97d30087575c5322a9e43fa\"><a href=\"https:\/\/toolset.com\/wp-content\/uploads\/2021\/05\/toolset-design-course-icon-2.png\"><img decoding=\"async\" loading=\"lazy\" src=\"https:\/\/toolset.com\/wp-content\/uploads\/2021\/05\/toolset-design-course-icon-2-400x224.png\" alt=\"\" class=\"wp-image-2041083\"\/><\/a><\/figure>\n<\/div><\/div>\n<\/div>\n\n\n\n<p>In the example on the right, the simpler and cleaner version of the site logo works better as a favicon because users can understand the image better than the overwhelming example on the left.<\/p>\n\n\n\n<p>Please note that if you don\u2019t want to create your favicon from scratch or hire a designer, you can easily use the tool <a href=\"https:\/\/favicon.io\/favicon-generator\/\">favicon.io<\/a>. This works by generating a favicon from text, fonts, and colors you select from:<\/p>\n\n\n<div class=\"wp-block-image\">\n<figure class=\" tb-image tb-image-dynamic aligncenter\" data-toolset-blocks-image=\"beb413a51415f25755934c68b71c4f95\"><a href=\"https:\/\/toolset.com\/wp-content\/uploads\/2021\/05\/toolset-design-course-favicon-generator-1.png\"><img decoding=\"async\" loading=\"lazy\" src=\"https:\/\/toolset.com\/wp-content\/uploads\/2021\/05\/toolset-design-course-favicon-generator-1-500x234.png\" alt=\"\" class=\"wp-image-2041103\"\/><\/a><div class=\"tb-image-caption\"><figcaption>An example of an online favicon generator<\/figcaption><\/div><\/figure>\n<\/div>","protected":false},"author":84277,"featured_media":2037911,"template":"","related-lesson":[8417],"class_list":["post-2037733","course-lesson","type-course-lesson","status-publish","has-post-thumbnail","hentry","related-lesson-designing"],"_links":{"self":[{"href":"https:\/\/toolset.com\/fr\/wp-json\/wp\/v2\/course-lesson\/2037733","targetHints":{"allow":["GET"]}}],"collection":[{"href":"https:\/\/toolset.com\/fr\/wp-json\/wp\/v2\/course-lesson"}],"about":[{"href":"https:\/\/toolset.com\/fr\/wp-json\/wp\/v2\/types\/course-lesson"}],"author":[{"embeddable":true,"href":"https:\/\/toolset.com\/fr\/wp-json\/wp\/v2\/users\/84277"}],"version-history":[{"count":8,"href":"https:\/\/toolset.com\/fr\/wp-json\/wp\/v2\/course-lesson\/2037733\/revisions"}],"predecessor-version":[{"id":2050351,"href":"https:\/\/toolset.com\/fr\/wp-json\/wp\/v2\/course-lesson\/2037733\/revisions\/2050351"}],"wp:featuredmedia":[{"embeddable":true,"href":"https:\/\/toolset.com\/fr\/wp-json\/wp\/v2\/media\/2037911"}],"wp:attachment":[{"href":"https:\/\/toolset.com\/fr\/wp-json\/wp\/v2\/media?parent=2037733"}],"wp:term":[{"taxonomy":"related-lesson","embeddable":true,"href":"https:\/\/toolset.com\/fr\/wp-json\/wp\/v2\/related-lesson?post=2037733"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}