{"id":46275,"date":"2021-01-18T13:17:24","date_gmt":"2021-01-18T13:17:24","guid":{"rendered":"https:\/\/elementor.com\/blog\/?p=46275"},"modified":"2021-01-18T13:17:24","modified_gmt":"2021-01-18T13:17:24","slug":"favicon-complete-guide","status":"publish","type":"post","link":"https:\/\/elementor.com\/blog\/favicon-complete-guide\/","title":{"rendered":"How to Create the Perfect Favicon"},"content":{"rendered":"\t\t<div data-elementor-type=\"wp-post\" data-elementor-id=\"46275\" class=\"elementor elementor-46275\" data-elementor-post-type=\"post\">\n\t\t\t\t\t\t<section class=\"elementor-section elementor-top-section elementor-element elementor-element-858cac0 elementor-section-boxed elementor-section-height-default elementor-section-height-default\" data-id=\"858cac0\" data-element_type=\"section\">\n\t\t\t\t\t\t<div class=\"elementor-container elementor-column-gap-default\">\n\t\t\t\t\t<div class=\"elementor-column elementor-col-100 elementor-top-column elementor-element elementor-element-8eeaf90\" data-id=\"8eeaf90\" data-element_type=\"column\">\n\t\t\t<div class=\"elementor-widget-wrap elementor-element-populated\">\n\t\t\t\t\t\t<div class=\"elementor-element elementor-element-642c9ad elementor-widget elementor-widget-text-editor\" data-id=\"642c9ad\" data-element_type=\"widget\" data-widget_type=\"text-editor.default\">\n\t\t\t\t<div class=\"elementor-widget-container\">\n\t\t\t\t\t\t\t\t\t<p>Consumers don&#8217;t just recognize brands by the products they sell, the services they provide, or the mottos they spout. <a href=\"https:\/\/elementor.com\/blog\/brand-imagery\/\" target=\"_blank\" rel=\"noopener\">Brand imagery<\/a> \u2014 like a logo, for example, helps consumers easily recognize brands visually.<\/p><p>That said, a logo acts as more than just a visual landmark in the top-left corner of a website.<\/p><p>Favicons are miniaturized logos (or pieces of logos) that establish a brand&#8217;s identity outside of its website. They enable brands to maintain a consistent visual presence in places like:<\/p><ul><li>Browser tabs<\/li><li><a class=\"wpil_keyword_link\" href=\"https:\/\/elementor.com\/blog\/url\/\"   title=\"URL\" data-wpil-keyword-link=\"linked\"  data-wpil-monitor-id=\"7063\">URL<\/a> address bars<\/li><li>Browser bookmarks<\/li><li>Internet search histories<\/li><li>RSS feeds<\/li><li>Desktop and mobile home screens<\/li><li>App icons<\/li><\/ul><p>Unlike a featured image where Google, social media, or RSS aggregators might be able to guess which image to use, there&#8217;s no guessing with a favicon. If you don&#8217;t design and upload a favicon to your website, nothing will appear except a generic placeholder.\u00a0<\/p><p><strong>And that&#8217;s a huge missed opportunity for your brand. <\/strong>Sites that don&#8217;t have favicons will be sees as unprofessional, and, subsequently, be associated with low standards and lack of authority.<\/p>\t\t\t\t\t\t\t\t<\/div>\n\t\t\t\t<\/div>\n\t\t\t\t<div class=\"elementor-element elementor-element-6fb62dd elementor-align-center elementor-widget elementor-widget-button\" data-id=\"6fb62dd\" data-element_type=\"widget\" data-gac=\"CTA_Elements\" data-gaa=\"Link\" data-gal=\"Position_Text_CTA\" data-widget_type=\"button.default\">\n\t\t\t\t<div class=\"elementor-widget-container\">\n\t\t\t\t\t\t\t\t\t<div class=\"elementor-button-wrapper\">\n\t\t\t\t\t<a class=\"elementor-button elementor-button-link elementor-size-sm\" href=\"https:\/\/elementor.com\/blog\/brand-imagery\/\" target=\"_blank\">\n\t\t\t\t\t\t<span class=\"elementor-button-content-wrapper\">\n\t\t\t\t\t\t\t\t\t<span class=\"elementor-button-text\">Learn How To Choose the Right Brand Imagery<br> for Your Business<\/span>\n\t\t\t\t\t<\/span>\n\t\t\t\t\t<\/a>\n\t\t\t\t<\/div>\n\t\t\t\t\t\t\t\t<\/div>\n\t\t\t\t<\/div>\n\t\t\t\t<div class=\"elementor-element elementor-element-0fa0c56 blog-toc elementor-widget elementor-widget-heading\" data-id=\"0fa0c56\" data-element_type=\"widget\" data-widget_type=\"heading.default\">\n\t\t\t\t<div class=\"elementor-widget-container\">\n\t\t\t\t\t<h3 class=\"elementor-heading-title elementor-size-default\">Table of Contents<\/h3>\t\t\t\t<\/div>\n\t\t\t\t<\/div>\n\t\t\t\t<div class=\"elementor-element elementor-element-c8441b9 blog-toc elementor-icon-list--layout-traditional elementor-list-item-link-full_width elementor-widget elementor-widget-icon-list\" data-id=\"c8441b9\" data-element_type=\"widget\" data-widget_type=\"icon-list.default\">\n\t\t\t\t<div class=\"elementor-widget-container\">\n\t\t\t\t\t\t\t<ul class=\"elementor-icon-list-items\">\n\t\t\t\t\t\t\t<li class=\"elementor-icon-list-item\">\n\t\t\t\t\t\t\t\t\t\t\t<a href=\"#why\">\n\n\t\t\t\t\t\t\t\t\t\t\t<span class=\"elementor-icon-list-text\">Why Does Your Website Need a Favicon?<\/span>\n\t\t\t\t\t\t\t\t\t\t\t<\/a>\n\t\t\t\t\t\t\t\t\t<\/li>\n\t\t\t\t\t\t\t\t<li class=\"elementor-icon-list-item\">\n\t\t\t\t\t\t\t\t\t\t\t<a href=\"#tips\">\n\n\t\t\t\t\t\t\t\t\t\t\t<span class=\"elementor-icon-list-text\">Tips for Designing the Perfect Favicon for Your Brand<\/span>\n\t\t\t\t\t\t\t\t\t\t\t<\/a>\n\t\t\t\t\t\t\t\t\t<\/li>\n\t\t\t\t\t\t\t\t<li class=\"elementor-icon-list-item\">\n\t\t\t\t\t\t\t\t\t\t\t<a href=\"#how-to-add-website\">\n\n\t\t\t\t\t\t\t\t\t\t\t<span class=\"elementor-icon-list-text\">How To Add a Favicon To Your Website<\/span>\n\t\t\t\t\t\t\t\t\t\t\t<\/a>\n\t\t\t\t\t\t\t\t\t<\/li>\n\t\t\t\t\t\t\t\t<li class=\"elementor-icon-list-item\">\n\t\t\t\t\t\t\t\t\t\t\t<a href=\"#how-to-add\">\n\n\t\t\t\t\t\t\t\t\t\t\t<span class=\"elementor-icon-list-text\">How To Add a Favicon in WordPress<\/span>\n\t\t\t\t\t\t\t\t\t\t\t<\/a>\n\t\t\t\t\t\t\t\t\t<\/li>\n\t\t\t\t\t\t\t\t<li class=\"elementor-icon-list-item\">\n\t\t\t\t\t\t\t\t\t\t\t<a href=\"#examples\">\n\n\t\t\t\t\t\t\t\t\t\t\t<span class=\"elementor-icon-list-text\">9 Inspiring Examples of Outstanding Favicons<\/span>\n\t\t\t\t\t\t\t\t\t\t\t<\/a>\n\t\t\t\t\t\t\t\t\t<\/li>\n\t\t\t\t\t\t<\/ul>\n\t\t\t\t\t\t<\/div>\n\t\t\t\t<\/div>\n\t\t\t\t<div class=\"elementor-element elementor-element-41a4185 elementor-widget elementor-widget-menu-anchor\" data-id=\"41a4185\" data-element_type=\"widget\" data-widget_type=\"menu-anchor.default\">\n\t\t\t\t<div class=\"elementor-widget-container\">\n\t\t\t\t\t\t\t<div class=\"elementor-menu-anchor\" id=\"why\"><\/div>\n\t\t\t\t\t\t<\/div>\n\t\t\t\t<\/div>\n\t\t\t\t<div class=\"elementor-element elementor-element-a8765d8 elementor-widget elementor-widget-heading\" data-id=\"a8765d8\" data-element_type=\"widget\" data-widget_type=\"heading.default\">\n\t\t\t\t<div class=\"elementor-widget-container\">\n\t\t\t\t\t<h2 class=\"elementor-heading-title elementor-size-default\">Why Does Your Website Need a Favicon?\n<\/h2>\t\t\t\t<\/div>\n\t\t\t\t<\/div>\n\t\t\t\t<div class=\"elementor-element elementor-element-5cc4f66 elementor-widget elementor-widget-text-editor\" data-id=\"5cc4f66\" data-element_type=\"widget\" data-widget_type=\"text-editor.default\">\n\t\t\t\t<div class=\"elementor-widget-container\">\n\t\t\t\t\t\t\t\t\t<p>Short for \u201cfavorite icon\u201d, the favicon was introduced by Internet Explorer in the late 1990s. Its purpose was to help internet users distinguish between websites and find them quickly in their browser tabs.\u00a0<\/p><p>Here\u2019s why favicons are still a valuable piece of a website and its branding:<\/p>\t\t\t\t\t\t\t\t<\/div>\n\t\t\t\t<\/div>\n\t\t\t\t<div class=\"elementor-element elementor-element-1038731 elementor-widget elementor-widget-heading\" data-id=\"1038731\" data-element_type=\"widget\" data-widget_type=\"heading.default\">\n\t\t\t\t<div class=\"elementor-widget-container\">\n\t\t\t\t\t<h3 class=\"elementor-heading-title elementor-size-default\">Reinforce Company Branding\n<\/h3>\t\t\t\t<\/div>\n\t\t\t\t<\/div>\n\t\t\t\t<div class=\"elementor-element elementor-element-01d1546 elementor-widget elementor-widget-text-editor\" data-id=\"01d1546\" data-element_type=\"widget\" data-widget_type=\"text-editor.default\">\n\t\t\t\t<div class=\"elementor-widget-container\">\n\t\t\t\t\t\t\t\t\t<p>Websites that don\u2019t favicons will display this icon in browser tabs, search histories, RSS feeds, and more:<\/p>\t\t\t\t\t\t\t\t<\/div>\n\t\t\t\t<\/div>\n\t\t\t\t<div class=\"elementor-element elementor-element-f91c009 elementor-widget elementor-widget-image\" data-id=\"f91c009\" data-element_type=\"widget\" data-widget_type=\"image.default\">\n\t\t\t\t<div class=\"elementor-widget-container\">\n\t\t\t\t\t\t\t\t\t\t\t\t\t\t\t<img fetchpriority=\"high\" decoding=\"async\" width=\"720\" height=\"97\" src=\"https:\/\/elementor.com\/cdn-cgi\/image\/f=auto,w=720,h=97\/blog\/wp-content\/uploads\/2021\/01\/1-no-favicon-example.png\" class=\"attachment-large size-large wp-image-46278\" alt=\"no-favicon-example\" srcset=\"https:\/\/elementor.com\/cdn-cgi\/image\/f=auto,w=720\/blog\/wp-content\/uploads\/2021\/01\/1-no-favicon-example.png 720w, https:\/\/elementor.com\/cdn-cgi\/image\/f=auto,w=300\/blog\/wp-content\/uploads\/2021\/01\/1-no-favicon-example-300x40.png 300w\" sizes=\"(max-width: 720px) 100vw, 720px\" \/>\t\t\t\t\t\t\t\t\t\t\t\t\t\t\t<\/div>\n\t\t\t\t<\/div>\n\t\t\t\t<div class=\"elementor-element elementor-element-8e25307 elementor-widget elementor-widget-text-editor\" data-id=\"8e25307\" data-element_type=\"widget\" data-widget_type=\"text-editor.default\">\n\t\t\t\t<div class=\"elementor-widget-container\">\n\t\t\t\t\t\t\t\t\t<p>It&#8217;s a generic globe icon. And Internet users are familiar enough with the symbol to realize it&#8217;s a placeholder. They might not know the term \u201cfavicon\u201d, but they&#8217;ll understand something&#8217;s missing if they see this.<\/p><p>Now, if you look in your browser tab above, you&#8217;ll see an example of Elementor&#8217;s favicon. It looks just like the Elementor brand logo:\u00a0<\/p>\t\t\t\t\t\t\t\t<\/div>\n\t\t\t\t<\/div>\n\t\t\t\t<div class=\"elementor-element elementor-element-6472fc8 elementor-widget elementor-widget-image\" data-id=\"6472fc8\" data-element_type=\"widget\" data-widget_type=\"image.default\">\n\t\t\t\t<div class=\"elementor-widget-container\">\n\t\t\t\t\t\t\t\t\t\t\t\t\t\t\t<img decoding=\"async\" width=\"720\" height=\"207\" src=\"https:\/\/elementor.com\/cdn-cgi\/image\/f=auto,w=720,h=207\/blog\/wp-content\/uploads\/2021\/01\/2-elementor-favicon.png\" class=\"attachment-large size-large wp-image-46279\" alt=\"elementor-favicon\" srcset=\"https:\/\/elementor.com\/cdn-cgi\/image\/f=auto,w=720\/blog\/wp-content\/uploads\/2021\/01\/2-elementor-favicon.png 720w, https:\/\/elementor.com\/cdn-cgi\/image\/f=auto,w=300\/blog\/wp-content\/uploads\/2021\/01\/2-elementor-favicon-300x86.png 300w\" sizes=\"(max-width: 720px) 100vw, 720px\" \/>\t\t\t\t\t\t\t\t\t\t\t\t\t\t\t<\/div>\n\t\t\t\t<\/div>\n\t\t\t\t<div class=\"elementor-element elementor-element-46a47d9 elementor-widget elementor-widget-text-editor\" data-id=\"46a47d9\" data-element_type=\"widget\" data-widget_type=\"text-editor.default\">\n\t\t\t\t<div class=\"elementor-widget-container\">\n\t\t\t\t\t\t\t\t\t<p>It might not seem like a big deal, but this level of attention to detail will be noticed by visitors, prospects, and customers.<\/p>\t\t\t\t\t\t\t\t<\/div>\n\t\t\t\t<\/div>\n\t\t\t\t<div class=\"elementor-element elementor-element-9ddd0e4 elementor-widget elementor-widget-heading\" data-id=\"9ddd0e4\" data-element_type=\"widget\" data-widget_type=\"heading.default\">\n\t\t\t\t<div class=\"elementor-widget-container\">\n\t\t\t\t\t<h3 class=\"elementor-heading-title elementor-size-default\">Improve Internet Navigability\n<\/h3>\t\t\t\t<\/div>\n\t\t\t\t<\/div>\n\t\t\t\t<div class=\"elementor-element elementor-element-b3957ea elementor-widget elementor-widget-text-editor\" data-id=\"b3957ea\" data-element_type=\"widget\" data-widget_type=\"text-editor.default\">\n\t\t\t\t<div class=\"elementor-widget-container\">\n\t\t\t\t\t\t\t\t\t<p>The above example shows the difference in how a standalone tab looks with or without a favicon. But it\u2019s not just about branding a tab.<\/p><p>Here\u2019s how internet users are able to quickly navigate back to a site thanks to having the visual cue of a favicon:<\/p>\t\t\t\t\t\t\t\t<\/div>\n\t\t\t\t<\/div>\n\t\t\t\t<div class=\"elementor-element elementor-element-ef8a8e3 elementor-widget elementor-widget-image\" data-id=\"ef8a8e3\" data-element_type=\"widget\" data-widget_type=\"image.default\">\n\t\t\t\t<div class=\"elementor-widget-container\">\n\t\t\t\t\t\t\t\t\t\t\t\t<figure class=\"wp-caption\">\n\t\t\t\t\t\t\t\t\t\t\t<a href=\"https:\/\/www.calm.com\/\" target=\"_blank\">\n\t\t\t\t\t\t\t<img decoding=\"async\" width=\"720\" height=\"450\" src=\"https:\/\/elementor.com\/cdn-cgi\/image\/f=auto,w=720,h=450\/blog\/wp-content\/uploads\/2021\/01\/3-open-browsers-with-favicons-showing.png\" class=\"attachment-large size-large wp-image-46280\" alt=\"open-browsers-with-favicons-showing\" srcset=\"https:\/\/elementor.com\/cdn-cgi\/image\/f=auto,w=720\/blog\/wp-content\/uploads\/2021\/01\/3-open-browsers-with-favicons-showing.png 720w, https:\/\/elementor.com\/cdn-cgi\/image\/f=auto,w=300\/blog\/wp-content\/uploads\/2021\/01\/3-open-browsers-with-favicons-showing-300x188.png 300w\" sizes=\"(max-width: 720px) 100vw, 720px\" \/>\t\t\t\t\t\t\t\t<\/a>\n\t\t\t\t\t\t\t\t\t\t\t<figcaption class=\"widget-image-caption wp-caption-text\">Source: Calm<\/figcaption>\n\t\t\t\t\t\t\t\t\t\t<\/figure>\n\t\t\t\t\t\t\t\t\t<\/div>\n\t\t\t\t<\/div>\n\t\t\t\t<div class=\"elementor-element elementor-element-d8d41ca elementor-widget elementor-widget-text-editor\" data-id=\"d8d41ca\" data-element_type=\"widget\" data-widget_type=\"text-editor.default\">\n\t\t\t\t<div class=\"elementor-widget-container\">\n\t\t\t\t\t\t\t\t\t<p>Let\u2019s say this user opened their Calm dashboard in order to play some calming music while working. Their next step is an easy one to take because each of the open tabs \u2014 for Elementor, Facebook, Gmail, and WordPress \u2014 has a unique and easily recognizable favicon attached to it.<\/p><p>The favicon spares users from having to read through the meta titles in the browser tabs. Like other icons and <a href=\"https:\/\/elementor.com\/blog\/how-to-design-logo\/\">logos<\/a> we use on websites, the favicon visually tells users which website is which.<\/p>\t\t\t\t\t\t\t\t<\/div>\n\t\t\t\t<\/div>\n\t\t\t\t<div class=\"elementor-element elementor-element-f2b3495 elementor-widget elementor-widget-heading\" data-id=\"f2b3495\" data-element_type=\"widget\" data-widget_type=\"heading.default\">\n\t\t\t\t<div class=\"elementor-widget-container\">\n\t\t\t\t\t<h3 class=\"elementor-heading-title elementor-size-default\">Increase Brand Recognition\n<\/h3>\t\t\t\t<\/div>\n\t\t\t\t<\/div>\n\t\t\t\t<div class=\"elementor-element elementor-element-7a04da0 elementor-widget elementor-widget-text-editor\" data-id=\"7a04da0\" data-element_type=\"widget\" data-widget_type=\"text-editor.default\">\n\t\t\t\t<div class=\"elementor-widget-container\">\n\t\t\t\t\t\t\t\t\t<p>If you design a favicon to appear as a stand-in for your website everywhere, you\u2019ll strengthen brand recognition with your audience.\u00a0<\/p><p>For example, Entrepreneur\u2019s favicon is the capital \u201cE\u201d from its name:<\/p>\t\t\t\t\t\t\t\t<\/div>\n\t\t\t\t<\/div>\n\t\t\t\t<div class=\"elementor-element elementor-element-131b33c elementor-widget elementor-widget-image\" data-id=\"131b33c\" data-element_type=\"widget\" data-widget_type=\"image.default\">\n\t\t\t\t<div class=\"elementor-widget-container\">\n\t\t\t\t\t\t\t\t\t\t\t\t<figure class=\"wp-caption\">\n\t\t\t\t\t\t\t\t\t\t\t<a href=\"https:\/\/www.entrepreneur.com\/\" target=\"_blank\">\n\t\t\t\t\t\t\t<img loading=\"lazy\" decoding=\"async\" width=\"720\" height=\"198\" src=\"https:\/\/elementor.com\/cdn-cgi\/image\/f=auto,w=720,h=198\/blog\/wp-content\/uploads\/2021\/01\/4-entrepreneur-favicon-browser.png\" class=\"attachment-large size-large wp-image-46281\" alt=\"entrepreneur-favicon-browser\" srcset=\"https:\/\/elementor.com\/cdn-cgi\/image\/f=auto,w=720\/blog\/wp-content\/uploads\/2021\/01\/4-entrepreneur-favicon-browser.png 720w, https:\/\/elementor.com\/cdn-cgi\/image\/f=auto,w=300\/blog\/wp-content\/uploads\/2021\/01\/4-entrepreneur-favicon-browser-300x83.png 300w\" sizes=\"(max-width: 720px) 100vw, 720px\" \/>\t\t\t\t\t\t\t\t<\/a>\n\t\t\t\t\t\t\t\t\t\t\t<figcaption class=\"widget-image-caption wp-caption-text\">Source: Entrepreneur<\/figcaption>\n\t\t\t\t\t\t\t\t\t\t<\/figure>\n\t\t\t\t\t\t\t\t\t<\/div>\n\t\t\t\t<\/div>\n\t\t\t\t<div class=\"elementor-element elementor-element-718df05 elementor-widget elementor-widget-text-editor\" data-id=\"718df05\" data-element_type=\"widget\" data-widget_type=\"text-editor.default\">\n\t\t\t\t<div class=\"elementor-widget-container\">\n\t\t\t\t\t\t\t\t\t<p>The favicon has a solid fill background (as opposed to a transparent one), so the white \u201cE\u201d on top of the black background is strikingly unique and attractive.\u00a0<\/p><p>People familiar with the Entrepreneur brand will instantly recognize this favicon anywhere they encounter it. For instance, this is how it appears amongst a list of business resources in Feedly:<\/p>\t\t\t\t\t\t\t\t<\/div>\n\t\t\t\t<\/div>\n\t\t\t\t<div class=\"elementor-element elementor-element-26b5e5d elementor-widget elementor-widget-image\" data-id=\"26b5e5d\" data-element_type=\"widget\" data-widget_type=\"image.default\">\n\t\t\t\t<div class=\"elementor-widget-container\">\n\t\t\t\t\t\t\t\t\t\t\t\t<figure class=\"wp-caption\">\n\t\t\t\t\t\t\t\t\t\t\t<a href=\"https:\/\/feedly.com\/\" target=\"_blank\">\n\t\t\t\t\t\t\t<img loading=\"lazy\" decoding=\"async\" width=\"720\" height=\"399\" src=\"https:\/\/elementor.com\/cdn-cgi\/image\/f=auto,w=720,h=399\/blog\/wp-content\/uploads\/2021\/01\/5-entrepreneur-favicon-feedly.png\" class=\"attachment-large size-large wp-image-46282\" alt=\"entrepreneur-favicon-feedly\" srcset=\"https:\/\/elementor.com\/cdn-cgi\/image\/f=auto,w=720\/blog\/wp-content\/uploads\/2021\/01\/5-entrepreneur-favicon-feedly.png 720w, https:\/\/elementor.com\/cdn-cgi\/image\/f=auto,w=300\/blog\/wp-content\/uploads\/2021\/01\/5-entrepreneur-favicon-feedly-300x166.png 300w\" sizes=\"(max-width: 720px) 100vw, 720px\" \/>\t\t\t\t\t\t\t\t<\/a>\n\t\t\t\t\t\t\t\t\t\t\t<figcaption class=\"widget-image-caption wp-caption-text\">Source: Feedly<\/figcaption>\n\t\t\t\t\t\t\t\t\t\t<\/figure>\n\t\t\t\t\t\t\t\t\t<\/div>\n\t\t\t\t<\/div>\n\t\t\t\t<div class=\"elementor-element elementor-element-82b353e elementor-widget elementor-widget-text-editor\" data-id=\"82b353e\" data-element_type=\"widget\" data-widget_type=\"text-editor.default\">\n\t\t\t\t<div class=\"elementor-widget-container\">\n\t\t\t\t\t\t\t\t\t<p>Users will also be able to quickly find it amongst their browser bookmarks, like this example in Chrome:<\/p>\t\t\t\t\t\t\t\t<\/div>\n\t\t\t\t<\/div>\n\t\t\t\t<div class=\"elementor-element elementor-element-63a3e0f elementor-widget elementor-widget-image\" data-id=\"63a3e0f\" data-element_type=\"widget\" data-widget_type=\"image.default\">\n\t\t\t\t<div class=\"elementor-widget-container\">\n\t\t\t\t\t\t\t\t\t\t\t\t\t\t\t<img loading=\"lazy\" decoding=\"async\" width=\"720\" height=\"163\" src=\"https:\/\/elementor.com\/cdn-cgi\/image\/f=auto,w=720,h=163\/blog\/wp-content\/uploads\/2021\/01\/6-entrepreneur-chrome-bookmarks.png\" class=\"attachment-large size-large wp-image-46283\" alt=\"entrepreneur-chrome-bookmarks\" srcset=\"https:\/\/elementor.com\/cdn-cgi\/image\/f=auto,w=720\/blog\/wp-content\/uploads\/2021\/01\/6-entrepreneur-chrome-bookmarks.png 720w, https:\/\/elementor.com\/cdn-cgi\/image\/f=auto,w=300\/blog\/wp-content\/uploads\/2021\/01\/6-entrepreneur-chrome-bookmarks-300x68.png 300w\" sizes=\"(max-width: 720px) 100vw, 720px\" \/>\t\t\t\t\t\t\t\t\t\t\t\t\t\t\t<\/div>\n\t\t\t\t<\/div>\n\t\t\t\t<div class=\"elementor-element elementor-element-e5172c0 elementor-widget elementor-widget-text-editor\" data-id=\"e5172c0\" data-element_type=\"widget\" data-widget_type=\"text-editor.default\">\n\t\t\t\t<div class=\"elementor-widget-container\">\n\t\t\t\t\t\t\t\t\t<p>They\u2019ll also find the same icon in their internet history:\u00a0<\/p>\t\t\t\t\t\t\t\t<\/div>\n\t\t\t\t<\/div>\n\t\t\t\t<div class=\"elementor-element elementor-element-7c4d79e elementor-widget elementor-widget-image\" data-id=\"7c4d79e\" data-element_type=\"widget\" data-widget_type=\"image.default\">\n\t\t\t\t<div class=\"elementor-widget-container\">\n\t\t\t\t\t\t\t\t\t\t\t\t\t\t\t<img loading=\"lazy\" decoding=\"async\" width=\"720\" height=\"309\" src=\"https:\/\/elementor.com\/cdn-cgi\/image\/f=auto,w=720,h=309\/blog\/wp-content\/uploads\/2021\/01\/7-entrepreneur-desktop-bookmarks.png\" class=\"attachment-large size-large wp-image-46284\" alt=\"entrepreneur-desktop-bookmarks\" srcset=\"https:\/\/elementor.com\/cdn-cgi\/image\/f=auto,w=720\/blog\/wp-content\/uploads\/2021\/01\/7-entrepreneur-desktop-bookmarks.png 720w, https:\/\/elementor.com\/cdn-cgi\/image\/f=auto,w=300\/blog\/wp-content\/uploads\/2021\/01\/7-entrepreneur-desktop-bookmarks-300x129.png 300w\" sizes=\"(max-width: 720px) 100vw, 720px\" \/>\t\t\t\t\t\t\t\t\t\t\t\t\t\t\t<\/div>\n\t\t\t\t<\/div>\n\t\t\t\t<div class=\"elementor-element elementor-element-78b121c elementor-widget elementor-widget-text-editor\" data-id=\"78b121c\" data-element_type=\"widget\" data-widget_type=\"text-editor.default\">\n\t\t\t\t<div class=\"elementor-widget-container\">\n\t\t\t\t\t\t\t\t\t<p>And it doesn\u2019t stop on the desktop. The favicon is just as recognizable in a mobile bookmarks list:<\/p>\t\t\t\t\t\t\t\t<\/div>\n\t\t\t\t<\/div>\n\t\t\t\t<div class=\"elementor-element elementor-element-c3d79fe elementor-widget elementor-widget-image\" data-id=\"c3d79fe\" data-element_type=\"widget\" data-widget_type=\"image.default\">\n\t\t\t\t<div class=\"elementor-widget-container\">\n\t\t\t\t\t\t\t\t\t\t\t\t\t\t\t<img loading=\"lazy\" decoding=\"async\" width=\"542\" height=\"1024\" src=\"https:\/\/elementor.com\/cdn-cgi\/image\/f=auto,w=542,h=1024\/blog\/wp-content\/uploads\/2021\/01\/9-entrepreneur-mobile-bookmarks-542x1024.png\" class=\"attachment-large size-large wp-image-46286\" alt=\"entrepreneur-mobile-bookmarks\" srcset=\"https:\/\/elementor.com\/cdn-cgi\/image\/f=auto,w=542\/blog\/wp-content\/uploads\/2021\/01\/9-entrepreneur-mobile-bookmarks-542x1024.png 542w, https:\/\/elementor.com\/cdn-cgi\/image\/f=auto,w=159\/blog\/wp-content\/uploads\/2021\/01\/9-entrepreneur-mobile-bookmarks-159x300.png 159w, https:\/\/elementor.com\/cdn-cgi\/image\/f=auto,w=720\/blog\/wp-content\/uploads\/2021\/01\/9-entrepreneur-mobile-bookmarks.png 720w\" sizes=\"(max-width: 542px) 100vw, 542px\" \/>\t\t\t\t\t\t\t\t\t\t\t\t\t\t\t<\/div>\n\t\t\t\t<\/div>\n\t\t\t\t<div class=\"elementor-element elementor-element-c528d1a elementor-widget elementor-widget-text-editor\" data-id=\"c528d1a\" data-element_type=\"widget\" data-widget_type=\"text-editor.default\">\n\t\t\t\t<div class=\"elementor-widget-container\">\n\t\t\t\t\t\t\t\t\t<p><span style=\"font-weight: 400\">It also appears in mobile browser tabs, too:\u00a0<\/span><\/p>\t\t\t\t\t\t\t\t<\/div>\n\t\t\t\t<\/div>\n\t\t\t\t<div class=\"elementor-element elementor-element-cf66bf2 elementor-widget elementor-widget-image\" data-id=\"cf66bf2\" data-element_type=\"widget\" data-widget_type=\"image.default\">\n\t\t\t\t<div class=\"elementor-widget-container\">\n\t\t\t\t\t\t\t\t\t\t\t\t\t\t\t<img loading=\"lazy\" decoding=\"async\" width=\"542\" height=\"1024\" src=\"https:\/\/elementor.com\/cdn-cgi\/image\/f=auto,w=542,h=1024\/blog\/wp-content\/uploads\/2021\/01\/8-entrepreneur-mobile-tabs-with-favicon-542x1024.png\" class=\"attachment-large size-large wp-image-46285\" alt=\"entrepreneur-mobile-tabs-with-favicon\" srcset=\"https:\/\/elementor.com\/cdn-cgi\/image\/f=auto,w=542\/blog\/wp-content\/uploads\/2021\/01\/8-entrepreneur-mobile-tabs-with-favicon-542x1024.png 542w, https:\/\/elementor.com\/cdn-cgi\/image\/f=auto,w=159\/blog\/wp-content\/uploads\/2021\/01\/8-entrepreneur-mobile-tabs-with-favicon-159x300.png 159w, https:\/\/elementor.com\/cdn-cgi\/image\/f=auto,w=720\/blog\/wp-content\/uploads\/2021\/01\/8-entrepreneur-mobile-tabs-with-favicon.png 720w\" sizes=\"(max-width: 542px) 100vw, 542px\" \/>\t\t\t\t\t\t\t\t\t\t\t\t\t\t\t<\/div>\n\t\t\t\t<\/div>\n\t\t\t\t<div class=\"elementor-element elementor-element-2c18977 elementor-widget elementor-widget-text-editor\" data-id=\"2c18977\" data-element_type=\"widget\" data-widget_type=\"text-editor.default\">\n\t\t\t\t<div class=\"elementor-widget-container\">\n\t\t\t\t\t\t\t\t\t<p>Even if a user has only just been introduced to your brand, it won\u2019t be long before they\u2019re able to recognize your trademark favicon (and logo) on the web.\u00a0<\/p><p>In addition, since May 2019, <a href=\"https:\/\/developers.google.com\/search\/docs\/advanced\/appearance\/favicon-in-search\" target=\"_blank\" rel=\"noopener\">Google displays a favicon<\/a> in the mobile search results page (SERP). By implementing a Favicon on your website, your mobile search results will be more visible on the page, which can result in a higher click-through-rate.<\/p>\t\t\t\t\t\t\t\t<\/div>\n\t\t\t\t<\/div>\n\t\t\t\t<div class=\"elementor-element elementor-element-4c984db elementor-widget elementor-widget-menu-anchor\" data-id=\"4c984db\" data-element_type=\"widget\" data-widget_type=\"menu-anchor.default\">\n\t\t\t\t<div class=\"elementor-widget-container\">\n\t\t\t\t\t\t\t<div class=\"elementor-menu-anchor\" id=\"tips\"><\/div>\n\t\t\t\t\t\t<\/div>\n\t\t\t\t<\/div>\n\t\t\t\t<div class=\"elementor-element elementor-element-20267f5 elementor-widget elementor-widget-heading\" data-id=\"20267f5\" data-element_type=\"widget\" data-widget_type=\"heading.default\">\n\t\t\t\t<div class=\"elementor-widget-container\">\n\t\t\t\t\t<h2 class=\"elementor-heading-title elementor-size-default\">Tips for Designing the Perfect Favicon for Your Brand\n<\/h2>\t\t\t\t<\/div>\n\t\t\t\t<\/div>\n\t\t\t\t<div class=\"elementor-element elementor-element-7140329 elementor-widget elementor-widget-text-editor\" data-id=\"7140329\" data-element_type=\"widget\" data-widget_type=\"text-editor.default\">\n\t\t\t\t<div class=\"elementor-widget-container\">\n\t\t\t\t\t\t\t\t\t<p>While you might think it safe to assume that a resized version of your logo would work just fine for your favicon, there\u2019s more to the process than that.\u00a0<\/p><p>Here are some things to think about when you make a favicon for your brand:\u00a0<\/p>\t\t\t\t\t\t\t\t<\/div>\n\t\t\t\t<\/div>\n\t\t\t\t<div class=\"elementor-element elementor-element-ba9f85a elementor-widget elementor-widget-heading\" data-id=\"ba9f85a\" data-element_type=\"widget\" data-widget_type=\"heading.default\">\n\t\t\t\t<div class=\"elementor-widget-container\">\n\t\t\t\t\t<h3 class=\"elementor-heading-title elementor-size-default\">1. Choose a recognizable element from your branding\n<\/h3>\t\t\t\t<\/div>\n\t\t\t\t<\/div>\n\t\t\t\t<div class=\"elementor-element elementor-element-ccec506 elementor-widget elementor-widget-text-editor\" data-id=\"ccec506\" data-element_type=\"widget\" data-widget_type=\"text-editor.default\">\n\t\t\t\t<div class=\"elementor-widget-container\">\n\t\t\t\t\t\t\t\t\t<p>For some brands, you\u2019ll be able to use the logo design as is. Elementor is one example of this.<\/p><p>For brands that have a bigger logo (usually the ones that include the company name), you\u2019ll have to pare it down or you\u2019ll have to design something custom for the favicon.\u00a0<\/p><p>Rover, for example, uses a paw print icon alongside the company name in its logo. Its favicon, however, is just the green paw print:<\/p>\t\t\t\t\t\t\t\t<\/div>\n\t\t\t\t<\/div>\n\t\t\t\t<div class=\"elementor-element elementor-element-8da7daa elementor-widget elementor-widget-image\" data-id=\"8da7daa\" data-element_type=\"widget\" data-widget_type=\"image.default\">\n\t\t\t\t<div class=\"elementor-widget-container\">\n\t\t\t\t\t\t\t\t\t\t\t\t<figure class=\"wp-caption\">\n\t\t\t\t\t\t\t\t\t\t\t<a href=\"https:\/\/www.rover.com\/\" target=\"_blank\">\n\t\t\t\t\t\t\t<img loading=\"lazy\" decoding=\"async\" width=\"720\" height=\"206\" src=\"https:\/\/elementor.com\/cdn-cgi\/image\/f=auto,w=720,h=206\/blog\/wp-content\/uploads\/2021\/01\/10-rover-logo-and-favicon.png\" class=\"attachment-large size-large wp-image-46287\" alt=\"rover-logo-and-favicon\" srcset=\"https:\/\/elementor.com\/cdn-cgi\/image\/f=auto,w=720\/blog\/wp-content\/uploads\/2021\/01\/10-rover-logo-and-favicon.png 720w, https:\/\/elementor.com\/cdn-cgi\/image\/f=auto,w=300\/blog\/wp-content\/uploads\/2021\/01\/10-rover-logo-and-favicon-300x86.png 300w\" sizes=\"(max-width: 720px) 100vw, 720px\" \/>\t\t\t\t\t\t\t\t<\/a>\n\t\t\t\t\t\t\t\t\t\t\t<figcaption class=\"widget-image-caption wp-caption-text\">Source: Rover<\/figcaption>\n\t\t\t\t\t\t\t\t\t\t<\/figure>\n\t\t\t\t\t\t\t\t\t<\/div>\n\t\t\t\t<\/div>\n\t\t\t\t<div class=\"elementor-element elementor-element-22823ca elementor-widget elementor-widget-text-editor\" data-id=\"22823ca\" data-element_type=\"widget\" data-widget_type=\"text-editor.default\">\n\t\t\t\t<div class=\"elementor-widget-container\">\n\t\t\t\t\t\t\t\t\t<p>The name \u201cRover\u201d doesn\u2019t need to be squeezed into the favicon because the paw print design on its own is memorable enough.\u00a0<\/p><p>BarkBox, on the other hand, doesn\u2019t have an icon in its logo. So, its favicon has been designed using the \u201cB\u201d and the barking symbols that appear in the middle of the name:\u00a0<\/p>\t\t\t\t\t\t\t\t<\/div>\n\t\t\t\t<\/div>\n\t\t\t\t<div class=\"elementor-element elementor-element-c448348 elementor-widget elementor-widget-image\" data-id=\"c448348\" data-element_type=\"widget\" data-widget_type=\"image.default\">\n\t\t\t\t<div class=\"elementor-widget-container\">\n\t\t\t\t\t\t\t\t\t\t\t\t<figure class=\"wp-caption\">\n\t\t\t\t\t\t\t\t\t\t\t<a href=\"https:\/\/www.barkbox.com\/\" target=\"_blank\">\n\t\t\t\t\t\t\t<img loading=\"lazy\" decoding=\"async\" width=\"720\" height=\"195\" src=\"https:\/\/elementor.com\/cdn-cgi\/image\/f=auto,w=720,h=195\/blog\/wp-content\/uploads\/2021\/01\/11-barkbox-logo-and-favicon.png\" class=\"attachment-large size-large wp-image-46288\" alt=\"barkbox-logo-and-favicon\" srcset=\"https:\/\/elementor.com\/cdn-cgi\/image\/f=auto,w=720\/blog\/wp-content\/uploads\/2021\/01\/11-barkbox-logo-and-favicon.png 720w, https:\/\/elementor.com\/cdn-cgi\/image\/f=auto,w=300\/blog\/wp-content\/uploads\/2021\/01\/11-barkbox-logo-and-favicon-300x81.png 300w\" sizes=\"(max-width: 720px) 100vw, 720px\" \/>\t\t\t\t\t\t\t\t<\/a>\n\t\t\t\t\t\t\t\t\t\t\t<figcaption class=\"widget-image-caption wp-caption-text\">Source: BarkBox<\/figcaption>\n\t\t\t\t\t\t\t\t\t\t<\/figure>\n\t\t\t\t\t\t\t\t\t<\/div>\n\t\t\t\t<\/div>\n\t\t\t\t<div class=\"elementor-element elementor-element-87db70d elementor-widget elementor-widget-text-editor\" data-id=\"87db70d\" data-element_type=\"widget\" data-widget_type=\"text-editor.default\">\n\t\t\t\t<div class=\"elementor-widget-container\">\n\t\t\t\t\t\t\t\t\t<p>Also, notice that the colors have been inverted. The favicon is white while the surrounding square is BarkBox\u2019s brand blue. This makes it stand out from transparent background logos like Rover\u2019s.\u00a0<\/p>\t\t\t\t\t\t\t\t<\/div>\n\t\t\t\t<\/div>\n\t\t\t\t<div class=\"elementor-element elementor-element-458def3 elementor-widget elementor-widget-heading\" data-id=\"458def3\" data-element_type=\"widget\" data-widget_type=\"heading.default\">\n\t\t\t\t<div class=\"elementor-widget-container\">\n\t\t\t\t\t<h3 class=\"elementor-heading-title elementor-size-default\">2. Use consistent but simplified branding\n<\/h3>\t\t\t\t<\/div>\n\t\t\t\t<\/div>\n\t\t\t\t<div class=\"elementor-element elementor-element-90d94aa elementor-widget elementor-widget-text-editor\" data-id=\"90d94aa\" data-element_type=\"widget\" data-widget_type=\"text-editor.default\">\n\t\t\t\t<div class=\"elementor-widget-container\">\n\t\t\t\t\t\t\t\t\t<p>Obviously, you want your favicon to be recognized by those who are familiar with your brand. So, using <a href=\"https:\/\/elementor.com\/blog\/web-fonts\/\" target=\"_blank\" rel=\"noopener\">fonts<\/a>, icons, and <a href=\"https:\/\/elementor.com\/blog\/color-theory-web-design\/\" target=\"_blank\" rel=\"noopener\">colors <\/a>from your brand identity is important.\u00a0<\/p><p>That said, you don\u2019t want to go overboard. Your favicon fits into a very tiny space, so you have to be careful with how much you put into the design.\u00a0<\/p><p>Take Google\u2019s 2020 logo and favicon redesign. Here\u2019s what the logos for Gmail, Drive, Maps, Calendar, and Meet look like:<\/p>\t\t\t\t\t\t\t\t<\/div>\n\t\t\t\t<\/div>\n\t\t\t\t<div class=\"elementor-element elementor-element-7052601 elementor-widget elementor-widget-image\" data-id=\"7052601\" data-element_type=\"widget\" data-widget_type=\"image.default\">\n\t\t\t\t<div class=\"elementor-widget-container\">\n\t\t\t\t\t\t\t\t\t\t\t\t<figure class=\"wp-caption\">\n\t\t\t\t\t\t\t\t\t\t\t<a href=\"https:\/\/www.google.com\/\" target=\"_blank\">\n\t\t\t\t\t\t\t<img loading=\"lazy\" decoding=\"async\" width=\"720\" height=\"52\" src=\"https:\/\/elementor.com\/cdn-cgi\/image\/f=auto,w=720,h=52\/blog\/wp-content\/uploads\/2021\/01\/12-google-products-favicons.png\" class=\"attachment-large size-large wp-image-46289\" alt=\"google-products-favicons\" srcset=\"https:\/\/elementor.com\/cdn-cgi\/image\/f=auto,w=720\/blog\/wp-content\/uploads\/2021\/01\/12-google-products-favicons.png 720w, https:\/\/elementor.com\/cdn-cgi\/image\/f=auto,w=300\/blog\/wp-content\/uploads\/2021\/01\/12-google-products-favicons-300x22.png 300w\" sizes=\"(max-width: 720px) 100vw, 720px\" \/>\t\t\t\t\t\t\t\t<\/a>\n\t\t\t\t\t\t\t\t\t\t\t<figcaption class=\"widget-image-caption wp-caption-text\">Source: Google<\/figcaption>\n\t\t\t\t\t\t\t\t\t\t<\/figure>\n\t\t\t\t\t\t\t\t\t<\/div>\n\t\t\t\t<\/div>\n\t\t\t\t<div class=\"elementor-element elementor-element-3fd558d elementor-widget elementor-widget-text-editor\" data-id=\"3fd558d\" data-element_type=\"widget\" data-widget_type=\"text-editor.default\">\n\t\t\t\t<div class=\"elementor-widget-container\">\n\t\t\t\t\t\t\t\t\t<p>They all use the same color palette and similar geometric compositions.\u00a0<\/p><p>Sure, they\u2019re part of the same family of products, but they\u2019re very difficult to distinguish from one another now. Previously, each of the logos had one unique solid color and shape.\u00a0<\/p><p>This infusion of color and ambiguity in shape is not user-friendly at all. Make sure you prioritize the practical usability of the favicon over aesthetic-only considerations like this.<\/p>\t\t\t\t\t\t\t\t<\/div>\n\t\t\t\t<\/div>\n\t\t\t\t<div class=\"elementor-element elementor-element-136ce04 elementor-widget elementor-widget-heading\" data-id=\"136ce04\" data-element_type=\"widget\" data-widget_type=\"heading.default\">\n\t\t\t\t<div class=\"elementor-widget-container\">\n\t\t\t\t\t<h3 class=\"elementor-heading-title elementor-size-default\">3. Know when to use a transparent background or solid fill\n<\/h3>\t\t\t\t<\/div>\n\t\t\t\t<\/div>\n\t\t\t\t<div class=\"elementor-element elementor-element-3f54eb3 elementor-widget elementor-widget-text-editor\" data-id=\"3f54eb3\" data-element_type=\"widget\" data-widget_type=\"text-editor.default\">\n\t\t\t\t<div class=\"elementor-widget-container\">\n\t\t\t\t\t\t\t\t\t<p>You\u2019re going to see two types of favicon styles:\u00a0<\/p><p><strong>Transparent favicons<\/strong> are typically for icon-based designs like Asana\u2019s:<\/p>\t\t\t\t\t\t\t\t<\/div>\n\t\t\t\t<\/div>\n\t\t\t\t<div class=\"elementor-element elementor-element-0d4597c elementor-widget elementor-widget-image\" data-id=\"0d4597c\" data-element_type=\"widget\" data-widget_type=\"image.default\">\n\t\t\t\t<div class=\"elementor-widget-container\">\n\t\t\t\t\t\t\t\t\t\t\t\t<figure class=\"wp-caption\">\n\t\t\t\t\t\t\t\t\t\t\t<a href=\"https:\/\/asana.com\/\" target=\"_blank\">\n\t\t\t\t\t\t\t<img loading=\"lazy\" decoding=\"async\" width=\"720\" height=\"182\" src=\"https:\/\/elementor.com\/cdn-cgi\/image\/f=auto,w=720,h=182\/blog\/wp-content\/uploads\/2021\/01\/13-asana-favicon-design.png\" class=\"attachment-large size-large wp-image-46290\" alt=\"asana-favicon-design\" srcset=\"https:\/\/elementor.com\/cdn-cgi\/image\/f=auto,w=720\/blog\/wp-content\/uploads\/2021\/01\/13-asana-favicon-design.png 720w, https:\/\/elementor.com\/cdn-cgi\/image\/f=auto,w=300\/blog\/wp-content\/uploads\/2021\/01\/13-asana-favicon-design-300x76.png 300w\" sizes=\"(max-width: 720px) 100vw, 720px\" \/>\t\t\t\t\t\t\t\t<\/a>\n\t\t\t\t\t\t\t\t\t\t\t<figcaption class=\"widget-image-caption wp-caption-text\">Source: asana<\/figcaption>\n\t\t\t\t\t\t\t\t\t\t<\/figure>\n\t\t\t\t\t\t\t\t\t<\/div>\n\t\t\t\t<\/div>\n\t\t\t\t<div class=\"elementor-element elementor-element-73017ec elementor-widget elementor-widget-text-editor\" data-id=\"73017ec\" data-element_type=\"widget\" data-widget_type=\"text-editor.default\">\n\t\t\t\t<div class=\"elementor-widget-container\">\n\t\t\t\t\t\t\t\t\t<p>One of the benefits of this is that the icon clearly stands out against whatever color its background is.\u00a0<\/p><p>The example above is in Chrome. This example is from Safari:<\/p>\t\t\t\t\t\t\t\t<\/div>\n\t\t\t\t<\/div>\n\t\t\t\t<div class=\"elementor-element elementor-element-7295ac4 elementor-widget elementor-widget-image\" data-id=\"7295ac4\" data-element_type=\"widget\" data-widget_type=\"image.default\">\n\t\t\t\t<div class=\"elementor-widget-container\">\n\t\t\t\t\t\t\t\t\t\t\t\t\t\t\t<img loading=\"lazy\" decoding=\"async\" width=\"720\" height=\"48\" src=\"https:\/\/elementor.com\/cdn-cgi\/image\/f=auto,w=720,h=48\/blog\/wp-content\/uploads\/2021\/01\/14-safari-tabs-with-favicons.png\" class=\"attachment-large size-large wp-image-46291\" alt=\"safari-tabs-with-favicons\" srcset=\"https:\/\/elementor.com\/cdn-cgi\/image\/f=auto,w=720\/blog\/wp-content\/uploads\/2021\/01\/14-safari-tabs-with-favicons.png 720w, https:\/\/elementor.com\/cdn-cgi\/image\/f=auto,w=300\/blog\/wp-content\/uploads\/2021\/01\/14-safari-tabs-with-favicons-300x20.png 300w\" sizes=\"(max-width: 720px) 100vw, 720px\" \/>\t\t\t\t\t\t\t\t\t\t\t\t\t\t\t<\/div>\n\t\t\t\t<\/div>\n\t\t\t\t<div class=\"elementor-element elementor-element-3853412 elementor-widget elementor-widget-text-editor\" data-id=\"3853412\" data-element_type=\"widget\" data-widget_type=\"text-editor.default\">\n\t\t\t\t<div class=\"elementor-widget-container\">\n\t\t\t\t\t\t\t\t\t<p>If you had forgotten to save your favicon with a transparent background, there\u2019d be an unsightly white box around it in this browser tab.\u00a0<\/p><p><strong>Solid fill favicons<\/strong> are best for letter-based favicons like Stripe\u2019s:<\/p>\t\t\t\t\t\t\t\t<\/div>\n\t\t\t\t<\/div>\n\t\t\t\t<div class=\"elementor-element elementor-element-9a3fef2 elementor-widget elementor-widget-image\" data-id=\"9a3fef2\" data-element_type=\"widget\" data-widget_type=\"image.default\">\n\t\t\t\t<div class=\"elementor-widget-container\">\n\t\t\t\t\t\t\t\t\t\t\t\t<figure class=\"wp-caption\">\n\t\t\t\t\t\t\t\t\t\t\t<a href=\"http:\/\/www.stripe.com\" target=\"_blank\">\n\t\t\t\t\t\t\t<img loading=\"lazy\" decoding=\"async\" width=\"720\" height=\"172\" src=\"https:\/\/elementor.com\/cdn-cgi\/image\/f=auto,w=720,h=172\/blog\/wp-content\/uploads\/2021\/01\/15-stripe-favicon-design.png\" class=\"attachment-large size-large wp-image-46292\" alt=\"stripe-favicon-design\" srcset=\"https:\/\/elementor.com\/cdn-cgi\/image\/f=auto,w=720\/blog\/wp-content\/uploads\/2021\/01\/15-stripe-favicon-design.png 720w, https:\/\/elementor.com\/cdn-cgi\/image\/f=auto,w=300\/blog\/wp-content\/uploads\/2021\/01\/15-stripe-favicon-design-300x72.png 300w\" sizes=\"(max-width: 720px) 100vw, 720px\" \/>\t\t\t\t\t\t\t\t<\/a>\n\t\t\t\t\t\t\t\t\t\t\t<figcaption class=\"widget-image-caption wp-caption-text\">Source: stripe<\/figcaption>\n\t\t\t\t\t\t\t\t\t\t<\/figure>\n\t\t\t\t\t\t\t\t\t<\/div>\n\t\t\t\t<\/div>\n\t\t\t\t<div class=\"elementor-element elementor-element-26b049c elementor-widget elementor-widget-text-editor\" data-id=\"26b049c\" data-element_type=\"widget\" data-widget_type=\"text-editor.default\">\n\t\t\t\t<div class=\"elementor-widget-container\">\n\t\t\t\t\t\t\t\t\t<p>Unless you\u2019ve used a unique font, the letter \u201cs\u201d on its own might not look very distinguished. With the white letter on the branded background color, however, it makes a stronger impression and may be easier to recognize as well.<\/p>\t\t\t\t\t\t\t\t<\/div>\n\t\t\t\t<\/div>\n\t\t\t\t<div class=\"elementor-element elementor-element-0b90c7b elementor-widget elementor-widget-heading\" data-id=\"0b90c7b\" data-element_type=\"widget\" data-widget_type=\"heading.default\">\n\t\t\t\t<div class=\"elementor-widget-container\">\n\t\t\t\t\t<h3 class=\"elementor-heading-title elementor-size-default\">4. Make sure the favicon is recognizable at any size\n<\/h3>\t\t\t\t<\/div>\n\t\t\t\t<\/div>\n\t\t\t\t<div class=\"elementor-element elementor-element-0edb29a elementor-widget elementor-widget-text-editor\" data-id=\"0edb29a\" data-element_type=\"widget\" data-widget_type=\"text-editor.default\">\n\t\t\t\t<div class=\"elementor-widget-container\">\n\t\t\t\t\t\t\t\t\t<p>Favicons appear in a variety of sizes depending on the platform. They can be as small as 16&#215;16 pixels and as large as 64&#215;64 pixels.\u00a0<\/p><p>If you know that users will save your website to their desktop (which browsers like Firefox and Edge support) or mobile home screen (like in the case of a progressive web app), you\u2019ll need to design a favicon for larger sizes as well.\u00a0<\/p><p>The average size for app or shortcut favicons is 152&#215;152 pixels, but can go as large as 192&#215;192 pixels if you want to size them exactly for Android tablets.\u00a0<\/p><p>This is, yet, another reason why a simpler design is better. You never know how much your favicon will need to scale up or down.<\/p>\t\t\t\t\t\t\t\t<\/div>\n\t\t\t\t<\/div>\n\t\t\t\t<div class=\"elementor-element elementor-element-417b826 elementor-widget elementor-widget-heading\" data-id=\"417b826\" data-element_type=\"widget\" data-widget_type=\"heading.default\">\n\t\t\t\t<div class=\"elementor-widget-container\">\n\t\t\t\t\t<h3 class=\"elementor-heading-title elementor-size-default\">5. Save it in the most browser-friendly file format\n<\/h3>\t\t\t\t<\/div>\n\t\t\t\t<\/div>\n\t\t\t\t<div class=\"elementor-element elementor-element-661590f elementor-widget elementor-widget-text-editor\" data-id=\"661590f\" data-element_type=\"widget\" data-widget_type=\"text-editor.default\">\n\t\t\t\t<div class=\"elementor-widget-container\">\n\t\t\t\t\t\t\t\t\t<p>Although most popular browsers have begun to accept favicons in other formats besides ICO, they don\u2019t all have universal support.\u00a0<\/p><p>This chart from Wikipedia shows us which browsers support which favicon formats:<\/p>\t\t\t\t\t\t\t\t<\/div>\n\t\t\t\t<\/div>\n\t\t\t\t<div class=\"elementor-element elementor-element-77c46a3 elementor-widget elementor-widget-image\" data-id=\"77c46a3\" data-element_type=\"widget\" data-widget_type=\"image.default\">\n\t\t\t\t<div class=\"elementor-widget-container\">\n\t\t\t\t\t\t\t\t\t\t\t\t<figure class=\"wp-caption\">\n\t\t\t\t\t\t\t\t\t\t\t<a href=\"https:\/\/en.wikipedia.org\/wiki\/Favicon\" target=\"_blank\">\n\t\t\t\t\t\t\t<img loading=\"lazy\" decoding=\"async\" width=\"720\" height=\"227\" src=\"https:\/\/elementor.com\/cdn-cgi\/image\/f=auto,w=720,h=227\/blog\/wp-content\/uploads\/2021\/01\/16-favicon-file-format-support.png\" class=\"attachment-large size-large wp-image-46293\" alt=\"favicon-file-format-support\" srcset=\"https:\/\/elementor.com\/cdn-cgi\/image\/f=auto,w=720\/blog\/wp-content\/uploads\/2021\/01\/16-favicon-file-format-support.png 720w, https:\/\/elementor.com\/cdn-cgi\/image\/f=auto,w=300\/blog\/wp-content\/uploads\/2021\/01\/16-favicon-file-format-support-300x95.png 300w\" sizes=\"(max-width: 720px) 100vw, 720px\" \/>\t\t\t\t\t\t\t\t<\/a>\n\t\t\t\t\t\t\t\t\t\t\t<figcaption class=\"widget-image-caption wp-caption-text\">Source: Wikipedia<\/figcaption>\n\t\t\t\t\t\t\t\t\t\t<\/figure>\n\t\t\t\t\t\t\t\t\t<\/div>\n\t\t\t\t<\/div>\n\t\t\t\t<div class=\"elementor-element elementor-element-25dd75b elementor-widget elementor-widget-text-editor\" data-id=\"25dd75b\" data-element_type=\"widget\" data-widget_type=\"text-editor.default\">\n\t\t\t\t<div class=\"elementor-widget-container\">\n\t\t\t\t\t\t\t\t\t<p>ICO and PNG enjoy universal support in the latest versions of each browser. While GIF does, too, it\u2019s really not the ideal choice for a favicon.\u00a0<\/p><p><a href=\"https:\/\/elementor.com\/blog\/principles-of-website-design\/\" target=\"_blank\" rel=\"noopener\">Design principles<\/a> teach us to design for the user first and to keep their experience free from distraction. An animated browser favicon won\u2019t just distract them from enjoying their time on your site, it\u2019ll distract them from looking at other open tabs.\u00a0<\/p><p>While you might be thinking of using PNG since it\u2019s a more common format, ICO is your best choice. That\u2019s because you can save one or more images, at different sizes and different resolutions, within the single file.\u00a0<\/p><p>So, it\u2019s the easiest way to account for all favicon instances at once.<\/p>\t\t\t\t\t\t\t\t<\/div>\n\t\t\t\t<\/div>\n\t\t\t\t<div class=\"elementor-element elementor-element-899b894 elementor-widget elementor-widget-menu-anchor\" data-id=\"899b894\" data-element_type=\"widget\" data-widget_type=\"menu-anchor.default\">\n\t\t\t\t<div class=\"elementor-widget-container\">\n\t\t\t\t\t\t\t<div class=\"elementor-menu-anchor\" id=\"how-to-add-website\"><\/div>\n\t\t\t\t\t\t<\/div>\n\t\t\t\t<\/div>\n\t\t\t\t<div class=\"elementor-element elementor-element-30e23f6 elementor-widget elementor-widget-heading\" data-id=\"30e23f6\" data-element_type=\"widget\" data-widget_type=\"heading.default\">\n\t\t\t\t<div class=\"elementor-widget-container\">\n\t\t\t\t\t<h2 class=\"elementor-heading-title elementor-size-default\">How To Add a Favicon To Your Website\n<\/h2>\t\t\t\t<\/div>\n\t\t\t\t<\/div>\n\t\t\t\t<div class=\"elementor-element elementor-element-5269f9c elementor-widget elementor-widget-text-editor\" data-id=\"5269f9c\" data-element_type=\"widget\" data-widget_type=\"text-editor.default\">\n\t\t\t\t<div class=\"elementor-widget-container\">\n\t\t\t\t\t\t\t\t\t<p><span style=\"font-weight: 400\">With design best practices out of the way, let\u2019s talk practical steps to get one on your website: <\/span><\/p>\t\t\t\t\t\t\t\t<\/div>\n\t\t\t\t<\/div>\n\t\t\t\t<div class=\"elementor-element elementor-element-4472116 elementor-widget elementor-widget-heading\" data-id=\"4472116\" data-element_type=\"widget\" data-widget_type=\"heading.default\">\n\t\t\t\t<div class=\"elementor-widget-container\">\n\t\t\t\t\t<h3 class=\"elementor-heading-title elementor-size-default\">Step 1: Make the favicon\n<\/h3>\t\t\t\t<\/div>\n\t\t\t\t<\/div>\n\t\t\t\t<div class=\"elementor-element elementor-element-4408605 elementor-widget elementor-widget-text-editor\" data-id=\"4408605\" data-element_type=\"widget\" data-widget_type=\"text-editor.default\">\n\t\t\t\t<div class=\"elementor-widget-container\">\n\t\t\t\t\t\t\t\t\t<p>You or your graphic designer can create the favicon as an SVG vector image in Illustrator or Sketch. As vectors infinitely scale, this would enable your favicon to retain its clarity and recognizability regardless of where it appears.\u00a0<\/p><p>If you don&#8217;t design it as a vector, that&#8217;s okay. The favicon will need to be exported as a PNG or ICO for all possible sizes you want to account for. As we&#8217;ll see shortly, you&#8217;ll want to save it in a much larger size than the favicon will ever appear at (260&#215;260 is the recommendation).<\/p><p>If you want it to have a transparent background, remember to export it that way. Otherwise, design the solid fill favicon in the shape of a square.\u00a0<\/p><p>Remember to save your favicon design in your <a href=\"https:\/\/elementor.com\/blog\/web-design-style-guide\/\" target=\"_blank\" rel=\"noopener\">web design style guide<\/a>. That way, if you change your branding in the future, you&#8217;ll remember to update the favicon as well.\u00a0<\/p><p>Here are some <a href=\"https:\/\/elementor.com\/blog\/style-guide-examples\/\" target=\"_blank\" rel=\"noopener\">style guide examples<\/a> you can use to create your own.<\/p>\t\t\t\t\t\t\t\t<\/div>\n\t\t\t\t<\/div>\n\t\t\t\t<div class=\"elementor-element elementor-element-dad6e5a elementor-widget elementor-widget-heading\" data-id=\"dad6e5a\" data-element_type=\"widget\" data-widget_type=\"heading.default\">\n\t\t\t\t<div class=\"elementor-widget-container\">\n\t\t\t\t\t<h3 class=\"elementor-heading-title elementor-size-default\">Step 2: Convert and resize your favicon design\n<\/h3>\t\t\t\t<\/div>\n\t\t\t\t<\/div>\n\t\t\t\t<div class=\"elementor-element elementor-element-64f7964 elementor-widget elementor-widget-text-editor\" data-id=\"64f7964\" data-element_type=\"widget\" data-widget_type=\"text-editor.default\">\n\t\t\t\t<div class=\"elementor-widget-container\">\n\t\t\t\t\t\t\t\t\t<p>There are lots of free favicon generators that turn your favicons into ICOs. Real Favicon Generator is free, super easy to use, and helps you prepare your favicon for all channels:<\/p>\t\t\t\t\t\t\t\t<\/div>\n\t\t\t\t<\/div>\n\t\t\t\t<div class=\"elementor-element elementor-element-986e611 elementor-widget elementor-widget-image\" data-id=\"986e611\" data-element_type=\"widget\" data-widget_type=\"image.default\">\n\t\t\t\t<div class=\"elementor-widget-container\">\n\t\t\t\t\t\t\t\t\t\t\t\t<figure class=\"wp-caption\">\n\t\t\t\t\t\t\t\t\t\t\t<a href=\"https:\/\/realfavicongenerator.net\/\" target=\"_blank\">\n\t\t\t\t\t\t\t<img loading=\"lazy\" decoding=\"async\" width=\"720\" height=\"399\" src=\"https:\/\/elementor.com\/cdn-cgi\/image\/f=auto,w=720,h=399\/blog\/wp-content\/uploads\/2021\/01\/17-real-favicon-generator.png\" class=\"attachment-large size-large wp-image-46294\" alt=\"real-favicon-generator\" srcset=\"https:\/\/elementor.com\/cdn-cgi\/image\/f=auto,w=720\/blog\/wp-content\/uploads\/2021\/01\/17-real-favicon-generator.png 720w, https:\/\/elementor.com\/cdn-cgi\/image\/f=auto,w=300\/blog\/wp-content\/uploads\/2021\/01\/17-real-favicon-generator-300x166.png 300w\" sizes=\"(max-width: 720px) 100vw, 720px\" \/>\t\t\t\t\t\t\t\t<\/a>\n\t\t\t\t\t\t\t\t\t\t\t<figcaption class=\"widget-image-caption wp-caption-text\">Source: RealFaviconGenerator<\/figcaption>\n\t\t\t\t\t\t\t\t\t\t<\/figure>\n\t\t\t\t\t\t\t\t\t<\/div>\n\t\t\t\t<\/div>\n\t\t\t\t<div class=\"elementor-element elementor-element-bd6ecaf elementor-widget elementor-widget-text-editor\" data-id=\"bd6ecaf\" data-element_type=\"widget\" data-widget_type=\"text-editor.default\">\n\t\t\t\t<div class=\"elementor-widget-container\">\n\t\t\t\t\t\t\t\t\t<p>Select the favicon file you created \u2014 in any format, just make sure it\u2019s saved as 260&#215;260 pixels for the best results \u2014 and upload it to the generator.\u00a0<\/p><p>You\u2019ll then be taken through the following prompt:<\/p>\t\t\t\t\t\t\t\t<\/div>\n\t\t\t\t<\/div>\n\t\t\t\t<div class=\"elementor-element elementor-element-cf29181 elementor-widget elementor-widget-image\" data-id=\"cf29181\" data-element_type=\"widget\" data-widget_type=\"image.default\">\n\t\t\t\t<div class=\"elementor-widget-container\">\n\t\t\t\t\t\t\t\t\t\t\t\t<figure class=\"wp-caption\">\n\t\t\t\t\t\t\t\t\t\t\t<a href=\"https:\/\/realfavicongenerator.net\/\" target=\"_blank\">\n\t\t\t\t\t\t\t<img loading=\"lazy\" decoding=\"async\" width=\"720\" height=\"399\" src=\"https:\/\/elementor.com\/cdn-cgi\/image\/f=auto,w=720,h=399\/blog\/wp-content\/uploads\/2021\/01\/18-real-favicon-generator-prompt.png\" class=\"attachment-large size-large wp-image-46295\" alt=\"real-favicon-generator-prompt\" srcset=\"https:\/\/elementor.com\/cdn-cgi\/image\/f=auto,w=720\/blog\/wp-content\/uploads\/2021\/01\/18-real-favicon-generator-prompt.png 720w, https:\/\/elementor.com\/cdn-cgi\/image\/f=auto,w=300\/blog\/wp-content\/uploads\/2021\/01\/18-real-favicon-generator-prompt-300x166.png 300w\" sizes=\"(max-width: 720px) 100vw, 720px\" \/>\t\t\t\t\t\t\t\t<\/a>\n\t\t\t\t\t\t\t\t\t\t\t<figcaption class=\"widget-image-caption wp-caption-text\">Source: RealFaviconGenerator<\/figcaption>\n\t\t\t\t\t\t\t\t\t\t<\/figure>\n\t\t\t\t\t\t\t\t\t<\/div>\n\t\t\t\t<\/div>\n\t\t\t\t<div class=\"elementor-element elementor-element-232df53 elementor-widget elementor-widget-text-editor\" data-id=\"232df53\" data-element_type=\"widget\" data-widget_type=\"text-editor.default\">\n\t\t\t\t<div class=\"elementor-widget-container\">\n\t\t\t\t\t\t\t\t\t<p>It will show you how your favicon appears in each browser and on each device.\u00a0<\/p><p>If the generator makes a suggestion (like when it recommends inverting the colors for iOS home screen buttons), you should make it. You can also use this tool to make slight tweaks of your own.<\/p><p>Once you\u2019ve reviewed your favicon designs, click the button at the bottom that says \u201cGenerate your Favicons and HTML code\u201d. You\u2019ll be taken here:<\/p>\t\t\t\t\t\t\t\t<\/div>\n\t\t\t\t<\/div>\n\t\t\t\t<div class=\"elementor-element elementor-element-68e3cf7 elementor-widget elementor-widget-image\" data-id=\"68e3cf7\" data-element_type=\"widget\" data-widget_type=\"image.default\">\n\t\t\t\t<div class=\"elementor-widget-container\">\n\t\t\t\t\t\t\t\t\t\t\t\t<figure class=\"wp-caption\">\n\t\t\t\t\t\t\t\t\t\t\t<a href=\"https:\/\/realfavicongenerator.net\/\" target=\"_blank\">\n\t\t\t\t\t\t\t<img loading=\"lazy\" decoding=\"async\" width=\"720\" height=\"399\" src=\"https:\/\/elementor.com\/cdn-cgi\/image\/f=auto,w=720,h=399\/blog\/wp-content\/uploads\/2021\/01\/19-real-favicon-generator-favicon-package.png\" class=\"attachment-large size-large wp-image-46296\" alt=\"real-favicon-generator-favicon-package\" srcset=\"https:\/\/elementor.com\/cdn-cgi\/image\/f=auto,w=720\/blog\/wp-content\/uploads\/2021\/01\/19-real-favicon-generator-favicon-package.png 720w, https:\/\/elementor.com\/cdn-cgi\/image\/f=auto,w=300\/blog\/wp-content\/uploads\/2021\/01\/19-real-favicon-generator-favicon-package-300x166.png 300w\" sizes=\"(max-width: 720px) 100vw, 720px\" \/>\t\t\t\t\t\t\t\t<\/a>\n\t\t\t\t\t\t\t\t\t\t\t<figcaption class=\"widget-image-caption wp-caption-text\">Source: RealFaviconGenerator<\/figcaption>\n\t\t\t\t\t\t\t\t\t\t<\/figure>\n\t\t\t\t\t\t\t\t\t<\/div>\n\t\t\t\t<\/div>\n\t\t\t\t<div class=\"elementor-element elementor-element-af88327 elementor-widget elementor-widget-text-editor\" data-id=\"af88327\" data-element_type=\"widget\" data-widget_type=\"text-editor.default\">\n\t\t\t\t<div class=\"elementor-widget-container\">\n\t\t\t\t\t\t\t\t\t<p><span style=\"font-weight: 400\">Click \u201cFavicon package\u201d to download your file. You&#8217;ll end up with a zipped folder containing the following file formats and sizes:\u00a0<\/span><\/p>\t\t\t\t\t\t\t\t<\/div>\n\t\t\t\t<\/div>\n\t\t\t\t<div class=\"elementor-element elementor-element-7b1ff36 elementor-widget elementor-widget-image\" data-id=\"7b1ff36\" data-element_type=\"widget\" data-widget_type=\"image.default\">\n\t\t\t\t<div class=\"elementor-widget-container\">\n\t\t\t\t\t\t\t\t\t\t\t\t<figure class=\"wp-caption\">\n\t\t\t\t\t\t\t\t\t\t\t<a href=\"https:\/\/realfavicongenerator.net\/\" target=\"_blank\">\n\t\t\t\t\t\t\t<img loading=\"lazy\" decoding=\"async\" width=\"720\" height=\"468\" src=\"https:\/\/elementor.com\/cdn-cgi\/image\/f=auto,w=720,h=468\/blog\/wp-content\/uploads\/2021\/01\/20-real-favicon-generator-package.png\" class=\"attachment-large size-large wp-image-46297\" alt=\"real-favicon-generator-package\" srcset=\"https:\/\/elementor.com\/cdn-cgi\/image\/f=auto,w=720\/blog\/wp-content\/uploads\/2021\/01\/20-real-favicon-generator-package.png 720w, https:\/\/elementor.com\/cdn-cgi\/image\/f=auto,w=300\/blog\/wp-content\/uploads\/2021\/01\/20-real-favicon-generator-package-300x195.png 300w\" sizes=\"(max-width: 720px) 100vw, 720px\" \/>\t\t\t\t\t\t\t\t<\/a>\n\t\t\t\t\t\t\t\t\t\t\t<figcaption class=\"widget-image-caption wp-caption-text\">Source: RealFaviconGenerator<\/figcaption>\n\t\t\t\t\t\t\t\t\t\t<\/figure>\n\t\t\t\t\t\t\t\t\t<\/div>\n\t\t\t\t<\/div>\n\t\t\t\t<div class=\"elementor-element elementor-element-03f08e5 elementor-widget elementor-widget-text-editor\" data-id=\"03f08e5\" data-element_type=\"widget\" data-widget_type=\"text-editor.default\">\n\t\t\t\t<div class=\"elementor-widget-container\">\n\t\t\t\t\t\t\t\t\t<p><span style=\"font-weight: 400\">Now, this favicon generator provides instructions on how to install your favicon manually (with code). That\u2019s not your only option though. <\/span><\/p>\t\t\t\t\t\t\t\t<\/div>\n\t\t\t\t<\/div>\n\t\t\t\t<div class=\"elementor-element elementor-element-101d1ec elementor-widget elementor-widget-heading\" data-id=\"101d1ec\" data-element_type=\"widget\" data-widget_type=\"heading.default\">\n\t\t\t\t<div class=\"elementor-widget-container\">\n\t\t\t\t\t<h3 class=\"elementor-heading-title elementor-size-default\">Step 3: Upload the favicon to the root of your website\n<\/h3>\t\t\t\t<\/div>\n\t\t\t\t<\/div>\n\t\t\t\t<div class=\"elementor-element elementor-element-a5cb9c5 elementor-widget elementor-widget-text-editor\" data-id=\"a5cb9c5\" data-element_type=\"widget\" data-widget_type=\"text-editor.default\">\n\t\t\t\t<div class=\"elementor-widget-container\">\n\t\t\t\t\t\t\t\t\t<p>You need to save your favicon to the root of your site so it lives at the following URL:\u00a0<\/p><p><strong>https:\/\/yourdomainname.com\/favicon.ico<\/strong><\/p><p>So, first things first, save your ICO as <strong>favicon.ico<\/strong>. (or <strong>favicon.png<\/strong> \u2014 just remember to update the HTML before you upload it to your site.)<\/p><p>Next, go to your web hosting control panel and find the FTP or file manager. Locate the root folder where your website lives. In cPanel, you&#8217;ll find it at <strong>public_html<\/strong>.<\/p><p>Here&#8217;s an example of what that would look like on SiteGround hosting:<\/p>\t\t\t\t\t\t\t\t<\/div>\n\t\t\t\t<\/div>\n\t\t\t\t<div class=\"elementor-element elementor-element-c8c4729 elementor-widget elementor-widget-image\" data-id=\"c8c4729\" data-element_type=\"widget\" data-widget_type=\"image.default\">\n\t\t\t\t<div class=\"elementor-widget-container\">\n\t\t\t\t\t\t\t\t\t\t\t\t<figure class=\"wp-caption\">\n\t\t\t\t\t\t\t\t\t\t\t<a href=\"https:\/\/www.siteground.com\/\" target=\"_blank\">\n\t\t\t\t\t\t\t<img loading=\"lazy\" decoding=\"async\" width=\"720\" height=\"438\" src=\"https:\/\/elementor.com\/cdn-cgi\/image\/f=auto,w=720,h=438\/blog\/wp-content\/uploads\/2021\/01\/21-siteground-file-manager.png\" class=\"attachment-large size-large wp-image-46298\" alt=\"siteground-file-manager\" srcset=\"https:\/\/elementor.com\/cdn-cgi\/image\/f=auto,w=720\/blog\/wp-content\/uploads\/2021\/01\/21-siteground-file-manager.png 720w, https:\/\/elementor.com\/cdn-cgi\/image\/f=auto,w=300\/blog\/wp-content\/uploads\/2021\/01\/21-siteground-file-manager-300x183.png 300w\" sizes=\"(max-width: 720px) 100vw, 720px\" \/>\t\t\t\t\t\t\t\t<\/a>\n\t\t\t\t\t\t\t\t\t\t\t<figcaption class=\"widget-image-caption wp-caption-text\">Source: SiteGround<\/figcaption>\n\t\t\t\t\t\t\t\t\t\t<\/figure>\n\t\t\t\t\t\t\t\t\t<\/div>\n\t\t\t\t<\/div>\n\t\t\t\t<div class=\"elementor-element elementor-element-dc911d9 elementor-widget elementor-widget-text-editor\" data-id=\"dc911d9\" data-element_type=\"widget\" data-widget_type=\"text-editor.default\">\n\t\t\t\t<div class=\"elementor-widget-container\">\n\t\t\t\t\t\t\t\t\t<p><span style=\"font-weight: 400\">Click the button for \u201cFile Upload\u201d and then upload your <\/span><b>favicon.ico<\/b><span style=\"font-weight: 400\"> file to the top-level root folder. Save the changes and exit.<\/span><\/p>\t\t\t\t\t\t\t\t<\/div>\n\t\t\t\t<\/div>\n\t\t\t\t<div class=\"elementor-element elementor-element-e67d676 elementor-widget elementor-widget-heading\" data-id=\"e67d676\" data-element_type=\"widget\" data-widget_type=\"heading.default\">\n\t\t\t\t<div class=\"elementor-widget-container\">\n\t\t\t\t\t<h3 class=\"elementor-heading-title elementor-size-default\">Step 4: Add HTML to the header\n<\/h3>\t\t\t\t<\/div>\n\t\t\t\t<\/div>\n\t\t\t\t<div class=\"elementor-element elementor-element-c882a24 elementor-widget elementor-widget-text-editor\" data-id=\"c882a24\" data-element_type=\"widget\" data-widget_type=\"text-editor.default\">\n\t\t\t\t<div class=\"elementor-widget-container\">\n\t\t\t\t\t\t\t\t\t<p>Before the favicon can appear, you\u2019ll have to tell browsers and devices where to get the favicon from. They\u2019ll find this information in your website\u2019s header.\u00a0<\/p><p>To inject this HTML code into your header, you have a couple of options.\u00a0<\/p><p>One is to update your theme\u2019s <strong>header.php<\/strong> file.<\/p>\t\t\t\t\t\t\t\t<\/div>\n\t\t\t\t<\/div>\n\t\t\t\t<div class=\"elementor-element elementor-element-84d99c8 elementor-widget elementor-widget-image\" data-id=\"84d99c8\" data-element_type=\"widget\" data-widget_type=\"image.default\">\n\t\t\t\t<div class=\"elementor-widget-container\">\n\t\t\t\t\t\t\t\t\t\t\t\t\t\t\t<img loading=\"lazy\" decoding=\"async\" width=\"720\" height=\"356\" src=\"https:\/\/elementor.com\/cdn-cgi\/image\/f=auto,w=720,h=356\/blog\/wp-content\/uploads\/2021\/01\/22-file-manager-theme-editor.png\" class=\"attachment-large size-large wp-image-46299\" alt=\"file-manager-theme-editor\" srcset=\"https:\/\/elementor.com\/cdn-cgi\/image\/f=auto,w=720\/blog\/wp-content\/uploads\/2021\/01\/22-file-manager-theme-editor.png 720w, https:\/\/elementor.com\/cdn-cgi\/image\/f=auto,w=300\/blog\/wp-content\/uploads\/2021\/01\/22-file-manager-theme-editor-300x148.png 300w\" sizes=\"(max-width: 720px) 100vw, 720px\" \/>\t\t\t\t\t\t\t\t\t\t\t\t\t\t\t<\/div>\n\t\t\t\t<\/div>\n\t\t\t\t<div class=\"elementor-element elementor-element-ae378f2 elementor-widget elementor-widget-text-editor\" data-id=\"ae378f2\" data-element_type=\"widget\" data-widget_type=\"text-editor.default\">\n\t\t\t\t<div class=\"elementor-widget-container\">\n\t\t\t\t\t\t\t\t\t<p><span style=\"font-weight: 400\">You\u2019ll also find this file in WordPress. Go to <\/span><b>Appearance &gt; Theme Editor<\/b><span style=\"font-weight: 400\">:<\/span><\/p>\t\t\t\t\t\t\t\t<\/div>\n\t\t\t\t<\/div>\n\t\t\t\t<div class=\"elementor-element elementor-element-8d77dcc elementor-widget elementor-widget-image\" data-id=\"8d77dcc\" data-element_type=\"widget\" data-widget_type=\"image.default\">\n\t\t\t\t<div class=\"elementor-widget-container\">\n\t\t\t\t\t\t\t\t\t\t\t\t\t\t\t<img loading=\"lazy\" decoding=\"async\" width=\"720\" height=\"399\" src=\"https:\/\/elementor.com\/cdn-cgi\/image\/f=auto,w=720,h=399\/blog\/wp-content\/uploads\/2021\/01\/23-wordpress-theme-editor.png\" class=\"attachment-large size-large wp-image-46300\" alt=\"wordpress-theme-editor\" srcset=\"https:\/\/elementor.com\/cdn-cgi\/image\/f=auto,w=720\/blog\/wp-content\/uploads\/2021\/01\/23-wordpress-theme-editor.png 720w, https:\/\/elementor.com\/cdn-cgi\/image\/f=auto,w=300\/blog\/wp-content\/uploads\/2021\/01\/23-wordpress-theme-editor-300x166.png 300w\" sizes=\"(max-width: 720px) 100vw, 720px\" \/>\t\t\t\t\t\t\t\t\t\t\t\t\t\t\t<\/div>\n\t\t\t\t<\/div>\n\t\t\t\t<div class=\"elementor-element elementor-element-95e719d elementor-widget elementor-widget-text-editor\" data-id=\"95e719d\" data-element_type=\"widget\" data-widget_type=\"text-editor.default\">\n\t\t\t\t<div class=\"elementor-widget-container\">\n\t\t\t\t\t\t\t\t\t<p>To add the favicon\u2019s location to the header, place the following HTML between the &lt;head&gt; and &lt;\/head&gt; tags. Make sure to update it with your domain name and favicon file name:\u00a0<\/p><p>&lt;link rel=&#8221;favicon&#8221; type=&#8221;image\/ico&#8221; href=&#8221;https:\/\/yourdomainname.com\/favicon.ico&#8221; \/&gt;<\/p><p>If you want to use all of the files generated by Real Favicon Generator, you can use the pre-written HTML provided by the generator. Here\u2019s an example of what that might look like:\u00a0<\/p><p>&lt;link rel=&#8221;apple-touch-icon&#8221; sizes=&#8221;180&#215;180&#8243; href=&#8221;\/apple-touch-icon.png&#8221;&gt;<\/p><p>&lt;link rel=&#8221;icon&#8221; type=&#8221;image\/png&#8221; sizes=&#8221;32&#215;32&#8243; href=&#8221;\/favicon-32&#215;32.png&#8221;&gt;<\/p><p>&lt;link rel=&#8221;icon&#8221; type=&#8221;image\/png&#8221; sizes=&#8221;16&#215;16&#8243; href=&#8221;\/favicon-16&#215;16.png&#8221;&gt;<\/p><p>&lt;link rel=&#8221;manifest&#8221; href=&#8221;\/site.webmanifest&#8221;&gt;<\/p><p>&lt;meta name=&#8221;msapplication-TileColor&#8221; content=&#8221;#da532c&#8221;&gt;<\/p><p>&lt;meta name=&#8221;theme-color&#8221; content=&#8221;#ffffff&#8221;&gt;<\/p><p>Just make sure you save each of these files to the root of your site and use the same names in the HTML if you renamed them.\u00a0<\/p><p>A word of caution: Unless you have a child theme where you can safely update your header, you\u2019re better off using a plugin to add the code. That\u2019s because, if you add the favicon HTML to the header.php in your main theme, it will get replaced when you update your theme.<\/p>\t\t\t\t\t\t\t\t<\/div>\n\t\t\t\t<\/div>\n\t\t\t\t<div class=\"elementor-element elementor-element-2fdce5a elementor-widget elementor-widget-heading\" data-id=\"2fdce5a\" data-element_type=\"widget\" data-widget_type=\"heading.default\">\n\t\t\t\t<div class=\"elementor-widget-container\">\n\t\t\t\t\t<h4 class=\"elementor-heading-title elementor-size-default\">Use the Insert Headers and Footers plugin\n<\/h4>\t\t\t\t<\/div>\n\t\t\t\t<\/div>\n\t\t\t\t<div class=\"elementor-element elementor-element-1e7c771 elementor-widget elementor-widget-text-editor\" data-id=\"1e7c771\" data-element_type=\"widget\" data-widget_type=\"text-editor.default\">\n\t\t\t\t<div class=\"elementor-widget-container\">\n\t\t\t\t\t\t\t\t\t<p>The <a href=\"https:\/\/wordpress.org\/plugins\/insert-headers-and-footers\/\" target=\"_blank\" rel=\"noopener\">Insert Headers and Footers plugin<\/a> from WP Beginner makes it easy to get your favicon code into the header of your site. And it\u2019ll stay there no matter how many times you update your WordPress theme.<\/p><p>Go to Settings and locate Insert Headers and Footers. Add your code to the \u201cScripts in Header\u201d section and save your changes:<\/p>\t\t\t\t\t\t\t\t<\/div>\n\t\t\t\t<\/div>\n\t\t\t\t<div class=\"elementor-element elementor-element-750ff7a elementor-widget elementor-widget-image\" data-id=\"750ff7a\" data-element_type=\"widget\" data-widget_type=\"image.default\">\n\t\t\t\t<div class=\"elementor-widget-container\">\n\t\t\t\t\t\t\t\t\t\t\t\t\t\t\t<img loading=\"lazy\" decoding=\"async\" width=\"720\" height=\"399\" src=\"https:\/\/elementor.com\/cdn-cgi\/image\/f=auto,w=720,h=399\/blog\/wp-content\/uploads\/2021\/01\/24-insert-headers-and-footers-plugin.png\" class=\"attachment-large size-large wp-image-46301\" alt=\"insert-headers-and-footers-plugin\" srcset=\"https:\/\/elementor.com\/cdn-cgi\/image\/f=auto,w=720\/blog\/wp-content\/uploads\/2021\/01\/24-insert-headers-and-footers-plugin.png 720w, https:\/\/elementor.com\/cdn-cgi\/image\/f=auto,w=300\/blog\/wp-content\/uploads\/2021\/01\/24-insert-headers-and-footers-plugin-300x166.png 300w\" sizes=\"(max-width: 720px) 100vw, 720px\" \/>\t\t\t\t\t\t\t\t\t\t\t\t\t\t\t<\/div>\n\t\t\t\t<\/div>\n\t\t\t\t<div class=\"elementor-element elementor-element-d036420 elementor-widget elementor-widget-text-editor\" data-id=\"d036420\" data-element_type=\"widget\" data-widget_type=\"text-editor.default\">\n\t\t\t\t<div class=\"elementor-widget-container\">\n\t\t\t\t\t\t\t\t\t<p>If you have multiple PNG and ICO files generated, add the code here. Otherwise, the HTML for your ICO will suffice.<\/p>\t\t\t\t\t\t\t\t<\/div>\n\t\t\t\t<\/div>\n\t\t\t\t<div class=\"elementor-element elementor-element-1b1b453 elementor-widget elementor-widget-heading\" data-id=\"1b1b453\" data-element_type=\"widget\" data-widget_type=\"heading.default\">\n\t\t\t\t<div class=\"elementor-widget-container\">\n\t\t\t\t\t<h3 class=\"elementor-heading-title elementor-size-default\">Step 5: Confirm that the favicon works\n<\/h3>\t\t\t\t<\/div>\n\t\t\t\t<\/div>\n\t\t\t\t<div class=\"elementor-element elementor-element-bca6c36 elementor-widget elementor-widget-text-editor\" data-id=\"bca6c36\" data-element_type=\"widget\" data-widget_type=\"text-editor.default\">\n\t\t\t\t<div class=\"elementor-widget-container\">\n\t\t\t\t\t\t\t\t\t<p>Clear the cache in WordPress and open a new browser tab with your website. Do you see the favicon there? Good.\u00a0<\/p><p>Do the same with other browsers as well as your smartphone and make sure the favicon looks exactly as you want it to. Then, try bookmarking your website. Again, make sure you\u2019re happy with the results.\u00a0<\/p><p>If the icon looks too blurry, it\u2019s probably an issue with sizing. Review your files and make sure they\u2019re properly designed. Reupload once you\u2019ve fixed them and check again.<\/p>\t\t\t\t\t\t\t\t<\/div>\n\t\t\t\t<\/div>\n\t\t\t\t<div class=\"elementor-element elementor-element-fa6dcfe elementor-widget elementor-widget-menu-anchor\" data-id=\"fa6dcfe\" data-element_type=\"widget\" data-widget_type=\"menu-anchor.default\">\n\t\t\t\t<div class=\"elementor-widget-container\">\n\t\t\t\t\t\t\t<div class=\"elementor-menu-anchor\" id=\"how-to-add\"><\/div>\n\t\t\t\t\t\t<\/div>\n\t\t\t\t<\/div>\n\t\t\t\t<div class=\"elementor-element elementor-element-404c97d elementor-widget elementor-widget-heading\" data-id=\"404c97d\" data-element_type=\"widget\" data-widget_type=\"heading.default\">\n\t\t\t\t<div class=\"elementor-widget-container\">\n\t\t\t\t\t<h2 class=\"elementor-heading-title elementor-size-default\">How To Add a Favicon in WordPress\n<\/h2>\t\t\t\t<\/div>\n\t\t\t\t<\/div>\n\t\t\t\t<div class=\"elementor-element elementor-element-fcec815 elementor-widget elementor-widget-text-editor\" data-id=\"fcec815\" data-element_type=\"widget\" data-widget_type=\"text-editor.default\">\n\t\t\t\t<div class=\"elementor-widget-container\">\n\t\t\t\t\t\t\t\t\t<p>There\u2019s a quick and painless way to get the favicon saved to your website that doesn\u2019t require accessing the control panel or working with code.\u00a0<\/p><p><strong>Note:<\/strong> If you decide to go this route, understand that you won\u2019t have any control over how the favicon appears in non-browser areas (like on mobile home screens). If you\u2019re okay with that, then here\u2019s what you\u2019ll do:\u00a0<\/p><p>Log in to WordPress and go to <strong>Appearance &gt; Customize<\/strong>. Navigate to the <strong>Header &gt; Site Identity<\/strong> section.\u00a0<\/p><p>You\u2019ll find a section called \u201cSite Icon\u201d. Click on where it says \u201cSelect site icon\u201d.<\/p>\t\t\t\t\t\t\t\t<\/div>\n\t\t\t\t<\/div>\n\t\t\t\t<div class=\"elementor-element elementor-element-a42617d elementor-widget elementor-widget-image\" data-id=\"a42617d\" data-element_type=\"widget\" data-widget_type=\"image.default\">\n\t\t\t\t<div class=\"elementor-widget-container\">\n\t\t\t\t\t\t\t\t\t\t\t\t\t\t\t<img loading=\"lazy\" decoding=\"async\" width=\"720\" height=\"399\" src=\"https:\/\/elementor.com\/cdn-cgi\/image\/f=auto,w=720,h=399\/blog\/wp-content\/uploads\/2021\/01\/25-wordpress-site-identity.png\" class=\"attachment-large size-large wp-image-46302\" alt=\"wordpress-site-identity\" srcset=\"https:\/\/elementor.com\/cdn-cgi\/image\/f=auto,w=720\/blog\/wp-content\/uploads\/2021\/01\/25-wordpress-site-identity.png 720w, https:\/\/elementor.com\/cdn-cgi\/image\/f=auto,w=300\/blog\/wp-content\/uploads\/2021\/01\/25-wordpress-site-identity-300x166.png 300w\" sizes=\"(max-width: 720px) 100vw, 720px\" \/>\t\t\t\t\t\t\t\t\t\t\t\t\t\t\t<\/div>\n\t\t\t\t<\/div>\n\t\t\t\t<div class=\"elementor-element elementor-element-f29eeb6 elementor-widget elementor-widget-text-editor\" data-id=\"f29eeb6\" data-element_type=\"widget\" data-widget_type=\"text-editor.default\">\n\t\t\t\t<div class=\"elementor-widget-container\">\n\t\t\t\t\t\t\t\t\t<p>WordPress allows you to upload your favicon as a PNG or ICO here. Size recommendation is 512&#215;512 pixels:\u00a0<\/p>\t\t\t\t\t\t\t\t<\/div>\n\t\t\t\t<\/div>\n\t\t\t\t<div class=\"elementor-element elementor-element-a263b51 elementor-widget elementor-widget-image\" data-id=\"a263b51\" data-element_type=\"widget\" data-widget_type=\"image.default\">\n\t\t\t\t<div class=\"elementor-widget-container\">\n\t\t\t\t\t\t\t\t\t\t\t\t\t\t\t<img loading=\"lazy\" decoding=\"async\" width=\"720\" height=\"399\" src=\"https:\/\/elementor.com\/cdn-cgi\/image\/f=auto,w=720,h=399\/blog\/wp-content\/uploads\/2021\/01\/26-wordpress-upload-files.png\" class=\"attachment-large size-large wp-image-46303\" alt=\"wordpress-upload-files\" srcset=\"https:\/\/elementor.com\/cdn-cgi\/image\/f=auto,w=720\/blog\/wp-content\/uploads\/2021\/01\/26-wordpress-upload-files.png 720w, https:\/\/elementor.com\/cdn-cgi\/image\/f=auto,w=300\/blog\/wp-content\/uploads\/2021\/01\/26-wordpress-upload-files-300x166.png 300w\" sizes=\"(max-width: 720px) 100vw, 720px\" \/>\t\t\t\t\t\t\t\t\t\t\t\t\t\t\t<\/div>\n\t\t\t\t<\/div>\n\t\t\t\t<div class=\"elementor-element elementor-element-28d8d2f elementor-widget elementor-widget-text-editor\" data-id=\"28d8d2f\" data-element_type=\"widget\" data-widget_type=\"text-editor.default\">\n\t\t\t\t<div class=\"elementor-widget-container\">\n\t\t\t\t\t\t\t\t\t<p><span style=\"font-weight: 400\">You\u2019ll then get the chance to crop your favicon. There\u2019s a preview of how it\u2019ll appear in browser tabs on the right:\u00a0<\/span><\/p>\t\t\t\t\t\t\t\t<\/div>\n\t\t\t\t<\/div>\n\t\t\t\t<div class=\"elementor-element elementor-element-0bbbef0 elementor-widget elementor-widget-image\" data-id=\"0bbbef0\" data-element_type=\"widget\" data-widget_type=\"image.default\">\n\t\t\t\t<div class=\"elementor-widget-container\">\n\t\t\t\t\t\t\t\t\t\t\t\t\t\t\t<img loading=\"lazy\" decoding=\"async\" width=\"720\" height=\"370\" src=\"https:\/\/elementor.com\/cdn-cgi\/image\/f=auto,w=720,h=370\/blog\/wp-content\/uploads\/2021\/01\/27-wordpress-crop-favicon.png\" class=\"attachment-large size-large wp-image-46304\" alt=\"wordpress-crop-favicon\" srcset=\"https:\/\/elementor.com\/cdn-cgi\/image\/f=auto,w=720\/blog\/wp-content\/uploads\/2021\/01\/27-wordpress-crop-favicon.png 720w, https:\/\/elementor.com\/cdn-cgi\/image\/f=auto,w=300\/blog\/wp-content\/uploads\/2021\/01\/27-wordpress-crop-favicon-300x154.png 300w\" sizes=\"(max-width: 720px) 100vw, 720px\" \/>\t\t\t\t\t\t\t\t\t\t\t\t\t\t\t<\/div>\n\t\t\t\t<\/div>\n\t\t\t\t<div class=\"elementor-element elementor-element-67bf54d elementor-widget elementor-widget-text-editor\" data-id=\"67bf54d\" data-element_type=\"widget\" data-widget_type=\"text-editor.default\">\n\t\t\t\t<div class=\"elementor-widget-container\">\n\t\t\t\t\t\t\t\t\t<p>Click \u201cCrop image\u201d and then hit the \u201cPublish\u201d or \u201cUpdate\u201d website once you return to the Customizer and you\u2019re done making all your changes.\u00a0<\/p><p>You should see your new favicon in the current browser tab. (If not, clear your cache and check again.)<\/p><p>If you\u2019re an Elementor Pro user, you can also do this using <a href=\"https:\/\/elementor.com\/features\/global-settings\/\" target=\"_blank\" rel=\"noopener\">Global Settings<\/a>. It works the same as the Customizer.<\/p>\t\t\t\t\t\t\t\t<\/div>\n\t\t\t\t<\/div>\n\t\t\t\t<div class=\"elementor-element elementor-element-61af1a5 elementor-widget elementor-widget-menu-anchor\" data-id=\"61af1a5\" data-element_type=\"widget\" data-widget_type=\"menu-anchor.default\">\n\t\t\t\t<div class=\"elementor-widget-container\">\n\t\t\t\t\t\t\t<div class=\"elementor-menu-anchor\" id=\"examples\"><\/div>\n\t\t\t\t\t\t<\/div>\n\t\t\t\t<\/div>\n\t\t\t\t<div class=\"elementor-element elementor-element-0ae4629 elementor-widget elementor-widget-heading\" data-id=\"0ae4629\" data-element_type=\"widget\" data-widget_type=\"heading.default\">\n\t\t\t\t<div class=\"elementor-widget-container\">\n\t\t\t\t\t<h2 class=\"elementor-heading-title elementor-size-default\">9 Inspiring Examples of Outstanding Favicons\n<\/h2>\t\t\t\t<\/div>\n\t\t\t\t<\/div>\n\t\t\t\t<div class=\"elementor-element elementor-element-f26984f elementor-widget elementor-widget-text-editor\" data-id=\"f26984f\" data-element_type=\"widget\" data-widget_type=\"text-editor.default\">\n\t\t\t\t<div class=\"elementor-widget-container\">\n\t\t\t\t\t\t\t\t\t<p><span style=\"font-weight: 400\">Let\u2019s take a look at how a strong color choice and <\/span><a href=\"https:\/\/elementor.com\/blog\/web-design-trends-2020\/\" target=\"_blank\" rel=\"noopener\"><span style=\"font-weight: 400\">abstract icon design<\/span><\/a><span style=\"font-weight: 400\"> can really make your favicon pop:\u00a0<\/span><\/p>\t\t\t\t\t\t\t\t<\/div>\n\t\t\t\t<\/div>\n\t\t\t\t<div class=\"elementor-element elementor-element-942c97c elementor-widget elementor-widget-heading\" data-id=\"942c97c\" data-element_type=\"widget\" data-widget_type=\"heading.default\">\n\t\t\t\t<div class=\"elementor-widget-container\">\n\t\t\t\t\t<h3 class=\"elementor-heading-title elementor-size-default\">1. Adobe\n<\/h3>\t\t\t\t<\/div>\n\t\t\t\t<\/div>\n\t\t\t\t<div class=\"elementor-element elementor-element-fe89ad5 elementor-widget elementor-widget-image\" data-id=\"fe89ad5\" data-element_type=\"widget\" data-widget_type=\"image.default\">\n\t\t\t\t<div class=\"elementor-widget-container\">\n\t\t\t\t\t\t\t\t\t\t\t\t<figure class=\"wp-caption\">\n\t\t\t\t\t\t\t\t\t\t\t<a href=\"https:\/\/www.adobe.com\/\" target=\"_blank\">\n\t\t\t\t\t\t\t<img loading=\"lazy\" decoding=\"async\" width=\"720\" height=\"215\" src=\"https:\/\/elementor.com\/cdn-cgi\/image\/f=auto,w=720,h=215\/blog\/wp-content\/uploads\/2021\/01\/28-adobe-favicon.png\" class=\"attachment-large size-large wp-image-46305\" alt=\"adobe-favicon\" srcset=\"https:\/\/elementor.com\/cdn-cgi\/image\/f=auto,w=720\/blog\/wp-content\/uploads\/2021\/01\/28-adobe-favicon.png 720w, https:\/\/elementor.com\/cdn-cgi\/image\/f=auto,w=300\/blog\/wp-content\/uploads\/2021\/01\/28-adobe-favicon-300x90.png 300w\" sizes=\"(max-width: 720px) 100vw, 720px\" \/>\t\t\t\t\t\t\t\t<\/a>\n\t\t\t\t\t\t\t\t\t\t\t<figcaption class=\"widget-image-caption wp-caption-text\">Source: Adobe<\/figcaption>\n\t\t\t\t\t\t\t\t\t\t<\/figure>\n\t\t\t\t\t\t\t\t\t<\/div>\n\t\t\t\t<\/div>\n\t\t\t\t<div class=\"elementor-element elementor-element-b58c981 elementor-widget elementor-widget-text-editor\" data-id=\"b58c981\" data-element_type=\"widget\" data-widget_type=\"text-editor.default\">\n\t\t\t\t<div class=\"elementor-widget-container\">\n\t\t\t\t\t\t\t\t\t<p>Adobe&#8217;s logo and favicon is a design the company has used since the early \u201890s.\u00a0<\/p><p>Despite being a letter-based favicon, this one stands out because of the smart combination of <a class=\"wpil_keyword_link\" href=\"https:\/\/elementor.com\/blog\/text-bold\/\"   title=\"bold\" data-wpil-keyword-link=\"linked\"  data-wpil-monitor-id=\"6885\">bold<\/a> red color and futuristic and abstract styling of the letter \u201cA\u201d.<\/p>\t\t\t\t\t\t\t\t<\/div>\n\t\t\t\t<\/div>\n\t\t\t\t<div class=\"elementor-element elementor-element-4d0a91f elementor-widget elementor-widget-heading\" data-id=\"4d0a91f\" data-element_type=\"widget\" data-widget_type=\"heading.default\">\n\t\t\t\t<div class=\"elementor-widget-container\">\n\t\t\t\t\t<h3 class=\"elementor-heading-title elementor-size-default\">2. CSS-Tricks\n<\/h3>\t\t\t\t<\/div>\n\t\t\t\t<\/div>\n\t\t\t\t<div class=\"elementor-element elementor-element-2d529e9 elementor-widget elementor-widget-image\" data-id=\"2d529e9\" data-element_type=\"widget\" data-widget_type=\"image.default\">\n\t\t\t\t<div class=\"elementor-widget-container\">\n\t\t\t\t\t\t\t\t\t\t\t\t<figure class=\"wp-caption\">\n\t\t\t\t\t\t\t\t\t\t\t<a href=\"https:\/\/css-tricks.com\/\" target=\"_blank\">\n\t\t\t\t\t\t\t<img loading=\"lazy\" decoding=\"async\" width=\"720\" height=\"245\" src=\"https:\/\/elementor.com\/cdn-cgi\/image\/f=auto,w=720,h=245\/blog\/wp-content\/uploads\/2021\/01\/29-css-tricks-favicon.png\" class=\"attachment-large size-large wp-image-46306\" alt=\"css-tricks-favicon\" srcset=\"https:\/\/elementor.com\/cdn-cgi\/image\/f=auto,w=720\/blog\/wp-content\/uploads\/2021\/01\/29-css-tricks-favicon.png 720w, https:\/\/elementor.com\/cdn-cgi\/image\/f=auto,w=300\/blog\/wp-content\/uploads\/2021\/01\/29-css-tricks-favicon-300x102.png 300w\" sizes=\"(max-width: 720px) 100vw, 720px\" \/>\t\t\t\t\t\t\t\t<\/a>\n\t\t\t\t\t\t\t\t\t\t\t<figcaption class=\"widget-image-caption wp-caption-text\">Source: CSS-Tricks<\/figcaption>\n\t\t\t\t\t\t\t\t\t\t<\/figure>\n\t\t\t\t\t\t\t\t\t<\/div>\n\t\t\t\t<\/div>\n\t\t\t\t<div class=\"elementor-element elementor-element-0312b9d elementor-widget elementor-widget-text-editor\" data-id=\"0312b9d\" data-element_type=\"widget\" data-widget_type=\"text-editor.default\">\n\t\t\t\t<div class=\"elementor-widget-container\">\n\t\t\t\t\t\t\t\t\t<p>The asterisk is a powerful symbol in <a class=\"wpil_keyword_link\" href=\"https:\/\/elementor.com\/blog\/what-is-css\/\"   title=\"CSS\" data-wpil-keyword-link=\"linked\"  data-wpil-monitor-id=\"4423\">CSS<\/a> coding. It&#8217;s a universal selector that instantly applies a style to all corresponding elements.\u00a0<\/p><p>CSS-Tricks has wisely used this meaningful and useful symbol to represent its brand identity around the web.<\/p>\t\t\t\t\t\t\t\t<\/div>\n\t\t\t\t<\/div>\n\t\t\t\t<div class=\"elementor-element elementor-element-8f1cb11 elementor-widget elementor-widget-heading\" data-id=\"8f1cb11\" data-element_type=\"widget\" data-widget_type=\"heading.default\">\n\t\t\t\t<div class=\"elementor-widget-container\">\n\t\t\t\t\t<h3 class=\"elementor-heading-title elementor-size-default\">3. Fandango\n<\/h3>\t\t\t\t<\/div>\n\t\t\t\t<\/div>\n\t\t\t\t<div class=\"elementor-element elementor-element-482f0f8 elementor-widget elementor-widget-image\" data-id=\"482f0f8\" data-element_type=\"widget\" data-widget_type=\"image.default\">\n\t\t\t\t<div class=\"elementor-widget-container\">\n\t\t\t\t\t\t\t\t\t\t\t\t<figure class=\"wp-caption\">\n\t\t\t\t\t\t\t\t\t\t\t<a href=\"https:\/\/www.fandango.com\/\" target=\"_blank\">\n\t\t\t\t\t\t\t<img loading=\"lazy\" decoding=\"async\" width=\"720\" height=\"222\" src=\"https:\/\/elementor.com\/cdn-cgi\/image\/f=auto,w=720,h=222\/blog\/wp-content\/uploads\/2021\/01\/30-fandango-favicon.png\" class=\"attachment-large size-large wp-image-46307\" alt=\"fandango-favicon\" srcset=\"https:\/\/elementor.com\/cdn-cgi\/image\/f=auto,w=720\/blog\/wp-content\/uploads\/2021\/01\/30-fandango-favicon.png 720w, https:\/\/elementor.com\/cdn-cgi\/image\/f=auto,w=300\/blog\/wp-content\/uploads\/2021\/01\/30-fandango-favicon-300x93.png 300w\" sizes=\"(max-width: 720px) 100vw, 720px\" \/>\t\t\t\t\t\t\t\t<\/a>\n\t\t\t\t\t\t\t\t\t\t\t<figcaption class=\"widget-image-caption wp-caption-text\">Source: Fandango<\/figcaption>\n\t\t\t\t\t\t\t\t\t\t<\/figure>\n\t\t\t\t\t\t\t\t\t<\/div>\n\t\t\t\t<\/div>\n\t\t\t\t<div class=\"elementor-element elementor-element-bd74899 elementor-widget elementor-widget-text-editor\" data-id=\"bd74899\" data-element_type=\"widget\" data-widget_type=\"text-editor.default\">\n\t\t\t\t<div class=\"elementor-widget-container\">\n\t\t\t\t\t\t\t\t\t<p>Here\u2019s another example of a unique take on a letter-based favicon. Fandango\u2019s logo is a capital \u201cF\u201d within an orange block. But it\u2019s not a square like we commonly see with favicons.\u00a0<\/p><p>This orange shape represents a movie ticket and it sits at an angle. These design traits help the letter \u201cF\u201d stand out more than other letter favicons.<\/p>\t\t\t\t\t\t\t\t<\/div>\n\t\t\t\t<\/div>\n\t\t\t\t<div class=\"elementor-element elementor-element-e10c0a0 elementor-widget elementor-widget-heading\" data-id=\"e10c0a0\" data-element_type=\"widget\" data-widget_type=\"heading.default\">\n\t\t\t\t<div class=\"elementor-widget-container\">\n\t\t\t\t\t<h3 class=\"elementor-heading-title elementor-size-default\">4. Hotels.com\n<\/h3>\t\t\t\t<\/div>\n\t\t\t\t<\/div>\n\t\t\t\t<div class=\"elementor-element elementor-element-1303c58 elementor-widget elementor-widget-image\" data-id=\"1303c58\" data-element_type=\"widget\" data-widget_type=\"image.default\">\n\t\t\t\t<div class=\"elementor-widget-container\">\n\t\t\t\t\t\t\t\t\t\t\t\t<figure class=\"wp-caption\">\n\t\t\t\t\t\t\t\t\t\t\t<a href=\"https:\/\/www.hotels.com\/\" target=\"_blank\">\n\t\t\t\t\t\t\t<img loading=\"lazy\" decoding=\"async\" width=\"720\" height=\"214\" src=\"https:\/\/elementor.com\/cdn-cgi\/image\/f=auto,w=720,h=214\/blog\/wp-content\/uploads\/2021\/01\/31-hotels-favicon.png\" class=\"attachment-large size-large wp-image-46308\" alt=\"hotels-favicon\" srcset=\"https:\/\/elementor.com\/cdn-cgi\/image\/f=auto,w=720\/blog\/wp-content\/uploads\/2021\/01\/31-hotels-favicon.png 720w, https:\/\/elementor.com\/cdn-cgi\/image\/f=auto,w=300\/blog\/wp-content\/uploads\/2021\/01\/31-hotels-favicon-300x89.png 300w\" sizes=\"(max-width: 720px) 100vw, 720px\" \/>\t\t\t\t\t\t\t\t<\/a>\n\t\t\t\t\t\t\t\t\t\t\t<figcaption class=\"widget-image-caption wp-caption-text\">Source: Hotels.com<\/figcaption>\n\t\t\t\t\t\t\t\t\t\t<\/figure>\n\t\t\t\t\t\t\t\t\t<\/div>\n\t\t\t\t<\/div>\n\t\t\t\t<div class=\"elementor-element elementor-element-491f5e4 elementor-widget elementor-widget-text-editor\" data-id=\"491f5e4\" data-element_type=\"widget\" data-widget_type=\"text-editor.default\">\n\t\t\t\t<div class=\"elementor-widget-container\">\n\t\t\t\t\t\t\t\t\t<p>Hotels.com has a 3D logo and favicon design. That alone makes it stand out against the more common flat designs we see today. The designer\u2019s also chosen not to place the letter \u201cH\u201d within box-like other letter favicons, which helps it stand out even further.\u00a0<\/p>\t\t\t\t\t\t\t\t<\/div>\n\t\t\t\t<\/div>\n\t\t\t\t<div class=\"elementor-element elementor-element-7dab68e elementor-widget elementor-widget-heading\" data-id=\"7dab68e\" data-element_type=\"widget\" data-widget_type=\"heading.default\">\n\t\t\t\t<div class=\"elementor-widget-container\">\n\t\t\t\t\t<h3 class=\"elementor-heading-title elementor-size-default\">5. Kissmetrics\n<\/h3>\t\t\t\t<\/div>\n\t\t\t\t<\/div>\n\t\t\t\t<div class=\"elementor-element elementor-element-dad8b60 elementor-widget elementor-widget-image\" data-id=\"dad8b60\" data-element_type=\"widget\" data-widget_type=\"image.default\">\n\t\t\t\t<div class=\"elementor-widget-container\">\n\t\t\t\t\t\t\t\t\t\t\t\t<figure class=\"wp-caption\">\n\t\t\t\t\t\t\t\t\t\t\t<a href=\"https:\/\/www.kissmetrics.io\/\" target=\"_blank\">\n\t\t\t\t\t\t\t<img loading=\"lazy\" decoding=\"async\" width=\"720\" height=\"230\" src=\"https:\/\/elementor.com\/cdn-cgi\/image\/f=auto,w=720,h=230\/blog\/wp-content\/uploads\/2021\/01\/32-kissmetrics-favicon.png\" class=\"attachment-large size-large wp-image-46309\" alt=\"kissmetrics-favicon\" srcset=\"https:\/\/elementor.com\/cdn-cgi\/image\/f=auto,w=720\/blog\/wp-content\/uploads\/2021\/01\/32-kissmetrics-favicon.png 720w, https:\/\/elementor.com\/cdn-cgi\/image\/f=auto,w=300\/blog\/wp-content\/uploads\/2021\/01\/32-kissmetrics-favicon-300x96.png 300w\" sizes=\"(max-width: 720px) 100vw, 720px\" \/>\t\t\t\t\t\t\t\t<\/a>\n\t\t\t\t\t\t\t\t\t\t\t<figcaption class=\"widget-image-caption wp-caption-text\">Source: Kissmetrics<\/figcaption>\n\t\t\t\t\t\t\t\t\t\t<\/figure>\n\t\t\t\t\t\t\t\t\t<\/div>\n\t\t\t\t<\/div>\n\t\t\t\t<div class=\"elementor-element elementor-element-f3e8ccb elementor-widget elementor-widget-text-editor\" data-id=\"f3e8ccb\" data-element_type=\"widget\" data-widget_type=\"text-editor.default\">\n\t\t\t\t<div class=\"elementor-widget-container\">\n\t\t\t\t\t\t\t\t\t<p>Thanks to the <a class=\"wpil_keyword_link\" href=\"https:\/\/elementor.com\/pages\/seo\/cloud-based-web-hosting\/\"   title=\"cloud\" data-wpil-keyword-link=\"linked\"  data-wpil-monitor-id=\"2707\">cloud<\/a> shape around the bar graphic icon, Kissmetrics\u2019s favicon design is both recognizable and descriptive.\u00a0<\/p><p>Even if people don&#8217;t automatically remember the favicon, the graphic makes it perfectly pretty clear what they&#8217;ll find on this site: a cloud-based metrics tool.<\/p>\t\t\t\t\t\t\t\t<\/div>\n\t\t\t\t<\/div>\n\t\t\t\t<div class=\"elementor-element elementor-element-0914ce5 elementor-widget elementor-widget-heading\" data-id=\"0914ce5\" data-element_type=\"widget\" data-widget_type=\"heading.default\">\n\t\t\t\t<div class=\"elementor-widget-container\">\n\t\t\t\t\t<h3 class=\"elementor-heading-title elementor-size-default\">6. Toast\n<\/h3>\t\t\t\t<\/div>\n\t\t\t\t<\/div>\n\t\t\t\t<div class=\"elementor-element elementor-element-d05ac06 elementor-widget elementor-widget-image\" data-id=\"d05ac06\" data-element_type=\"widget\" data-widget_type=\"image.default\">\n\t\t\t\t<div class=\"elementor-widget-container\">\n\t\t\t\t\t\t\t\t\t\t\t\t<figure class=\"wp-caption\">\n\t\t\t\t\t\t\t\t\t\t\t<a href=\"https:\/\/pos.toasttab.com\/\" target=\"_blank\">\n\t\t\t\t\t\t\t<img loading=\"lazy\" decoding=\"async\" width=\"720\" height=\"222\" src=\"https:\/\/elementor.com\/cdn-cgi\/image\/f=auto,w=720,h=222\/blog\/wp-content\/uploads\/2021\/01\/33-toast-favicon.png\" class=\"attachment-large size-large wp-image-46310\" alt=\"toast-favicon\" srcset=\"https:\/\/elementor.com\/cdn-cgi\/image\/f=auto,w=720\/blog\/wp-content\/uploads\/2021\/01\/33-toast-favicon.png 720w, https:\/\/elementor.com\/cdn-cgi\/image\/f=auto,w=300\/blog\/wp-content\/uploads\/2021\/01\/33-toast-favicon-300x93.png 300w\" sizes=\"(max-width: 720px) 100vw, 720px\" \/>\t\t\t\t\t\t\t\t<\/a>\n\t\t\t\t\t\t\t\t\t\t\t<figcaption class=\"widget-image-caption wp-caption-text\">Source: Toast<\/figcaption>\n\t\t\t\t\t\t\t\t\t\t<\/figure>\n\t\t\t\t\t\t\t\t\t<\/div>\n\t\t\t\t<\/div>\n\t\t\t\t<div class=\"elementor-element elementor-element-e6eca1c elementor-widget elementor-widget-text-editor\" data-id=\"e6eca1c\" data-element_type=\"widget\" data-widget_type=\"text-editor.default\">\n\t\t\t\t<div class=\"elementor-widget-container\">\n\t\t\t\t\t\t\t\t\t<p>Sadly, not enough restaurants and companies that support these establishments take the time to utilize their greatest asset in favicon design: Food and drink. Toast does though.\u00a0<\/p><p>This point-of-sale software provider has an instantly recognizable icon that matches the name of the company.<\/p>\t\t\t\t\t\t\t\t<\/div>\n\t\t\t\t<\/div>\n\t\t\t\t<div class=\"elementor-element elementor-element-acf5751 elementor-widget elementor-widget-heading\" data-id=\"acf5751\" data-element_type=\"widget\" data-widget_type=\"heading.default\">\n\t\t\t\t<div class=\"elementor-widget-container\">\n\t\t\t\t\t<h3 class=\"elementor-heading-title elementor-size-default\">7. Turbotax\n<\/h3>\t\t\t\t<\/div>\n\t\t\t\t<\/div>\n\t\t\t\t<div class=\"elementor-element elementor-element-a8ca6f4 elementor-widget elementor-widget-image\" data-id=\"a8ca6f4\" data-element_type=\"widget\" data-widget_type=\"image.default\">\n\t\t\t\t<div class=\"elementor-widget-container\">\n\t\t\t\t\t\t\t\t\t\t\t\t<figure class=\"wp-caption\">\n\t\t\t\t\t\t\t\t\t\t\t<a href=\"https:\/\/turbotax.intuit.com\/\" target=\"_blank\">\n\t\t\t\t\t\t\t<img loading=\"lazy\" decoding=\"async\" width=\"720\" height=\"301\" src=\"https:\/\/elementor.com\/cdn-cgi\/image\/f=auto,w=720,h=301\/blog\/wp-content\/uploads\/2021\/01\/34-turbotax-favicon.png\" class=\"attachment-large size-large wp-image-46311\" alt=\"turbotax-favicon\" srcset=\"https:\/\/elementor.com\/cdn-cgi\/image\/f=auto,w=720\/blog\/wp-content\/uploads\/2021\/01\/34-turbotax-favicon.png 720w, https:\/\/elementor.com\/cdn-cgi\/image\/f=auto,w=300\/blog\/wp-content\/uploads\/2021\/01\/34-turbotax-favicon-300x125.png 300w\" sizes=\"(max-width: 720px) 100vw, 720px\" \/>\t\t\t\t\t\t\t\t<\/a>\n\t\t\t\t\t\t\t\t\t\t\t<figcaption class=\"widget-image-caption wp-caption-text\">Source: TurboTax<\/figcaption>\n\t\t\t\t\t\t\t\t\t\t<\/figure>\n\t\t\t\t\t\t\t\t\t<\/div>\n\t\t\t\t<\/div>\n\t\t\t\t<div class=\"elementor-element elementor-element-89d2908 elementor-widget elementor-widget-text-editor\" data-id=\"89d2908\" data-element_type=\"widget\" data-widget_type=\"text-editor.default\">\n\t\t\t\t<div class=\"elementor-widget-container\">\n\t\t\t\t\t\t\t\t\t<p>TurboTax\u2019s favicon is designed simply enough. It\u2019s a white checkmark within a red circle.\u00a0<\/p><p>While this symbol might seem understated, it actually has a ton of significance for taxpayers. A checkmark refers to completed tasks (like uploading revenue) as well as completed steps (like receiving a tax refund).<\/p>\t\t\t\t\t\t\t\t<\/div>\n\t\t\t\t<\/div>\n\t\t\t\t<div class=\"elementor-element elementor-element-10d7032 elementor-widget elementor-widget-heading\" data-id=\"10d7032\" data-element_type=\"widget\" data-widget_type=\"heading.default\">\n\t\t\t\t<div class=\"elementor-widget-container\">\n\t\t\t\t\t<h3 class=\"elementor-heading-title elementor-size-default\">8. Twitter\n<\/h3>\t\t\t\t<\/div>\n\t\t\t\t<\/div>\n\t\t\t\t<div class=\"elementor-element elementor-element-6951df3 elementor-widget elementor-widget-image\" data-id=\"6951df3\" data-element_type=\"widget\" data-widget_type=\"image.default\">\n\t\t\t\t<div class=\"elementor-widget-container\">\n\t\t\t\t\t\t\t\t\t\t\t\t<figure class=\"wp-caption\">\n\t\t\t\t\t\t\t\t\t\t\t<a href=\"https:\/\/twitter.com\/\" target=\"_blank\">\n\t\t\t\t\t\t\t<img loading=\"lazy\" decoding=\"async\" width=\"720\" height=\"187\" src=\"https:\/\/elementor.com\/cdn-cgi\/image\/f=auto,w=720,h=187\/blog\/wp-content\/uploads\/2021\/01\/35-twitter-favicon.png\" class=\"attachment-large size-large wp-image-46312\" alt=\"twitter-favicon\" srcset=\"https:\/\/elementor.com\/cdn-cgi\/image\/f=auto,w=720\/blog\/wp-content\/uploads\/2021\/01\/35-twitter-favicon.png 720w, https:\/\/elementor.com\/cdn-cgi\/image\/f=auto,w=300\/blog\/wp-content\/uploads\/2021\/01\/35-twitter-favicon-300x78.png 300w\" sizes=\"(max-width: 720px) 100vw, 720px\" \/>\t\t\t\t\t\t\t\t<\/a>\n\t\t\t\t\t\t\t\t\t\t\t<figcaption class=\"widget-image-caption wp-caption-text\">Source: Twitter<\/figcaption>\n\t\t\t\t\t\t\t\t\t\t<\/figure>\n\t\t\t\t\t\t\t\t\t<\/div>\n\t\t\t\t<\/div>\n\t\t\t\t<div class=\"elementor-element elementor-element-0db4bcb elementor-widget elementor-widget-text-editor\" data-id=\"0db4bcb\" data-element_type=\"widget\" data-widget_type=\"text-editor.default\">\n\t\t\t\t<div class=\"elementor-widget-container\">\n\t\t\t\t\t\t\t\t\t<p>Twitter has one of the most well-known logos in the world, so of course, it\u2019s going to use its Twitter bird to represent it everywhere else on the web.\u00a0<\/p><p>It\u2019s a cute design. The bird is small, doesn\u2019t appear menacing (like a scavenging bird would) and it\u2019s a very positive shade of blue.<\/p>\t\t\t\t\t\t\t\t<\/div>\n\t\t\t\t<\/div>\n\t\t\t\t<div class=\"elementor-element elementor-element-1db8f1f elementor-widget elementor-widget-heading\" data-id=\"1db8f1f\" data-element_type=\"widget\" data-widget_type=\"heading.default\">\n\t\t\t\t<div class=\"elementor-widget-container\">\n\t\t\t\t\t<h3 class=\"elementor-heading-title elementor-size-default\">9. Zillow\n<\/h3>\t\t\t\t<\/div>\n\t\t\t\t<\/div>\n\t\t\t\t<div class=\"elementor-element elementor-element-e4bc205 elementor-widget elementor-widget-image\" data-id=\"e4bc205\" data-element_type=\"widget\" data-widget_type=\"image.default\">\n\t\t\t\t<div class=\"elementor-widget-container\">\n\t\t\t\t\t\t\t\t\t\t\t\t<figure class=\"wp-caption\">\n\t\t\t\t\t\t\t\t\t\t\t<a href=\"https:\/\/www.zillow.com\/\" target=\"_blank\">\n\t\t\t\t\t\t\t<img loading=\"lazy\" decoding=\"async\" width=\"720\" height=\"141\" src=\"https:\/\/elementor.com\/cdn-cgi\/image\/f=auto,w=720,h=141\/blog\/wp-content\/uploads\/2021\/01\/36-zillow-favicon.png\" class=\"attachment-large size-large wp-image-46313\" alt=\"zillow-favicon\" srcset=\"https:\/\/elementor.com\/cdn-cgi\/image\/f=auto,w=720\/blog\/wp-content\/uploads\/2021\/01\/36-zillow-favicon.png 720w, https:\/\/elementor.com\/cdn-cgi\/image\/f=auto,w=300\/blog\/wp-content\/uploads\/2021\/01\/36-zillow-favicon-300x59.png 300w\" sizes=\"(max-width: 720px) 100vw, 720px\" \/>\t\t\t\t\t\t\t\t<\/a>\n\t\t\t\t\t\t\t\t\t\t\t<figcaption class=\"widget-image-caption wp-caption-text\">Source: Zillow<\/figcaption>\n\t\t\t\t\t\t\t\t\t\t<\/figure>\n\t\t\t\t\t\t\t\t\t<\/div>\n\t\t\t\t<\/div>\n\t\t\t\t<div class=\"elementor-element elementor-element-953ab2f elementor-widget elementor-widget-text-editor\" data-id=\"953ab2f\" data-element_type=\"widget\" data-widget_type=\"text-editor.default\">\n\t\t\t\t<div class=\"elementor-widget-container\">\n\t\t\t\t\t\t\t\t\t<p>Zillow\u2019s favicon is neat because it brings some life to the otherwise <a class=\"wpil_keyword_link\" href=\"https:\/\/elementor.com\/blog\/web-safe-fonts\/\"   title=\"safe font\" data-wpil-keyword-link=\"linked\"  data-wpil-monitor-id=\"4919\">safe font<\/a> choice used to spell out the company name. The letter \u201cZ\u201d looks hand-drawn and is encapsulated by a house graphic.\u00a0<\/p><p>It&#8217;s a favicon that&#8217;s impossible to miss or to immediately know what it belongs to.<\/p>\t\t\t\t\t\t\t\t<\/div>\n\t\t\t\t<\/div>\n\t\t\t\t<div class=\"elementor-element elementor-element-b540c8f elementor-widget elementor-widget-heading\" data-id=\"b540c8f\" data-element_type=\"widget\" data-widget_type=\"heading.default\">\n\t\t\t\t<div class=\"elementor-widget-container\">\n\t\t\t\t\t<h2 class=\"elementor-heading-title elementor-size-default\">Create a Favicon To Make Your Website Stand Out in the Right Places\n<\/h2>\t\t\t\t<\/div>\n\t\t\t\t<\/div>\n\t\t\t\t<div class=\"elementor-element elementor-element-cc7bd4e elementor-widget elementor-widget-text-editor\" data-id=\"cc7bd4e\" data-element_type=\"widget\" data-widget_type=\"text-editor.default\">\n\t\t\t\t<div class=\"elementor-widget-container\">\n\t\t\t\t\t\t\t\t\t<p>The favicon might seem like an insignificant thing in the grand scheme of designing a website.\u00a0<\/p><p>But, if you think about it, a favicon gets more airplay than the website itself. And if that tiny icon is within users\u2019 fields of vision in browser tabs, search histories, RSS feeds and more, you better make sure it makes a strong impression.\u00a0<\/p><p>You can do that by designing it to look good and recognizable \u2014 at any size, at any resolution \u2014 and then saving it in file formats accepted by all browsers and devices.\u00a0<\/p><p>Don\u2019t forget to have a little fun with it, too. Bright colors, unique shapes, and hidden letters can make a good-looking favicon much more memorable.<\/p>\t\t\t\t\t\t\t\t<\/div>\n\t\t\t\t<\/div>\n\t\t\t\t\t<\/div>\n\t\t<\/div>\n\t\t\t\t\t<\/div>\n\t\t<\/section>\n\t\t\t\t<\/div>\n\t\t","protected":false},"excerpt":{"rendered":"<p>Favicons are an integral part of building up a brand and making sure that your website is immediately recognizable on browsers and apps on any device. Discover how to use them correctly to your advantage.<\/p>\n","protected":false},"author":188873,"featured_media":47554,"comment_status":"open","ping_status":"open","sticky":false,"template":"","format":"standard","meta":{"_acf_changed":false,"footnotes":""},"categories":[32],"tags":[79],"marketing_persona":[47,51],"marketing_intent":[48],"class_list":["post-46275","post","type-post","status-publish","format-standard","has-post-thumbnail","hentry","category-design","tag-build"],"acf":[],"yoast_head":"<!-- This site is optimized with the Yoast SEO plugin v26.7 - https:\/\/yoast.com\/wordpress\/plugins\/seo\/ -->\n<title>How to Create the Perfect Favicon | Elementor<\/title>\n<meta name=\"description\" content=\"Favicons are an integral part of building up your brand and a recognizable website. Discover how to use them correctly to your advantage.\u200b\" \/>\n<meta name=\"robots\" content=\"index, follow, max-snippet:-1, max-image-preview:large, max-video-preview:-1\" \/>\n<link rel=\"canonical\" href=\"https:\/\/elementor.com\/blog\/favicon-complete-guide\/\" \/>\n<meta property=\"og:locale\" content=\"en_US\" \/>\n<meta property=\"og:type\" content=\"article\" \/>\n<meta property=\"og:title\" content=\"How to Create the Perfect Favicon | Elementor\" \/>\n<meta property=\"og:description\" content=\"Favicons are an integral part of building up your brand and a recognizable website. Discover how to use them correctly to your advantage.\u200b\" \/>\n<meta property=\"og:url\" content=\"https:\/\/elementor.com\/blog\/favicon-complete-guide\/\" \/>\n<meta property=\"og:site_name\" content=\"Blog\" \/>\n<meta property=\"article:publisher\" content=\"https:\/\/www.facebook.com\/elemntor\/\" \/>\n<meta property=\"article:published_time\" content=\"2021-01-18T13:17:24+00:00\" \/>\n<meta property=\"og:image\" content=\"https:\/\/oovolzcf.elementor.cloud\/wp-content\/uploads\/2021\/01\/How-to-Create-the-Perfect-Favicon_1200x628-2-copy.png\" \/>\n\t<meta property=\"og:image:width\" content=\"1200\" \/>\n\t<meta property=\"og:image:height\" content=\"629\" \/>\n\t<meta property=\"og:image:type\" content=\"image\/png\" \/>\n<meta name=\"author\" content=\"Sergei Davidov\" \/>\n<meta name=\"twitter:card\" content=\"summary_large_image\" \/>\n<meta name=\"twitter:creator\" content=\"@elemntor\" \/>\n<meta name=\"twitter:site\" content=\"@elemntor\" \/>\n<meta name=\"twitter:label1\" content=\"Written by\" \/>\n\t<meta name=\"twitter:data1\" content=\"Sergei Davidov\" \/>\n<script type=\"application\/ld+json\" class=\"yoast-schema-graph\">{\"@context\":\"https:\/\/schema.org\",\"@graph\":[{\"@type\":\"Article\",\"@id\":\"https:\/\/elementor.com\/blog\/favicon-complete-guide\/#article\",\"isPartOf\":{\"@id\":\"https:\/\/elementor.com\/blog\/favicon-complete-guide\/\"},\"author\":{\"name\":\"Sergei Davidov\",\"@id\":\"https:\/\/elementor.com\/blog\/#\/schema\/person\/87a6d63997f5dd9f2105a3a769c759c9\"},\"headline\":\"How to Create the Perfect Favicon\",\"datePublished\":\"2021-01-18T13:17:24+00:00\",\"mainEntityOfPage\":{\"@id\":\"https:\/\/elementor.com\/blog\/favicon-complete-guide\/\"},\"wordCount\":3515,\"commentCount\":0,\"publisher\":{\"@id\":\"https:\/\/elementor.com\/blog\/#organization\"},\"image\":{\"@id\":\"https:\/\/elementor.com\/blog\/favicon-complete-guide\/#primaryimage\"},\"thumbnailUrl\":\"https:\/\/elementor.com\/blog\/wp-content\/uploads\/2021\/01\/How-to-Create-the-Perfect-Favicon_1200x628-copy.png\",\"keywords\":[\"Build\"],\"articleSection\":[\"Web Design\"],\"inLanguage\":\"en-US\",\"potentialAction\":[{\"@type\":\"CommentAction\",\"name\":\"Comment\",\"target\":[\"https:\/\/elementor.com\/blog\/favicon-complete-guide\/#respond\"]}]},{\"@type\":\"WebPage\",\"@id\":\"https:\/\/elementor.com\/blog\/favicon-complete-guide\/\",\"url\":\"https:\/\/elementor.com\/blog\/favicon-complete-guide\/\",\"name\":\"How to Create the Perfect Favicon | Elementor\",\"isPartOf\":{\"@id\":\"https:\/\/elementor.com\/blog\/#website\"},\"primaryImageOfPage\":{\"@id\":\"https:\/\/elementor.com\/blog\/favicon-complete-guide\/#primaryimage\"},\"image\":{\"@id\":\"https:\/\/elementor.com\/blog\/favicon-complete-guide\/#primaryimage\"},\"thumbnailUrl\":\"https:\/\/elementor.com\/blog\/wp-content\/uploads\/2021\/01\/How-to-Create-the-Perfect-Favicon_1200x628-copy.png\",\"datePublished\":\"2021-01-18T13:17:24+00:00\",\"description\":\"Favicons are an integral part of building up your brand and a recognizable website. Discover how to use them correctly to your advantage.\u200b\",\"breadcrumb\":{\"@id\":\"https:\/\/elementor.com\/blog\/favicon-complete-guide\/#breadcrumb\"},\"inLanguage\":\"en-US\",\"potentialAction\":[{\"@type\":\"ReadAction\",\"target\":[\"https:\/\/elementor.com\/blog\/favicon-complete-guide\/\"]}]},{\"@type\":\"ImageObject\",\"inLanguage\":\"en-US\",\"@id\":\"https:\/\/elementor.com\/blog\/favicon-complete-guide\/#primaryimage\",\"url\":\"https:\/\/elementor.com\/blog\/wp-content\/uploads\/2021\/01\/How-to-Create-the-Perfect-Favicon_1200x628-copy.png\",\"contentUrl\":\"https:\/\/elementor.com\/blog\/wp-content\/uploads\/2021\/01\/How-to-Create-the-Perfect-Favicon_1200x628-copy.png\",\"width\":1200,\"height\":629},{\"@type\":\"BreadcrumbList\",\"@id\":\"https:\/\/elementor.com\/blog\/favicon-complete-guide\/#breadcrumb\",\"itemListElement\":[{\"@type\":\"ListItem\",\"position\":1,\"name\":\"Blog\",\"item\":\"https:\/\/elementor.com\/blog\/\"},{\"@type\":\"ListItem\",\"position\":2,\"name\":\"Web Design\",\"item\":\"https:\/\/elementor.com\/blog\/category\/design\/\"},{\"@type\":\"ListItem\",\"position\":3,\"name\":\"How to Create the Perfect Favicon\"}]},{\"@type\":\"WebSite\",\"@id\":\"https:\/\/elementor.com\/blog\/#website\",\"url\":\"https:\/\/elementor.com\/blog\/\",\"name\":\"Elementor\",\"description\":\"Website Builder for WordPress\",\"publisher\":{\"@id\":\"https:\/\/elementor.com\/blog\/#organization\"},\"potentialAction\":[{\"@type\":\"SearchAction\",\"target\":{\"@type\":\"EntryPoint\",\"urlTemplate\":\"https:\/\/elementor.com\/blog\/?s={search_term_string}\"},\"query-input\":{\"@type\":\"PropertyValueSpecification\",\"valueRequired\":true,\"valueName\":\"search_term_string\"}}],\"inLanguage\":\"en-US\"},{\"@type\":\"Organization\",\"@id\":\"https:\/\/elementor.com\/blog\/#organization\",\"name\":\"Elementor\",\"url\":\"https:\/\/elementor.com\/blog\/\",\"logo\":{\"@type\":\"ImageObject\",\"inLanguage\":\"en-US\",\"@id\":\"https:\/\/elementor.com\/blog\/#\/schema\/logo\/image\/\",\"url\":\"https:\/\/elementor.com\/blog\/wp-content\/uploads\/2025\/06\/images.png\",\"contentUrl\":\"https:\/\/elementor.com\/blog\/wp-content\/uploads\/2025\/06\/images.png\",\"width\":225,\"height\":225,\"caption\":\"Elementor\"},\"image\":{\"@id\":\"https:\/\/elementor.com\/blog\/#\/schema\/logo\/image\/\"},\"sameAs\":[\"https:\/\/www.facebook.com\/elemntor\/\",\"https:\/\/x.com\/elemntor\",\"https:\/\/www.instagram.com\/elementor\/\",\"https:\/\/www.youtube.com\/channel\/UCt9kG_EDX8zwGSC1-ycJJVA?sub_confirmation=1\",\"https:\/\/en.wikipedia.org\/wiki\/Elementor\"]},{\"@type\":\"Person\",\"@id\":\"https:\/\/elementor.com\/blog\/#\/schema\/person\/87a6d63997f5dd9f2105a3a769c759c9\",\"name\":\"Sergei Davidov\",\"image\":{\"@type\":\"ImageObject\",\"inLanguage\":\"en-US\",\"@id\":\"https:\/\/elementor.com\/blog\/#\/schema\/person\/image\/\",\"url\":\"https:\/\/secure.gravatar.com\/avatar\/0a5edd915cad15385a7184ea9ce23710fe08edb3d605ede2f99cc4e7e65f04ad?s=96&d=mm&r=g\",\"contentUrl\":\"https:\/\/secure.gravatar.com\/avatar\/0a5edd915cad15385a7184ea9ce23710fe08edb3d605ede2f99cc4e7e65f04ad?s=96&d=mm&r=g\",\"caption\":\"Sergei Davidov\"},\"description\":\"Sergei Davidov is a content creator at Elementor. His favorite topics are gadgets, advances in science, new apps and software solutions. He enjoys spicy food, reading books and listening to elevator music.\",\"url\":\"https:\/\/elementor.com\/blog\/author\/sdavidov\/\"}]}<\/script>\n<!-- \/ Yoast SEO plugin. -->","yoast_head_json":{"title":"How to Create the Perfect Favicon | Elementor","description":"Favicons are an integral part of building up your brand and a recognizable website. Discover how to use them correctly to your advantage.\u200b","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:\/\/elementor.com\/blog\/favicon-complete-guide\/","og_locale":"en_US","og_type":"article","og_title":"How to Create the Perfect Favicon | Elementor","og_description":"Favicons are an integral part of building up your brand and a recognizable website. Discover how to use them correctly to your advantage.\u200b","og_url":"https:\/\/elementor.com\/blog\/favicon-complete-guide\/","og_site_name":"Blog","article_publisher":"https:\/\/www.facebook.com\/elemntor\/","article_published_time":"2021-01-18T13:17:24+00:00","og_image":[{"width":1200,"height":629,"url":"https:\/\/oovolzcf.elementor.cloud\/wp-content\/uploads\/2021\/01\/How-to-Create-the-Perfect-Favicon_1200x628-2-copy.png","type":"image\/png"}],"author":"Sergei Davidov","twitter_card":"summary_large_image","twitter_creator":"@elemntor","twitter_site":"@elemntor","twitter_misc":{"Written by":"Sergei Davidov"},"schema":{"@context":"https:\/\/schema.org","@graph":[{"@type":"Article","@id":"https:\/\/elementor.com\/blog\/favicon-complete-guide\/#article","isPartOf":{"@id":"https:\/\/elementor.com\/blog\/favicon-complete-guide\/"},"author":{"name":"Sergei Davidov","@id":"https:\/\/elementor.com\/blog\/#\/schema\/person\/87a6d63997f5dd9f2105a3a769c759c9"},"headline":"How to Create the Perfect Favicon","datePublished":"2021-01-18T13:17:24+00:00","mainEntityOfPage":{"@id":"https:\/\/elementor.com\/blog\/favicon-complete-guide\/"},"wordCount":3515,"commentCount":0,"publisher":{"@id":"https:\/\/elementor.com\/blog\/#organization"},"image":{"@id":"https:\/\/elementor.com\/blog\/favicon-complete-guide\/#primaryimage"},"thumbnailUrl":"https:\/\/elementor.com\/blog\/wp-content\/uploads\/2021\/01\/How-to-Create-the-Perfect-Favicon_1200x628-copy.png","keywords":["Build"],"articleSection":["Web Design"],"inLanguage":"en-US","potentialAction":[{"@type":"CommentAction","name":"Comment","target":["https:\/\/elementor.com\/blog\/favicon-complete-guide\/#respond"]}]},{"@type":"WebPage","@id":"https:\/\/elementor.com\/blog\/favicon-complete-guide\/","url":"https:\/\/elementor.com\/blog\/favicon-complete-guide\/","name":"How to Create the Perfect Favicon | Elementor","isPartOf":{"@id":"https:\/\/elementor.com\/blog\/#website"},"primaryImageOfPage":{"@id":"https:\/\/elementor.com\/blog\/favicon-complete-guide\/#primaryimage"},"image":{"@id":"https:\/\/elementor.com\/blog\/favicon-complete-guide\/#primaryimage"},"thumbnailUrl":"https:\/\/elementor.com\/blog\/wp-content\/uploads\/2021\/01\/How-to-Create-the-Perfect-Favicon_1200x628-copy.png","datePublished":"2021-01-18T13:17:24+00:00","description":"Favicons are an integral part of building up your brand and a recognizable website. Discover how to use them correctly to your advantage.\u200b","breadcrumb":{"@id":"https:\/\/elementor.com\/blog\/favicon-complete-guide\/#breadcrumb"},"inLanguage":"en-US","potentialAction":[{"@type":"ReadAction","target":["https:\/\/elementor.com\/blog\/favicon-complete-guide\/"]}]},{"@type":"ImageObject","inLanguage":"en-US","@id":"https:\/\/elementor.com\/blog\/favicon-complete-guide\/#primaryimage","url":"https:\/\/elementor.com\/blog\/wp-content\/uploads\/2021\/01\/How-to-Create-the-Perfect-Favicon_1200x628-copy.png","contentUrl":"https:\/\/elementor.com\/blog\/wp-content\/uploads\/2021\/01\/How-to-Create-the-Perfect-Favicon_1200x628-copy.png","width":1200,"height":629},{"@type":"BreadcrumbList","@id":"https:\/\/elementor.com\/blog\/favicon-complete-guide\/#breadcrumb","itemListElement":[{"@type":"ListItem","position":1,"name":"Blog","item":"https:\/\/elementor.com\/blog\/"},{"@type":"ListItem","position":2,"name":"Web Design","item":"https:\/\/elementor.com\/blog\/category\/design\/"},{"@type":"ListItem","position":3,"name":"How to Create the Perfect Favicon"}]},{"@type":"WebSite","@id":"https:\/\/elementor.com\/blog\/#website","url":"https:\/\/elementor.com\/blog\/","name":"Elementor","description":"Website Builder for WordPress","publisher":{"@id":"https:\/\/elementor.com\/blog\/#organization"},"potentialAction":[{"@type":"SearchAction","target":{"@type":"EntryPoint","urlTemplate":"https:\/\/elementor.com\/blog\/?s={search_term_string}"},"query-input":{"@type":"PropertyValueSpecification","valueRequired":true,"valueName":"search_term_string"}}],"inLanguage":"en-US"},{"@type":"Organization","@id":"https:\/\/elementor.com\/blog\/#organization","name":"Elementor","url":"https:\/\/elementor.com\/blog\/","logo":{"@type":"ImageObject","inLanguage":"en-US","@id":"https:\/\/elementor.com\/blog\/#\/schema\/logo\/image\/","url":"https:\/\/elementor.com\/blog\/wp-content\/uploads\/2025\/06\/images.png","contentUrl":"https:\/\/elementor.com\/blog\/wp-content\/uploads\/2025\/06\/images.png","width":225,"height":225,"caption":"Elementor"},"image":{"@id":"https:\/\/elementor.com\/blog\/#\/schema\/logo\/image\/"},"sameAs":["https:\/\/www.facebook.com\/elemntor\/","https:\/\/x.com\/elemntor","https:\/\/www.instagram.com\/elementor\/","https:\/\/www.youtube.com\/channel\/UCt9kG_EDX8zwGSC1-ycJJVA?sub_confirmation=1","https:\/\/en.wikipedia.org\/wiki\/Elementor"]},{"@type":"Person","@id":"https:\/\/elementor.com\/blog\/#\/schema\/person\/87a6d63997f5dd9f2105a3a769c759c9","name":"Sergei Davidov","image":{"@type":"ImageObject","inLanguage":"en-US","@id":"https:\/\/elementor.com\/blog\/#\/schema\/person\/image\/","url":"https:\/\/secure.gravatar.com\/avatar\/0a5edd915cad15385a7184ea9ce23710fe08edb3d605ede2f99cc4e7e65f04ad?s=96&d=mm&r=g","contentUrl":"https:\/\/secure.gravatar.com\/avatar\/0a5edd915cad15385a7184ea9ce23710fe08edb3d605ede2f99cc4e7e65f04ad?s=96&d=mm&r=g","caption":"Sergei Davidov"},"description":"Sergei Davidov is a content creator at Elementor. His favorite topics are gadgets, advances in science, new apps and software solutions. He enjoys spicy food, reading books and listening to elevator music.","url":"https:\/\/elementor.com\/blog\/author\/sdavidov\/"}]}},"_links":{"self":[{"href":"https:\/\/elementor.com\/blog\/wp-json\/wp\/v2\/posts\/46275","targetHints":{"allow":["GET"]}}],"collection":[{"href":"https:\/\/elementor.com\/blog\/wp-json\/wp\/v2\/posts"}],"about":[{"href":"https:\/\/elementor.com\/blog\/wp-json\/wp\/v2\/types\/post"}],"author":[{"embeddable":true,"href":"https:\/\/elementor.com\/blog\/wp-json\/wp\/v2\/users\/188873"}],"replies":[{"embeddable":true,"href":"https:\/\/elementor.com\/blog\/wp-json\/wp\/v2\/comments?post=46275"}],"version-history":[{"count":10,"href":"https:\/\/elementor.com\/blog\/wp-json\/wp\/v2\/posts\/46275\/revisions"}],"predecessor-version":[{"id":93753,"href":"https:\/\/elementor.com\/blog\/wp-json\/wp\/v2\/posts\/46275\/revisions\/93753"}],"wp:featuredmedia":[{"embeddable":true,"href":"https:\/\/elementor.com\/blog\/wp-json\/wp\/v2\/media\/47554"}],"wp:attachment":[{"href":"https:\/\/elementor.com\/blog\/wp-json\/wp\/v2\/media?parent=46275"}],"wp:term":[{"taxonomy":"category","embeddable":true,"href":"https:\/\/elementor.com\/blog\/wp-json\/wp\/v2\/categories?post=46275"},{"taxonomy":"post_tag","embeddable":true,"href":"https:\/\/elementor.com\/blog\/wp-json\/wp\/v2\/tags?post=46275"},{"taxonomy":"marketing_persona","embeddable":true,"href":"https:\/\/elementor.com\/blog\/wp-json\/wp\/v2\/marketing_persona?post=46275"},{"taxonomy":"marketing_intent","embeddable":true,"href":"https:\/\/elementor.com\/blog\/wp-json\/wp\/v2\/marketing_intent?post=46275"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}