Ernesto del Valle
El favicon es una asignatura pendiente para millones de blogueros y emprendedores online en todo el mundo.
“Lo fuimos dejando…”, “no sabemos cómo ponerlo…”, “se nos olvidó cuando hicimos la web…”, “¿pero en Blogger se puede…?”, “Yo es que uso una plantilla…”
¿Te suenan estas frases? 😉
No es buena idea subestimar el favicon, ya que es una pieza que te identifica. Recuerda esto:
Un favicon mal resuelto habla mal de ti.
Esta guía práctica te enseñará, por fin, a crear, en 4 sencillos pasos el favicon que quieres, bien hecho, a tu gusto y visible en todos los navegadores.
Índice del artículo
# 1. Favicon: qué es y por qué se llama así
El favicon es el icono asociado a la web que sirve para identificarla visualmente en la barra de favoritos, y otros emplazamientos variables (dependiendo del navegador).
La palabra se forma a partir los términos en inglés “Favorite” e “Icon”.
En esta imagen tienes dos vistas del favicon de Socialancer en el navegador Firefox:
Si quieres documentarte a fondo, aquí puedes ver las indicaciones del “World Wide Web Consortium” (W3C): https://www.w3.org/2005/10/howto-favicon
# 2. El formato: no vale cualquiera
El favicon debe tener unas especificaciones concretas, y seguro que no te sorprenderá saber que éstas varían en función del navegador.
No te preocupes. Ve a lo seguro. Si usas el formato “.ico”, no tendrás problemas.
El favicon debe ser cuadrado, y sus medidas en píxeles más comunes son 16×16 y 32×32.
Puedes usar píxeles transparentes en el fondo, y de hecho es recomendable para conseguir un mejor efecto.
Si usas como favicon una imagen grande, los navegadores escalarán su tamaño de forma automática a la proporción adecuada (ejemplo: de 100×100 en la imagen original a 16×16, que es como se ve en la pestaña). Esto puede ser un problema en algunos casos, ya que una imagen que se ve perfectamente a 100×100 puede quedar fatal a sólo 16×16. En el apartado siguiente hablaremos más sobre esto.
Mi recomendación:
Controla totalmente el aspecto final de tu favicon, usando un diseño específico para ese fin.
Puedes definir favicons adicionales para ciertos dispositivos, como por ejemplo los dispositivos móviles de Apple, pero ese tema va más allá del alcance de este post (si tienes curiosidad, mira aquí: Specifying a Webpage Icon for Web Clip).
# 3. Vale, ¿y cómo se hace un favicon?
Un diseñador web sabrá hacerte un favicon perfecto (o debería). No obstante, también tienes a tu disposición herramientas online de gran utilidad, específicamente diseñadas para ello. Echa un vistazo a estas tres:
- Faviconer.com
- Favicon.cc
- Dynamic Drive
Es importante recordar que si escalas tal cual un isotipo (el símbolo de un logo) al tamaño del favicon, tanto si lo haces tú como si dejas que lo haga el navegador,normalmente obtendrás un resultado muy pobre, o incluso desastroso.
¿Cuántas webs muestran un manchurrón borroso y empastado donde debería haber un auténtico favicon? No permitas que la tuya sea una de ellas. 😉
Un favicon debe “pintarse” con mucha “intención” teniendo en cuenta sus reducidísimas dimensiones. Es fundamental que tu favicon quede:
- Limpio.
- Discernible.
- Coherente con la identidad visual de la web/empresa.
¿Cumple el tuyo estas condiciones?
No des por bueno un favicon hasta que estés totalmente satisfecho.
Sé prudente:
Si lo que está en juego es la identidad visual corporativa de una empresa, deberías confiar en un diseñador para la creación del favicon.
Para un resultado impecable, normalmente será preciso pintar la pieza gráfica píxel a píxel, o como mínimo hacer minuciosos retoques con ese nivel de detalle.
# 4. Y ahora… ¿cómo implemento mi favicon?
Si ya tienes un diseño perfecto, y has comprobado que queda genial, sólo te queda implementarlo.
A continuación te dejo las indicaciones para los tres casos más comunes:
A. En una web hecha con WordPress
(Nota: no confundir con sitios dentro del servicio wordpress.com.)
La plantillas de WordPress suelen incluir en las opciones de personalización una opción para insertar el favicon. Si la tuya no la tiene, puedes hacerlo incluyendo una línea de código (mira aquí las instrucciones: https://codex.wordpress.org/Creating_a_Favicon), pero te recomiendo que seas muy prudente si no tienes conocimientos técnicos.
Otra alternativa es instalar un plugin que lo haga. Aunque esto es “matar moscas a cañonazos” y tampoco lo recomiendo, en el directorio de plugins de WordPress tienes unas cuantas opciones (https://wordpress.org/plugins/search.php?q=favicon )
B. En Blogger
Al igual que en wordpress.com, en Blogger tienes una opción específica en el menú para personalizar tu favicon. Mira esta imagen:
Como ves, entrando en la vista “Diseño”, puedes acceder a la edición del favicon. Tras hacer clic, ya sólo tienes que subir la imagen:
C. Con un blog en wordpress.com
En wordpress.com también tienes una una opción prevista en el menú para añadir un favicon.
Está en Ajustes > Generales > Imagen del Blog/Icono.
¡Fácil!
Conclusión
Hasta aquí esta pequeña guía práctica.
¿Te ha resultado útil? ¿Sabías cómo crearlo? Si ya tenías favicon en tu web, ¿lo ves ahora con los mismos ojos?
[grwebform url=”https://app.getresponse.com/view_webform_v2.js?u=lhGe&webforms_id=3486903″ css=”on” center=”off” center_margin=”200″/]
[grwebform url=”https://app.getresponse.com/view_webform_v2.js?u=lhGe&webforms_id=3503503″ css=”on” center=”off” center_margin=”200″/]
32 comentarios
Ana Isabel
16/08/2013 a las 16:10
Un artículo genial! Había visto la palabra, pero no tenía ni idea de qué era.
Seguid así!
Ernesto del Valle
16/08/2013 a las 16:25
Muchas gracias, Ana Isabel, me alegra que te haya gustado el artículo.
Anna
20/08/2013 a las 19:39
Me ha gustado el artículo, muy directo y didáctico.
Ernesto del Valle
20/08/2013 a las 20:07
Gracias, Anna 🙂
Iñigo
12/09/2013 a las 11:25
Gracias por tus consejos, la verdad es que el favicón es algo que siempre está ahí, pero pocas veces se le saca rendimiento. Hay que aprovechar todas las oportunidades para dejar huella (positiva) de nuestra compañía.
Ernesto del Valle
12/09/2013 a las 11:43
Gracias, Iñigo. Desde luego, merece la pena prestar atención a ese “pequeño detalle” de nuestra web 😉
Jose Manuel
20/05/2014 a las 17:15
Muy buen artículos. Muchas gracias!
Mario
29/05/2014 a las 21:40
en blogger porque no se actualiza mi favicon sigo viendo el de blogger y no mi personalizado a pesar que ya limpie el cache de la lap pero no sale
natalia
08/12/2014 a las 19:32
a mi me pasa lo mismo ahora!! lo pudiste solucionar?
gracias
Pau Company
12/06/2014 a las 01:29
En el blog de word press 2014 no existe en el escritorio la opción que describes para insertar un favicon
Ernesto del Valle
12/06/2014 a las 19:33
Hola,
Las opciones de personalización están en el Tema que utilices para tu instalación de WordPress. La mayoría de los temas de pago (y los mejores temas gratuitos) la tienen. Posiblemente el tema que tú usas no la tiene.
Te recuerdo también (por si es tu caso) que no es lo mismo un blog hecho con WordPress (software en https://wordpress.org/), como este de Socialancer o el mío (https://www.socialmediaycontenidos.com/), que un blog gratuito del servicio de blogs de WordPress.com.
Saludos 🙂
Eduardo
03/10/2014 a las 01:41
Muy buena tu ayuda,
No me quedo claro como hacer para que en una pagina se pueda configurar para que el Favicon se vea. Por otro lado cual seria , si sabes, la forma de que con las herramintas en Mac, se pueda generar un .ico. gracias, Eduardo
Ernesto del Valle
03/10/2014 a las 17:42
Hola Eduardo 🙂
Solo tienes que hacer una imagen de las medidas recomendadas en el post y guardarla en formato .ico con cualquier aplicación gráfica que uses habitualmente (la inmensa mayoría permiten grabar en ese formato). En el post se mencionan varias herramientas online que son muy recomendables si no tienes conocimientos básicos de diseño gráfico.
natalia
08/12/2014 a las 19:30
hola ernesto estoy haciendo un blog con blogger y al cambiar el favicon se me queda igual!!! por que?¿?¿? yo quiero personalizarlo, puedes ayudarme? gracias 🙂
Gisele
19/12/2014 a las 21:22
Hola! ya lo hice pero no consigo que se vea el icono en las pestañas del navegador. ¿Como se hace? Gracias!
Abimelec Velasquez
22/03/2015 a las 00:32
Hola. Gracias por tu post. En mi blog tengo un problema y es que el favicon solo me aparece en el home, sabes que debo hacer para que aparezca en los post y mas?
Karen
30/05/2015 a las 19:27
Muchas gracias por la publicación, justo estaba buscando consejos para implementarlo en mi web.
Karen
30/05/2015 a las 19:36
Me quedó la duda si los apple no toman el formato .ico, solo toman .png?
Ernesto
01/06/2015 a las 15:29
Gracias a ti, Karen, me alegra haberte sido útil 🙂
noelia
23/07/2015 a las 10:21
A los que no le sale el favicon en blogger, es cuestión de tiempo, hay que esperar unos minutos, luego aparece.
Muy bueno el post!!!
Nin. A.
21/07/2017 a las 06:34
Excelente artículo Ernesto, muy explícito sobre el tema 😉
Si me permites me gustaría compartir el siguiente directorio web que funciona en base a favicons, en el que podemos añadir los nuestros sitios webs para fines de SEO y tráfico.
https://www.favicones.com
Saludos,
sssss
10/05/2018 a las 20:01
O gran descubrimientooooooo -.-
diseño web empresas
17/09/2018 a las 08:52
¿Que mas nos puedes explicar?, ha sido fantastico encontrar mas datos sobre este tema.
Saludos
la Biblia dinámica
01/02/2020 a las 10:21
Gracias, por tus sugerencias, tengo una página en la que se puede apreciar el favicon en varios navegadores, pero en Firefox no,
¿a qué se puede deber ese problema?
}
Socialancer
10/02/2020 a las 13:39
Saludos, gracias por ponerte en contacto con nosotros. No sabemos exactamente por qué en Firefox no se carga pero tal vez este artículo te pueda servir https://support.mozilla.org/es/kb/firefox-no-muestra-las-imagenes-o-animaciones
Jesus
29/04/2020 a las 21:59
Hola Ernesto
He llegado a tu artículo (muy útil) tratando de encontrar una solución a un problema que me ha surgido: he generado el .ico y en Explorer se ve perfectamente, pero en otros navegadores, como Chrome o FireFox se ve, pero mal. Todo lo que he encontrado son artículos sobre favicons que no se ven en algunos navegadores, pero nada que haga referencia a que se vea bien en unos y mal en otros. Seguiré buscando, pero igual tú me puedes dar alguna pista?
Gracias por adelantado
Saludos
Socialancer
30/04/2020 a las 17:24
Saludos, a raíz de tu pregunta nos pusimos a investigar un poco el porqué se ve bien en Explorer y mal en Chrome o FireFox. No encontramos nada concluyente pero tal vez esto te puede dar una pista: en este foro https://www.webempresa.com/foro/joomla-25/el-favicon-me-aparece-en-mozilla-e-internet-explorer-pero-chrome-no alguien comenta que tal vez sea un problema con el caché de Chrome y recomiendan borrar el historial del navegador.
Ojalá te sea de ayuda para solucionar tu problema.
Juan Carlos
31/05/2021 a las 18:15
Buenas tardes, mi plantilla es Responsive y se ve muy bien en un teléfono móvil poniéndolo en “vista ordenador” cuando creas un acceso directo y estoy pensando en utilizarlo como una App ya que son muy costosas, ¿puedo cambiar el icono que me sale al crear el acceso directo en el móvil?.
Muchas gracias.
Socialancer
01/06/2021 a las 16:14
Hola, como es algo muy específico y cambia de acuerdo a cada proveedor, te recomendamos que te pongas en contacto con el equipo de soporte de tu plantilla.
Juan Carlos
01/06/2021 a las 18:46
Buenas tardes, lo he intentado varias veces y no me hacen ni caso, dicen que eso no es de su competencia
“Theme FreshG Mega Grocery – Food Drink – Coffee Super Store v3”.
Si pueden ayudarme de alguna forma, les estaré muy agradecido.
Un saludo
Socialancer
02/06/2021 a las 15:43
Encontramos este artículo en Internet, esperamos que te sea de utilidad: https://www.eniun.com/etiquetas-html-iconos-acceso-directo-android-iphone/
Slot
26/12/2022 a las 17:18
Pensé que era muy fácil hacer un favicon. Pero ahora entiendo que hay muchos matices en este asunto: forma, color, significado … Tuve suerte de encontrar tu artículo. ¡Gracias!