{"id":4188,"date":"2019-09-02T13:52:53","date_gmt":"2019-09-02T13:52:53","guid":{"rendered":"https:\/\/colibriwp.com\/blog\/?p=4188"},"modified":"2020-12-11T11:34:34","modified_gmt":"2020-12-11T11:34:34","slug":"wordpress-favicon","status":"publish","type":"post","link":"https:\/\/colibriwp.com\/blog\/wordpress-favicon\/","title":{"rendered":"Why and How to a WordPress Favicon to Your Website"},"content":{"rendered":"<p>The name &#8220;favicon&#8221; comes from &#8220;favourite icon&#8221;. It\u2019s also known as a site icon. It&#8217;s a small image representative of a website and it can be found on any page contained by that website.<\/p>\n<p>A site icon is attached to a site (or it should be) and it adds to the website personality. Given its generic use in all the site pages, it can be viewed as the symbol of that website in its entirety.<\/p>\n<p>However, people often neglect and overlook them in the process of website design. Well, they shouldn\u2019t\u2026because favicons are a piece of a bigger puzzle called site identity.<\/p>\n<p>&nbsp;<\/p>\n<h2>Where does the favicon appear on a website?<\/h2>\n<p>The favorite icon is displayed in the browser tab where you open a page, next to that page title.<\/p>\n<p>It\u2019s also visible in the bookmarks bar, where the site link has been saved.<\/p>\n<p><img loading=\"lazy\" class=\"aligncenter wp-image-4189\" src=\"https:\/\/colibriwp.com\/blog\/wp-content\/uploads\/2019\/09\/favicon1.png\" alt=\"add a favicon in website\" width=\"860\" height=\"393\" \/><\/p>\n<p>It might pass as unimportant, and not so visible, but the difference strikes when there\u2019s no favicon in place. As web surfers usually find the favicon in place, they\u2019ll slightly register its absence as a lack of care for the detail, in fact as something that\u2019s missing.<\/p>\n<h2><\/h2>\n<h2>Why is it so important to add a favicon to a website?<\/h2>\n<p>First, people are used to seeing favicons in place. No favicon results in confusion and doubt as to the website\/company.<\/p>\n<p>Second, a site icon that replicates onto each and every page serves much to memorizing the brand. It\u2019s a helpful technique to get users remember the website when they come back to it, or when they check their bookmarks where they&#8217;ve saved the website. It\u2019s an iconic extra that completes the website identity.<\/p>\n<p>Third, a favicon adds to a website&#8217;s personality and strengthens the brand identity. It provides additional space where the brand can express its characteristics. When it comes to brand identity, you need to seize every opportunity to let it speak its force, and express its power of persuasion.<\/p>\n<p>&nbsp;<\/p>\n<h2>What happens if I have no favicon for my website?<\/h2>\n<p>We\u2019ve already suggested, no favicon means the website looks incomplete. You&#8217;ve skipped some part of the brand identity; hence it\u2019ll partially lose its expressiveness.<\/p>\n<p>In a multitude of pages open in browser, yours will be a no-name. Actually, a no icon. This results in a lack of identity. You\u2019ll list the consequences that derive from a favicon absence.<\/p>\n<p>No favicon also equals no attention to important details, that can make a difference.<\/p>\n<p>&nbsp;<\/p>\n<h2>How to add a WordPress favicon?<\/h2>\n<p>To add a favicon to your WordPress website, you need to enter the Customizer of your theme. In the left-hand menu, choose General Settings -&gt; Site Identity.<\/p>\n<p>Besides settings for the logo, you should also have an option to insert a site icon (aka favicon).<\/p>\n<p>You\u2019ll get a preview of the site icon as it looks like in the browser tab and in the bookmarks bar.<\/p>\n<p>Click Save and all is set up.<\/p>\n<div id=\"attachment_4190\" style=\"width: 331px\" class=\"wp-caption alignnone\"><img aria-describedby=\"caption-attachment-4190\" loading=\"lazy\" class=\"wp-image-4190 size-full\" src=\"https:\/\/colibriwp.com\/blog\/wp-content\/uploads\/2019\/09\/site-icon1.png\" alt=\"Add a favicon\/site icon in a website built with ColibriWP\" width=\"321\" height=\"227\" \/><p id=\"caption-attachment-4190\" class=\"wp-caption-text\">Site icon added<\/p><\/div>\n<div id=\"attachment_4191\" style=\"width: 372px\" class=\"wp-caption alignnone\"><img aria-describedby=\"caption-attachment-4191\" loading=\"lazy\" class=\"wp-image-4191 size-full\" src=\"https:\/\/colibriwp.com\/blog\/wp-content\/uploads\/2019\/09\/site-icon2.png\" alt=\"\" width=\"362\" height=\"46\" \/><p id=\"caption-attachment-4191\" class=\"wp-caption-text\">Site icon displayed in the browser tab<\/p><\/div>\n<h2><\/h2>\n<h2>What\u2019s the necessary dimension of a favicon?<\/h2>\n<p>There\u2019s no general rule related to a favicon dimension. It depends on the theme you use, and its requirements for optimal display. Consider choosing an image of the dimensions indicated for that theme, and use it appropriately. It ensures the image is clear enough and effective in its role as a favorite icon.<\/p>\n<p>&nbsp;<\/p>\n<h2>How do I find a suitable favicon for my website?<\/h2>\n<p>For the favicon, you can use any image you find adequate for your website and brand identity. There are even some tools, known as <a href=\"https:\/\/websitesetup.org\/favicon-generator\/\">favicon generators<\/a>, that\u2019ll help you in the process of selecting the best site icon.<\/p>\n<p>&nbsp;<\/p>\n<p>So don\u2019t postpone it, favicon insertion into your website will be ready in less than 5 minutes from reading this post.<\/p>\n<p>&nbsp;<\/p>\n","protected":false},"excerpt":{"rendered":"<p>The name &#8220;favicon&#8221; comes from &#8220;favourite icon&#8221;. It\u2019s also known as a site icon. It&#8217;s a small image representative of a website and it can be found on any page contained by that website. A site icon is attached to a site (or it should be) and it adds to the website personality. Given its&hellip; <br \/> <a class=\"read-more\" href=\"https:\/\/colibriwp.com\/blog\/wordpress-favicon\/\">Read more<\/a><\/p>\n","protected":false},"author":1,"featured_media":6308,"comment_status":"open","ping_status":"open","sticky":false,"template":"","format":"standard","meta":[],"categories":[159],"tags":[51,52],"yoast_head":"<!-- This site is optimized with the Yoast SEO plugin v17.8 - https:\/\/yoast.com\/wordpress\/plugins\/seo\/ -->\n<title>Why and How to a WordPress Favicon to Your Website - ColibriWP Blog<\/title>\n<meta name=\"description\" content=\"Follow the instructions and learn how to add a favicon to your website. Read about the role of a favicon and how to find a suitable one for your site.\" \/>\n<meta name=\"robots\" content=\"index, follow, max-snippet:-1, max-image-preview:large, max-video-preview:-1\" \/>\n<link rel=\"canonical\" href=\"https:\/\/colibriwp.com\/blog\/wordpress-favicon\/\" \/>\n<meta property=\"og:locale\" content=\"en_US\" \/>\n<meta property=\"og:type\" content=\"article\" \/>\n<meta property=\"og:title\" content=\"Why and How to a WordPress Favicon to Your Website - ColibriWP Blog\" \/>\n<meta property=\"og:description\" content=\"Follow the instructions and learn how to add a favicon to your website. Read about the role of a favicon and how to find a suitable one for your site.\" \/>\n<meta property=\"og:url\" content=\"https:\/\/colibriwp.com\/blog\/wordpress-favicon\/\" \/>\n<meta property=\"og:site_name\" content=\"ColibriWP Blog\" \/>\n<meta property=\"article:published_time\" content=\"2019-09-02T13:52:53+00:00\" \/>\n<meta property=\"article:modified_time\" content=\"2020-12-11T11:34:34+00:00\" \/>\n<meta property=\"og:image\" content=\"https:\/\/colibriwp.com\/blog\/wp-content\/uploads\/2019\/09\/john-moeses-bauan-Oj-G9GYlLr0-unsplash.jpg\" \/>\n\t<meta property=\"og:image:width\" content=\"800\" \/>\n\t<meta property=\"og:image:height\" content=\"533\" \/>\n<meta name=\"twitter:card\" content=\"summary_large_image\" \/>\n<meta name=\"twitter:label1\" content=\"Written by\" \/>\n\t<meta name=\"twitter:data1\" content=\"iulian\" \/>\n\t<meta name=\"twitter:label2\" content=\"Est. 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\":\"WebSite\",\"@id\":\"https:\/\/colibriwp.com\/blog\/#website\",\"url\":\"https:\/\/colibriwp.com\/blog\/\",\"name\":\"ColibriWP Blog\",\"description\":\"WordPress know-how to boost your design skills\",\"potentialAction\":[{\"@type\":\"SearchAction\",\"target\":{\"@type\":\"EntryPoint\",\"urlTemplate\":\"https:\/\/colibriwp.com\/blog\/?s={search_term_string}\"},\"query-input\":\"required name=search_term_string\"}],\"inLanguage\":\"en-US\"},{\"@type\":\"ImageObject\",\"@id\":\"https:\/\/colibriwp.com\/blog\/wordpress-favicon\/#primaryimage\",\"inLanguage\":\"en-US\",\"url\":\"https:\/\/colibriwp.com\/blog\/wp-content\/uploads\/2019\/09\/john-moeses-bauan-Oj-G9GYlLr0-unsplash.jpg\",\"contentUrl\":\"https:\/\/colibriwp.com\/blog\/wp-content\/uploads\/2019\/09\/john-moeses-bauan-Oj-G9GYlLr0-unsplash.jpg\",\"width\":800,\"height\":533,\"caption\":\"WordPress favicon\"},{\"@type\":\"WebPage\",\"@id\":\"https:\/\/colibriwp.com\/blog\/wordpress-favicon\/#webpage\",\"url\":\"https:\/\/colibriwp.com\/blog\/wordpress-favicon\/\",\"name\":\"Why and How to a WordPress Favicon to Your Website - ColibriWP Blog\",\"isPartOf\":{\"@id\":\"https:\/\/colibriwp.com\/blog\/#website\"},\"primaryImageOfPage\":{\"@id\":\"https:\/\/colibriwp.com\/blog\/wordpress-favicon\/#primaryimage\"},\"datePublished\":\"2019-09-02T13:52:53+00:00\",\"dateModified\":\"2020-12-11T11:34:34+00:00\",\"author\":{\"@id\":\"https:\/\/colibriwp.com\/blog\/#\/schema\/person\/120982e06c8218e6f4a5d83020751c1e\"},\"description\":\"Follow the instructions and learn how to add a favicon to your website. Read about the role of a favicon and how to find a suitable one for your site.\",\"breadcrumb\":{\"@id\":\"https:\/\/colibriwp.com\/blog\/wordpress-favicon\/#breadcrumb\"},\"inLanguage\":\"en-US\",\"potentialAction\":[{\"@type\":\"ReadAction\",\"target\":[\"https:\/\/colibriwp.com\/blog\/wordpress-favicon\/\"]}]},{\"@type\":\"BreadcrumbList\",\"@id\":\"https:\/\/colibriwp.com\/blog\/wordpress-favicon\/#breadcrumb\",\"itemListElement\":[{\"@type\":\"ListItem\",\"position\":1,\"name\":\"Home\",\"item\":\"https:\/\/colibriwp.com\/blog\/\"},{\"@type\":\"ListItem\",\"position\":2,\"name\":\"Why and How to a WordPress Favicon to Your Website\"}]},{\"@type\":\"Person\",\"@id\":\"https:\/\/colibriwp.com\/blog\/#\/schema\/person\/120982e06c8218e6f4a5d83020751c1e\",\"name\":\"iulian\",\"image\":{\"@type\":\"ImageObject\",\"@id\":\"https:\/\/colibriwp.com\/blog\/#personlogo\",\"inLanguage\":\"en-US\",\"url\":\"https:\/\/secure.gravatar.com\/avatar\/a1002ce001e8e8537800f38c05d827cf?s=96&d=mm&r=g\",\"contentUrl\":\"https:\/\/secure.gravatar.com\/avatar\/a1002ce001e8e8537800f38c05d827cf?s=96&d=mm&r=g\",\"caption\":\"iulian\"},\"url\":\"https:\/\/colibriwp.com\/blog\/author\/iulian\/\"}]}<\/script>\n<!-- \/ Yoast SEO plugin. -->","yoast_head_json":{"title":"Why and How to a WordPress Favicon to Your Website - ColibriWP Blog","description":"Follow the instructions and learn how to add a favicon to your website. Read about the role of a favicon and how to find a suitable one for your site.","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:\/\/colibriwp.com\/blog\/wordpress-favicon\/","og_locale":"en_US","og_type":"article","og_title":"Why and How to a WordPress Favicon to Your Website - ColibriWP Blog","og_description":"Follow the instructions and learn how to add a favicon to your website. Read about the role of a favicon and how to find a suitable one for your site.","og_url":"https:\/\/colibriwp.com\/blog\/wordpress-favicon\/","og_site_name":"ColibriWP Blog","article_published_time":"2019-09-02T13:52:53+00:00","article_modified_time":"2020-12-11T11:34:34+00:00","og_image":[{"width":800,"height":533,"url":"https:\/\/colibriwp.com\/blog\/wp-content\/uploads\/2019\/09\/john-moeses-bauan-Oj-G9GYlLr0-unsplash.jpg","type":"image\/jpeg"}],"twitter_card":"summary_large_image","twitter_misc":{"Written by":"iulian","Est. reading time":"3 minutes"},"schema":{"@context":"https:\/\/schema.org","@graph":[{"@type":"WebSite","@id":"https:\/\/colibriwp.com\/blog\/#website","url":"https:\/\/colibriwp.com\/blog\/","name":"ColibriWP Blog","description":"WordPress know-how to boost your design skills","potentialAction":[{"@type":"SearchAction","target":{"@type":"EntryPoint","urlTemplate":"https:\/\/colibriwp.com\/blog\/?s={search_term_string}"},"query-input":"required name=search_term_string"}],"inLanguage":"en-US"},{"@type":"ImageObject","@id":"https:\/\/colibriwp.com\/blog\/wordpress-favicon\/#primaryimage","inLanguage":"en-US","url":"https:\/\/colibriwp.com\/blog\/wp-content\/uploads\/2019\/09\/john-moeses-bauan-Oj-G9GYlLr0-unsplash.jpg","contentUrl":"https:\/\/colibriwp.com\/blog\/wp-content\/uploads\/2019\/09\/john-moeses-bauan-Oj-G9GYlLr0-unsplash.jpg","width":800,"height":533,"caption":"WordPress favicon"},{"@type":"WebPage","@id":"https:\/\/colibriwp.com\/blog\/wordpress-favicon\/#webpage","url":"https:\/\/colibriwp.com\/blog\/wordpress-favicon\/","name":"Why and How to a WordPress Favicon to Your Website - ColibriWP Blog","isPartOf":{"@id":"https:\/\/colibriwp.com\/blog\/#website"},"primaryImageOfPage":{"@id":"https:\/\/colibriwp.com\/blog\/wordpress-favicon\/#primaryimage"},"datePublished":"2019-09-02T13:52:53+00:00","dateModified":"2020-12-11T11:34:34+00:00","author":{"@id":"https:\/\/colibriwp.com\/blog\/#\/schema\/person\/120982e06c8218e6f4a5d83020751c1e"},"description":"Follow the instructions and learn how to add a favicon to your website. Read about the role of a favicon and how to find a suitable one for your site.","breadcrumb":{"@id":"https:\/\/colibriwp.com\/blog\/wordpress-favicon\/#breadcrumb"},"inLanguage":"en-US","potentialAction":[{"@type":"ReadAction","target":["https:\/\/colibriwp.com\/blog\/wordpress-favicon\/"]}]},{"@type":"BreadcrumbList","@id":"https:\/\/colibriwp.com\/blog\/wordpress-favicon\/#breadcrumb","itemListElement":[{"@type":"ListItem","position":1,"name":"Home","item":"https:\/\/colibriwp.com\/blog\/"},{"@type":"ListItem","position":2,"name":"Why and How to a WordPress Favicon to Your Website"}]},{"@type":"Person","@id":"https:\/\/colibriwp.com\/blog\/#\/schema\/person\/120982e06c8218e6f4a5d83020751c1e","name":"iulian","image":{"@type":"ImageObject","@id":"https:\/\/colibriwp.com\/blog\/#personlogo","inLanguage":"en-US","url":"https:\/\/secure.gravatar.com\/avatar\/a1002ce001e8e8537800f38c05d827cf?s=96&d=mm&r=g","contentUrl":"https:\/\/secure.gravatar.com\/avatar\/a1002ce001e8e8537800f38c05d827cf?s=96&d=mm&r=g","caption":"iulian"},"url":"https:\/\/colibriwp.com\/blog\/author\/iulian\/"}]}},"_links":{"self":[{"href":"https:\/\/colibriwp.com\/blog\/wp-json\/wp\/v2\/posts\/4188"}],"collection":[{"href":"https:\/\/colibriwp.com\/blog\/wp-json\/wp\/v2\/posts"}],"about":[{"href":"https:\/\/colibriwp.com\/blog\/wp-json\/wp\/v2\/types\/post"}],"author":[{"embeddable":true,"href":"https:\/\/colibriwp.com\/blog\/wp-json\/wp\/v2\/users\/1"}],"replies":[{"embeddable":true,"href":"https:\/\/colibriwp.com\/blog\/wp-json\/wp\/v2\/comments?post=4188"}],"version-history":[{"count":0,"href":"https:\/\/colibriwp.com\/blog\/wp-json\/wp\/v2\/posts\/4188\/revisions"}],"wp:featuredmedia":[{"embeddable":true,"href":"https:\/\/colibriwp.com\/blog\/wp-json\/wp\/v2\/media\/6308"}],"wp:attachment":[{"href":"https:\/\/colibriwp.com\/blog\/wp-json\/wp\/v2\/media?parent=4188"}],"wp:term":[{"taxonomy":"category","embeddable":true,"href":"https:\/\/colibriwp.com\/blog\/wp-json\/wp\/v2\/categories?post=4188"},{"taxonomy":"post_tag","embeddable":true,"href":"https:\/\/colibriwp.com\/blog\/wp-json\/wp\/v2\/tags?post=4188"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}