Generador HTML de favicon
Genera las etiquetas <head> que un sitio necesita para su favicon, icono táctil y colores de tema.
Generador HTML de favicon
Un favicon es más que un archivo: la pestaña de un navegador necesita un .ico, la pantalla de inicio de un teléfono necesita un apple-touch-icon de 180x180, la pestaña fijada de Safari necesita una máscara SVG de un solo color, y un aviso de instalación de PWA lee los iconos listados en el manifiesto. Esta herramienta genera las etiquetas <link> y <meta> exactas para todos ellos a partir de una ruta base y un conjunto de tamaños de iconos, de modo que puedas copiar un bloque completo en <head> en lugar de ensamblar desde cinco especificaciones diferentes.
Establece la ruta base en donde vivirán los archivos de iconos —la raíz o una subcarpeta como /icons/— y cada href se construye contra ella. Activa o desactiva ICO, PNG y SVG de forma independiente: PNG también agrega el apple-touch-icon en el tamaño fijo 180x180 que Apple espera, y SVG agrega un mask-icon cuyo color proviene de tu color de tema claro (u oscuro, si ese es el único configurado). Un color de tema claro y oscuro se convierten cada uno en una etiqueta <meta name="theme-color"> separada con una consulta prefers-color-scheme, de modo que el cromado del navegador coincida con la página en cualquier modo.
El campo de tamaños acepta una lista separada por comas o líneas —"16x16, 32x32, 192x192"— y un número simple como "48" es una abreviatura para un icono cuadrado; las entradas no reconocidas se descartan en lugar de rechazarse. Activa la lista de verificación de archivos y la salida termina con un comentario que enumera cada ruta referenciada, en orden, que es la lista a subir realmente.