Generador de favicon SVG - con el SVG como icono principal
La mayoría de los generadores de favicon te entregan una carpeta de PNG y una docena de etiquetas link para versiones de iOS que dejaron de distribuirse hace años, y dejan fuera el archivo que más importa en un sitio actual. El resultado es a la vez inflado e incompleto. Tu SVG es el mejor favicon que tienes: un archivo vectorial cubre todas las densidades de pantalla que existirán jamás y suele pesar menos que el PNG de 32 píxeles por el que la gente lo sustituye. Por eso este paquete lo incluye como favicon.svg y apunta el marcado a él en primer lugar, con el ICO como respaldo justo debajo. Los PNG siguen todos ahí para los sitios que los necesitan, cada uno dibujado desde tu vector a su propio tamaño en lugar de reducirse desde un render grande. Todo se construye en tu navegador y no se sube nada.
Cómo usar esta herramienta
Suelta tu SVG
Arrastra tu logotipo o tu marca a la caja de arriba, hasta 5 MB. La ilustración cuadrada funciona mejor: cualquier otra se encaja en un marco cuadrado y el espacio sobrante queda transparente.
Comprueba los tamaños pequeños
La vista previa muestra 16, 32 y 48 píxeles a tamaño real, renderizados desde tu vector por la misma vía que usa el paquete. Si la marca es ilegible a 16 píxeles aquí, eso es exactamente lo que verán tus visitantes en su pestaña.
Pon el nombre de tu sitio
Lo que escribas va a site.webmanifest como nombre y nombre corto, que es lo que muestran Android y Chrome de escritorio cuando alguien instala tu sitio en su pantalla de inicio. Déjalo en blanco y el manifiesto incluirá un marcador neutro para editar más tarde.
Genera y descarga el paquete
Pulsa Generar el paquete de favicon. Tu dibujo se renderiza a 16, 32, 48, 180, 192 y 512 píxeles, tres de ellos entran en favicon.ico, y todo se comprime junto con un manifiesto y un README.
Copia las cuatro etiquetas
Descomprime todo en el directorio raíz de tu sitio y copia las cuatro etiquetas link que aparecen junto al botón de descarga en tu <head>. Esa es toda la instalación: sin paso de compilación y sin configuración extra.
Preguntas frecuentes
¿Qué hay exactamente en el ZIP?
Siete archivos: favicon.svg, que es tu ilustración original, más favicon.ico con las versiones de 16, 32 y 48 píxeles, apple-touch-icon.png a 180, icon-192.png e icon-512.png para Android y aplicaciones instalables, site.webmanifest y un README que repite las etiquetas. Todo archivo al que apunta el fragmento está en el paquete.
¿Por qué el SVG aparece antes que el ICO?
Porque es el mejor icono y los navegadores eligen el último formato que entienden. Un archivo vectorial se mantiene nítido en cualquier densidad de pantalla que exista, no necesita variantes de tamaño y a menudo pesa menos que un PNG de 32 píxeles. Los navegadores que no puedan usarlo simplemente caen al ICO de la línea siguiente.
¿De verdad solo necesito cuatro etiquetas?
Sí, en cualquier sitio que se construya hoy. Las listas largas de variantes apple-touch-icon-precomposed que los generadores siguen produciendo apuntan a iOS 6 y anteriores. El iOS actual lee un único apple-touch-icon, Android lee el manifiesto, y todo lo demás lee los enlaces de icono. Cuatro etiquetas lo cubren todo.
¿Mi favicon puede cambiar con el modo oscuro?
Solo el SVG puede, otra razón por la que va primero. Pon una consulta de medios dentro del propio SVG - una regla prefers-color-scheme sobre un relleno - y el navegador la aplicará en vivo en la pestaña. El ICO y los PNG son imágenes fijas y conservarán los colores con los que se renderizaron.
¿Por qué se renderizan los tamaños pequeños por separado?
Porque encoger un render grande tira justo el detalle del que dependen los iconos pequeños. Medido sobre una marca de pixel art a 16 × 16: dibujada desde el vector dio 141 píxeles sólidos y ninguno semitransparente, mientras que esa misma ilustración reducida desde 512 dio 98 sólidos y 64 emborronados. Un 40 % de la tinta convertida en papilla.
¿Dónde van los archivos en mi servidor?
Todos en la raíz del sitio, junto a index.html, para que se resuelvan como /favicon.svg, /favicon.ico y demás. Las rutas del fragmento empiezan por barra justo por eso. Si tu framework sirve archivos estáticos desde una carpeta public o static, ponlos ahí y las URL seguirán siendo las mismas.
Mi favicon no ha cambiado después de subir el nuevo.
Los navegadores cachean los favicon con más insistencia que casi cualquier otra cosa, y a menudo ignoran una recarga normal. Abre la URL del icono directamente y recárgala, o compruébalo en una ventana privada. Casi siempre es el caché y no un archivo roto, así que verifica que la URL carga antes de tocar nada más.
¿De qué tamaño debería ser mi SVG de origen?
El tamaño del viewBox apenas importa, ya que todo se redibuja desde la geometría, pero las proporciones cuadradas sí. Diseña la marca para que se lea a 16 píxeles primero y escala hacia arriba desde ahí. Un logotipo que funciona en una tarjeta de visita suele tener demasiado detalle para sobrevivir en una pestaña.
¿Necesito el ICO para algo?
Consérvalo. Ocupa unos pocos kilobytes y cubre los sitios que nadie prueba: accesos directos del escritorio de Windows, lectores de RSS y de pódcast, vistas previas de enlaces en clientes de chat antiguos y navegadores empotrados dentro de aplicaciones de escritorio. Casi todos ellos siguen pidiendo /favicon.ico por convención e ignoran lo que declare tu marcado.
¿Se sube algo para construir el paquete?
No. Cada render, el empaquetado del ICO y el ZIP se producen en tu navegador. Tu logotipo nunca llega a un servidor, lo que también significa que el paquete está listo en cuanto pulsas en lugar de tras una cola, y que no queda ninguna copia de tu ilustración en ningún sitio.
También podrías necesitar
¿Algo no funciona? Informar de un error