{"id":264,"date":"2011-10-17T14:16:43","date_gmt":"2011-10-17T14:16:43","guid":{"rendered":"https:\/\/www.inmotionhosting.com\/support\/2011\/10\/17\/how-to-create-a-favicon-for-your-website\/"},"modified":"2021-08-16T23:50:56","modified_gmt":"2021-08-17T03:50:56","slug":"how-to-create-a-favicon-for-your-website","status":"publish","type":"post","link":"https:\/\/www.inmotionhosting.com\/support\/website\/how-to-create-a-favicon-for-your-website\/","title":{"rendered":"How to add a Favicon for your Website"},"content":{"rendered":"<p><a href=\"\/support\/wp-content\/uploads\/2011\/10\/edu_howto_add-favicon_create-favicon-1.gif\" rel=\"lightbox-0\"><img decoding=\"async\" width=\"427\" height=\"295\" src=\"https:\/\/www.inmotionhosting.com\/support\/wp-content\/uploads\/2011\/10\/edu_howto_add-favicon_create-favicon-1.gif\" class=\"optimized-lcp-image\" alt=\"InMotion favicon sample\" loading=\"eager\" fetchpriority=\"high\" sizes=\"(max-width: 768px) 100vw, 768px\"><\/a>When you visit a website, there is an image in the browser tab that displays for each site (See image to the right). This is called a \u201c<em>favicon<\/em>.\u201d The favicon image is in the .ico file format. You can have other file formats; however, this article will only explain how to use the .ico format. The .ico format is universally accepted in all browsers. To create your own favicon, you can <a href=\"\/support\/\" target=\"_blank\" title=\"Click here to use our favicon generator\" rel=\"noopener noreferrer\">use our Favicon Generator<\/a> In this article, you\u2019ll learn how to <strong>add the favicon to your site<\/strong>.<\/p>\n<p class=\"alert alert-info\">You will want to name your favicon image \u201c<em>favicon.ico<\/em>\u201c. Also, when creating a favicon, you will want to make sure your image is square and not rectangle.<\/p>\n<p>Once you get your favicon generated, you can upload it to your server and add code to your site to display your own image in the browser tab. Below are the steps to get your own favicon working on our server.<br style=\"clear: both;\"><\/p>\n<h2>Steps to add a favicon to your site<\/h2>\n<ol class=\"article_list\">\n<li><a href=\"\/support\/edu\/cpanel\/how-to-log-into-cpanel\/\" target=\"_blank\" title=\"Click here for info\" rel=\"noopener noreferrer\">Login into your cPanel<\/a>.<\/li>\n<li><a href=\"\/support\/edu\/cpanel\/using-file-manager-in-cpanel\/\" target=\"_blank\" title=\"Click here for info\" rel=\"noopener noreferrer\">Go to the File Manager<\/a>, Select your directory for your site (In this case the main domain public_html location) and Click Go.<\/li>\n<li><a href=\"\/support\/website\/how-to-edit-a-file\/\" target=\"_blank\" title=\"How do I upload a file on my server?\" rel=\"noopener noreferrer\">Upload the favicon to your server<\/a>.<\/li>\n<li><a href=\"\/support\/wp-content\/uploads\/2011\/10\/edu_howto_add-favicon_create-favicon-2.gif\" rel=\"lightbox-0\"><img decoding=\"async\" alt=\"Where the code goes in the head section\" class=\"std_ss\" src=\"https:\/\/www.inmotionhosting.com\/support\/wp-content\/uploads\/2011\/10\/edu_howto_add-favicon_create-favicon-2.gif\" style=\"float: right; margin: 0px 0px 15px 15px;\" title=\"Click here to view the larger image\" width=\"100\"><\/a><a href=\"\/support\/website\/how-to-edit-a-file\/\" target=\"_blank\" rel=\"noopener noreferrer\">Edit the source code<\/a> that contains the <strong>&lt;head&gt;<\/strong> code of your site. The head section code should look similar to the snapshot to the right. <br style=\"clear: both;\"><\/li>\n<li><a href=\"\/support\/wp-content\/uploads\/2011\/10\/edu_howto_add-favicon_create-favicon-3.gif\" rel=\"lightbox-0\"><img decoding=\"async\" alt=\"Placement of favicon link\" class=\"std_ss\" src=\"https:\/\/www.inmotionhosting.com\/support\/wp-content\/uploads\/2011\/10\/edu_howto_add-favicon_create-favicon-3.gif\" style=\"float: right; margin: 0px 0px 15px 15px;\" title=\"Click here to view the larger image\" width=\"100\"><\/a>Add the following line of code below the <strong>&lt;title&gt;<\/strong> tag.\n<pre class=\"code_block\">&lt;link rel='shortcut icon' href='favicon.ico' type='image\/x-icon' \/&gt;<\/pre>\n<p>\u00a0\u00a0<\/p><\/li>\n<li>Save the file and preview your site in your browser. You should see the favicon show in your browser.<\/li>\n<p><br style=\"clear: both;\"><\/p><\/ol>\n<p class=\"alert alert-info\"> If you do not see your favicon load in your browser, you may need to <a href=\"\/support\/website\/clear-browser-cache-android\/\" target=\"_blank\" title=\"Click here for more info\" rel=\"noopener noreferrer\">Clear your browser cache<\/a>.<\/p>\n","protected":false},"excerpt":{"rendered":"<p>When you visit a website, there is an image in the browser tab that displays for each site (See image to the right). This is called a \u201cfavicon.\u201d The favicon image is in the .ico file format. You can have other file formats; however, this article will only explain how to use the .ico format.<a class=\"moretag\" href=\"https:\/\/www.inmotionhosting.com\/support\/website\/how-to-create-a-favicon-for-your-website\/\"> Read More ><\/a><\/p>\n","protected":false},"author":2,"featured_media":0,"comment_status":"open","ping_status":"open","sticky":false,"template":"","format":"standard","meta":{"_acf_changed":false,"_jetpack_memberships_contains_paid_content":false,"footnotes":""},"categories":[4288],"tags":[],"class_list":["post-264","post","type-post","status-publish","format-standard","hentry","category-website"],"acf":[],"yoast_head":"<!-- This site is optimized with the Yoast SEO plugin v27.1.1 - https:\/\/yoast.com\/product\/yoast-seo-wordpress\/ -->\n<title>How to add a Favicon for your Website | InMotion Hosting<\/title>\n<meta name=\"description\" content=\"In this tutorial, you&#039;ll learn what a favicon is, how to create one, and how to have it show up ono your website\" \/>\n<meta name=\"robots\" content=\"index, follow, max-snippet:-1, max-image-preview:large, max-video-preview:-1\" \/>\n<link rel=\"canonical\" href=\"https:\/\/www.inmotionhosting.com\/support\/website\/how-to-create-a-favicon-for-your-website\/\" \/>\n<meta property=\"og:locale\" content=\"en_US\" \/>\n<meta property=\"og:type\" content=\"article\" \/>\n<meta property=\"og:title\" content=\"How to add a Favicon for your Website | InMotion Hosting\" \/>\n<meta property=\"og:description\" content=\"In this tutorial, you&#039;ll learn what a favicon is, how to create one, and how to have it show up ono your website\" \/>\n<meta property=\"og:url\" content=\"https:\/\/www.inmotionhosting.com\/support\/website\/how-to-create-a-favicon-for-your-website\/\" \/>\n<meta property=\"og:site_name\" content=\"InMotion Hosting Support Center\" \/>\n<meta property=\"article:publisher\" content=\"https:\/\/www.facebook.com\/inmotionhosting\/\" \/>\n<meta property=\"article:published_time\" content=\"2011-10-17T14:16:43+00:00\" \/>\n<meta property=\"article:modified_time\" content=\"2021-08-17T03:50:56+00:00\" \/>\n<meta property=\"og:image\" content=\"https:\/\/www.inmotionhosting.com\/support\/wp-content\/uploads\/2011\/10\/edu_howto_add-favicon_create-favicon-1.gif\" \/>\n<meta name=\"author\" content=\"Brad Markle\" \/>\n<meta name=\"twitter:card\" content=\"summary_large_image\" \/>\n<meta name=\"twitter:creator\" content=\"@InMotionHosting\" \/>\n<meta name=\"twitter:site\" content=\"@InMotionHosting\" \/>\n<meta name=\"twitter:label1\" content=\"Written by\" \/>\n\t<meta name=\"twitter:data1\" content=\"Brad Markle\" \/>\n\t<meta name=\"twitter:label2\" content=\"Est. reading time\" \/>\n\t<meta name=\"twitter:data2\" content=\"1 minute\" \/>\n<script type=\"application\/ld+json\" class=\"yoast-schema-graph\">{\"@context\":\"https:\/\/schema.org\",\"@graph\":[{\"@type\":\"Article\",\"@id\":\"https:\/\/www.inmotionhosting.com\/support\/website\/how-to-create-a-favicon-for-your-website\/#article\",\"isPartOf\":{\"@id\":\"https:\/\/www.inmotionhosting.com\/support\/website\/how-to-create-a-favicon-for-your-website\/\"},\"author\":{\"name\":\"Brad Markle\",\"@id\":\"https:\/\/www.inmotionhosting.com\/support\/#\/schema\/person\/5ae05d1210b0ef63c437ccedce2799bf\"},\"headline\":\"How to add a Favicon for your Website\",\"datePublished\":\"2011-10-17T14:16:43+00:00\",\"dateModified\":\"2021-08-17T03:50:56+00:00\",\"mainEntityOfPage\":{\"@id\":\"https:\/\/www.inmotionhosting.com\/support\/website\/how-to-create-a-favicon-for-your-website\/\"},\"wordCount\":286,\"commentCount\":12,\"publisher\":{\"@id\":\"https:\/\/www.inmotionhosting.com\/support\/#organization\"},\"image\":{\"@id\":\"https:\/\/www.inmotionhosting.com\/support\/website\/how-to-create-a-favicon-for-your-website\/#primaryimage\"},\"thumbnailUrl\":\"https:\/\/www.inmotionhosting.com\/support\/wp-content\/uploads\/2011\/10\/edu_howto_add-favicon_create-favicon-1.gif\",\"articleSection\":[\"Website\"],\"inLanguage\":\"en-US\",\"potentialAction\":[{\"@type\":\"CommentAction\",\"name\":\"Comment\",\"target\":[\"https:\/\/www.inmotionhosting.com\/support\/website\/how-to-create-a-favicon-for-your-website\/#respond\"]}]},{\"@type\":\"WebPage\",\"@id\":\"https:\/\/www.inmotionhosting.com\/support\/website\/how-to-create-a-favicon-for-your-website\/\",\"url\":\"https:\/\/www.inmotionhosting.com\/support\/website\/how-to-create-a-favicon-for-your-website\/\",\"name\":\"How to add a Favicon for your Website | InMotion Hosting\",\"isPartOf\":{\"@id\":\"https:\/\/www.inmotionhosting.com\/support\/#website\"},\"primaryImageOfPage\":{\"@id\":\"https:\/\/www.inmotionhosting.com\/support\/website\/how-to-create-a-favicon-for-your-website\/#primaryimage\"},\"image\":{\"@id\":\"https:\/\/www.inmotionhosting.com\/support\/website\/how-to-create-a-favicon-for-your-website\/#primaryimage\"},\"thumbnailUrl\":\"https:\/\/www.inmotionhosting.com\/support\/wp-content\/uploads\/2011\/10\/edu_howto_add-favicon_create-favicon-1.gif\",\"datePublished\":\"2011-10-17T14:16:43+00:00\",\"dateModified\":\"2021-08-17T03:50:56+00:00\",\"description\":\"In this tutorial, you'll learn what a favicon is, how to create one, and how to have it show up ono your website\",\"breadcrumb\":{\"@id\":\"https:\/\/www.inmotionhosting.com\/support\/website\/how-to-create-a-favicon-for-your-website\/#breadcrumb\"},\"inLanguage\":\"en-US\",\"potentialAction\":[{\"@type\":\"ReadAction\",\"target\":[\"https:\/\/www.inmotionhosting.com\/support\/website\/how-to-create-a-favicon-for-your-website\/\"]}]},{\"@type\":\"ImageObject\",\"inLanguage\":\"en-US\",\"@id\":\"https:\/\/www.inmotionhosting.com\/support\/website\/how-to-create-a-favicon-for-your-website\/#primaryimage\",\"url\":\"https:\/\/www.inmotionhosting.com\/support\/wp-content\/uploads\/2011\/10\/edu_howto_add-favicon_create-favicon-1.gif\",\"contentUrl\":\"https:\/\/www.inmotionhosting.com\/support\/wp-content\/uploads\/2011\/10\/edu_howto_add-favicon_create-favicon-1.gif\",\"width\":427,\"height\":295,\"caption\":\"Click here to view the larger image\"},{\"@type\":\"BreadcrumbList\",\"@id\":\"https:\/\/www.inmotionhosting.com\/support\/website\/how-to-create-a-favicon-for-your-website\/#breadcrumb\",\"itemListElement\":[{\"@type\":\"ListItem\",\"position\":1,\"name\":\"Home\",\"item\":\"https:\/\/www.inmotionhosting.com\/support\/\"},{\"@type\":\"ListItem\",\"position\":2,\"name\":\"How to add a Favicon for your Website\"}]},{\"@type\":\"WebSite\",\"@id\":\"https:\/\/www.inmotionhosting.com\/support\/#website\",\"url\":\"https:\/\/www.inmotionhosting.com\/support\/\",\"name\":\"InMotion Hosting Support Center\",\"description\":\"Web Hosting Support &amp; Tutorials\",\"publisher\":{\"@id\":\"https:\/\/www.inmotionhosting.com\/support\/#organization\"},\"potentialAction\":[{\"@type\":\"SearchAction\",\"target\":{\"@type\":\"EntryPoint\",\"urlTemplate\":\"https:\/\/www.inmotionhosting.com\/support\/?s={search_term_string}\"},\"query-input\":{\"@type\":\"PropertyValueSpecification\",\"valueRequired\":true,\"valueName\":\"search_term_string\"}}],\"inLanguage\":\"en-US\"},{\"@type\":\"Organization\",\"@id\":\"https:\/\/www.inmotionhosting.com\/support\/#organization\",\"name\":\"InMotion Hosting\",\"url\":\"https:\/\/www.inmotionhosting.com\/support\/\",\"logo\":{\"@type\":\"ImageObject\",\"inLanguage\":\"en-US\",\"@id\":\"https:\/\/www.inmotionhosting.com\/support\/#\/schema\/logo\/image\/\",\"url\":\"https:\/\/www.inmotionhosting.com\/support\/wp-content\/uploads\/2023\/02\/inmotion-hosting-logo-yoast.jpg\",\"contentUrl\":\"https:\/\/www.inmotionhosting.com\/support\/wp-content\/uploads\/2023\/02\/inmotion-hosting-logo-yoast.jpg\",\"width\":696,\"height\":696,\"caption\":\"InMotion Hosting\"},\"image\":{\"@id\":\"https:\/\/www.inmotionhosting.com\/support\/#\/schema\/logo\/image\/\"},\"sameAs\":[\"https:\/\/www.facebook.com\/inmotionhosting\/\",\"https:\/\/x.com\/InMotionHosting\"]},{\"@type\":\"Person\",\"@id\":\"https:\/\/www.inmotionhosting.com\/support\/#\/schema\/person\/5ae05d1210b0ef63c437ccedce2799bf\",\"name\":\"Brad Markle\",\"url\":\"https:\/\/www.inmotionhosting.com\/support\/author\/bradm\/\"}]}<\/script>\n<!-- \/ Yoast SEO plugin. -->","yoast_head_json":{"title":"How to add a Favicon for your Website | InMotion Hosting","description":"In this tutorial, you'll learn what a favicon is, how to create one, and how to have it show up ono your website","robots":{"index":"index","follow":"follow","max-snippet":"max-snippet:-1","max-image-preview":"max-image-preview:large","max-video-preview":"max-video-preview:-1"},"canonical":"https:\/\/www.inmotionhosting.com\/support\/website\/how-to-create-a-favicon-for-your-website\/","og_locale":"en_US","og_type":"article","og_title":"How to add a Favicon for your Website | InMotion Hosting","og_description":"In this tutorial, you'll learn what a favicon is, how to create one, and how to have it show up ono your website","og_url":"https:\/\/www.inmotionhosting.com\/support\/website\/how-to-create-a-favicon-for-your-website\/","og_site_name":"InMotion Hosting Support Center","article_publisher":"https:\/\/www.facebook.com\/inmotionhosting\/","article_published_time":"2011-10-17T14:16:43+00:00","article_modified_time":"2021-08-17T03:50:56+00:00","og_image":[{"url":"https:\/\/www.inmotionhosting.com\/support\/wp-content\/uploads\/2011\/10\/edu_howto_add-favicon_create-favicon-1.gif","type":"","width":"","height":""}],"author":"Brad Markle","twitter_card":"summary_large_image","twitter_creator":"@InMotionHosting","twitter_site":"@InMotionHosting","twitter_misc":{"Written by":"Brad Markle","Est. reading time":"1 minute"},"schema":{"@context":"https:\/\/schema.org","@graph":[{"@type":"Article","@id":"https:\/\/www.inmotionhosting.com\/support\/website\/how-to-create-a-favicon-for-your-website\/#article","isPartOf":{"@id":"https:\/\/www.inmotionhosting.com\/support\/website\/how-to-create-a-favicon-for-your-website\/"},"author":{"name":"Brad Markle","@id":"https:\/\/www.inmotionhosting.com\/support\/#\/schema\/person\/5ae05d1210b0ef63c437ccedce2799bf"},"headline":"How to add a Favicon for your Website","datePublished":"2011-10-17T14:16:43+00:00","dateModified":"2021-08-17T03:50:56+00:00","mainEntityOfPage":{"@id":"https:\/\/www.inmotionhosting.com\/support\/website\/how-to-create-a-favicon-for-your-website\/"},"wordCount":286,"commentCount":12,"publisher":{"@id":"https:\/\/www.inmotionhosting.com\/support\/#organization"},"image":{"@id":"https:\/\/www.inmotionhosting.com\/support\/website\/how-to-create-a-favicon-for-your-website\/#primaryimage"},"thumbnailUrl":"https:\/\/www.inmotionhosting.com\/support\/wp-content\/uploads\/2011\/10\/edu_howto_add-favicon_create-favicon-1.gif","articleSection":["Website"],"inLanguage":"en-US","potentialAction":[{"@type":"CommentAction","name":"Comment","target":["https:\/\/www.inmotionhosting.com\/support\/website\/how-to-create-a-favicon-for-your-website\/#respond"]}]},{"@type":"WebPage","@id":"https:\/\/www.inmotionhosting.com\/support\/website\/how-to-create-a-favicon-for-your-website\/","url":"https:\/\/www.inmotionhosting.com\/support\/website\/how-to-create-a-favicon-for-your-website\/","name":"How to add a Favicon for your Website | InMotion Hosting","isPartOf":{"@id":"https:\/\/www.inmotionhosting.com\/support\/#website"},"primaryImageOfPage":{"@id":"https:\/\/www.inmotionhosting.com\/support\/website\/how-to-create-a-favicon-for-your-website\/#primaryimage"},"image":{"@id":"https:\/\/www.inmotionhosting.com\/support\/website\/how-to-create-a-favicon-for-your-website\/#primaryimage"},"thumbnailUrl":"https:\/\/www.inmotionhosting.com\/support\/wp-content\/uploads\/2011\/10\/edu_howto_add-favicon_create-favicon-1.gif","datePublished":"2011-10-17T14:16:43+00:00","dateModified":"2021-08-17T03:50:56+00:00","description":"In this tutorial, you'll learn what a favicon is, how to create one, and how to have it show up ono your website","breadcrumb":{"@id":"https:\/\/www.inmotionhosting.com\/support\/website\/how-to-create-a-favicon-for-your-website\/#breadcrumb"},"inLanguage":"en-US","potentialAction":[{"@type":"ReadAction","target":["https:\/\/www.inmotionhosting.com\/support\/website\/how-to-create-a-favicon-for-your-website\/"]}]},{"@type":"ImageObject","inLanguage":"en-US","@id":"https:\/\/www.inmotionhosting.com\/support\/website\/how-to-create-a-favicon-for-your-website\/#primaryimage","url":"https:\/\/www.inmotionhosting.com\/support\/wp-content\/uploads\/2011\/10\/edu_howto_add-favicon_create-favicon-1.gif","contentUrl":"https:\/\/www.inmotionhosting.com\/support\/wp-content\/uploads\/2011\/10\/edu_howto_add-favicon_create-favicon-1.gif","width":427,"height":295,"caption":"Click here to view the larger image"},{"@type":"BreadcrumbList","@id":"https:\/\/www.inmotionhosting.com\/support\/website\/how-to-create-a-favicon-for-your-website\/#breadcrumb","itemListElement":[{"@type":"ListItem","position":1,"name":"Home","item":"https:\/\/www.inmotionhosting.com\/support\/"},{"@type":"ListItem","position":2,"name":"How to add a Favicon for your Website"}]},{"@type":"WebSite","@id":"https:\/\/www.inmotionhosting.com\/support\/#website","url":"https:\/\/www.inmotionhosting.com\/support\/","name":"InMotion Hosting Support Center","description":"Web Hosting Support &amp; Tutorials","publisher":{"@id":"https:\/\/www.inmotionhosting.com\/support\/#organization"},"potentialAction":[{"@type":"SearchAction","target":{"@type":"EntryPoint","urlTemplate":"https:\/\/www.inmotionhosting.com\/support\/?s={search_term_string}"},"query-input":{"@type":"PropertyValueSpecification","valueRequired":true,"valueName":"search_term_string"}}],"inLanguage":"en-US"},{"@type":"Organization","@id":"https:\/\/www.inmotionhosting.com\/support\/#organization","name":"InMotion Hosting","url":"https:\/\/www.inmotionhosting.com\/support\/","logo":{"@type":"ImageObject","inLanguage":"en-US","@id":"https:\/\/www.inmotionhosting.com\/support\/#\/schema\/logo\/image\/","url":"https:\/\/www.inmotionhosting.com\/support\/wp-content\/uploads\/2023\/02\/inmotion-hosting-logo-yoast.jpg","contentUrl":"https:\/\/www.inmotionhosting.com\/support\/wp-content\/uploads\/2023\/02\/inmotion-hosting-logo-yoast.jpg","width":696,"height":696,"caption":"InMotion Hosting"},"image":{"@id":"https:\/\/www.inmotionhosting.com\/support\/#\/schema\/logo\/image\/"},"sameAs":["https:\/\/www.facebook.com\/inmotionhosting\/","https:\/\/x.com\/InMotionHosting"]},{"@type":"Person","@id":"https:\/\/www.inmotionhosting.com\/support\/#\/schema\/person\/5ae05d1210b0ef63c437ccedce2799bf","name":"Brad Markle","url":"https:\/\/www.inmotionhosting.com\/support\/author\/bradm\/"}]}},"jetpack_featured_media_url":"","jetpack_sharing_enabled":true,"primary_category":null,"_links":{"self":[{"href":"https:\/\/www.inmotionhosting.com\/support\/wp-json\/wp\/v2\/posts\/264","targetHints":{"allow":["GET"]}}],"collection":[{"href":"https:\/\/www.inmotionhosting.com\/support\/wp-json\/wp\/v2\/posts"}],"about":[{"href":"https:\/\/www.inmotionhosting.com\/support\/wp-json\/wp\/v2\/types\/post"}],"author":[{"embeddable":true,"href":"https:\/\/www.inmotionhosting.com\/support\/wp-json\/wp\/v2\/users\/2"}],"replies":[{"embeddable":true,"href":"https:\/\/www.inmotionhosting.com\/support\/wp-json\/wp\/v2\/comments?post=264"}],"version-history":[{"count":8,"href":"https:\/\/www.inmotionhosting.com\/support\/wp-json\/wp\/v2\/posts\/264\/revisions"}],"predecessor-version":[{"id":86514,"href":"https:\/\/www.inmotionhosting.com\/support\/wp-json\/wp\/v2\/posts\/264\/revisions\/86514"}],"wp:attachment":[{"href":"https:\/\/www.inmotionhosting.com\/support\/wp-json\/wp\/v2\/media?parent=264"}],"wp:term":[{"taxonomy":"category","embeddable":true,"href":"https:\/\/www.inmotionhosting.com\/support\/wp-json\/wp\/v2\/categories?post=264"},{"taxonomy":"post_tag","embeddable":true,"href":"https:\/\/www.inmotionhosting.com\/support\/wp-json\/wp\/v2\/tags?post=264"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}