Crear un favicon
Para crear un favicon, arrastra tu logo: nuestro generador te da todos los archivos, desde el icono de 16 píxeles de la pestaña hasta el icono de app de 512 píxeles, con el HTML para pegar. Todo ocurre en tu navegador, así que tu imagen nunca se sube.
Qwyzzle
Summit Roasters
Fox EsportsArrastra tu logo aquí
PNG, JPG, WebP o SVG. Lo ideal es una imagen cuadrada de 512 px o más.
Los favicons se crean en tu navegador. Tu imagen nunca se sube.
Qué es un favicon y dónde aparece
Un favicon es el pequeño icono cuadrado que representa tu sitio web. El nombre viene del inglés «favorite icon», el icono de favoritos: el primer navegador que mostró uno lo ponía junto a tus marcadores, a los que llamaba Favoritos.
Lo ves en las pestañas del navegador, junto al título de la página, con 16 píxeles de ancho, o 32 en una pantalla de alta resolución. También señala tu sitio en los marcadores y en el historial. Cuando alguien guarda tu sitio en la pantalla de inicio de su teléfono, se convierte en el icono de una app. Y Google lo muestra junto al nombre de tu sitio en los resultados de búsqueda.
En todos esos lugares cumple la misma función: que lo reconozcan de un vistazo entre otros iconos.
Por qué un solo favicon se convierte en varios archivos
Cada uno de esos lugares llegó en un momento distinto y pide su propio archivo. El generador de favicon de arriba los crea todos a partir de una sola imagen.
Las pestañas, los marcadores y el historial usan favicon.ico, un solo archivo que lleva dentro versiones de 16, 32 y 48 píxeles. Es el formato más antiguo: cuando una página no indica ningún icono, los navegadores siguen buscando favicon.ico en la carpeta raíz del sitio.
Si partes de un SVG, también obtienes favicon.svg, que usan en su lugar los navegadores capaces de mostrar iconos SVG. Como está hecho de formas y no de píxeles, se ve nítido en cualquier pantalla.
El iPhone y el iPad usan apple-touch-icon.png, un cuadrado de 180 píxeles, cuando alguien añade tu sitio a la pantalla de inicio. El iPhone rellena de negro las zonas transparentes, por eso este icono siempre lleva un fondo sólido: tu color, o blanco si elegiste fondo transparente.
Los teléfonos Android, y los sitios que se instalan como apps desde el navegador, usan icon-192.png e icon-512.png. Los encuentran a través de site.webmanifest, un pequeño archivo de texto que indica a los navegadores el nombre de tu sitio, si lo escribiste en la herramienta, y dónde están sus iconos más grandes.
Los PNG sueltos de 16 a 48 píxeles son de repuesto, para los servicios que piden un PNG. Para los resultados de búsqueda, Google lee los enlaces a los iconos en el HTML de tu página de inicio.
Cómo añadir los archivos del favicon a tu sitio
Si editas los archivos de tu sitio, o lo hace quien lo desarrolla, son solo dos pasos.
Primero, descomprime la descarga y coloca los archivos en la carpeta raíz de tu sitio, la carpeta principal donde está la página de inicio. Para comprobarlo, añade /favicon.ico a la dirección de tu sitio: debería abrirse el icono.
Después, pega las líneas HTML del README (la herramienta también las muestra) en la sección head de tus páginas, la parte inicial del HTML que contiene el título de la página. Hay una línea para el archivo ICO, otra para el icono Apple touch y otra para el manifiesto, más la del SVG si lo tienes.
Lo normal es que todas las páginas compartan una misma plantilla, así que solo tienes que pegarlas una vez. Borra antes las líneas de iconos antiguas, o los navegadores podrían seguir mostrando el icono viejo.
Con un creador de sitios web puedes saltarte los dos pasos: sube icon-512.png en su ajuste de icono del sitio y el creador añade el HTML por ti.
Cómo hacer que un logo funcione a 16 píxeles
A 16 por 16, todo tu icono cabe en 256 cuadraditos de color. La mayoría de los logos no se dibujaron para eso.
Empieza por el símbolo, no por el nombre: si metes un nombre de ocho letras en 16 píxeles, cada letra se queda con dos píxeles de ancho. ¿No tienes símbolo? Usa la primera letra, grande y en negrita: las letras gruesas aguantan la reducción mucho mejor que las finas.
Después, quita detalle. Las líneas muy finas y los huecos pequeños se mezclan con lo que tienen alrededor, y un eslogan se convierte en una mancha.
Lo que cuenta es el contraste entre claro y oscuro, no los colores en sí. Las pestañas son claras u oscuras según el tema, y un icono azul marino desaparece en una barra de pestañas oscura. Si tu símbolo es oscuro, ponle un fondo claro en la herramienta, o al revés.
El margen, el espacio entre tu logo y el borde del cuadrado, es cuestión de equilibrio. Si es demasiado grande, el logo se encoge en la pestaña. Si es demasiado pequeño, el iPhone, que redondea los iconos de la pantalla de inicio, le recorta las esquinas al logo.
Por último, mira arriba las vistas previas en pestaña clara y oscura a su tamaño real, sin hacer zoom. Nuestro comprobador de logos gratuito va más allá: reduce tu logo a 32 píxeles y mide cuánto detalle sobrevive.
Cuándo redibujar el símbolo en lugar de reducirlo
A veces no hay nada que hacer. En una ilustración detallada o en un efecto 3D hecho de luces y sombras, el detalle es el diseño, y a 16 píxeles desaparece. Esta herramienta puede cambiar el tamaño de tu logo, pero no redibujarlo.
Eso no lo convierte en un mal logo, solo en uno pensado para espacios más grandes. Dibuja a propósito una versión pequeña: un símbolo simplificado, o tu inicial con la fuente de tu marca. Mantén tus colores y algo de la forma, y la gente relacionará las dos versiones. Entre una inicial clara y una miniatura borrosa, nosotros siempre elegimos la inicial.
¿Necesitas un logo nuevo? Nuestro generador de logos con IA diseña uno a partir del nombre de tu marca y, si quieres, de una breve descripción. Los logos de nuestras plantillas de logos incluyen el símbolo como archivo aparte cuando lo tienen, y todos los logos que compras en DepthLogo traen sus archivos de favicon.
Preguntas sobre favicons
Es gratis, sin registro y sin marca de agua. Y tu imagen se queda contigo: la herramienta funciona por completo en tu navegador, crea cada tamaño y el zip en tu propio dispositivo, y la imagen nunca se envía a nuestros servidores. Por eso puedes usarla sin problema con un logo que todavía no le has mostrado a nadie.
Cuadrada y de al menos 512 píxeles por lado. El icono más grande del juego mide 512 píxeles, así que un PNG, JPG o WebP más pequeño tiene que estirarse para llenarlo, y los iconos grandes salen borrosos. La herramienta te avisa cuando pasa. Un SVG no tiene ese límite: está hecho de formas, no de píxeles, y se ve nítido a cualquier tamaño. Un logo ancho solo llena una franja estrecha del cuadrado, por lo que conviene empezar por tu símbolo o tu inicial.
Te conviene tenerlos todos, porque cada navegador y cada teléfono pide un archivo distinto, y el HTML de la herramienta le indica a cada uno cuál usar. El archivo ICO es el que entienden todos los navegadores. Los PNG son para teléfonos y apps instaladas, con repuestos en los tamaños pequeños. El SVG, que obtienes si partes de un SVG, se ve nítido en cualquier pantalla en los navegadores que lo admiten.
Lo más probable es que tu navegador esté mostrando una copia guardada. Los navegadores conservan los favicons mucho más tiempo que el resto de la página, así que el icono antiguo puede seguir ahí aunque los archivos nuevos ya estén publicados. Prueba una recarga forzada, que vuelve a cargar la página sin sus archivos guardados: Ctrl+Mayús+R en Windows, Cmd+Mayús+R en Mac (Opción+Cmd+R en Safari). Si no funciona, abre la dirección de tu sitio con /favicon.ico al final y recarga esa página, o mírala en una ventana privada. Los navegadores de los demás se actualizan con el tiempo.
En los ajustes del creador, no en una carpeta. La mayoría de los creadores de sitios web y de las plataformas de tiendas online tienen un ajuste de icono del sitio o de favicon donde subes un solo PNG cuadrado. Elige icon-512.png, el archivo más grande del zip, para que el creador tenga píxeles de sobra al generar los tamaños más pequeños. Si el ajuste pide un tamaño concreto, usa el archivo que coincida. Estas plataformas añaden el HTML por ti, así que puedes saltarte el README.
Google detecta un favicon nuevo cuando su rastreador, el programa que lee las páginas web para Google, vuelve a visitar tu página de inicio. No hay un plazo fijo para eso. Google pide una imagen cuadrada y el enlace al icono en el HTML de tu página de inicio, así que comprueba que estén los dos. A partir de ahí, Google decide qué muestra y cuándo: dale tiempo.
¿Aún no tienes logo? Crea el tuyo.
Deja que nuestro generador de logos con IA lo diseñe, o empieza con una plantilla en el creador de logos. Todos los logos que descargas de DepthLogo ya incluyen sus favicons.