Favicon: Qué es y cómo añadirlo a tu web

Autor: | 2018-08-08T19:42:12+00:00 Fecha: 07/08/2018|Categorías: SEO y Marketing|Comentarios: Ningún comentario

Abre tu navegador, entra en un sitio web y fíjate en la imagen que aparece en la pestaña del navegador al lado del título de la página. Esa pequeña imagen se llama favicon y, en este artículo, te voy a hablar de todo lo que tienes que saber de este elemento web: cómo generarlo, de dónde descargarlo e incluso cómo implementar un favicon en una web a medida, en tu WordPress o cualquier otro CMS que utilices.

 

¿Qué es un favicon?

Un favicon,también llamado icono de página o icono de favoritos, es una imagen asociada a una web que aparece en la pestaña, barra de direcciones y en los marcadores del navegador. Según la calidad del icono, su tamaño normalmente es: 16×16, 32×32, 48×48, 64×64 o 128×128 píxeles con una profundidad de color de 8, 24 o 32 bits.

raiola-favicon

Digo “normalmente” porque, si quieres adaptar tu favicon a todas las plataformas que existen y no solo a tu web, deberás prepararlo en diferentes tamaños. Por ejemplo:

PlataformaNombre del archivoValor del atributo rel para HTMLTamaño favicon
Google TVfavicon.pngicon96×96
Opera Coastfavicon-coast.pngicon228×228
Ipad Retina con iOS 7 o superiorapple-touch-icon-152×152-precomposed.pngapple-touch-icon-precomposed152×152
Ipad Retina con iOS 6 o inferiorapple-touch-icon-144×144-precomposed.pngapple-touch-icon-precomposed144×144
Ipad Mini o primeras generaciones con iOS 7 o superiorapple-touch-icon-76×76-precomposed.pngapple-touch-icon-precomposed76×76
Ipad Mini o primeras generaciones con iOS 6 o inferiorapple-touch-icon-72×72-precomposed.pngapple-touch-icon-precomposed72×72
Iphone Retina con iOS 7 o superiorapple-touch-icon-120×120-precomposed.pngapple-touch-icon-precomposed120×120
Iphone Retina con iOS 6 o inferiorapple-touch-icon-114×114-precomposed.pngapple-touch-icon-precomposed114×114

 

En cuanto a la extensión del favicon, originalmente era .ico, (de hecho, el archivo tenía que nombrarse expresamente “favicon.ico”) pero a día de hoy los navegadores aceptan diferentes formatos: ico, png, gif, jpg y svg. La ventaja de los archivos .ico respecto a otros formatos es que pueden contener más de una imágen en diferentes tamaños y profundidad de color.

Pero ¿para qué sirve un favicon? Aunque en realidad es tan solo un elemento “decorativo”, generalmente se utiliza para:

  • Asociar tu web a un elemento gráfico: imagen corporativa, logotipo…
  • Identificar fácilmente tu web de entre las pestañas que un usuario tenga abiertas en el navegador.
  • Identificar tu web fácilmente en los favoritos de tu navegador, historial de navegación, páginas recientes

Está demostrado que las personas recordamos mejor una imagen que cualquier palabra, así que asociar tu web a una imagen hará que tus visitantes identifiquen más rápida y fácilmente tu página.

Y… ¿para qué NO se utiliza un favicon? No se utiliza para mejorar el SEO. ¿Por qué te menciono esto? Porque existen varios artículos que encontrarás en internet diciendo que el favicon mejora el SEO y esto no es del todo correcto. Los favicon no tienen efectos directos sobre el SEO. Lo que sucede, es que no ponerlo te va a traer “problemas”.

Me explico. Cuando entras en una página web tu navegador realiza una petición solicitando el icono de página para mostrarlo en la pestaña o barra de navegación. Si ese favicon no existe tendrás un error 404 not found. Pero mejor te lo enseño:

Acabo de crear una página nueva en uno de mis Hosting SSD. Es simplemente una página HTML con un texto aleatorio. No le he asignado ningún icono de favoritos concreto ni he subido un favicon.ico en la carpeta raíz de mi hosting, por eso cuando el navegador intenta encontrarlo me devuelve un error 404.

