¿Cómo puedo añadir un favicon para mi tienda?

Publicado en: Aspecto y Diseño web

Si te gusta puedes compartirlo aquí:

¿Qué es un favicon?

Un favicon, según Wikipedia"es una pequeña imagen asociada con una página o sitio web en particular. Los navegadores gráficos suelen mostrar el favicon de la página visitada, si ésta lo posee, en la barra de direcciones y en el encabezado de la pestaña correspondiente. Asimismo los utilizan para identificar más fácilmente las páginas, presentándolos junto a sus respectivos títulos, en las listas de marcadores o favoritos, en los historiales de páginas visitadas y de navegación reciente, y toda vez que deban hacer referencia a ellas."

config_favicon_chrome.png   config_favicon_firefox.png

¿Qué formato debe tener la imagen que use como favicon?

La imagen que uses como favicon debe tener las siguientes características recomendadas:

  • Dimensiones 16 píxeles x 16 píxeles;
  • 16 colores (4 bits);
  • Formato ICO (no BMP, no GIF, no JPG).

Es importante cumplir las especificaciones anteriormente indicadas ya que si no son exactamente iguales es posible que el Favicon no s emuestre en algunos navegadores. 

En algunos navegadores puedes usar iconos mayores, con más colores y en otros formatos (cómo PNG o GIF), pero si quieres que tu icono funcione a la primera y en la mayoría de navegadores modernos, hazlo de 16x16, con 16 colores y en formato ICO.
 

Para crear la imagen en formato ICO, puedes usar cualquier editor de imagenes que permita editar iconos (o buscar alguna de las varias páginas webs que permiten crear la imagen de forma online, como por ejemplo www.favicon.cc) y crear tu favicon tranquilamente en la comodidad de tu hogar. 

¿Cómo poner el favicon en mi tienda?

Para añadir un favicon para tu tienda, sigue los pasos que te describimos:

  1. Inicia sesión con tu cuenta de administrador en tu tienda.
  2. En el modo edición de la tienda, pulsas sobre el botón "Añadir módulo" que aparece al principio de página.

    botonAnadir.jpg

  3. En la lista que aparece en la pestaña "Nuevo", busca el módulo "HTML estático" y ponle de nombre "FAVICON" (para que te sea fácil identificarlo más tarde en el listado de módulos existentes) y pulsa Añadir.
  4. Ahora de nuevo en la página al principio salen los botones de editar (lapiz Botón Editar) y configurar (rueda Botón Configurar) junto al nuevo módulo que has añadido. Pulsa sobre el lápiz.
  5. Pulsa sobre el botón Insertar/Editar hipervínculo (icon_editor_img.PNG). Te aparecerá un cuadro de diálogo similar a este:

    editor_dialogo_imagen.PNG 
  6. En el campo Url de la imagen puedes escribir la url del archivo que quieres enlazar. 
    1. Si la imagen está alojada en un servidor externo, pega la url del archivo aquí y salta al paso 6.
    2. Si no tienes la imagen alojada en ningún servidor externo (la tienes en tu equipo), continúa con el paso 7.
  7. Pulsa sobre el icono ( icon_adv.jpg ) que aparece junto al campo Url de la imagen, y se abrirá el Gestor de archivos en una nueva ventana.
  8. En la parte inferior de la ventana del Gestor de archivos, selecciona la imagen de tu equipo y pulsa sobre el botón Subir.
    (Si la imagen que quieres enlazar ya la tienes subida, puedes saltarte este paso)
  9. Selecciona la imagen que quieres utilizar, y pulsa sobre el botón Insertar que encontrarás en la misma línea del fichero. Volverás al cuadro de diálogo Insertar/editar imagen. En el campo Url de la imagen verás la ruta de tu imagen subida. 
    • Apúntate la Url de la imagen (la necesitarás en el paso 11), y NO pulses sobre el botón Insertar; pulsa el botón Cancelar
  10. Activa el modo de edición de código HTML del editor de texto, pulsando sobre el botón Desactivar Editor HTML de la parte inferior del editor de texto (verás como desaparecen las barras de herramientas del editor de textos).

    Este paso es muy importante. Si no se realiza correctamente no quedará bien añadido el Favicon

    Editor_HTML_Analytics.png
  11. Inserta el codigo siguiente que te indicamos, cambiando la ruta de archivo por el que te has copiado en el paso 9:

    <link rel="shortcut icon" href="/server/Portal_0000000/img/favicon.ico">
  12. Pulsa sobre el botón Guardar para guardar los cambios.
  13. Ahora que ya tienes insertado el favicon, solamente te queda hacer que el código insertado se muestre en todas las páginas de tu tienda, para lo cual debes seguir con nuestra guía ¿Como hacer que un módulo esté visible en todas las páginas?.
Si has seguido todos los pasos de esta guía, ya tendrás insertado tu favicon en tu tienda online.

NO SE VE EL FAVICON EN CHROME

En algunos casos siguiendo los pasos anteriores el favicon no se visualiza en chrome. Para solucionar este problema podéis utilizar este código: 

<link href='/server/Portal_00000000/img/FAVICON/favicon.ico' rel='shortcut icon' type='image/x-icon'/>
<link href='/server/Portal_00000000/img/FAVICON/favicon.ico' rel='icon' type='image/x-icon'/>

 

Recuerda sustituir la ruta de tu favicon en las dos lineas dentro del atributo "href".

¿Quieres proponer alguna mejora para las 100 mejoras anuales sin coste en Mabisy? Hazlo aquí ahora
 
¡Suerte con tu tienda online!

 

¿Te ha gustado? Si quieres puedes compartirlo aquí:


Centro de ayuda de Mabisy

Deja un comentario


( * ) Campos obligatorios

Sigue a Mabisy en Google + o Visíta nuestra página en Google+



Sobre el blog

Noticias, novedades, Actualidad y muchos trucos para hacer que tu tienda online sea un éxito.

Síguenos en...

 8.231