Guías
Cómo crear un favicon SVG: la guía completa (2026)
Ese cuadrito diminuto junto al título de la pestaña es lo primero que tu marca enseña en el navegador. Y llevas años resolviéndolo con un .ico borroso. En esta guía aprenderás a crear un favicon SVG nítido en cualquier pantalla, con versión emoji, monograma y modo oscuro incluidos. Todo con código que puedes copiar tal cual.
Qué es un favicon SVG y por qué usarlo
Un favicon SVG es el icono de tu sitio definido como gráfico vectorial en lugar de
mapa de bits. Donde un .ico o un .png guardan píxeles a
tamaños fijos (16×16, 32×32, 48×48…), el SVG guarda instrucciones de dibujo: formas,
colores y texto que el navegador escala al tamaño que necesite.
Frente al clásico .ico y al .png, el SVG gana en casi todo:
- Nitidez infinita. Se ve perfecto a 16 píxeles en la pestaña y a 512 en un acceso directo, sin generar diez tamaños distintos.
- Peso mínimo. Un favicon SVG típico pesa menos de 1 KB; un .ico multirresolución puede superar los 15 KB.
- Un solo archivo. Olvídate de exportar media docena de PNG para cada dispositivo.
- Es texto. Lo editas en cualquier editor de código: cambias un color y listo, sin abrir programas de diseño.
- Modo oscuro nativo. Puede incluir una media query interna y adaptarse al tema del sistema, algo imposible con .ico o .png.
La única ventaja real que conserva el .ico es la compatibilidad con
navegadores muy antiguos. Por eso la estrategia ganadora en 2026 es simple: SVG como
favicon principal y un .ico pequeño como respaldo.
Cómo crear un favicon SVG desde cero
Empieza por el lienzo. Un viewBox de 0 0 100 100 es cómodo
para calcular posiciones. Dibuja una forma de fondo con esquinas redondeadas y encima
el elemento protagonista. Este SVG ya es un favicon completo:
<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 100 100">
<rect width="100" height="100" rx="22" fill="#8b7bff"/>
<text x="50" y="70" font-size="58" font-family="Georgia, serif"
font-weight="700" text-anchor="middle" fill="#fff">A</text>
</svg>
Guárdalo como favicon.svg en la raíz de tu sitio y enlázalo en el
<head>:
<link rel="icon" href="/favicon.svg" type="image/svg+xml">¿No quieres ni subir un archivo? Incrusta el SVG directamente en la etiqueta con un data URI. Así el favicon viaja dentro del propio HTML:
<link rel="icon" type="image/svg+xml"
href="data:image/svg+xml,<svg xmlns='http://www.w3.org/2000/svg'
viewBox='0 0 100 100'><rect width='100' height='100' rx='22'
fill='%238b7bff'/><text x='50' y='70' font-size='58'
font-family='Georgia, serif' font-weight='700' text-anchor='middle'
fill='white'>A</text></svg>">
Fíjate en el detalle clave: el color no es #8b7bff sino
%238b7bff. Dentro de una URL, el carácter # marca el inicio
de un fragmento (como en pagina.html#seccion), así que el navegador
cortaría el data URI justo ahí y el favicon no cargaría. La solución es escribirlo
escapado como %23, su código percent-encoding. Cambia también las
comillas dobles internas por simples para no romper el atributo href.
Favicon con emoji en una línea
El truco favorito de quienes no tienen logotipo: usar un emoji como favicon. Solo
necesitas un elemento <text> centrado y con tamaño generoso:
<link rel="icon" type="image/svg+xml"
href="data:image/svg+xml,<svg xmlns='http://www.w3.org/2000/svg'
viewBox='0 0 100 100'><text x='50' y='72' font-size='80'
text-anchor='middle'>🚀</text></svg>">
Funciona porque tu página ya declara charset UTF-8, así que el emoji
viaja tal cual dentro del data URI. Cada sistema operativo lo dibujará con su propio
estilo de emoji, pero siempre nítido: sigue siendo vectorial.
Atajo
¿Prefieres verlo antes de escribirlo?
En nuestra galería hay más de 55 favicons SVG listos, más generadores de emoji y monograma con vista previa en vivo. Crea el tuyo en segundos con nuestra galería.
Favicon monograma: tu inicial como marca
El monograma es el favicon más profesional que puedes hacer en dos minutos: la
inicial de tu marca sobre un fondo de color. Es exactamente lo que usa AG Publicista.
La receta: fondo con rx generoso, tipografía con carácter y la letra
centrada con text-anchor="middle".
<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 100 100">
<rect width="100" height="100" rx="26" fill="#35d6c8"/>
<text x="50" y="72" font-size="62" text-anchor="middle"
font-family="Georgia, 'Times New Roman', serif"
font-style="italic" font-weight="700" fill="#0a0a0f">g</text>
</svg>
Dos consejos de diseño: usa solo fuentes del sistema (Georgia, Arial, Verdana…),
porque el favicon no puede cargar fuentes web; y ajusta la coordenada y
a ojo hasta que la letra quede ópticamente centrada, ya que cada tipografía tiene su
propia altura.
Modo oscuro: un favicon que se adapta con prefers-color-scheme
Aquí el SVG hace algo que ningún .ico soñaría: cambiar de color según el tema del
sistema. Basta con incluir una etiqueta <style> dentro del propio
SVG con la media query prefers-color-scheme:
<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 100 100">
<style>
rect { fill: #0a0a0f; }
text { fill: #ffffff; }
@media (prefers-color-scheme: light) {
rect { fill: #ffffff; }
text { fill: #0a0a0f; }
}
</style>
<rect width="100" height="100" rx="22"/>
<text x="50" y="70" font-size="58" text-anchor="middle"
font-family="Georgia, serif" font-weight="700">A</text>
</svg>Con esto, el favicon se dibuja oscuro con texto claro en modo oscuro, y se invierte cuando el sistema usa tema claro. Un matiz importante: la media query responde al tema del sistema operativo o del navegador, no al botón de tema de tu página. Y es la mejor solución al problema clásico del favicon negro invisible sobre la barra de pestañas oscura.
Compatibilidad de navegadores
El soporte de favicons SVG en 2026 es muy amplio, con un matiz en Safari:
- Chrome y Edge: soporte completo desde la versión 80, incluida la media query de modo oscuro.
- Firefox: el pionero; los soporta desde la versión 41 con soporte completo de estilos internos.
- Opera y navegadores basados en Chromium (Brave, Vivaldi, Arc): mismo comportamiento que Chrome.
- Safari: los acepta desde la versión 15, pero puede ignorar los estilos internos del SVG (incluido el modo oscuro) y en versiones antiguas prefería su propio formato de icono anclado.
- Navegadores antiguos: ignoran el SVG; si declaras además un
.icoo.png, usarán ese respaldo automáticamente.
La combinación segura es declarar ambos y dejar que cada navegador elija:
<link rel="icon" href="/favicon.svg" type="image/svg+xml">
<link rel="icon" href="/favicon.ico" sizes="32x32">Errores comunes al crear un favicon SVG
- Olvidar el atributo
xmlns. Sinxmlns="http://www.w3.org/2000/svg", el SVG funciona incrustado en HTML pero falla como archivo o data URI independiente. - Usar
#sin escapar en un data URI. El navegador lo interpreta como fragmento de URL y corta el código. Siempre%23. - Mezclar mal las comillas. Si el atributo
hrefusa comillas dobles, todo lo interno del SVG debe ir con simples. - Diseñar con demasiado detalle. A 16×16 píxeles, los trazos finos y los degradados sutiles desaparecen. Formas grandes y contraste alto.
- Depender de fuentes web. El favicon se renderiza aislado y no descarga tipografías externas: usa fuentes del sistema.
- No probar en ambos temas. Un favicon precioso en modo claro puede volverse invisible sobre una barra de pestañas oscura.
- Omitir
type="image/svg+xml". La mayoría de navegadores lo deducen, pero declararlo evita ambigüedades cuando hay varios favicons.
Preguntas frecuentes
¿Todos los navegadores soportan favicons SVG?
Chrome, Edge, Firefox y Opera los soportan sin problemas desde hace años. Safari los
acepta desde la versión 15, aunque puede ignorar los estilos internos del SVG, como
la media query de modo oscuro. Para cubrir navegadores antiguos, declara además un
favicon.ico o PNG como respaldo.
¿Necesito seguir usando favicon.ico?
No es obligatorio, pero sí recomendable. Algunos navegadores antiguos, lectores de
feeds y herramientas de terceros siguen pidiendo /favicon.ico en la raíz
del dominio. Colocar ahí un .ico de 32×32 no cuesta nada y evita errores 404 en los
registros del servidor.
¿Qué tamaño debe tener un favicon SVG?
Ninguno fijo: al ser vectorial, se escala al espacio disponible. Lo que importa es el
viewBox, que define el lienzo de dibujo; 0 0 100 100 es
cómodo para trabajar. Eso sí, diseña formas simples que se lean bien a 16×16, que es
como se verá en la pestaña.
¿Puedo usar cualquier emoji como favicon?
Sí. Basta con colocarlo dentro de un elemento <text> del SVG. Ten
en cuenta que cada sistema operativo dibuja los emojis con su propio estilo, así que
se verá ligeramente distinto en Windows, macOS o Android. Es la opción más rápida
cuando aún no tienes logotipo.
Ponlo en práctica
Tu favicon nuevo está a un clic
Elige entre más de 55 diseños o genera tu emoji y tu monograma con vista previa en vivo: crea el tuyo en segundos con nuestra galería y copia la etiqueta lista para pegar. Y si te gustan los componentes SVG para copiar y pegar, mira también el generador de texto ondulado animado.
Sigue aprendiendo