[{"data":1,"prerenderedAt":11},["ShallowReactive",2],{"guide:es:blog\u002Ffavicon-sizes-which-ones-you-need":-1,"article-es-favicon-sizes-which-ones-you-need":3},{"slug":4,"title":5,"description":6,"date":7,"keyword":8,"tool":9,"html":10},"favicon-sizes-which-ones-you-need","Tamaños de Favicon: Cuáles realmente necesitas en 2025","Una guía en lenguaje plano sobre tamaños de favicon: 16x16, 32x32, 180x180, 192 y 512, cuáles usan los navegadores modernos, y el HTML que debes agregar.","2026-10-12","favicon size","favicon-generator","\u003Cp>Si buscas "tamaño de favicon" te encontrarás con un montón de números conflictivos: 16x16, 32x32, 48x48, 64, 180, 192, 256, 512. La mayoría de esas listas fueron escritas hace una década y nunca se actualizaron. En la práctica, un sitio moderno necesita aproximadamente cuatro archivos, y puedes hacerlos todos de una sola vez con el \u003Ca href=\"\u002Fes\u002Ffavicon-generator\">generador de favicon\u003C\u002Fa> — se ejecuta completamente en tu navegador, así que tu logo nunca sale de tu máquina.\u003C\u002Fp>\n\u003Cp>Aquí está para qué sirve cada tamaño, y qué puedes omitir con seguridad.\u003C\u002Fp>\n\u003Ch2>Los tamaños que todavía importan\u003C\u002Fh2>\n\u003Ch3>16x16 y 32x32 — pestañas del navegador y marcadores\u003C\u002Fh3>\n\u003Cp>Este es el favicon clásico. 16x16 es lo que ves en una barra de pestañas llena; 32x32 se usa en pantallas de alta resolución (DPI), la barra de marcadores y algunas interfaces de la barra de direcciones. Ambos se agrupan tradicionalmente en un único archivo \u003Ccode>favicon.ico\u003C\u002Fcode>, que puede contener múltiples resoluciones a la vez. Windows también extrae 48x48 del mismo \u003Ccode>.ico\u003C\u002Fcode> para accesos directos de escritorio, así que incluirlo cuesta casi nada.\u003C\u002Fp>\n\u003Ch3>180x180 — Ícono táctil de Apple\u003C\u002Fh3>\n\u003Cp>Cuando alguien toca "Añadir a la pantalla de inicio" en un iPhone o iPad, Safari busca \u003Ccode>apple-touch-icon.png\u003C\u002Fcode> en 180x180. Si no está ahí, iOS toma una captura de pantalla de tu página y la usa en su lugar, lo que se ve terrible. Este único PNG cubre todos los dispositivos iOS actuales porque el sistema reduce la escala según sea necesario.\u003C\u002Fp>\n\u003Ch3>192x192 y 512x512 — Android y PWAs\u003C\u002Fh3>\n\u003Cp>Android Chrome y las aplicaciones web instalables leen los iconos de tu \u003Ccode>site.webmanifest\u003C\u002Fcode>. 192 es el ícono de la pantalla de inicio; 512 se usa para la pantalla de inicio de la aplicación y listados de aplicaciones. Si alguna vez quieres que tu sitio sea instalable, necesitas ambos.\u003C\u002Fp>\n\u003Ch3>SVG — opcional pero recomendado\u003C\u002Fh3>\n\u003Cp>Firefox y Chrome ambos soportan un favicon SVG, que se ve nítido en cualquier tamaño y puede responder al modo oscuro con una consulta de medios dentro del archivo. Es un plus, no un reemplazo — Safari y navegadores más antiguos todavía quieren las versiones rasterizadas.\u003C\u002Fp>\n\u003Ch2>Lo que puedes omitir\u003C\u002Fh2>\n\u003Cp>64x64, 96x96, 128x128, todo el conjunto de imágenes de tiles de Windows, y la docena de archivos heredados de estilo \u003Ccode>apple-touch-icon-76x76\u003C\u002Fcode>. Fueron necesarios para dispositivos que ya casi no existen. Enviar veinte archivos de iconos hincha tu repositorio y no ganas nada medible.\u003C\u002Fp>\n\u003Ch2>El HTML\u003C\u002Fh2>\n\u003Cp>Coloca los archivos en la raíz de tu sitio y agrega esto a \u003Ccode><head>\u003C\u002Fcode>:\u003C\u002Fp>\n\u003Cpre>\u003Ccode class=\"language-html\"><link rel="icon" href="\u002Ffavicon.ico" sizes="any">\n<link rel="icon" href="\u002Ficon.svg" type="image\u002Fsvg+xml">\n<link rel="apple-touch-icon" href="\u002Fapple-touch-icon.png">\n<link rel="manifest" href="\u002Fsite.webmanifest">\n\u003C\u002Fcode>\u003C\u002Fpre>\n\u003Cp>Y en el manifest:\u003C\u002Fp>\n\u003Cpre>\u003Ccode class=\"language-json\">"icons": [\n  { "src": "\u002Ficon-192.png", "type": "image\u002Fpng", "sizes": "192x192" },\n  { "src": "\u002Ficon-512.png", "type": "image\u002Fpng", "sizes": "512x512" }\n]\n\u003C\u002Fcode>\u003C\u002Fpre>\n\u003Ch2>Diseñando para 16 píxeles\u003C\u002Fh2>\n\u003Cp>La parte difícil no es la exportación, es que un logo completo se vuelve irreconocible en 16x16. Algunas cosas que ayudan:\u003C\u002Fp>\n\u003Cul>\n\u003Cli>\u003Cstrong>Usa un fragmento, no el logo completo.\u003C\u002Fstrong> Una letra, un glifo, una forma. Los wordmarks son ilegibles en tamaño de pestaña.\u003C\u002Fli>\n\u003Cli>\u003Cstrong>Comienza con un cuadrado.\u003C\u002Fstrong> Si tu fuente es un logo ancho, \u003Ca href=\"\u002Fes\u002Fcrop-image\">recórtalo a un cuadrado\u003C\u002Fa> primero para que el generador no lo enmarque con espacio vacío.\u003C\u002Fli>\n\u003Cli>\u003Cstrong>Mantén el contraste alto.\u003C\u002Fstrong> Los contornos finos desaparecen. Las formas sólidas sobreviven.\u003C\u002Fli>\n\u003Cli>\u003Cstrong>Decide sobre el fondo.\u003C\u002Fstrong> Un PNG transparente se adapta a la interfaz clara u oscura del navegador; si tu marca es oscura, considera darle un fondo de color sólido en su lugar. Puedes \u003Ca href=\"\u002Fes\u002Fremove-background\">eliminar el fondo\u003C\u002Fa> de una captura de pantalla de logo en segundos si solo tienes un JPG plano.\u003C\u002Fli>\n\u003Cli>\u003Cstrong>Ten cuidado con el área segura.\u003C\u002Fstrong> Android enmascara los iconos en círculos y squircles, así que deja aproximadamente un 10% de relleno alrededor del borde de tu obra de 512.\u003C\u002Fli>\n\u003C\u002Ful>\n\u003Cp>Si estás haciendo coincidir el fondo del favicon con el color de marca de tu sitio, el \u003Ca href=\"\u002Fes\u002Fcolor-picker\">selector de color de imagen\u003C\u002Fa> extraerá el hexadecimal exacto de una captura de pantalla existente — también útil para la etiqueta meta \u003Ccode>theme-color\u003C\u002Fcode>.\u003C\u002Fp>\n\u003Ch2>Genera todo el conjunto de una vez\u003C\u002Fh2>\n\u003Cp>No subas nada: suelta un PNG cuadrado o SVG en el \u003Ca href=\"\u002Fes\u002Ffavicon-generator\">generador de favicon gratuito basado en navegador\u003C\u002Fa> y genera el \u003Ccode>.ico\u003C\u002Fcode>, el ícono táctil de Apple, y los PNG 192\u002F512 localmente, en tu propia pestaña. Nada se envía a un servidor, no hay registro requerido, y ninguna copia de tu logo sin lanzar termina almacenada en el depósito de almacenamiento de otra persona.\u003C\u002Fp>\n\u003Cp>Luego aleja tu navegador, mira la pestaña, y hazle la única pregunta que importa: ¿puedes saber qué es?\u003C\u002Fp>\n",1791831538820]