{"id":17438,"date":"2013-06-19T21:01:44","date_gmt":"2013-06-19T13:01:44","guid":{"rendered":"https:\/\/www.hongkiat.com\/blog\/?p=17438"},"modified":"2025-04-04T01:34:14","modified_gmt":"2025-04-03T17:34:14","slug":"ios-touch-icon","status":"publish","type":"post","link":"https:\/\/www.hongkiat.com\/blog\/ios-touch-icon\/","title":{"rendered":"Adding iOS Icons for Bookmarked Website"},"content":{"rendered":"<p>The bookmark icon or more commonly known as favicon (favorite icon) has been around since 1999 with the introduction of Internet Explorer 5. The bookmark icon or favicon is generally specified in 16\u00d716 px with <code>.ico<\/code> (sometimes also with <code>.png<\/code> format) and is displayed beside the URL address of the web browser or beside the page title of the Tab interface, as shown below.<\/p>\n<p>Today, with mobile device advancement, the bookmark icon or favicon has also evolved. For example, iOS, which you probably are familiar with, displays icons onscreen.<\/p>\n<p>Most of these icons are beautifully designed, and after Apple introduced a new meta tag named <code>apple-touch-icon<\/code> you can now display website icons on the iOS homescreen when you bookmark a site.<\/p>\n<div class=\"ref-block ref-block--post\" id=\"ref-post-1\">\n\t\t\t\t\t<a href=\"https:\/\/www.hongkiat.com\/blog\/create-app-icons\/\" class=\"ref-block__link\" title=\"Read More: Generate Android and iOS App Icons Easily with MakeAppIcon\" rel=\"bookmark\"><span class=\"screen-reader-text\">Generate Android and iOS App Icons Easily with MakeAppIcon<\/span><\/a>\n<div class=\"ref-block__thumbnail img-thumb img-thumb--jumbo\" data-img='{ \"src\" : \"https:\/\/assets.hongkiat.com\/uploads\/thumbs\/250x160\/create-app-icons.jpg\" }'>\n\t\t\t\t\t\t\t<noscript>\n<style>.no-js #ref-block-post-15912 .ref-block__thumbnail { background-image: url(\"https:\/\/assets.hongkiat.com\/uploads\/thumbs\/250x160\/create-app-icons.jpg\"); }<\/style>\n<\/noscript>\n\t\t\t\t\t\t<\/div>\n<div class=\"ref-block__summary\">\n<h4 class=\"ref-title\">Generate Android and iOS App Icons Easily with MakeAppIcon<\/h4>\n<p class=\"ref-description\">\n\t\t\t\t\t\tSo, you have your app icon ready for release. You love both iOS and Android users equally, so...\t\t\t\t\t\t<span>Read more<\/span><\/p>\n<\/div>\n<\/div>\n<h2>Adding Apple Touch Icons<\/h2>\n<p>The apple touch icon is specified with <code>&lt;link&gt;<\/code> tag, as follows.<\/p>\n<pre>\r\n &lt;link rel=\"apple-touch-icon\" href=\"icon.png\"\/&gt;\r\n <\/pre>\n<p>This icon, by default, is 57x57px. But, with iPad and Retina devices, we need to provide more sizes. iPad requires icons with the size of 72x72px, while Retina devices need icons with 114x114px size.<\/p>\n<p>So, all in all, we need to provide the icon in the following specifications \u2013 within the <code>&lt;head&gt;<\/code> \u2013 to support iPhone, iPad and Retina devices.<\/p>\n<pre>\r\n &lt;link rel=\"apple-touch-icon\" href=\"icon.png\"\/&gt;\r\n &lt;link rel=\"apple-touch-icon\" sizes=\"72x72\" href=\"icon.png\"\/&gt;\r\n &lt;link rel=\"apple-touch-icon\" sizes=\"114x114\" href=\"icon.png\"\/&gt;\r\n <\/pre>\n<p>By default, iOS will automatically add the eye-candy effects to the icons.<\/p>\n<figure><img loading=\"lazy\" decoding=\"async\" src=\"https:\/\/assets.hongkiat.com\/uploads\/ios-touch-icon\/hongkiatcom-icon.jpg\" alt=\"hkdc icon\" width=\"500\" height=\"300\"><\/figure>\n<p>If you prefer the icon to not interfere with this effect, you can add <code>-precomposed<\/code> at the end of the <code>rel<\/code> name, like so.<\/p>\n<pre>\r\n &lt;link rel=\"apple-touch-icon-precomposed\" href=\"icon.png\"\/&gt;\r\n <\/pre>\n<p>Refresh the webpage and re-save to the home screen. Now, the effect is not added to the icon.<\/p>\n<figure><img loading=\"lazy\" decoding=\"async\" src=\"https:\/\/assets.hongkiat.com\/uploads\/ios-touch-icon\/hongkiatcom-icon-precomposed.jpg\" alt=\"hkdc icon precomposed\" width=\"500\" height=\"300\"><\/figure>\n<p class=\"note\"><strong>Recommended Reading<\/strong>: <a rel=\"nofollow noopener\" target=\"_blank\" href=\"http:\/\/developer.apple.com\/library\/safari\/#documentation\/UserExperience\/Conceptual\/MobileHIG\/IconsImages\/IconsImages.html#\/\/apple_ref\/doc\/uid\/TP40006556-CH14\">Custom Icon and Image Creation Guidelines<\/a> \u2013 Safari Developer Library<\/p>\n<h2>Creating Apple Touch Icons with Photoshop<\/h2>\n<p>In our previous post, we have discussed how to create apple touch icon with <a href=\"https:\/\/www.hongkiat.com\/blog\/create-app-icons\/\">MacAppIcon<\/a>. Alternatively \u2013 and this is also my preference \u2013 we can use PSD templates from <a rel=\"nofollow noopener\" target=\"_blank\" href=\"http:\/\/appicontemplate.com\/\">AppIconTemplate<\/a> for more flexibility in customization.<\/p>\n<p>One additional feature that I really like from this PSD template is that it also comes with Photoshop Actions that automatically saves the icon into several sizes, including the ones for iTunes Artwork.<\/p>\n<figure><img loading=\"lazy\" decoding=\"async\" src=\"https:\/\/assets.hongkiat.com\/uploads\/ios-touch-icon\/ios-icons.jpg\" alt=\"ios icons\" width=\"500\" height=\"300\"><\/figure>\n<h2>Bonus: Adding Windows 8 Pinned Icon<\/h2>\n<p>In addition, Windows 8 also provides similar ways to add icons on pinned (bookmarked) websites with the following meta tags.<\/p>\n<pre>\r\n &lt;meta name=\"msapplication-TileImage\" content=\"\/metro-tile.png\"\/&gt;\r\n &lt;meta name=\"msapplication-TileColor\" content=\"#015565\"\/&gt;\r\n <\/pre>\n<p>For furthrer discussion on implementing these tags at your website, you can head over to <a rel=\"nofollow noopener\" target=\"_blank\" href=\"http:\/\/blogs.msdn.com\/b\/ie\/archive\/2012\/06\/08\/high-quality-visuals-for-pinned-sites-in-windows-8.as\">the following MSDN post<\/a>.<\/p>\n<h2>Further Resources<\/h2>\n<ul>\n<li> <a rel=\"nofollow noopener\" target=\"_blank\" href=\"https:\/\/www.informationgift.com\/ud\/faviconic\/\">Favicon browser support<\/a> \u2013 Information Gift <\/li>\n<li> <a rel=\"nofollow noopener\" target=\"_blank\" href=\"https:\/\/www.pixelresort.com\/blog\/app-icon-template\/\">Making iOS icon with App Icon Template<\/a> \u2013 Pixel Resorts <\/li>\n<li> <a rel=\"nofollow noopener\" target=\"_blank\" href=\"https:\/\/developer.apple.com\/safari\/resources\/\">Specifying a Webpage Icon for Web Clip<\/a> \u2013 Safari Developer Library <\/li>\n<\/ul>","protected":false},"excerpt":{"rendered":"<p>The bookmark icon or more commonly known as favicon (favorite icon) has been around since 1999 with the introduction of Internet Explorer 5. The bookmark icon or favicon is generally specified in 16\u00d716 px with .ico (sometimes also with .png format) and is displayed beside the URL address of the web browser or beside the&hellip;<\/p>\n","protected":false},"author":113,"featured_media":0,"comment_status":"open","ping_status":"open","sticky":false,"template":"","format":"standard","meta":{"_jetpack_memberships_contains_paid_content":false,"footnotes":""},"categories":[3399,352],"tags":[826,1391,1846,4646],"topic":[4520,4521],"class_list":["entry-content","is-maxi"],"acf":[],"yoast_head":"<!-- This site is optimized with the Yoast SEO Premium plugin v22.8 (Yoast SEO v27.6) - https:\/\/yoast.com\/product\/yoast-seo-premium-wordpress\/ -->\n<title>Adding iOS Icons for Bookmarked Website - Hongkiat<\/title>\n<meta name=\"description\" content=\"The bookmark icon or more commonly known as favicon (favorite icon) has been around since 1999 with the introduction of Internet Explorer 5. The bookmark\" \/>\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.hongkiat.com\/blog\/ios-touch-icon\/\" \/>\n<meta property=\"og:locale\" content=\"en_US\" \/>\n<meta property=\"og:type\" content=\"article\" \/>\n<meta property=\"og:title\" content=\"Adding iOS Icons for Bookmarked Website\" \/>\n<meta property=\"og:description\" content=\"The bookmark icon or more commonly known as favicon (favorite icon) has been around since 1999 with the introduction of Internet Explorer 5. The bookmark\" \/>\n<meta property=\"og:url\" content=\"https:\/\/www.hongkiat.com\/blog\/ios-touch-icon\/\" \/>\n<meta property=\"og:site_name\" content=\"Hongkiat\" \/>\n<meta property=\"article:publisher\" content=\"https:\/\/www.facebook.com\/hongkiatcom\" \/>\n<meta property=\"article:published_time\" content=\"2013-06-19T13:01:44+00:00\" \/>\n<meta property=\"article:modified_time\" content=\"2025-04-03T17:34:14+00:00\" \/>\n<meta property=\"og:image\" content=\"https:\/\/assets.hongkiat.com\/uploads\/ios-touch-icon\/hongkiatcom-icon.jpg\" \/>\n<meta name=\"author\" content=\"Thoriq Firdaus\" \/>\n<meta name=\"twitter:card\" content=\"summary_large_image\" \/>\n<meta name=\"twitter:creator\" content=\"@tfirdaus\" \/>\n<meta name=\"twitter:site\" content=\"@hongkiat\" \/>\n<meta name=\"twitter:label1\" content=\"Written by\" \/>\n\t<meta name=\"twitter:data1\" content=\"Thoriq Firdaus\" \/>\n\t<meta name=\"twitter:label2\" content=\"Est. reading time\" \/>\n\t<meta name=\"twitter:data2\" content=\"3 minutes\" \/>\n<script type=\"application\/ld+json\" class=\"yoast-schema-graph\">{\"@context\":\"https:\\\/\\\/schema.org\",\"@graph\":[{\"@type\":\"Article\",\"@id\":\"https:\\\/\\\/www.hongkiat.com\\\/blog\\\/ios-touch-icon\\\/#article\",\"isPartOf\":{\"@id\":\"https:\\\/\\\/www.hongkiat.com\\\/blog\\\/ios-touch-icon\\\/\"},\"author\":{\"name\":\"Thoriq Firdaus\",\"@id\":\"https:\\\/\\\/www.hongkiat.com\\\/blog\\\/#\\\/schema\\\/person\\\/e7948c7a175d211496331e4b6ce55807\"},\"headline\":\"Adding iOS Icons for Bookmarked Website\",\"datePublished\":\"2013-06-19T13:01:44+00:00\",\"dateModified\":\"2025-04-03T17:34:14+00:00\",\"mainEntityOfPage\":{\"@id\":\"https:\\\/\\\/www.hongkiat.com\\\/blog\\\/ios-touch-icon\\\/\"},\"wordCount\":414,\"commentCount\":2,\"publisher\":{\"@id\":\"https:\\\/\\\/www.hongkiat.com\\\/blog\\\/#organization\"},\"image\":{\"@id\":\"https:\\\/\\\/www.hongkiat.com\\\/blog\\\/ios-touch-icon\\\/#primaryimage\"},\"thumbnailUrl\":\"https:\\\/\\\/assets.hongkiat.com\\\/uploads\\\/ios-touch-icon\\\/hongkiatcom-icon.jpg\",\"keywords\":[\"Favicons\",\"Icons\",\"iOS\",\"Mobile Website Design &amp; Dev\"],\"articleSection\":[\"Mobile\",\"Web Design\"],\"inLanguage\":\"en-US\",\"potentialAction\":[{\"@type\":\"CommentAction\",\"name\":\"Comment\",\"target\":[\"https:\\\/\\\/www.hongkiat.com\\\/blog\\\/ios-touch-icon\\\/#respond\"]}]},{\"@type\":\"WebPage\",\"@id\":\"https:\\\/\\\/www.hongkiat.com\\\/blog\\\/ios-touch-icon\\\/\",\"url\":\"https:\\\/\\\/www.hongkiat.com\\\/blog\\\/ios-touch-icon\\\/\",\"name\":\"Adding iOS Icons for Bookmarked Website - Hongkiat\",\"isPartOf\":{\"@id\":\"https:\\\/\\\/www.hongkiat.com\\\/blog\\\/#website\"},\"primaryImageOfPage\":{\"@id\":\"https:\\\/\\\/www.hongkiat.com\\\/blog\\\/ios-touch-icon\\\/#primaryimage\"},\"image\":{\"@id\":\"https:\\\/\\\/www.hongkiat.com\\\/blog\\\/ios-touch-icon\\\/#primaryimage\"},\"thumbnailUrl\":\"https:\\\/\\\/assets.hongkiat.com\\\/uploads\\\/ios-touch-icon\\\/hongkiatcom-icon.jpg\",\"datePublished\":\"2013-06-19T13:01:44+00:00\",\"dateModified\":\"2025-04-03T17:34:14+00:00\",\"description\":\"The bookmark icon or more commonly known as favicon (favorite icon) has been around since 1999 with the introduction of Internet Explorer 5. The bookmark\",\"breadcrumb\":{\"@id\":\"https:\\\/\\\/www.hongkiat.com\\\/blog\\\/ios-touch-icon\\\/#breadcrumb\"},\"inLanguage\":\"en-US\",\"potentialAction\":[{\"@type\":\"ReadAction\",\"target\":[\"https:\\\/\\\/www.hongkiat.com\\\/blog\\\/ios-touch-icon\\\/\"]}]},{\"@type\":\"ImageObject\",\"inLanguage\":\"en-US\",\"@id\":\"https:\\\/\\\/www.hongkiat.com\\\/blog\\\/ios-touch-icon\\\/#primaryimage\",\"url\":\"https:\\\/\\\/assets.hongkiat.com\\\/uploads\\\/ios-touch-icon\\\/hongkiatcom-icon.jpg\",\"contentUrl\":\"https:\\\/\\\/assets.hongkiat.com\\\/uploads\\\/ios-touch-icon\\\/hongkiatcom-icon.jpg\"},{\"@type\":\"BreadcrumbList\",\"@id\":\"https:\\\/\\\/www.hongkiat.com\\\/blog\\\/ios-touch-icon\\\/#breadcrumb\",\"itemListElement\":[{\"@type\":\"ListItem\",\"position\":1,\"name\":\"Home\",\"item\":\"https:\\\/\\\/www.hongkiat.com\\\/blog\\\/\"},{\"@type\":\"ListItem\",\"position\":2,\"name\":\"Adding iOS Icons for Bookmarked Website\"}]},{\"@type\":\"WebSite\",\"@id\":\"https:\\\/\\\/www.hongkiat.com\\\/blog\\\/#website\",\"url\":\"https:\\\/\\\/www.hongkiat.com\\\/blog\\\/\",\"name\":\"Hongkiat\",\"description\":\"Tech and Design Tips\",\"publisher\":{\"@id\":\"https:\\\/\\\/www.hongkiat.com\\\/blog\\\/#organization\"},\"potentialAction\":[{\"@type\":\"SearchAction\",\"target\":{\"@type\":\"EntryPoint\",\"urlTemplate\":\"https:\\\/\\\/www.hongkiat.com\\\/blog\\\/?s={search_term_string}\"},\"query-input\":{\"@type\":\"PropertyValueSpecification\",\"valueRequired\":true,\"valueName\":\"search_term_string\"}}],\"inLanguage\":\"en-US\"},{\"@type\":\"Organization\",\"@id\":\"https:\\\/\\\/www.hongkiat.com\\\/blog\\\/#organization\",\"name\":\"Hongkiat.com\",\"url\":\"https:\\\/\\\/www.hongkiat.com\\\/blog\\\/\",\"logo\":{\"@type\":\"ImageObject\",\"inLanguage\":\"en-US\",\"@id\":\"https:\\\/\\\/www.hongkiat.com\\\/blog\\\/#\\\/schema\\\/logo\\\/image\\\/\",\"url\":\"https:\\\/\\\/www.hongkiat.com\\\/blog\\\/wp-content\\\/uploads\\\/hkdc-logo-rect-yoast.jpg\",\"contentUrl\":\"https:\\\/\\\/www.hongkiat.com\\\/blog\\\/wp-content\\\/uploads\\\/hkdc-logo-rect-yoast.jpg\",\"width\":1200,\"height\":799,\"caption\":\"Hongkiat.com\"},\"image\":{\"@id\":\"https:\\\/\\\/www.hongkiat.com\\\/blog\\\/#\\\/schema\\\/logo\\\/image\\\/\"},\"sameAs\":[\"https:\\\/\\\/www.facebook.com\\\/hongkiatcom\",\"https:\\\/\\\/x.com\\\/hongkiat\",\"https:\\\/\\\/www.pinterest.com\\\/hongkiat\\\/\"]},{\"@type\":\"Person\",\"@id\":\"https:\\\/\\\/www.hongkiat.com\\\/blog\\\/#\\\/schema\\\/person\\\/e7948c7a175d211496331e4b6ce55807\",\"name\":\"Thoriq Firdaus\",\"description\":\"Thoriq is a writer for Hongkiat.com with a passion for web design and development. He is the author of Responsive Web Design by Examples, where he covered his best approaches in developing responsive websites quickly with a framework.\",\"sameAs\":[\"https:\\\/\\\/thoriq.com\",\"https:\\\/\\\/x.com\\\/tfirdaus\"],\"jobTitle\":\"Web Developer\",\"url\":\"https:\\\/\\\/www.hongkiat.com\\\/blog\\\/author\\\/thoriq\\\/\"}]}<\/script>\n<!-- \/ Yoast SEO Premium plugin. -->","yoast_head_json":{"title":"Adding iOS Icons for Bookmarked Website - Hongkiat","description":"The bookmark icon or more commonly known as favicon (favorite icon) has been around since 1999 with the introduction of Internet Explorer 5. The bookmark","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.hongkiat.com\/blog\/ios-touch-icon\/","og_locale":"en_US","og_type":"article","og_title":"Adding iOS Icons for Bookmarked Website","og_description":"The bookmark icon or more commonly known as favicon (favorite icon) has been around since 1999 with the introduction of Internet Explorer 5. The bookmark","og_url":"https:\/\/www.hongkiat.com\/blog\/ios-touch-icon\/","og_site_name":"Hongkiat","article_publisher":"https:\/\/www.facebook.com\/hongkiatcom","article_published_time":"2013-06-19T13:01:44+00:00","article_modified_time":"2025-04-03T17:34:14+00:00","og_image":[{"url":"https:\/\/assets.hongkiat.com\/uploads\/ios-touch-icon\/hongkiatcom-icon.jpg","type":"","width":"","height":""}],"author":"Thoriq Firdaus","twitter_card":"summary_large_image","twitter_creator":"@tfirdaus","twitter_site":"@hongkiat","twitter_misc":{"Written by":"Thoriq Firdaus","Est. reading time":"3 minutes"},"schema":{"@context":"https:\/\/schema.org","@graph":[{"@type":"Article","@id":"https:\/\/www.hongkiat.com\/blog\/ios-touch-icon\/#article","isPartOf":{"@id":"https:\/\/www.hongkiat.com\/blog\/ios-touch-icon\/"},"author":{"name":"Thoriq Firdaus","@id":"https:\/\/www.hongkiat.com\/blog\/#\/schema\/person\/e7948c7a175d211496331e4b6ce55807"},"headline":"Adding iOS Icons for Bookmarked Website","datePublished":"2013-06-19T13:01:44+00:00","dateModified":"2025-04-03T17:34:14+00:00","mainEntityOfPage":{"@id":"https:\/\/www.hongkiat.com\/blog\/ios-touch-icon\/"},"wordCount":414,"commentCount":2,"publisher":{"@id":"https:\/\/www.hongkiat.com\/blog\/#organization"},"image":{"@id":"https:\/\/www.hongkiat.com\/blog\/ios-touch-icon\/#primaryimage"},"thumbnailUrl":"https:\/\/assets.hongkiat.com\/uploads\/ios-touch-icon\/hongkiatcom-icon.jpg","keywords":["Favicons","Icons","iOS","Mobile Website Design &amp; Dev"],"articleSection":["Mobile","Web Design"],"inLanguage":"en-US","potentialAction":[{"@type":"CommentAction","name":"Comment","target":["https:\/\/www.hongkiat.com\/blog\/ios-touch-icon\/#respond"]}]},{"@type":"WebPage","@id":"https:\/\/www.hongkiat.com\/blog\/ios-touch-icon\/","url":"https:\/\/www.hongkiat.com\/blog\/ios-touch-icon\/","name":"Adding iOS Icons for Bookmarked Website - Hongkiat","isPartOf":{"@id":"https:\/\/www.hongkiat.com\/blog\/#website"},"primaryImageOfPage":{"@id":"https:\/\/www.hongkiat.com\/blog\/ios-touch-icon\/#primaryimage"},"image":{"@id":"https:\/\/www.hongkiat.com\/blog\/ios-touch-icon\/#primaryimage"},"thumbnailUrl":"https:\/\/assets.hongkiat.com\/uploads\/ios-touch-icon\/hongkiatcom-icon.jpg","datePublished":"2013-06-19T13:01:44+00:00","dateModified":"2025-04-03T17:34:14+00:00","description":"The bookmark icon or more commonly known as favicon (favorite icon) has been around since 1999 with the introduction of Internet Explorer 5. The bookmark","breadcrumb":{"@id":"https:\/\/www.hongkiat.com\/blog\/ios-touch-icon\/#breadcrumb"},"inLanguage":"en-US","potentialAction":[{"@type":"ReadAction","target":["https:\/\/www.hongkiat.com\/blog\/ios-touch-icon\/"]}]},{"@type":"ImageObject","inLanguage":"en-US","@id":"https:\/\/www.hongkiat.com\/blog\/ios-touch-icon\/#primaryimage","url":"https:\/\/assets.hongkiat.com\/uploads\/ios-touch-icon\/hongkiatcom-icon.jpg","contentUrl":"https:\/\/assets.hongkiat.com\/uploads\/ios-touch-icon\/hongkiatcom-icon.jpg"},{"@type":"BreadcrumbList","@id":"https:\/\/www.hongkiat.com\/blog\/ios-touch-icon\/#breadcrumb","itemListElement":[{"@type":"ListItem","position":1,"name":"Home","item":"https:\/\/www.hongkiat.com\/blog\/"},{"@type":"ListItem","position":2,"name":"Adding iOS Icons for Bookmarked Website"}]},{"@type":"WebSite","@id":"https:\/\/www.hongkiat.com\/blog\/#website","url":"https:\/\/www.hongkiat.com\/blog\/","name":"Hongkiat","description":"Tech and Design Tips","publisher":{"@id":"https:\/\/www.hongkiat.com\/blog\/#organization"},"potentialAction":[{"@type":"SearchAction","target":{"@type":"EntryPoint","urlTemplate":"https:\/\/www.hongkiat.com\/blog\/?s={search_term_string}"},"query-input":{"@type":"PropertyValueSpecification","valueRequired":true,"valueName":"search_term_string"}}],"inLanguage":"en-US"},{"@type":"Organization","@id":"https:\/\/www.hongkiat.com\/blog\/#organization","name":"Hongkiat.com","url":"https:\/\/www.hongkiat.com\/blog\/","logo":{"@type":"ImageObject","inLanguage":"en-US","@id":"https:\/\/www.hongkiat.com\/blog\/#\/schema\/logo\/image\/","url":"https:\/\/www.hongkiat.com\/blog\/wp-content\/uploads\/hkdc-logo-rect-yoast.jpg","contentUrl":"https:\/\/www.hongkiat.com\/blog\/wp-content\/uploads\/hkdc-logo-rect-yoast.jpg","width":1200,"height":799,"caption":"Hongkiat.com"},"image":{"@id":"https:\/\/www.hongkiat.com\/blog\/#\/schema\/logo\/image\/"},"sameAs":["https:\/\/www.facebook.com\/hongkiatcom","https:\/\/x.com\/hongkiat","https:\/\/www.pinterest.com\/hongkiat\/"]},{"@type":"Person","@id":"https:\/\/www.hongkiat.com\/blog\/#\/schema\/person\/e7948c7a175d211496331e4b6ce55807","name":"Thoriq Firdaus","description":"Thoriq is a writer for Hongkiat.com with a passion for web design and development. He is the author of Responsive Web Design by Examples, where he covered his best approaches in developing responsive websites quickly with a framework.","sameAs":["https:\/\/thoriq.com","https:\/\/x.com\/tfirdaus"],"jobTitle":"Web Developer","url":"https:\/\/www.hongkiat.com\/blog\/author\/thoriq\/"}]}},"jetpack_featured_media_url":"https:\/\/","jetpack_shortlink":"https:\/\/wp.me\/p4uxU-4xg","jetpack_sharing_enabled":true,"_links":{"self":[{"href":"https:\/\/www.hongkiat.com\/blog\/wp-json\/wp\/v2\/posts\/17438","targetHints":{"allow":["GET"]}}],"collection":[{"href":"https:\/\/www.hongkiat.com\/blog\/wp-json\/wp\/v2\/posts"}],"about":[{"href":"https:\/\/www.hongkiat.com\/blog\/wp-json\/wp\/v2\/types\/post"}],"author":[{"embeddable":true,"href":"https:\/\/www.hongkiat.com\/blog\/wp-json\/wp\/v2\/users\/113"}],"replies":[{"embeddable":true,"href":"https:\/\/www.hongkiat.com\/blog\/wp-json\/wp\/v2\/comments?post=17438"}],"version-history":[{"count":3,"href":"https:\/\/www.hongkiat.com\/blog\/wp-json\/wp\/v2\/posts\/17438\/revisions"}],"predecessor-version":[{"id":73606,"href":"https:\/\/www.hongkiat.com\/blog\/wp-json\/wp\/v2\/posts\/17438\/revisions\/73606"}],"wp:attachment":[{"href":"https:\/\/www.hongkiat.com\/blog\/wp-json\/wp\/v2\/media?parent=17438"}],"wp:term":[{"taxonomy":"category","embeddable":true,"href":"https:\/\/www.hongkiat.com\/blog\/wp-json\/wp\/v2\/categories?post=17438"},{"taxonomy":"post_tag","embeddable":true,"href":"https:\/\/www.hongkiat.com\/blog\/wp-json\/wp\/v2\/tags?post=17438"},{"taxonomy":"topic","embeddable":true,"href":"https:\/\/www.hongkiat.com\/blog\/wp-json\/wp\/v2\/topic?post=17438"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}