{"id":486,"date":"2017-01-17T09:00:34","date_gmt":"2017-01-17T09:00:34","guid":{"rendered":"https:\/\/www.fastcomet.com\/blog\/?p=486"},"modified":"2022-06-10T07:09:13","modified_gmt":"2022-06-10T07:09:13","slug":"what-is-an-apple-touch-icon-and-how-to-add-it","status":"publish","type":"post","link":"https:\/\/www.fastcomet.com\/blog\/what-is-an-apple-touch-icon-and-how-to-add-it","title":{"rendered":"What is an Apple Touch Icon and How to Add it to Your Website"},"content":{"rendered":"\n<p class=\"has-drop-cap\">With more and more people using their phones to check everything online \u2013 from traveling tickets and hotel reservations to stock trading and news viewing, webmasters have to make sure their products are optimized for mobile devices.<\/p>\n\n\n\n<!--more-->\n\n\n\n<p>Furthermore, a lot of our customers who have reviewed their SEO Audit report came and asked us how to add an Apple Icon to their websites.<\/p>\n\n\n<div class=\"wp-block-image\">\n<figure class=\"aligncenter\"><img loading=\"lazy\" decoding=\"async\" width=\"770\" height=\"638\" src=\"https:\/\/www.fastcomet.com\/blog\/wp-content\/uploads\/2017\/01\/apple-touch-icon-1.jpg\" alt=\"Add an Apple Touch Icon FastComet\" class=\"wp-image-699\" srcset=\"https:\/\/www.fastcomet.com\/blog\/wp-content\/uploads\/2017\/01\/apple-touch-icon-1.jpg 770w, https:\/\/www.fastcomet.com\/blog\/wp-content\/uploads\/2017\/01\/apple-touch-icon-1-300x249.jpg 300w, https:\/\/www.fastcomet.com\/blog\/wp-content\/uploads\/2017\/01\/apple-touch-icon-1-768x636.jpg 768w\" sizes=\"auto, (max-width: 770px) 100vw, 770px\" \/><\/figure>\n<\/div>\n\n\n<p>This is why we just had to share how to easily add this to your website. Of course, you can order the <strong>SEO Audit<\/strong> for your website by going to your client area with us and clicking on <strong>Order-&gt;Product Addons<\/strong>.<\/p>\n\n\n\n<h2 class=\"wp-block-heading\">What is the Apple Icon?<\/h2>\n\n\n\n<p>As a large portion of the mobile devices consists of Apple products, you should be mindful about the Apple icon (touch icon) of your website. The Apple icon is the visual representation of your website when being accessed by the home screen of a user on iOS. In nature, it has a lot of similarities with a favicon, however, the latter does not work with iOS which creates the need for yet another method for brand awareness. If you haven\u2019t defined a proper Apple icon, the user will see a minified version of your website\u2019s home page which will have many indistinguishable details and won\u2019t look as good as your brand\u2019s logo for example.<\/p>\n\n\n\n<h2 class=\"wp-block-heading\">How to Make one and Apply it to Your Website<\/h2>\n\n\n\n<p>Having the proper icon will make the user remember its location on the device much easier and will increase the odds of it being clicked more often. Once you have selected a simplistic element or your logo for the job of an Apple icon, create a square <strong>.png<\/strong> file of it called <strong>apple-touch-icon<\/strong> with dimensions up to <strong>180&#215;180<\/strong>. We say up to 180&#215;180 because there are 9 different main sizes for Apple icons starting from <strong>57&#215;57<\/strong> which are the base size for the first iPhone while the iPhone 6 plus needs a <strong>180&#215;180<\/strong> icon for its upgraded display and <strong>PPI<\/strong> (pixels per inch).<\/p>\n\n\n\n<p>Alternatively, you can use <a rel=\"noreferrer noopener\" aria-label=\" (opens in a new tab)\" href=\"http:\/\/realfavicongenerator.net\/\" target=\"_blank\">this<\/a> useful website to generate the Apple icon and even test its functionality or use <a rel=\"noreferrer noopener\" aria-label=\" (opens in a new tab)\" href=\"https:\/\/wordpress.org\/plugins\/favicon-by-realfavicongenerator\/\" target=\"_blank\">this<\/a> plugin from the same author if your website is WordPress based.<\/p>\n\n\n\n<p>Also, make sure that you define the icon or icons in the header by using these HTML snippets as the example:<\/p>\n\n\n\n<pre class=\"wp-block-code\"><code>&lt;link rel=\"apple-touch-icon\" sizes=\"57x57\" href=\"https:\/\/yourdomain.com\/apple-touch-icon-57x57.png\"&gt;<\/code><\/pre>\n\n\n\n<pre class=\"wp-block-code\"><code>&lt;link rel=\"apple-touch-icon\" sizes=\"180x180\" href=\"https:\/\/yourdomain.com\/apple-touch-icon-180x180.png\"&gt;<\/code><\/pre>\n\n\n\n<p>This will help with the identification of the icon by the appropriate iOS device and will guarantee a smooth viewing experience for your visitors.<\/p>\n","protected":false},"excerpt":{"rendered":"<p>With more and more people using their phones to check everything online \u2013 from traveling tickets and hotel reservations to stock trading and news viewing, webmasters have to make sure their products are optimized for mobile devices.<\/p>\n","protected":false},"author":3,"featured_media":665,"comment_status":"open","ping_status":"closed","sticky":false,"template":"","format":"standard","meta":{"footnotes":""},"categories":[4729],"tags":[66,114,43],"class_list":["post-486","post","type-post","status-publish","format-standard","has-post-thumbnail","hentry","category-seo","tag-optimization","tag-plugins","tag-website"],"featured_image_src":"https:\/\/www.fastcomet.com\/blog\/wp-content\/uploads\/2017\/01\/apple-touch-icon.jpg","author_info":{"display_name":"Antoniy","author_link":"https:\/\/www.fastcomet.com\/blog\/author\/antoniy"},"yoast_head":"<!-- This site is optimized with the Yoast SEO plugin v26.6 - https:\/\/yoast.com\/wordpress\/plugins\/seo\/ -->\n<title>What is an Apple Touch Icon and How to Add it to Your Website | FastComet<\/title>\n<meta name=\"description\" content=\"\u261b Find out how you can add an icon displaying on Apple devices using Safari for iOS, whenever someone bookmarks your website on iOS device.\" \/>\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.fastcomet.com\/blog\/what-is-an-apple-touch-icon-and-how-to-add-it\" \/>\n<meta property=\"og:locale\" content=\"en_US\" \/>\n<meta property=\"og:type\" content=\"article\" \/>\n<meta property=\"og:title\" content=\"What is an Apple Touch Icon and How to Add it to Your Website | FastComet\" \/>\n<meta property=\"og:description\" content=\"\u261b Find out how you can add an icon displaying on Apple devices using Safari for iOS, whenever someone bookmarks your website on iOS device.\" \/>\n<meta property=\"og:url\" content=\"https:\/\/www.fastcomet.com\/blog\/what-is-an-apple-touch-icon-and-how-to-add-it\" \/>\n<meta property=\"og:site_name\" content=\"FastComet Blog\" \/>\n<meta property=\"article:published_time\" content=\"2017-01-17T09:00:34+00:00\" \/>\n<meta property=\"article:modified_time\" content=\"2022-06-10T07:09:13+00:00\" \/>\n<meta property=\"og:image\" content=\"https:\/\/www.fastcomet.com\/blog\/wp-content\/uploads\/2017\/01\/apple-touch-icon.jpg\" \/>\n\t<meta property=\"og:image:width\" content=\"1024\" \/>\n\t<meta property=\"og:image:height\" content=\"650\" \/>\n\t<meta property=\"og:image:type\" content=\"image\/jpeg\" \/>\n<meta name=\"author\" content=\"Antoniy\" \/>\n<meta name=\"twitter:card\" content=\"summary_large_image\" \/>\n<meta name=\"twitter:label1\" content=\"Written by\" \/>\n\t<meta name=\"twitter:data1\" content=\"Antoniy\" \/>\n\t<meta name=\"twitter:label2\" content=\"Est. reading time\" \/>\n\t<meta name=\"twitter:data2\" content=\"3 minutes\" \/>\n<!-- \/ Yoast SEO plugin. -->","yoast_head_json":{"title":"What is an Apple Touch Icon and How to Add it to Your Website | FastComet","description":"\u261b Find out how you can add an icon displaying on Apple devices using Safari for iOS, whenever someone bookmarks your website on iOS device.","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.fastcomet.com\/blog\/what-is-an-apple-touch-icon-and-how-to-add-it","og_locale":"en_US","og_type":"article","og_title":"What is an Apple Touch Icon and How to Add it to Your Website | FastComet","og_description":"\u261b Find out how you can add an icon displaying on Apple devices using Safari for iOS, whenever someone bookmarks your website on iOS device.","og_url":"https:\/\/www.fastcomet.com\/blog\/what-is-an-apple-touch-icon-and-how-to-add-it","og_site_name":"FastComet Blog","article_published_time":"2017-01-17T09:00:34+00:00","article_modified_time":"2022-06-10T07:09:13+00:00","og_image":[{"width":1024,"height":650,"url":"https:\/\/www.fastcomet.com\/blog\/wp-content\/uploads\/2017\/01\/apple-touch-icon.jpg","type":"image\/jpeg"}],"author":"Antoniy","twitter_card":"summary_large_image","twitter_misc":{"Written by":"Antoniy","Est. reading time":"3 minutes"},"schema":{"@context":"https:\/\/schema.org","@graph":[{"@type":"WebPage","@id":"https:\/\/www.fastcomet.com\/blog\/what-is-an-apple-touch-icon-and-how-to-add-it","url":"https:\/\/www.fastcomet.com\/blog\/what-is-an-apple-touch-icon-and-how-to-add-it","name":"What is an Apple Touch Icon and How to Add it to Your Website | FastComet","isPartOf":{"@id":"https:\/\/www.fastcomet.com\/blog\/#website"},"primaryImageOfPage":{"@id":"https:\/\/www.fastcomet.com\/blog\/what-is-an-apple-touch-icon-and-how-to-add-it#primaryimage"},"image":{"@id":"https:\/\/www.fastcomet.com\/blog\/what-is-an-apple-touch-icon-and-how-to-add-it#primaryimage"},"thumbnailUrl":"https:\/\/www.fastcomet.com\/blog\/wp-content\/uploads\/2017\/01\/apple-touch-icon.jpg","datePublished":"2017-01-17T09:00:34+00:00","dateModified":"2022-06-10T07:09:13+00:00","author":{"@id":"https:\/\/www.fastcomet.com\/blog\/#\/schema\/person\/9c06dae35ff0e0a3a169eeae762a08d2"},"description":"\u261b Find out how you can add an icon displaying on Apple devices using Safari for iOS, whenever someone bookmarks your website on iOS device.","breadcrumb":{"@id":"https:\/\/www.fastcomet.com\/blog\/what-is-an-apple-touch-icon-and-how-to-add-it#breadcrumb"},"inLanguage":"en-US","potentialAction":[{"@type":"ReadAction","target":["https:\/\/www.fastcomet.com\/blog\/what-is-an-apple-touch-icon-and-how-to-add-it"]}]},{"@type":"ImageObject","inLanguage":"en-US","@id":"https:\/\/www.fastcomet.com\/blog\/what-is-an-apple-touch-icon-and-how-to-add-it#primaryimage","url":"https:\/\/www.fastcomet.com\/blog\/wp-content\/uploads\/2017\/01\/apple-touch-icon.jpg","contentUrl":"https:\/\/www.fastcomet.com\/blog\/wp-content\/uploads\/2017\/01\/apple-touch-icon.jpg","width":1024,"height":650},{"@type":"BreadcrumbList","@id":"https:\/\/www.fastcomet.com\/blog\/what-is-an-apple-touch-icon-and-how-to-add-it#breadcrumb","itemListElement":[{"@type":"ListItem","position":1,"name":"Home","item":"https:\/\/www.fastcomet.com\/blog"},{"@type":"ListItem","position":2,"name":"What is an Apple Touch Icon and How to Add it to Your Website"}]},{"@type":"WebSite","@id":"https:\/\/www.fastcomet.com\/blog\/#website","url":"https:\/\/www.fastcomet.com\/blog\/","name":"FastComet Blog","description":"FastComet Web Hosting Blog","potentialAction":[{"@type":"SearchAction","target":{"@type":"EntryPoint","urlTemplate":"https:\/\/www.fastcomet.com\/blog\/?s={search_term_string}"},"query-input":{"@type":"PropertyValueSpecification","valueRequired":true,"valueName":"search_term_string"}}],"inLanguage":"en-US"},{"@type":"Person","@id":"https:\/\/www.fastcomet.com\/blog\/#\/schema\/person\/9c06dae35ff0e0a3a169eeae762a08d2","name":"Antoniy","image":{"@type":"ImageObject","inLanguage":"en-US","@id":"https:\/\/www.fastcomet.com\/blog\/#\/schema\/person\/image\/","url":"https:\/\/secure.gravatar.com\/avatar\/bebc2fa14b210e2e79c8a90be5e115a9b1cae5a04fe1151f238a76958c85a8ed?s=96&d=mm&r=g","contentUrl":"https:\/\/secure.gravatar.com\/avatar\/bebc2fa14b210e2e79c8a90be5e115a9b1cae5a04fe1151f238a76958c85a8ed?s=96&d=mm&r=g","caption":"Antoniy"},"description":"Antoniy\u2019s primary goal at FastComet is helping grow our client base through affiliates and strategic partnerships. It is all about statistics analysis, communication with our affiliates, working on various campaigns, searching the web for trends and generating ideas for future projects. You're likely to run across him at some point in the FastComet Community, too because he loves getting in and interacting with our great customers. You can always count on him to come up with strategic ideas for the team and is always searching for the smartest ways to spread our brand and services worldwide.","sameAs":["https:\/\/www.fastcomet.com"],"url":"https:\/\/www.fastcomet.com\/blog\/author\/antoniy"}]}},"_links":{"self":[{"href":"https:\/\/www.fastcomet.com\/blog\/wp-json\/wp\/v2\/posts\/486","targetHints":{"allow":["GET"]}}],"collection":[{"href":"https:\/\/www.fastcomet.com\/blog\/wp-json\/wp\/v2\/posts"}],"about":[{"href":"https:\/\/www.fastcomet.com\/blog\/wp-json\/wp\/v2\/types\/post"}],"author":[{"embeddable":true,"href":"https:\/\/www.fastcomet.com\/blog\/wp-json\/wp\/v2\/users\/3"}],"replies":[{"embeddable":true,"href":"https:\/\/www.fastcomet.com\/blog\/wp-json\/wp\/v2\/comments?post=486"}],"version-history":[{"count":5,"href":"https:\/\/www.fastcomet.com\/blog\/wp-json\/wp\/v2\/posts\/486\/revisions"}],"predecessor-version":[{"id":7909,"href":"https:\/\/www.fastcomet.com\/blog\/wp-json\/wp\/v2\/posts\/486\/revisions\/7909"}],"wp:featuredmedia":[{"embeddable":true,"href":"https:\/\/www.fastcomet.com\/blog\/wp-json\/wp\/v2\/media\/665"}],"wp:attachment":[{"href":"https:\/\/www.fastcomet.com\/blog\/wp-json\/wp\/v2\/media?parent=486"}],"wp:term":[{"taxonomy":"category","embeddable":true,"href":"https:\/\/www.fastcomet.com\/blog\/wp-json\/wp\/v2\/categories?post=486"},{"taxonomy":"post_tag","embeddable":true,"href":"https:\/\/www.fastcomet.com\/blog\/wp-json\/wp\/v2\/tags?post=486"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}