raiola-favicon-3

Si cotilleas un poco por internet, verás que todas las grandes marcas tienen su logo como icono de página.  

raiola-favicon-2

¡Y tú no vas a ser menos! Por eso te voy a enseñar en el siguiente apartado cómo crear un favicon.

 

¿Cómo crear un favicon?

Existen al menos dos maneras en las que puedes crear un favicon: utilizando un editor gráfico o un generador online.

 

Editor gráfico: Crear un favicon con Photoshop

Para hacer el favicon, voy a utilizar mi editor gráfico favorito: Adobe Photoshop. Pero tú no estás obligado a usar este programa, ya que puedes seguir prácticamente el mismo procedimiento con cualquier otro editor gráfico: GIMP, SAI, Microsoft Paint, Corel Painter, Pixia…

Si no tienes Adobe Photoshop CC 2018, no te preocupes. Aunque sea un programa de pago, Adobe te permite utilizar cualquiera de sus productos gratis durante 30 días: Descargar Adobe Photoshop CC 2018 . Una vez instalado, ábrelo porque vamos a empezar.  

Tienes dos formas de crear un archivo nuevo en Adobe Photoshop. Puedes hacerlo de la manera clásica pinchando en Archivo > Nuevo desde el menú superior del programa o desde el acceso rápido que te facilita Adobe cuando lo acabas de iniciar.

raiola-favicon-19

Una vez que pulses en el botón Crear nuevo, te aparecerá la siguiente pantalla:

raiola-favicon-20

Aquí tienes que fijarte bien, porque vas a rellenar los primeros datos importantes para crear el favicon.

  • Tamaño favicon: Como te comenté en la introducción de este post, el tamaño del favicon depende de la calidad que quieras para tu icono. Ten en cuenta que, cuanto más grande, más pesará la imagen aunque se verá mejor. Desde mi punto de vista, es suficiente con crear un favicon de 32×32 píxeles para los navegadores web (no estoy teniendo en cuenta otras plataformas). Por lo tanto, si sigues mi consejo deberás cubrir el campo de Anchura y Altura con el número 32, como se ve en la imagen.
  • Resolución: Para imágenes web (ya que si preparas el archivo para imprenta debes aumentar bastante este valor) la resolución es 72 píxeles por pulgada (ppp)
  • Modo de color: Vas a usar el modo RGB a 16bits, que es el modo de color estándar y el número de colores que representa son suficientes para poder trabajar con tu favicon.

Si ya has cubierto los datos, pulsa en el botón Crear. Ahora tienes un archivo en blanco con unas dimensiones de 32×32 píxeles. Es el momento de añadir tu logo o imagen. En mi caso, es el logotipo de Raiola. Para abrir un archivo tienes que pulsar en Archivo > Abrir. Aparecerá una ventana emergente que te permite seleccionar una imagen de tu disco duro.

Selecciónala y pulsa en Abrir. Al igual que en los navegadores web, Adobe Photoshop tiene unas pestañas para navegar por los archivos que has abierto. Pincha en la pestaña que corresponde al archivo que acabas de abrir. Lo que vas a hacer es arrastrar esa imagen dentro de tu archivo nuevo de favicon. Para ello, tienes que seleccionar la herramienta Mover.

raiola-favicon-21

Ahora, arrastra la imagen hasta la pestaña del archivo nuevo y suéltala allí.

Probablemente, el tamaño de ese archivo es mayor a 32×32 píxeles, por eso tendrás que reducirla. En el menú superior marca la casilla Mostrar contr. transf y te aparecerá algo parecido a la imagen de la izquierda que verás a continuación:

raiola-favicon-23

Pincha en la esquina superior para redimensionar la imagen. Si no quieres que se deforme mientras la escalas, deberás mantener pulsada la tecla Shift. Ajusta la imagen y, cuando esté lista, pulsa en el siguiente botón:

Si has añadido una imagen con fondo transparente y quieres mantenerlo deberás borrar la capa de fondo.  Pincha en la capa que quieras borrar y pulsa Suprimir en el teclado.

raiola-favicon-24

