{"id":493,"date":"2014-09-08T10:00:00","date_gmt":"2014-09-08T09:00:00","guid":{"rendered":"http:\/\/www.lcn.com\/blog\/?p=493"},"modified":"2021-07-12T16:40:10","modified_gmt":"2021-07-12T15:40:10","slug":"beginners-guide-favicons","status":"publish","type":"post","link":"https:\/\/www.lcn.com\/blog\/beginners-guide-favicons\/","title":{"rendered":"How to create to a favicon"},"content":{"rendered":"<p>If you&#8217;re serious about branding your business, favicons should really be a part of your marketing arsenal. They&#8217;re not the most important aspect of a website, but it&#8217;s details like this that make sure you&#8217;re remembered by potential customers and stand out from the competition.<\/p>\n<p>This guide will show you how to make a favicon, and how they can boost your marketing efforts.<\/p>\n<p>Before we get into the guide, you will of course need web hosting to get a site online and add a favicon.<\/p>\n<p><strong>Take a look at <a href=\"https:\/\/www.lcn.com\/web-hosting\" target=\"_blank\" rel=\"noopener\">Web Hosting solutions<\/a> &#8211; we have packages to suit everyone, plus you can get 10% off with the code\u00a0LCNBLOG10.<\/strong><\/p>\n<p>&nbsp;<\/p>\n<h2>What is a Favicon?<\/h2>\n<p>Favicons are the small square images that are usually displayed before the URL in the address bar of a browser, in the browsing tabs, and next to the site name in a users list of bookmarks.<\/p>\n<p>&nbsp;<\/p>\n<p><img loading=\"lazy\" decoding=\"async\" class=\"aligncenter wp-image-502 size-full\" src=\"https:\/\/www.lcn.com\/blog\/wp-content\/uploads\/2014\/07\/favicon.png\" alt=\"favicon screenshot\" width=\"616\" height=\"95\" \/><\/p>\n<p>&nbsp;<\/p>\n<p>Usually, they&#8217;re just the brand or website logo shrunk down to 16 x 16 pixels, but any image can be used to represent a brand.<\/p>\n<p>Favicon, short for &#8220;favourite icon&#8221;, was originally a new feature within\u00a0Internet Explorer browser in 1999. When users bookmarked a site through Internet Explorer, they displayed the icon next to the website&#8217;s name in the favourites list.<\/p>\n[Tweet &#8220;A favicon image can help your webpage stand out in a congested bookmarks tab&#8221;]\n<p>&nbsp;<\/p>\n<h2>The Importance of Favicons<\/h2>\n<p>While favicons don&#8217;t directly help <a href=\"https:\/\/www.lcn.com\/learn\/seo\" target=\"_blank\" rel=\"noopener\">search engine optimisation<\/a> (SEO), they do help\u00a0with\u00a0brand awareness.<\/p>\n<p>When someone bookmarks your site, your favicon will appear next to your page title in their bookmarks list, helping people to navigate to your content.<\/p>\n<p>&nbsp;<\/p>\n<p><img loading=\"lazy\" decoding=\"async\" class=\"aligncenter wp-image-504 size-full\" src=\"https:\/\/www.lcn.com\/blog\/wp-content\/uploads\/2014\/07\/favicons-bookmarks.png\" alt=\"Favicon in browser bookmarks\" width=\"527\" height=\"167\" \/><\/p>\n<p>&nbsp;<\/p>\n<p>As well as boosting visibility, it ultimately gives your brand a more professional look and strengthens your credibility.<\/p>\n<p>Even when users aren&#8217;t planning to visit your site, a clear favicon design that stands out among the rest can lead to users revisiting your site.<\/p>\n<p><strong><em>Related: <a href=\"https:\/\/www.lcn.com\/blog\/7-tips-to-make-your-website-look-more-professional\/\" target=\"_blank\" rel=\"noopener\">Tips to make your website look more professional<\/a><\/em><\/strong><\/p>\n<p>&nbsp;<\/p>\n<h2>How to create a Favicon for Your Website<\/h2>\n<p>&nbsp;<\/p>\n<h3>Step 1: Create Your Image<\/h3>\n<p>You can design a favicon image using an editor like Fireworks, Photoshop, Corel Paint, or a free, open-source alternative like GIMP.<\/p>\n<p>To support consistent brand identity, many businesses simply use their company logo.<\/p>\n<p>To make it easier to edit, start with a 64 x 64 pixel square and you can scale it down to 16 x 16 pixels later. Then you need to save the file as a .jpg, .png, .gif, .bmp, or .tif.<\/p>\n<p>&nbsp;<\/p>\n<h3>Step 2: Convert the Image<\/h3>\n<p>Once you&#8217;re happy with the image, it needs to be saved as favicon.ico. This is the recommended format supported by most web browsers.<\/p>\n<p>To convert your file to the .ico format, you may need to use an online tool such as <a href=\"http:\/\/iconifier.net\/\" target=\"_blank\" rel=\"noopener\">iconifier.net<\/a>, <a href=\"http:\/\/prodraw.net\/\" target=\"_blank\" rel=\"noopener\">prodraw.net<\/a>, or\u00a0<a href=\"http:\/\/faviconer.com\/\" target=\"_blank\" rel=\"noopener\">faviconer.com.<\/a><\/p>\n<p>There are many available. Simply upload your image, select the icon size, and you can then download your brand new .ico file.<\/p>\n<p>&nbsp;<\/p>\n<h3>Step 3: Upload the Image to Your Website<\/h3>\n<p>The .ico file needs to be uploaded to the root directory of your website. Then the image should be visible when you go to www.yoursite.co.uk\/favicon.ico.<\/p>\n<p>&nbsp;<\/p>\n<h3>Step 4: Add Basic HTML Code<\/h3>\n<p>To help older browsers find your favicon image, you can\u00a0edit your website&#8217;s HTML page.<\/p>\n<p>Most modern browsers will find your favicon file without the need to add any code, but to make sure all browsers display it properly, add the following to\u00a0your header, within the\u00a0tags of your page:<\/p>\n<p>&nbsp;<\/p>\n<pre><em><code>&lt;link rel=\"icon\" type=\"image\/x-icon\" href=\"http:\/\/example.com\/favicon.ico\" \/&gt;<\/code><\/em><\/pre>\n<p>&nbsp;<\/p>\n<p>Creating a favicon for your business is a simple way to improve your online branding. It can make a big difference to the user experience and improve your company&#8217;s image at little or no extra cost.<\/p>\n<p>&nbsp;<\/p>\n<h2>Your Say!<\/h2>\n<p>Have you got one for your website, or have you never even heard a Favicon? Either way, if you use the internet regularly, you&#8217;ll see dozens of them daily.<\/p>\n","protected":false},"excerpt":{"rendered":"<p>If you&#8217;re serious about branding, never forget to add a favicon to your website. Check out our step-by-step guide and get a favicon set up in minutes.<\/p>\n","protected":false},"author":31,"featured_media":498,"comment_status":"closed","ping_status":"closed","sticky":false,"template":"","format":"standard","meta":{"footnotes":""},"categories":[24,38],"tags":[4],"class_list":["post-493","post","type-post","status-publish","format-standard","has-post-thumbnail","hentry","category-branding","category-user-experience-ux","tag-beginner"],"yoast_head":"<!-- This site is optimized with the Yoast SEO plugin v27.2 - https:\/\/yoast.com\/product\/yoast-seo-wordpress\/ -->\n<title>How to Make a Favicon - Favicon Guide - LCN.com<\/title>\n<meta name=\"description\" content=\"If you&#039;re serious about branding, never forget to add a favicon to your website. Check out our step-by-step guide and get a favicon set up in minutes.\" \/>\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.lcn.com\/blog\/beginners-guide-favicons\/\" \/>\n<meta property=\"og:locale\" content=\"en_GB\" \/>\n<meta property=\"og:type\" content=\"article\" \/>\n<meta property=\"og:title\" content=\"How to Make a Favicon - Favicon Guide - LCN.com\" \/>\n<meta property=\"og:description\" content=\"If you&#039;re serious about branding, never forget to add a favicon to your website. Check out our step-by-step guide and get a favicon set up in minutes.\" \/>\n<meta property=\"og:url\" content=\"https:\/\/www.lcn.com\/blog\/beginners-guide-favicons\/\" \/>\n<meta property=\"og:site_name\" content=\"Grow a successful website with the LCN Business Hub\" \/>\n<meta property=\"article:publisher\" content=\"http:\/\/www.facebook.com\/lcndotcom\" \/>\n<meta property=\"article:published_time\" content=\"2014-09-08T09:00:00+00:00\" \/>\n<meta property=\"article:modified_time\" content=\"2021-07-12T15:40:10+00:00\" \/>\n<meta property=\"og:image\" content=\"https:\/\/www.lcn.com\/blog\/wp-content\/uploads\/2014\/07\/favicon.jpg\" \/>\n\t<meta property=\"og:image:width\" content=\"1000\" \/>\n\t<meta property=\"og:image:height\" content=\"664\" \/>\n\t<meta property=\"og:image:type\" content=\"image\/jpeg\" \/>\n<meta name=\"author\" content=\"Nathan Preedy\" \/>\n<meta name=\"twitter:card\" content=\"summary_large_image\" \/>\n<meta name=\"twitter:creator\" content=\"@lcndotcom\" \/>\n<meta name=\"twitter:site\" content=\"@lcndotcom\" \/>\n<meta name=\"twitter:label1\" content=\"Written by\" \/>\n\t<meta name=\"twitter:data1\" content=\"Nathan Preedy\" \/>\n\t<meta name=\"twitter:label2\" content=\"Estimated reading time\" \/>\n\t<meta name=\"twitter:data2\" content=\"4 minutes\" \/>\n<script type=\"application\/ld+json\" class=\"yoast-schema-graph\">{\"@context\":\"https:\/\/schema.org\",\"@graph\":[{\"@type\":\"Article\",\"@id\":\"https:\/\/www.lcn.com\/blog\/beginners-guide-favicons\/#article\",\"isPartOf\":{\"@id\":\"https:\/\/www.lcn.com\/blog\/beginners-guide-favicons\/\"},\"author\":{\"name\":\"Nathan Preedy\",\"@id\":\"https:\/\/www.lcn.com\/blog\/#\/schema\/person\/e6493782266f4474f2c90dc96682d069\"},\"headline\":\"How to create to a favicon\",\"datePublished\":\"2014-09-08T09:00:00+00:00\",\"dateModified\":\"2021-07-12T15:40:10+00:00\",\"mainEntityOfPage\":{\"@id\":\"https:\/\/www.lcn.com\/blog\/beginners-guide-favicons\/\"},\"wordCount\":668,\"image\":{\"@id\":\"https:\/\/www.lcn.com\/blog\/beginners-guide-favicons\/#primaryimage\"},\"thumbnailUrl\":\"https:\/\/www.lcn.com\/blog\/wp-content\/uploads\/2014\/07\/favicon.jpg\",\"keywords\":[\"Beginner\"],\"articleSection\":[\"Branding\",\"User Experience (UX)\"],\"inLanguage\":\"en-GB\"},{\"@type\":\"WebPage\",\"@id\":\"https:\/\/www.lcn.com\/blog\/beginners-guide-favicons\/\",\"url\":\"https:\/\/www.lcn.com\/blog\/beginners-guide-favicons\/\",\"name\":\"How to Make a Favicon - Favicon Guide - LCN.com\",\"isPartOf\":{\"@id\":\"https:\/\/www.lcn.com\/blog\/#website\"},\"primaryImageOfPage\":{\"@id\":\"https:\/\/www.lcn.com\/blog\/beginners-guide-favicons\/#primaryimage\"},\"image\":{\"@id\":\"https:\/\/www.lcn.com\/blog\/beginners-guide-favicons\/#primaryimage\"},\"thumbnailUrl\":\"https:\/\/www.lcn.com\/blog\/wp-content\/uploads\/2014\/07\/favicon.jpg\",\"datePublished\":\"2014-09-08T09:00:00+00:00\",\"dateModified\":\"2021-07-12T15:40:10+00:00\",\"author\":{\"@id\":\"https:\/\/www.lcn.com\/blog\/#\/schema\/person\/e6493782266f4474f2c90dc96682d069\"},\"description\":\"If you're serious about branding, never forget to add a favicon to your website. Check out our step-by-step guide and get a favicon set up in minutes.\",\"breadcrumb\":{\"@id\":\"https:\/\/www.lcn.com\/blog\/beginners-guide-favicons\/#breadcrumb\"},\"inLanguage\":\"en-GB\",\"potentialAction\":[{\"@type\":\"ReadAction\",\"target\":[\"https:\/\/www.lcn.com\/blog\/beginners-guide-favicons\/\"]}]},{\"@type\":\"ImageObject\",\"inLanguage\":\"en-GB\",\"@id\":\"https:\/\/www.lcn.com\/blog\/beginners-guide-favicons\/#primaryimage\",\"url\":\"https:\/\/www.lcn.com\/blog\/wp-content\/uploads\/2014\/07\/favicon.jpg\",\"contentUrl\":\"https:\/\/www.lcn.com\/blog\/wp-content\/uploads\/2014\/07\/favicon.jpg\",\"width\":1000,\"height\":664,\"caption\":\"globe favicon\"},{\"@type\":\"BreadcrumbList\",\"@id\":\"https:\/\/www.lcn.com\/blog\/beginners-guide-favicons\/#breadcrumb\",\"itemListElement\":[{\"@type\":\"ListItem\",\"position\":1,\"name\":\"LCN.com\",\"item\":\"\/\"},{\"@type\":\"ListItem\",\"position\":2,\"name\":\"Blog\",\"item\":\"https:\/\/www.lcn.com\/blog\/\"},{\"@type\":\"ListItem\",\"position\":3,\"name\":\"Branding\",\"item\":\"https:\/\/www.lcn.com\/blog\/category\/branding\/\"},{\"@type\":\"ListItem\",\"position\":4,\"name\":\"How to create to a favicon\"}]},{\"@type\":\"WebSite\",\"@id\":\"https:\/\/www.lcn.com\/blog\/#website\",\"url\":\"https:\/\/www.lcn.com\/blog\/\",\"name\":\"Grow a successful website with the LCN Business Hub\",\"description\":\"\",\"potentialAction\":[{\"@type\":\"SearchAction\",\"target\":{\"@type\":\"EntryPoint\",\"urlTemplate\":\"https:\/\/www.lcn.com\/blog\/?s={search_term_string}\"},\"query-input\":{\"@type\":\"PropertyValueSpecification\",\"valueRequired\":true,\"valueName\":\"search_term_string\"}}],\"inLanguage\":\"en-GB\"},{\"@type\":\"Person\",\"@id\":\"https:\/\/www.lcn.com\/blog\/#\/schema\/person\/e6493782266f4474f2c90dc96682d069\",\"name\":\"Nathan Preedy\",\"image\":{\"@type\":\"ImageObject\",\"inLanguage\":\"en-GB\",\"@id\":\"https:\/\/www.lcn.com\/blog\/wp-content\/plugins\/wp-user-avatars\/wp-user-avatars\/assets\/images\/mystery.jpg\",\"url\":\"https:\/\/www.lcn.com\/blog\/wp-content\/plugins\/wp-user-avatars\/wp-user-avatars\/assets\/images\/mystery.jpg\",\"contentUrl\":\"https:\/\/www.lcn.com\/blog\/wp-content\/plugins\/wp-user-avatars\/wp-user-avatars\/assets\/images\/mystery.jpg\",\"caption\":\"Nathan Preedy\"},\"description\":\"Nathan has been with team.blue since 2005 and has a background in Technical Support. He is passionate about helping customers find the best product for them and use it to its full potential.\"}]}<\/script>\n<!-- \/ Yoast SEO plugin. -->","yoast_head_json":{"title":"How to Make a Favicon - Favicon Guide - LCN.com","description":"If you're serious about branding, never forget to add a favicon to your website. Check out our step-by-step guide and get a favicon set up in minutes.","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.lcn.com\/blog\/beginners-guide-favicons\/","og_locale":"en_GB","og_type":"article","og_title":"How to Make a Favicon - Favicon Guide - LCN.com","og_description":"If you're serious about branding, never forget to add a favicon to your website. Check out our step-by-step guide and get a favicon set up in minutes.","og_url":"https:\/\/www.lcn.com\/blog\/beginners-guide-favicons\/","og_site_name":"Grow a successful website with the LCN Business Hub","article_publisher":"http:\/\/www.facebook.com\/lcndotcom","article_published_time":"2014-09-08T09:00:00+00:00","article_modified_time":"2021-07-12T15:40:10+00:00","og_image":[{"width":1000,"height":664,"url":"https:\/\/www.lcn.com\/blog\/wp-content\/uploads\/2014\/07\/favicon.jpg","type":"image\/jpeg"}],"author":"Nathan Preedy","twitter_card":"summary_large_image","twitter_creator":"@lcndotcom","twitter_site":"@lcndotcom","twitter_misc":{"Written by":"Nathan Preedy","Estimated reading time":"4 minutes"},"schema":{"@context":"https:\/\/schema.org","@graph":[{"@type":"Article","@id":"https:\/\/www.lcn.com\/blog\/beginners-guide-favicons\/#article","isPartOf":{"@id":"https:\/\/www.lcn.com\/blog\/beginners-guide-favicons\/"},"author":{"name":"Nathan Preedy","@id":"https:\/\/www.lcn.com\/blog\/#\/schema\/person\/e6493782266f4474f2c90dc96682d069"},"headline":"How to create to a favicon","datePublished":"2014-09-08T09:00:00+00:00","dateModified":"2021-07-12T15:40:10+00:00","mainEntityOfPage":{"@id":"https:\/\/www.lcn.com\/blog\/beginners-guide-favicons\/"},"wordCount":668,"image":{"@id":"https:\/\/www.lcn.com\/blog\/beginners-guide-favicons\/#primaryimage"},"thumbnailUrl":"https:\/\/www.lcn.com\/blog\/wp-content\/uploads\/2014\/07\/favicon.jpg","keywords":["Beginner"],"articleSection":["Branding","User Experience (UX)"],"inLanguage":"en-GB"},{"@type":"WebPage","@id":"https:\/\/www.lcn.com\/blog\/beginners-guide-favicons\/","url":"https:\/\/www.lcn.com\/blog\/beginners-guide-favicons\/","name":"How to Make a Favicon - Favicon Guide - LCN.com","isPartOf":{"@id":"https:\/\/www.lcn.com\/blog\/#website"},"primaryImageOfPage":{"@id":"https:\/\/www.lcn.com\/blog\/beginners-guide-favicons\/#primaryimage"},"image":{"@id":"https:\/\/www.lcn.com\/blog\/beginners-guide-favicons\/#primaryimage"},"thumbnailUrl":"https:\/\/www.lcn.com\/blog\/wp-content\/uploads\/2014\/07\/favicon.jpg","datePublished":"2014-09-08T09:00:00+00:00","dateModified":"2021-07-12T15:40:10+00:00","author":{"@id":"https:\/\/www.lcn.com\/blog\/#\/schema\/person\/e6493782266f4474f2c90dc96682d069"},"description":"If you're serious about branding, never forget to add a favicon to your website. Check out our step-by-step guide and get a favicon set up in minutes.","breadcrumb":{"@id":"https:\/\/www.lcn.com\/blog\/beginners-guide-favicons\/#breadcrumb"},"inLanguage":"en-GB","potentialAction":[{"@type":"ReadAction","target":["https:\/\/www.lcn.com\/blog\/beginners-guide-favicons\/"]}]},{"@type":"ImageObject","inLanguage":"en-GB","@id":"https:\/\/www.lcn.com\/blog\/beginners-guide-favicons\/#primaryimage","url":"https:\/\/www.lcn.com\/blog\/wp-content\/uploads\/2014\/07\/favicon.jpg","contentUrl":"https:\/\/www.lcn.com\/blog\/wp-content\/uploads\/2014\/07\/favicon.jpg","width":1000,"height":664,"caption":"globe favicon"},{"@type":"BreadcrumbList","@id":"https:\/\/www.lcn.com\/blog\/beginners-guide-favicons\/#breadcrumb","itemListElement":[{"@type":"ListItem","position":1,"name":"LCN.com","item":"\/"},{"@type":"ListItem","position":2,"name":"Blog","item":"https:\/\/www.lcn.com\/blog\/"},{"@type":"ListItem","position":3,"name":"Branding","item":"https:\/\/www.lcn.com\/blog\/category\/branding\/"},{"@type":"ListItem","position":4,"name":"How to create to a favicon"}]},{"@type":"WebSite","@id":"https:\/\/www.lcn.com\/blog\/#website","url":"https:\/\/www.lcn.com\/blog\/","name":"Grow a successful website with the LCN Business Hub","description":"","potentialAction":[{"@type":"SearchAction","target":{"@type":"EntryPoint","urlTemplate":"https:\/\/www.lcn.com\/blog\/?s={search_term_string}"},"query-input":{"@type":"PropertyValueSpecification","valueRequired":true,"valueName":"search_term_string"}}],"inLanguage":"en-GB"},{"@type":"Person","@id":"https:\/\/www.lcn.com\/blog\/#\/schema\/person\/e6493782266f4474f2c90dc96682d069","name":"Nathan Preedy","image":{"@type":"ImageObject","inLanguage":"en-GB","@id":"https:\/\/www.lcn.com\/blog\/wp-content\/plugins\/wp-user-avatars\/wp-user-avatars\/assets\/images\/mystery.jpg","url":"https:\/\/www.lcn.com\/blog\/wp-content\/plugins\/wp-user-avatars\/wp-user-avatars\/assets\/images\/mystery.jpg","contentUrl":"https:\/\/www.lcn.com\/blog\/wp-content\/plugins\/wp-user-avatars\/wp-user-avatars\/assets\/images\/mystery.jpg","caption":"Nathan Preedy"},"description":"Nathan has been with team.blue since 2005 and has a background in Technical Support. He is passionate about helping customers find the best product for them and use it to its full potential."}]}},"_links":{"self":[{"href":"https:\/\/www.lcn.com\/blog\/wp-json\/wp\/v2\/posts\/493","targetHints":{"allow":["GET"]}}],"collection":[{"href":"https:\/\/www.lcn.com\/blog\/wp-json\/wp\/v2\/posts"}],"about":[{"href":"https:\/\/www.lcn.com\/blog\/wp-json\/wp\/v2\/types\/post"}],"author":[{"embeddable":true,"href":"https:\/\/www.lcn.com\/blog\/wp-json\/wp\/v2\/users\/31"}],"replies":[{"embeddable":true,"href":"https:\/\/www.lcn.com\/blog\/wp-json\/wp\/v2\/comments?post=493"}],"version-history":[{"count":35,"href":"https:\/\/www.lcn.com\/blog\/wp-json\/wp\/v2\/posts\/493\/revisions"}],"predecessor-version":[{"id":5423,"href":"https:\/\/www.lcn.com\/blog\/wp-json\/wp\/v2\/posts\/493\/revisions\/5423"}],"wp:featuredmedia":[{"embeddable":true,"href":"https:\/\/www.lcn.com\/blog\/wp-json\/wp\/v2\/media\/498"}],"wp:attachment":[{"href":"https:\/\/www.lcn.com\/blog\/wp-json\/wp\/v2\/media?parent=493"}],"wp:term":[{"taxonomy":"category","embeddable":true,"href":"https:\/\/www.lcn.com\/blog\/wp-json\/wp\/v2\/categories?post=493"},{"taxonomy":"post_tag","embeddable":true,"href":"https:\/\/www.lcn.com\/blog\/wp-json\/wp\/v2\/tags?post=493"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}