Sobre SVG a favicon
El generador de SVG a favicon de Zyff pasa tu SVG byte a byte como icon.svg y genera a su alrededor las alternativas rasterizadas — los tamaños PNG, el .ico multitamaño, el icono apple-touch y el juego de Android — y escribe después las etiquetas link en el orden en que las resuelve un navegador. Un icono vectorial es el único favicon de verdad independiente de la resolución, y por eso los navegadores actuales lo prefieren cuando se les ofrecen los dos, pero no basta por sí solo: iOS lo ignora para los iconos de la pantalla de inicio y todo lo más antiguo cae de vuelta al .ico. La generación corre en los servidores de Zyff solo en memoria.
Cómo hacer un favicon SVG
Sube el SVG
Se pasa sin cambios como icon.svg, así que lo que subes es exactamente lo que se publica. Convierte antes el texto en trazados si el SVG usa una tipografía: un navegador que dibuja tu icono no tiene acceso a tu tipografía web.
Deja activadas las alternativas rasterizadas
Vienen activadas por algo. El SVG cubre los navegadores actuales de escritorio y de Android; los PNG y el .ico cubren todo lo demás, y iOS usa apple-touch-icon diga lo que diga el SVG.
Revisa las vistas previas rasterizadas
Los PNG se generan desde tu SVG a una resolución elegida para cada tamaño. Un vector con trazos finísimos o detalles de 1 px se rasteriza mal a 16 px, y aquí es donde se ve.
Copia el fragmento del head
El enlace del SVG va primero, con type="image/svg+xml", después los enlaces PNG con tamaños explícitos, y luego el .ico. Un navegador coge el primer tipo que entiende, y por eso el orden no es algo cosmético.
Añade una variante para el modo oscuro si quieres una
Esa vive dentro de tu propio SVG, no en la etiqueta: una consulta de medios prefers-color-scheme en el bloque de estilo del SVG cambia el relleno. Zyff pasa el archivo sin tocarlo, así que lo que pongas ahí es lo que se publica.
Qué hace SVG a favicon
El SVG se pasa sin cambios
Byte a byte, como icon.svg. No se vuelve a serializar ni se minifica nada, así que ningún optimizador puede cambiar en silencio cómo se dibuja tu marca.
Alternativas generadas alrededor
Los tamaños PNG, un .ico multitamaño, el apple-touch y el juego de Android, todos rasterizados desde el mismo SVG a la resolución que necesita cada tamaño.
Etiquetas link en orden de resolución
Primero el SVG con su tipo MIME, después los PNG con su tamaño, y luego el .ico. Un navegador se detiene en el primer tipo que puede leer.
Transparencia conservada
Viene activada, porque toda la ventaja de un icono vectorial es apoyarse limpiamente sobre la interfaz que tenga el navegador.
El modo oscuro sigue siendo tuyo
Una consulta prefers-color-scheme dentro de tu SVG sobrevive al paso tal cual. Nada de aquí reescribe tu archivo para adivinar una variante oscura.
At a glance
| Tratamiento del SVG | Pasado byte a byte como icon.svg |
|---|---|
| Alternativas rasterizadas | PNG de 16-512 px, .ico multitamaño, apple-touch de 180, Android de 192 y 512 |
| Orden de los enlaces en el fragmento | icon.svg, después los PNG con su tamaño, y luego favicon.ico |
| Transparencia | Conservada por defecto |
| Entrada aceptada | SVG (también PNG, JPG, WebP y AVIF, sin el paso tal cual) de hasta 25 MB |
| Manifiesto | site.webmanifest referenciando los tamaños de Android |
Frequently asked questions
¿Puede un favicon ser un SVG?
Sí, y los navegadores actuales lo prefieren cuando una página ofrece a la vez un SVG y unos PNG. Se declara con <link rel="icon" href="/icon.svg" type="image/svg+xml">, y el atributo type es lo que le permite a un navegador saltárselo si no puede dibujar uno. No sustituye a los demás archivos: iOS usa apple-touch-icon para los iconos de la pantalla de inicio de todas formas, y los navegadores antiguos necesitan el .ico.
¿Sigo necesitando favicons PNG si tengo un SVG?
Sí. El SVG cubre los navegadores actuales de escritorio y de Android, pero apple-touch-icon es un PNG por especificación, y /favicon.ico se sigue pidiendo desde tu raíz sin estar declarado. El conjunto práctico es el SVG más un apple-touch de 180 px, uno de 192 y otro de 512 para Android, y un .ico pequeño.
¿Cómo hago un favicon para el modo oscuro?
Pon una consulta de medios prefers-color-scheme dentro del propio SVG, en su propio bloque <style>, que cambie el relleno o el trazo. La etiqueta no cambia. Zyff pasa tu SVG sin modificar, así que la consulta se publica exactamente como la escribiste, pero pruébala, porque un navegador que dibuja un favicon no siempre aplica el mismo contexto de esquema de color que a la página.
¿Por qué mi favicon SVG se ve mal a 16 px?
Porque la precisión vectorial no sobrevive a una rejilla de 16 píxeles. Los trazos finísimos desaparecen, los huecos pequeños se rellenan y el detalle se funde. Dibuja una versión deliberadamente simplificada para el icono en vez de reutilizar tu logotipo completo, y revisa aquí la vista previa rasterizada de 16 px antes de publicar.
¿Mi SVG debe usar una tipografía?
No. Convierte el texto en trazados antes de subirlo. Un navegador que dibuja tu favicon no tiene acceso a tu tipografía web, así que un SVG basado en texto cae de vuelta a la tipografía que el renderizador tenga a mano, o a ninguna. Por esa misma razón la marca propia de Zyff es un trazado y no un texto.
¿Se modifica el SVG de alguna manera?
No: se guarda y se sirve como los bytes exactos que subiste. Las alternativas en PNG e ICO se generan a partir de él, pero el archivo vectorial en sí se pasa tal cual, así que nada de aquí puede alterar cómo se dibuja tu marca.