Para finalizar, vas a exportar el favicon en una imagen con formato png. Localiza en el menú superior Archivo > Exportar > Exportación rápida como PNG. Guarda el archivo en dónde quieras y ¡listo!

Esta no es la única manera que hay para crear un favicon en Photoshop. Si conoces otras formas, puedes contármelo al final de este artículo dejando un comentario.

 

Generador online: Generar favicon online

Si no sabes usar ningún editor gráfico o no dispones de ninguno en este momento, no te inquietes: hay herramientas online que te van a ayudar a crear un favicon rápida y fácilmente. Existen muchas, por lo que primero te voy a citar 3 de las aplicaciones más conocidas y después te voy a enseñar a usar un generador de favicon online:

  • Genfavicon: Es una herramienta gratuita en varios idiomas que te va a permitir hacer favicon o iconos online. Es muy sencilla y por eso es una de mis favoritas, aunque existan otras como Favicon Generator que es bastante más completa. Puedes crear tu icono en varios tamaños: 16×16, 32×32, 48×48, 64×64 y 128×128 y acepta diferentes formatos: jpeg, png y gif. Además, puedes ver en directo como va quedando tu imagen. No tardas ni 5 minutos en crear un icono de página y lo puedes exportar como .ico o .jpg.
  • Favicon generator: Es probablemente una de las aplicaciones online más conocidas de internet para crear favicon o iconos. A diferencia Genfavicon, está solamente en inglés. Acepta imágenes en diferentes formatos: gif, png y jpeg y las convierte a archivos .ico para web, Android, Microsoft e iOS. Además, posee una galería con favicons que te puedes descargar de otros usuarios. Por lo que, si la utilizas, recuerda que deberás quitar uno de los checks que aparecen marcados por defecto en el formulario: “Include your favicon.ico in the public gallery”, si no quieres que tu imagen aparezca en su galería.
  • Favicon.cc: Sin duda mi favorita. Te permite importar una imagen en más formatos que las anteriores: jpeg, jpg, gif, png, bmp, ico y cur. Además, incorpora un editor gráfico con herramientas básicas con el que puedes dibujar tu propio icono de página tanto estático como animado. Al igual que Favicon Generator, tiene una galería con más de 230.000 iconos de página que puedes descargar o enlazar directamente desde la web con el código HTML que te proporcionan.

Ahorate voy a enseñar a generar un favicon online. En este caso y por su sencillez, lo voy a hacer con Genfavicon.

Voy a usar la misma imagen que en el apartado del editor gráfico. Tú localiza el logo o imagen que quieras asociar con tu web. Primero, abre la página de Genfavicon. Verás que divide el proceso en tres partes: Seleccionar la imagen, Previsualización y Favicon resultante.

raiola-favicon-4

Para empezar, lo que debes hacer es pulsar en el botón Seleccionar archivo y seleccionar la imagen con la que quieres identificar tu web. Recuerda que, con esta herramienta, puedes convertir un png a favicon, un jpeg a favicon o un gif a favicon. Si ya tienes subida en tu página esa imagen, puedes añadir la URL de la fotografía directamente en el campo Indique la URL de la imagen. Procura que su peso no sea mayor a 4MB; si no, el generador de favicon no te va a funcionar.

raiola-favicon-5

Luego, pulsa en el botón Subir imagen. Verás cómo se carga en el visor que hay encima de los tres bloques que te enseñé antes. En el visor, tienes que seleccionar el área de la imagen que quieres exportar como favicon y luego selecciona el tamaño en el que lo quieres guardar. En mi caso, 32×32: es el tamaño que te recomiendo, pero puedes elegir el que quieras.

raiola-favicon-6

Ahora, pulsa en el botón Captura & Previsualización. En estos momentos se está generando tu favicon. Cuando termine, verás cómo aparece en el tercer bloque la previsualización del icono de página y un botón para descargarlo en formato .ico o en .jpg.

raiola-favicon-7

¡Listo! Ya lo has creado y en menos de 5 minutos. Ahora te voy a enseñar a añadir o cambiar un favicon en WordPress, página a medida o cualquier otro CMS.

 

Cómo añadir o cambiar un favicon

