{"id":83694,"date":"2022-08-18T04:56:57","date_gmt":"2022-08-18T02:56:57","guid":{"rendered":"https:\/\/rmarketingdigital.com\/dev\/compatibilidad-con-iconos-adaptables-en-pwa-con-iconos-enmascarables\/"},"modified":"2020-09-17T01:46:57","modified_gmt":"2020-09-17T04:46:57","slug":"compatibilidad-con-iconos-adaptables-en-pwa-con-iconos-enmascarables","status":"publish","type":"post","link":"https:\/\/rmarketingdigital.com\/de\/dev\/compatibilidad-con-iconos-adaptables-en-pwa-con-iconos-enmascarables\/","title":{"rendered":"Adaptive Symbolunterst\u00fctzung in PWA mit maskierbaren Symbolen"},"content":{"rendered":"<div id=\"ez-toc-container\" class=\"ez-toc-v2_0_86 counter-hierarchy ez-toc-counter ez-toc-grey ez-toc-container-direction\">\n<div class=\"ez-toc-title-container\">\n<p class=\"ez-toc-title\" style=\"cursor:inherit\">Contenidos<\/p>\n<span class=\"ez-toc-title-toggle\"><a href=\"#\" class=\"ez-toc-pull-right ez-toc-btn ez-toc-btn-xs ez-toc-btn-default ez-toc-toggle\" aria-label=\"Toggle Table of Content\"><span class=\"ez-toc-js-icon-con\"><span class=\"\"><span class=\"eztoc-hide\" style=\"display:none;\">Toggle<\/span><span class=\"ez-toc-icon-toggle-span\"><svg style=\"fill: #999;color:#999\" xmlns=\"http:\/\/www.w3.org\/2000\/svg\" class=\"list-377408\" width=\"20px\" height=\"20px\" viewBox=\"0 0 24 24\" fill=\"none\"><path d=\"M6 6H4v2h2V6zm14 0H8v2h12V6zM4 11h2v2H4v-2zm16 0H8v2h12v-2zM4 16h2v2H4v-2zm16 0H8v2h12v-2z\" fill=\"currentColor\"><\/path><\/svg><svg style=\"fill: #999;color:#999\" class=\"arrow-unsorted-368013\" xmlns=\"http:\/\/www.w3.org\/2000\/svg\" width=\"10px\" height=\"10px\" viewBox=\"0 0 24 24\" version=\"1.2\" baseProfile=\"tiny\"><path d=\"M18.2 9.3l-6.2-6.3-6.2 6.3c-.2.2-.3.4-.3.7s.1.5.3.7c.2.2.4.3.7.3h11c.3 0 .5-.1.7-.3.2-.2.3-.5.3-.7s-.1-.5-.3-.7zM5.8 14.7l6.2 6.3 6.2-6.3c.2-.2.3-.5.3-.7s-.1-.5-.3-.7c-.2-.2-.4-.3-.7-.3h-11c-.3 0-.5.1-.7.3-.2.2-.3.5-.3.7s.1.5.3.7z\"\/><\/svg><\/span><\/span><\/span><\/a><\/span><\/div>\n<nav><ul class='ez-toc-list ez-toc-list-level-1 ' ><li class='ez-toc-page-1 ez-toc-heading-level-2'><a class=\"ez-toc-link ez-toc-heading-1\" href=\"https:\/\/rmarketingdigital.com\/de\/dev\/compatibilidad-con-iconos-adaptables-en-pwa-con-iconos-enmascarables\/#%C2%BFQue-son-los-iconos-enmascarables\" >\u00bfQu\u00e9 son los iconos enmascarables?<\/a><\/li><li class='ez-toc-page-1 ez-toc-heading-level-2'><a class=\"ez-toc-link ez-toc-heading-2\" href=\"https:\/\/rmarketingdigital.com\/de\/dev\/compatibilidad-con-iconos-adaptables-en-pwa-con-iconos-enmascarables\/#%C2%BFEstan-listos-mis-iconos-actuales\" >\u00bfEst\u00e1n listos mis iconos actuales?<\/a><\/li><li class='ez-toc-page-1 ez-toc-heading-level-2'><a class=\"ez-toc-link ez-toc-heading-3\" href=\"https:\/\/rmarketingdigital.com\/de\/dev\/compatibilidad-con-iconos-adaptables-en-pwa-con-iconos-enmascarables\/#%C2%BFComo-adopto-iconos-enmascarables\" >\u00bfC\u00f3mo adopto iconos enmascarables?<\/a><\/li><\/ul><\/nav><\/div>\n<p><\/p>\n<div>\n<header class=\"w-article-header\">\n<p class=\"w-article-header__subhead w-mb--non\">\n<p>          Un nuevo formato de icono para usar iconos adaptables en plataformas de soporte.\n        <\/p>\n<p>\n          <time>19 de diciembre de 2019<\/time><\/p>\n<\/header>\n<h2 id=\"what\"><span class=\"ez-toc-section\" id=\"%C2%BFQue-son-los-iconos-enmascarables\"><\/span>\u00bfQu\u00e9 son los iconos enmascarables? <span class=\"ez-toc-section-end\"><\/span><\/h2>\n<p>Si ha instalado una aplicaci\u00f3n web progresiva en un tel\u00e9fono Android reciente, es posible que observe que el icono aparece con un fondo blanco.  Android Oreo introdujo \u00edconos adaptables, que muestran \u00edconos de aplicaciones en una variedad de formas en diferentes modelos de dispositivos.  Los iconos que no siguen este nuevo formato tienen un fondo blanco.<\/p>\n<figure class=\"w-figure\">\n  <img alt='homescreen-any-8764784' src='https:\/\/rmarketingdigital.com\/wp-content\/uploads\/2020\/09\/homescreen-any-8764784.png' alt=\"Iconos de PWA en c\u00edrculos blancos en Android\" style=\"width: 400px; max-width: 100%\"><figcaption class=\"w-figcaption\">\n<p>    Los iconos transparentes de PWA aparecen dentro de c\u00edrculos blancos en Android<br \/>\n  <\/figcaption><\/figure>\n<p>Los iconos enmascarables son un nuevo formato de icono que le da m\u00e1s control y permite que su aplicaci\u00f3n web progresiva utilice iconos adaptables.  Si proporciona un \u00edcono enmascarable, su \u00edcono puede llenar toda la forma y verse bien en todos los dispositivos Android.  Firefox y Chrome han agregado recientemente soporte para este nuevo formato, y puede adoptarlo en sus aplicaciones.<\/p>\n<figure class=\"w-figure\">\n  <img alt='homescreen-maskable-2836340' src='https:\/\/rmarketingdigital.com\/wp-content\/uploads\/2020\/09\/homescreen-maskable-2836340.png' alt=\"Iconos de PWA que cubren todo el c\u00edrculo en Android\" style=\"width: 400px; max-width: 100%\"><figcaption class=\"w-figcaption\">\n<p>    Los iconos enmascarables cubren todo el c\u00edrculo en su lugar<br \/>\n  <\/figcaption><\/figure>\n<h2 id=\"are-my-current-icons-ready\"><span class=\"ez-toc-section\" id=\"%C2%BFEstan-listos-mis-iconos-actuales\"><\/span>\u00bfEst\u00e1n listos mis iconos actuales? <span class=\"ez-toc-section-end\"><\/span><\/h2>\n<p>Dado que los \u00edconos enmascarables deben admitir una variedad de formas, proporcione una imagen opaca con algo de relleno que el navegador puede recortar posteriormente en la forma y tama\u00f1o deseados.  Es mejor no depender de ninguna forma en particular, ya que puede variar seg\u00fan el navegador y la plataforma.<\/p>\n<figure class=\"w-figure w-figure--inline-right\">\n  <video class=\"w-screenshot\" autoplay=\"\" loop=\"\" muted=\"\" playsinline=\"\" aria-label=\"Different masks applied to a maskable icon\"><source src=\"https:\/\/web.dev\/maskable-icon\/fugu-mask.webm\" type=\"video\/webm; codecs=vp8\"><source src=\"https:\/\/web.dev\/maskable-icon\/fugu-mask.mp4\" type=\"video\/mp4; codecs=h264\"><\/source><\/source><\/video><figcaption class=\"w-figcaption\">\n<p>    Diferentes formas espec\u00edficas de plataforma<br \/>\n  <\/figcaption><\/figure>\n<p>Afortunadamente, hay un bien definido y <a rel=\"nofollow noopener noreferrer\" target=\"_blank\" href=\"https:\/\/w3c.github.io\/manifest\/#icon-masks\">estandarizado<\/a> \u00abZona m\u00ednima segura\u00bb que respetan todas las plataformas.  Las partes importantes de su icono, como su logotipo, deben estar dentro de un \u00e1rea circular en el centro del icono con un radio igual al 40% del ancho del icono.  El borde exterior del 10% se puede recortar.<\/p>\n<p>Puede verificar qu\u00e9 partes de sus \u00edconos aterrizan dentro de la zona segura con Chrome DevTools.  Con su aplicaci\u00f3n web progresiva abierta, inicie DevTools y navegue hasta la <strong>Solicitud<\/strong> panel.  En el <strong>Iconos<\/strong> secci\u00f3n, puede elegir <strong>Mostrar solo el \u00e1rea segura m\u00ednima para iconos enmascarables<\/strong>.  Sus iconos se recortar\u00e1n de modo que solo el \u00e1rea segura sea visible.  Si su logotipo es visible dentro de esta \u00e1rea segura, est\u00e1 listo para comenzar.<\/p>\n<figure class=\"w-figure\">\n  <img alt='devtools-3324372' src='https:\/\/rmarketingdigital.com\/wp-content\/uploads\/2020\/09\/devtools-3324372.png' class=\"w-screenshot\" alt=\"Panel de aplicaciones en DevTools que muestra iconos PWA con bordes recortados\"><figcaption class=\"w-figcaption\">\n<p>    El panel de aplicaciones<br \/>\n  <\/figcaption><\/figure>\n<p>Si desea obtener una vista previa de su icono enmascarable en otras formas en las que puede aparecer en Android, he creado una herramienta llamada <a rel=\"nofollow noopener noreferrer\" target=\"_blank\" href=\"https:\/\/maskable.app\/\">Maskable.app<\/a>.  Abra un \u00edcono, luego Maskable.app le permitir\u00e1 probar varias formas y tama\u00f1os, y podr\u00e1 compartir la vista previa con otros miembros de su equipo.<\/p>\n<h2 id=\"how-do-i-adopt-maskable-icons\"><span class=\"ez-toc-section\" id=\"%C2%BFComo-adopto-iconos-enmascarables\"><\/span>\u00bfC\u00f3mo adopto iconos enmascarables? <span class=\"ez-toc-section-end\"><\/span><\/h2>\n<p>Si desea crear un icono enmascarable basado en su icono existente, puede utilizar el <a rel=\"nofollow noopener noreferrer\" target=\"_blank\" href=\"https:\/\/maskable.app\/editor\">Editor de Maskable.app<\/a>.  Sube tu icono, ajusta el color y el tama\u00f1o, luego exporta la imagen.<\/p>\n<figure class=\"w-figure\">\n  <img alt='maskable-app-editor-2619956' src='https:\/\/rmarketingdigital.com\/wp-content\/uploads\/2020\/09\/maskable-app-editor-2619956.png' class=\"w-screenshot\" alt=\"Captura de pantalla de Maskable.app Editor\"><figcaption class=\"w-figcaption\">\n<p>    Creaci\u00f3n de iconos en Maskable.app Editor<br \/>\n  <\/figcaption><\/figure>\n<p>Una vez que haya creado una imagen de icono enmascarable y la haya probado en DevTools, deber\u00e1 actualizar su <a rel=\"nofollow noopener noreferrer\" target=\"_blank\" href=\"https:\/\/developers.google.com\/web\/fundamentals\/web-app-manifest\">Manifiesto de la aplicaci\u00f3n web<\/a> para se\u00f1alar los nuevos activos.  El manifiesto de aplicaci\u00f3n web proporciona informaci\u00f3n sobre su aplicaci\u00f3n web en un archivo JSON e incluye un <a rel=\"nofollow noopener noreferrer\" target=\"_blank\" href=\"https:\/\/developers.google.com\/web\/fundamentals\/web-app-manifest#icons\"><code>icons<\/code>  formaci\u00f3n<\/a>.<\/p>\n<p>Con la inclusi\u00f3n de \u00edconos enmascarables, se ha agregado un nuevo valor de propiedad para los recursos de im\u00e1genes enumerados en un manifiesto de aplicaci\u00f3n web.  los <code>purpose<\/code> El campo le dice al navegador c\u00f3mo debe usarse su icono.  De forma predeterminada, los iconos tendr\u00e1n el prop\u00f3sito de <code>\"any\"<\/code>.  Estos iconos cambiar\u00e1n de tama\u00f1o sobre un fondo blanco en Android.<\/p>\n<p>Los iconos enmascarables deben tener un prop\u00f3sito diferente: <code>\"maskable\"<\/code>.  Esto indica que una imagen est\u00e1 destinada a utilizarse con m\u00e1scaras de iconos, lo que le brinda m\u00e1s control sobre el resultado.  De esta forma, sus iconos no tendr\u00e1n un fondo blanco.  Tambi\u00e9n puede especificar varios prop\u00f3sitos separados por espacios (por ejemplo, <code>\"any maskable\"<\/code>), si desea que su icono enmascarable se utilice sin m\u00e1scara en otros dispositivos.<\/p>\n<p><web-copy-code><\/p>\n<pre class=\"language-json\"><code class=\"language-json\"><span class=\"token punctuation\">{<\/span><br>\u2026<br><span class=\"token property\">\"icons\"<\/span><span class=\"token operator\">:<\/span> <span class=\"token punctuation\">[<\/span><br>\u2026<br><span class=\"token punctuation\">{<\/span><br><span class=\"token property\">\"src\"<\/span><span class=\"token operator\">:<\/span> <span class=\"token string\">\"path\/to\/maskable_icon.png\"<\/span><span class=\"token punctuation\">,<\/span><br><span class=\"token property\">\"sizes\"<\/span><span class=\"token operator\">:<\/span> <span class=\"token string\">\"196x196\"<\/span><span class=\"token punctuation\">,<\/span><br><span class=\"token property\">\"type\"<\/span><span class=\"token operator\">:<\/span> <span class=\"token string\">\"image\/png\"<\/span><span class=\"token punctuation\">,<\/span><br><span class=\"token property\">\"purpose\"<\/span><span class=\"token operator\">:<\/span> <span class=\"token string\">\"any maskable\"<\/span> <br><span class=\"token punctuation\">}<\/span><br><span class=\"token punctuation\">]<\/span><br>\u2026<br><span class=\"token punctuation\">}<\/span><\/code><\/pre>\n<p><\/web-copy-code><\/p>\n<p>Con esto, puede continuar y crear sus propios \u00edconos enmascarables, asegur\u00e1ndose de que su aplicaci\u00f3n se vea bien de borde a borde (y por lo que vale, de c\u00edrculo a c\u00edrculo, de \u00f3valo a \u00f3valo \ud83d\ude04).<\/p>\n<p>    <web-feedback additional-questions=\"api\"><\/web-feedback>\n  <\/div>\n","protected":false},"excerpt":{"rendered":"<p>Un nuevo formato de icono para usar iconos adaptables en plataformas de soporte. 19 de diciembre de 2019 \u00bfQu\u00e9 son los iconos enmascarables? Si ha instalado una aplicaci\u00f3n web progresiva&#8230;<\/p>","protected":false},"author":1,"featured_media":83695,"comment_status":"closed","ping_status":"closed","sticky":false,"template":"","format":"standard","meta":{"footnotes":""},"categories":[1356],"tags":[],"class_list":["post-83694","post","type-post","status-publish","format-standard","has-post-thumbnail","category-dev"],"yoast_head":"<!-- This site is optimized with the Yoast SEO Premium plugin v27.0 (Yoast SEO v28.2) - https:\/\/yoast.com\/product\/yoast-seo-premium-wordpress\/ -->\n<title>Compatibilidad con iconos adaptables en PWA con iconos enmascarables - R Marketing Digital<\/title>\n<meta name=\"description\" content=\"Un nuevo formato de icono para usar iconos adaptables en plataformas de soporte. 19 de diciembre de 2019 \u00bfQu\u00e9 son los iconos enmascarables? Si ha\" \/>\n<meta name=\"robots\" content=\"index, follow, max-snippet:-1, max-image-preview:large, max-video-preview:-1\" \/>\n<link rel=\"canonical\" href=\"https:\/\/rmarketingdigital.com\/de\/dev\/support-pour-adaptive-icons-in-pwa-with-mask-icons\/\" \/>\n<meta property=\"og:locale\" content=\"de_DE\" \/>\n<meta property=\"og:type\" content=\"article\" \/>\n<meta property=\"og:title\" content=\"Compatibilidad con iconos adaptables en PWA con iconos enmascarables\" \/>\n<meta property=\"og:description\" content=\"Un nuevo formato de icono para usar iconos adaptables en plataformas de soporte. 19 de diciembre de 2019 \u00bfQu\u00e9 son los iconos enmascarables? Si ha\" \/>\n<meta property=\"og:url\" content=\"https:\/\/rmarketingdigital.com\/de\/dev\/support-pour-adaptive-icons-in-pwa-with-mask-icons\/\" \/>\n<meta property=\"og:site_name\" content=\"R Marketing Digital\" \/>\n<meta property=\"article:published_time\" content=\"2022-08-18T02:56:57+00:00\" \/>\n<meta property=\"og:image\" content=\"https:\/\/rmarketingdigital.com\/wp-content\/uploads\/2020\/09\/hero-6951118.png\" \/>\n\t<meta property=\"og:image:width\" content=\"1200\" \/>\n\t<meta property=\"og:image:height\" content=\"600\" \/>\n\t<meta property=\"og:image:type\" content=\"image\/png\" \/>\n<meta name=\"author\" content=\"R Marketing Digital\" \/>\n<meta name=\"twitter:card\" content=\"summary_large_image\" \/>\n<script type=\"application\/ld+json\" class=\"yoast-schema-graph\">{\"@context\":\"https:\\\/\\\/schema.org\",\"@graph\":[{\"@type\":\"Article\",\"@id\":\"https:\\\/\\\/rmarketingdigital.com\\\/fr\\\/dev\\\/support-pour-adaptive-icons-in-pwa-with-mask-icons\\\/#article\",\"isPartOf\":{\"@id\":\"https:\\\/\\\/rmarketingdigital.com\\\/fr\\\/dev\\\/support-pour-adaptive-icons-in-pwa-with-mask-icons\\\/\"},\"author\":{\"name\":\"R Marketing Digital\",\"@id\":\"https:\\\/\\\/rmarketingdigital.com\\\/#\\\/schema\\\/person\\\/7c0d9782b2977b840b3740f00c69a73e\"},\"headline\":\"Compatibilidad con iconos adaptables en PWA con iconos enmascarables\",\"datePublished\":\"2022-08-18T02:56:57+00:00\",\"mainEntityOfPage\":{\"@id\":\"https:\\\/\\\/rmarketingdigital.com\\\/fr\\\/dev\\\/support-pour-adaptive-icons-in-pwa-with-mask-icons\\\/\"},\"wordCount\":699,\"image\":{\"@id\":\"https:\\\/\\\/rmarketingdigital.com\\\/fr\\\/dev\\\/support-pour-adaptive-icons-in-pwa-with-mask-icons\\\/#primaryimage\"},\"thumbnailUrl\":\"https:\\\/\\\/rmarketingdigital.com\\\/wp-content\\\/uploads\\\/2020\\\/09\\\/hero-6951118.png\",\"articleSection\":[\"Dev\"],\"inLanguage\":\"de\"},{\"@type\":\"WebPage\",\"@id\":\"https:\\\/\\\/rmarketingdigital.com\\\/fr\\\/dev\\\/support-pour-adaptive-icons-in-pwa-with-mask-icons\\\/\",\"url\":\"https:\\\/\\\/rmarketingdigital.com\\\/fr\\\/dev\\\/support-pour-adaptive-icons-in-pwa-with-mask-icons\\\/\",\"name\":\"Compatibilidad con iconos adaptables en PWA con iconos enmascarables - R Marketing Digital\",\"isPartOf\":{\"@id\":\"https:\\\/\\\/rmarketingdigital.com\\\/#website\"},\"primaryImageOfPage\":{\"@id\":\"https:\\\/\\\/rmarketingdigital.com\\\/fr\\\/dev\\\/support-pour-adaptive-icons-in-pwa-with-mask-icons\\\/#primaryimage\"},\"image\":{\"@id\":\"https:\\\/\\\/rmarketingdigital.com\\\/fr\\\/dev\\\/support-pour-adaptive-icons-in-pwa-with-mask-icons\\\/#primaryimage\"},\"thumbnailUrl\":\"https:\\\/\\\/rmarketingdigital.com\\\/wp-content\\\/uploads\\\/2020\\\/09\\\/hero-6951118.png\",\"datePublished\":\"2022-08-18T02:56:57+00:00\",\"author\":{\"@id\":\"https:\\\/\\\/rmarketingdigital.com\\\/#\\\/schema\\\/person\\\/7c0d9782b2977b840b3740f00c69a73e\"},\"description\":\"Un nuevo formato de icono para usar iconos adaptables en plataformas de soporte. 19 de diciembre de 2019 \u00bfQu\u00e9 son los iconos enmascarables? Si ha\",\"inLanguage\":\"de\",\"potentialAction\":[{\"@type\":\"ReadAction\",\"target\":[\"https:\\\/\\\/rmarketingdigital.com\\\/fr\\\/dev\\\/support-pour-adaptive-icons-in-pwa-with-mask-icons\\\/\"]}]},{\"@type\":\"ImageObject\",\"inLanguage\":\"de\",\"@id\":\"https:\\\/\\\/rmarketingdigital.com\\\/fr\\\/dev\\\/support-pour-adaptive-icons-in-pwa-with-mask-icons\\\/#primaryimage\",\"url\":\"https:\\\/\\\/rmarketingdigital.com\\\/wp-content\\\/uploads\\\/2020\\\/09\\\/hero-6951118.png\",\"contentUrl\":\"https:\\\/\\\/rmarketingdigital.com\\\/wp-content\\\/uploads\\\/2020\\\/09\\\/hero-6951118.png\",\"width\":1200,\"height\":600,\"caption\":\"hero-6951118-9279954-png\"},{\"@type\":\"WebSite\",\"@id\":\"https:\\\/\\\/rmarketingdigital.com\\\/#website\",\"url\":\"https:\\\/\\\/rmarketingdigital.com\\\/\",\"name\":\"R Marketing Digital\",\"description\":\"Agencia SEO | Publicidad redes sociales | Community Management\",\"potentialAction\":[{\"@type\":\"SearchAction\",\"target\":{\"@type\":\"EntryPoint\",\"urlTemplate\":\"https:\\\/\\\/rmarketingdigital.com\\\/?s={search_term_string}\"},\"query-input\":{\"@type\":\"PropertyValueSpecification\",\"valueRequired\":true,\"valueName\":\"search_term_string\"}}],\"inLanguage\":\"de\"},{\"@type\":\"Person\",\"@id\":\"https:\\\/\\\/rmarketingdigital.com\\\/#\\\/schema\\\/person\\\/7c0d9782b2977b840b3740f00c69a73e\",\"name\":\"R Marketing Digital\",\"image\":{\"@type\":\"ImageObject\",\"inLanguage\":\"de\",\"@id\":\"https:\\\/\\\/secure.gravatar.com\\\/avatar\\\/c5599c203e0120b8ccbff4666af86f35f9b3dcad468a8bc6295313a3964a80be?s=96&d=mm&r=g\",\"url\":\"https:\\\/\\\/secure.gravatar.com\\\/avatar\\\/c5599c203e0120b8ccbff4666af86f35f9b3dcad468a8bc6295313a3964a80be?s=96&d=mm&r=g\",\"contentUrl\":\"https:\\\/\\\/secure.gravatar.com\\\/avatar\\\/c5599c203e0120b8ccbff4666af86f35f9b3dcad468a8bc6295313a3964a80be?s=96&d=mm&r=g\",\"caption\":\"R Marketing Digital\"}}]}<\/script>\n<!-- \/ Yoast SEO Premium plugin. -->","yoast_head_json":{"title":"Compatibilidad con iconos adaptables en PWA con iconos enmascarables - R Marketing Digital","description":"Ein neues Symbolformat f\u00fcr die Verwendung von reaktionsf\u00e4higen Symbolen auf Support-Plattformen. 19. Dezember 2019 Was sind maskierbare Symbole? Wenn Sie haben","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:\/\/rmarketingdigital.com\/de\/dev\/support-pour-adaptive-icons-in-pwa-with-mask-icons\/","og_locale":"de_DE","og_type":"article","og_title":"Compatibilidad con iconos adaptables en PWA con iconos enmascarables","og_description":"Un nuevo formato de icono para usar iconos adaptables en plataformas de soporte. 19 de diciembre de 2019 \u00bfQu\u00e9 son los iconos enmascarables? Si ha","og_url":"https:\/\/rmarketingdigital.com\/de\/dev\/support-pour-adaptive-icons-in-pwa-with-mask-icons\/","og_site_name":"R Marketing Digital","article_published_time":"2022-08-18T02:56:57+00:00","og_image":[{"width":1200,"height":600,"url":"https:\/\/rmarketingdigital.com\/wp-content\/uploads\/2020\/09\/hero-6951118.png","type":"image\/png"}],"author":"R Marketing Digital","twitter_card":"summary_large_image","schema":{"@context":"https:\/\/schema.org","@graph":[{"@type":"Article","@id":"https:\/\/rmarketingdigital.com\/fr\/dev\/support-pour-adaptive-icons-in-pwa-with-mask-icons\/#article","isPartOf":{"@id":"https:\/\/rmarketingdigital.com\/fr\/dev\/support-pour-adaptive-icons-in-pwa-with-mask-icons\/"},"author":{"name":"R Marketing Digital","@id":"https:\/\/rmarketingdigital.com\/#\/schema\/person\/7c0d9782b2977b840b3740f00c69a73e"},"headline":"Compatibilidad con iconos adaptables en PWA con iconos enmascarables","datePublished":"2022-08-18T02:56:57+00:00","mainEntityOfPage":{"@id":"https:\/\/rmarketingdigital.com\/fr\/dev\/support-pour-adaptive-icons-in-pwa-with-mask-icons\/"},"wordCount":699,"image":{"@id":"https:\/\/rmarketingdigital.com\/fr\/dev\/support-pour-adaptive-icons-in-pwa-with-mask-icons\/#primaryimage"},"thumbnailUrl":"https:\/\/rmarketingdigital.com\/wp-content\/uploads\/2020\/09\/hero-6951118.png","articleSection":["Dev"],"inLanguage":"de"},{"@type":"WebPage","@id":"https:\/\/rmarketingdigital.com\/fr\/dev\/support-pour-adaptive-icons-in-pwa-with-mask-icons\/","url":"https:\/\/rmarketingdigital.com\/fr\/dev\/support-pour-adaptive-icons-in-pwa-with-mask-icons\/","name":"Compatibilidad con iconos adaptables en PWA con iconos enmascarables - R Marketing Digital","isPartOf":{"@id":"https:\/\/rmarketingdigital.com\/#website"},"primaryImageOfPage":{"@id":"https:\/\/rmarketingdigital.com\/fr\/dev\/support-pour-adaptive-icons-in-pwa-with-mask-icons\/#primaryimage"},"image":{"@id":"https:\/\/rmarketingdigital.com\/fr\/dev\/support-pour-adaptive-icons-in-pwa-with-mask-icons\/#primaryimage"},"thumbnailUrl":"https:\/\/rmarketingdigital.com\/wp-content\/uploads\/2020\/09\/hero-6951118.png","datePublished":"2022-08-18T02:56:57+00:00","author":{"@id":"https:\/\/rmarketingdigital.com\/#\/schema\/person\/7c0d9782b2977b840b3740f00c69a73e"},"description":"Ein neues Symbolformat f\u00fcr die Verwendung von reaktionsf\u00e4higen Symbolen auf Support-Plattformen. 19. Dezember 2019 Was sind maskierbare Symbole? Wenn Sie haben","inLanguage":"de","potentialAction":[{"@type":"ReadAction","target":["https:\/\/rmarketingdigital.com\/fr\/dev\/support-pour-adaptive-icons-in-pwa-with-mask-icons\/"]}]},{"@type":"ImageObject","inLanguage":"de","@id":"https:\/\/rmarketingdigital.com\/fr\/dev\/support-pour-adaptive-icons-in-pwa-with-mask-icons\/#primaryimage","url":"https:\/\/rmarketingdigital.com\/wp-content\/uploads\/2020\/09\/hero-6951118.png","contentUrl":"https:\/\/rmarketingdigital.com\/wp-content\/uploads\/2020\/09\/hero-6951118.png","width":1200,"height":600,"caption":"hero-6951118-9279954-png"},{"@type":"WebSite","@id":"https:\/\/rmarketingdigital.com\/#website","url":"https:\/\/rmarketingdigital.com\/","name":"R Digitales Marketing","description":"SEO Agentur | Werbung f\u00fcr soziale Netzwerke | Community Management","potentialAction":[{"@type":"SearchAction","target":{"@type":"EntryPoint","urlTemplate":"https:\/\/rmarketingdigital.com\/?s={search_term_string}"},"query-input":{"@type":"PropertyValueSpecification","valueRequired":true,"valueName":"search_term_string"}}],"inLanguage":"de"},{"@type":"Person","@id":"https:\/\/rmarketingdigital.com\/#\/schema\/person\/7c0d9782b2977b840b3740f00c69a73e","name":"R Digitales Marketing","image":{"@type":"ImageObject","inLanguage":"de","@id":"https:\/\/secure.gravatar.com\/avatar\/c5599c203e0120b8ccbff4666af86f35f9b3dcad468a8bc6295313a3964a80be?s=96&d=mm&r=g","url":"https:\/\/secure.gravatar.com\/avatar\/c5599c203e0120b8ccbff4666af86f35f9b3dcad468a8bc6295313a3964a80be?s=96&d=mm&r=g","contentUrl":"https:\/\/secure.gravatar.com\/avatar\/c5599c203e0120b8ccbff4666af86f35f9b3dcad468a8bc6295313a3964a80be?s=96&d=mm&r=g","caption":"R Marketing Digital"}}]}},"_links":{"self":[{"href":"https:\/\/rmarketingdigital.com\/de\/wp-json\/wp\/v2\/posts\/83694","targetHints":{"allow":["GET"]}}],"collection":[{"href":"https:\/\/rmarketingdigital.com\/de\/wp-json\/wp\/v2\/posts"}],"about":[{"href":"https:\/\/rmarketingdigital.com\/de\/wp-json\/wp\/v2\/types\/post"}],"author":[{"embeddable":true,"href":"https:\/\/rmarketingdigital.com\/de\/wp-json\/wp\/v2\/users\/1"}],"replies":[{"embeddable":true,"href":"https:\/\/rmarketingdigital.com\/de\/wp-json\/wp\/v2\/comments?post=83694"}],"version-history":[{"count":0,"href":"https:\/\/rmarketingdigital.com\/de\/wp-json\/wp\/v2\/posts\/83694\/revisions"}],"wp:featuredmedia":[{"embeddable":true,"href":"https:\/\/rmarketingdigital.com\/de\/wp-json\/wp\/v2\/media\/83695"}],"wp:attachment":[{"href":"https:\/\/rmarketingdigital.com\/de\/wp-json\/wp\/v2\/media?parent=83694"}],"wp:term":[{"taxonomy":"category","embeddable":true,"href":"https:\/\/rmarketingdigital.com\/de\/wp-json\/wp\/v2\/categories?post=83694"},{"taxonomy":"post_tag","embeddable":true,"href":"https:\/\/rmarketingdigital.com\/de\/wp-json\/wp\/v2\/tags?post=83694"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}