Dependiendo de si tienes tu web desarrollada a medida o utilizas un CMS como WordPress, la forma de añadir un favicon a tu sitio es “distinta”. Te voy a enseñar varias maneras de hacerlo y, si quieres conocer alguna más, te animo a que me dejes un comentario al final de este artículo. Lo que sí debes saber antes de empezar es que es una buena práctica (aunque no obligatoria) añadir en el raíz de tu sitio un archivo favicon.ico con un tamaño de 16×16 y 32×32 píxeles.

Si no sabes cómo subir un archivo a tu web, te aconsejo que les eches un ojo a los siguientes artículos:

 

Añadir o cambiar un favicon en HTML

Si no estás acostumbrado a editar código, no te asustes: añadir un favicon a HTML es muy sencillo, ¡ya verás!

Lo primero que debes hacer es localizar el archivo de tu sitio que contiene el “header” o cabecera de tu página web. Si tienes más de una cabecera, recuerda que tienes que insertar el código que te voy a enseñar en TODAS las cabeceras.

Abre el archivo. Localiza la etiqueta o tag HTML  <head>. Entre la etiqueta de apertura de <head> y la de cierre </head> tendrás que poner el siguiente código con los datos que correspondan en tu caso:

  • REL-FAV: Normalmente el valor de este campo es: icon. A no ser que estés añadiendo un favicon para otra plataforma como te enseñé en la tabla que hay al principio de este post.
  • RUTA-FAV: La ruta o url del favicon que has generado.
  • FORMATO-FAV: Depende del formato del favicon tienes que añadir un tipo u otro:
FORMATO FAVICONVALOR DEL ATRIBUTO TYPE
pngimage/png
gifimage/gif
jpegimage/jpeg
icoimage/vnd.microsoft.icon
svg*image/svg+xml

* La compatibilidad con los navegadores actuales es baja.

  • TAMAÑO-FAV: El tamaño del favicon. El estándar para navegadores web es 16×16 píxeles, pero te recomiendo que le eches un ojo a la tabla sobre el tamaño de favicon que te enseñé al principio de este post.

Una vez que sustituyas los valores que están por defecto, ya solo tienes que guardar el archivo y ¡listo!

En mi caso, he añadido varios iconos de página para diferentes plataformas:

 

Añadir o cambiar un favicon en WordPress

Desde la versión 4.3, WordPress ha integrado una función que permite añadir un favicon desde el panel de control. Ahora ya no es necesario instalar ningún plugin ni código adicional.

Inicia sesión en el panel de adminstrador de WordPress y busca en el menú lateral el apartado Apariencia. Pincha en Apariencia > Personalizar:

raiola-favicon-9

Se abrirá una nueva pantalla que te permite personalizar el theme que tienes instalado. Pulsa en Identidad del sitio.

raiola-favicon-10

Aquí puedes personalizar el título de la página, la descripción de la web y el icono del sitio (es decir, el favicon). Busca Icono del sitio y pulsa en Seleccionar:

raiola-favicon-11

Sube el favicon a la biblioteca de medios de WordPress. Pincha en Subir archivos y selecciona el archivo. Una vez que lo tengas localizado, pulsa en el botón Elegir.

raiola-favicon-12

Ahora te aparecerá una ventana con un editor gráfico muy simple que te permite realizar los últimos retoques del icono del sitio. Cuando termines de reajustar el icono de favoritos, pincha en el botón Recortar imagen.

raiola-favicon-13

¡Listo! Así de fácil se añade un favicon en WordPress. Si en algún momento quieres cambiar tu favicon WordPress, simplemente pulsa en el botón Cambiar y sigue los mismo pasos.

Si se da el caso de que tienes una plantilla premium, algunas como Avada te permiten añadir el favicon desde las opciones propias del theme:

raiola-favicon-8

Pero ten en cuenta que, si lo haces así, deberás eliminar el icono de página de Apariencia > Personalizar > Identidad del sitio > Icono del sitio. Si no, WordPress te mostrará siempre el favicon que hayas subido en Icono del sitio y no el que cargues desde las opciones de tu theme.

 

Añadir o cambiar un favicon en Prestashop 1.7

Si en tu hosting tienes instalado Prestashop 1.7, por defecto tendrás un icono en la pestaña de navegación con la cara Preston, la conocida mascota de este CMS. Si quieres añadir o cambiar un favicon en Prestashop 1.7 y no sabes cómo hacerlo, no te preocupes: sigue los siguientes pasos y lo lograrás.

Entra en el panel de control de tu Prestashop con un usuario que tenga permisos para realizar este tipo de cambios y busca en el menú lateral IMPROVE. Luego pincha en Design > Theme & Logo.

raiola-favicon-15

En esta sección del panel de control de Prestashop aparece la plantilla que tenemos instalada y el menú de opciones para configurarla. Entre esas opciones te encontrarás con una pestaña que pone Favicons. Pincha en la pestaña Favicons. Luego pulsa en Add file y selecciona el favicon que quieras subir a tu Prestashop.

raiola-favicon-16

Para acabar pincha en Abrir y por último en el botón Guardar.

raiola-favicon-17

¡Listo! Si quieres cambiar el favicon en Prestashop solo tienes que volver al paso en el que añades y seleccionas el icono de página. Cuando se guarde, verás cómo el nuevo va a sustituir al icono que tenías con anterioridad.

 

Añadir o cambiar un favicon en Joomla

Para terminar, te voy a enseñar a añadir o cambiar un favicon en Joomla. Si quieres que te explique cómo hacerlo para otro CMS o de otra manera, ya sabes, déjame un comentario al final de este artículo y te ayudaré encantada 🙂

Añadir o cambiar un favicon en Joomla es más “complicado” que en Prestashop o WordPress, ya que no se hace desde el panel de control de Joomla. Necesitas acceso por FTP o al administrador de archivos de tu panel. Si no sabes cómo conseguirlo, en la primera parte de este apartado tendrás toda la información que necesitas.

Una vez tengas acceso a la estructura de carpetas de tu web, deberás ir a la siguiente ruta:  directorio_raiz_Joomla/templates/nombre_de_la_plantilla_que_usas

Ahí es donde tienes que subir el favicon.ico. Es importante que el archivo tenga esa extensión y su nombre sea “favicon”.

raiola-favicon-18

En mi caso, la ruta en la que tengo que colgar el icono de página es midominio/templates/beez3Para ti probablemente no sea la misma. Tendrás que comprobar  cuál es la plantilla de Joomla que tienes instalada y activada. Puedes verlo desde el panel de control si entras en Plantillas y buscas el theme que está marcado con una estrella.

Una vez lo cargues en la ruta correspondiente, recarga tu web en el navegador. Podrás ver como ahora aparece tu nuevo icono de página. Si en algún momento quieres cambiar el favicon en Joomla, solo tendrás que sustituir ese archivo que acabas de subir. Si cambias de plantilla, recuerda que tendrás que subir el favicon.ico a la carpeta del nuevo theme activado.

 

Dónde descargar favicon gratis

Si has llegado a este apartado, deduzco que estás indeciso y todavía no sabes qué icono de favoritos quieres poner en tu web. Existen librerías online en las que te puedes descargar favicons gratis. Por eso, te traigo una lista de las mejores galerías de iconos de página gratis:

 

Conclusión: Tienes que añadir un favicon a tu web o negocio online

Es importante que tu web se asocie a un logo o imagen con la que tus usuarios te identifiquen así que, ya sabes, tienes que añadir un favicon a tu página.

Si tu proyecto web no está hecho en WordPress, Joomla o Prestashop 1.7 y quieres que te explique cómo añadir un favicon en otra plataforma, no dudes en preguntarme. ¿Qué te ha parecido el artículo? ¿Qué le añadirías? ¿Conocías la existencia de los favicons? ¿Hay algún punto con el que no estás de acuerdo? Déjame un comentario 🙂

 

[Total: 6 Promedio: 5]
Ángela Piñeiro
Soy graduada en Ingienería Informática y formo parte del departamento de Web y Marketing Digital de Raiola Networks.

Utilizamos cookies propias y de terceros para obtener información estadística, mostrar publicidad personalizada a través del análisis de tu navegación, así como para interactuar en redes sociales. Si continúas navegando, consideramos que aceptas nuestra Política de cookies. ACEPTAR

Aviso de cookies