Un favicon inteligente impulsa el tráfico a tu sitio web. Te contamos qué son, como crearlos e insertarlos en tu página
- ¿Qué es un favicon y para qué lo necesito?
- ¿Qué es un favicon?
- ¿Cómo puedo crear un favicon?
- ¿Cómo puedo agregar un favicon a mi sitio web?
Estamos viendo docenas de pequeñas imágenes en nuestro panel de pestaña cada día. Aunque pocos de nosotros sabemos que estos son favicons. Este artículo examina lo que esun favicon, ¿por qué se necesita, cómo y dónde crearlo, y cómo subirlo a su sitio web.
¿Qué es un favicon y por qué lo necesito?
La palabra «favicon» está hecha a partir de las palabras «favorito» e «icono». El favicon primero entró en la escena con el lanzamiento de Internet Explorer 5 en 1999. Al principio, sólo se mostraba en la pestaña de panel de IE y en la barra de URL de sitios web favoritos. Así es cómo el favicon se ve ahora (en Chrome):
Favicon es una imagen de 16×16 píxeles en formato .ico. Casi cualquier sitio web tiene un favicon, independientemente de su alojamiento o motor. Las resoluciones de favicons más comunes son las 16х16, 32×32 y 64х64 píxeles. Aquí puede ver qué tamaños de favicon se utilizan para diferentes dispositivos.
Junto con el archivo .ico, los favicons vienen en una variedad de otros formatos, como PNG, GIF, JPG y SVG. Formatos estáticos como PNG y GIF son compatibles con todos los navegadores modernos. ICO solía ser el formato más común de favicon. Lo que hizo a los archivos ICO tan populares es que almacenan varios tamaños de icono. Ahora ICO está siendo reemplazado por el ICO PNG con sus nuevas características y posibilidades.
¿Por qué necesito un favicon?
El favicon tiene el poder para establecer su sitio web separado de la competencia y hacerlo más atractivo para los visitantes. Un usuario buscando información, lo más probable es que visite el sitio web con un favicon atractivo en la barra de URL en lugar de una imagen predeterminada (consulte el ejemplo siguiente). Es decir, un favicon inteligente impulsa el tráfico a su sitio web.
- Favicon ahorra el tiempo de sus visitantes. ¿Cómo hacerlo? La cosa es, muchos de nosotros abrimos varias pestañas en el navegador. Si su sitio web no tiene ningún favicon para distinguirlo de otras páginas web, el usuario puede supervisar o considerarlo indigno de atención. Al crear su favicon único, asegúrese de que sea llamativo y fácil de recordar. La mejor manera de hacerlo es reducir la escala de su logotipo (o su parte más distintiva) para utilizarlo como un favicon. Alternativamente, puede utilizar las iniciales de su empresa/nombre del sitio web (Facebook y Amazon).
- Pestañas. Un favicon hace que sea más fácil para los usuarios encontrar su sitio web en los marcadores o favoritos. Los favicons vienen especialmente útiles en dispositivos móviles, tales como teléfonos inteligentes, tablas y similares.
- La marca. En la actualidad, los favicons son utilizados cada vez más como una parte de la marca corporativa. Si se usan sabiamente, un favicon pueden hacer que su sitio web tenga un aspecto más profesional y confiable.
¿Qué se ve un favicon?
- Una parte importante de la identidad de su marca, su favicon debe ir en línea con su sitio web. Mientras más coincidan los dos, mejor. Al crear un favicon, utilice la misma combinación de colores y formas que aparece en su sitio web o logo.
- Su favicon debe ser legible y fácil de percibir. No amontone su icono a menos que desee ahuyentar a su audiencia. Uno o dos elementos reconocibles son más que suficientes.
- Considere el pictograma relacionado a su sitio web en su favicon. Por ejemplo, un teléfono inteligente para una tienda en línea de venta de teléfonos móviles. Sin embargo, asegúrese de que su pictograma seleccionado refleje plenamente lo que su sitio web tiene que ofrecer.
¿Cómo puedo crear un favicon?
Ahora que hemos cubierto lo que un favicon es y por qué las empresas lo necesitan, vamos a averiguar cómo obtener uno. Aquí están algunas opciones:
- Descargue una imagen lista para usar.
- Dibuje un icono en programas de edición de imágenes (Photoshop, Inkscape);
- Use una herramienta en línea generadora de favicons.
Echemos un vistazo más de cerca a cada opción. Hemos hecho una lista de los mejores sitios de galería que ofrecen una increíble variedad de favicons tanto para el uso como para la inspiración.
- http://www.thefavicongallery.com/. Esta pequeña galería contiene aproximadamente 300 favicons a elegir. Para descargar una imagen en el ordenador, haga un clic derecho sobre ella y seleccione «Guardar como».
- http://www.iconj.com/ – Más de 3,000 imágenes para todos los gustos. Los formatos Gif e ICO. Los códigos html están también disponibles. Favicons animados. El sitio web sólo muestra 30 imágenes por página, así que prepárese para navegar por varias páginas para encontrar la opción correcta.
- http://www.freshfavicon.com/ sitio de galería de favicons inspiradores completamente funcional. El sitio tiene un sistema de calificación. Incluso puede enviar su propio favicon.
Si tiene la suerte de tener conocimientos y experiencia de dibujo decentes con software de edición, puede dibujar un favicon en Photoshop.
Inicie Photoshop y cree un nuevo documento haciendo clic Archivo-Crear. En una nueva ventana, defina el tamaño de su futuro favicon – 16×16 (o 32х32). Aquí he optado por un fondo transparente. Usted puede elegir cualquier color de fondo que le guste. Haga clic en Aceptar.
Es posible que necesite aumentar su capa un poco mediante la herramienta Cambiar tamaño. Dibuje una imagen que desea utilizar en su favicon. Ahora, el dibujo se ve un poco borroso, pero no se preocupe. Se verá genial cuando sea reducido. Luche contra la tentación de crear imágenes más complejas y detalladas. De lo contrario se corre el riesgo de acabar con un pedazo de gráficos ilegibles.
¡Eso es prácticamente todo! Su favicon está listo. Guárdelo haciendo clic en Archivo – Guardar como archivo .ico.
Generadores en línea son la manera más rápida y fácil para crear un icono limpio, bonito y efectivo. Hemos seleccionado los mejores generadores que podrían ayudarle a navegar el proceso creativo.
Además de favicons, Logaster permite a los usuarios crear logotipos y otros elementos de identidad corporativa. Esto viene extremadamente práctico ya que su identidad de marca debe ser coherente y claramente definida. A diferencia de otros servicios, aquí usted no necesita dibujar un favicon usted mismo o cargar una imagen.
Cuando en el sitio web de Logaster, haga clic en «Crear Favicon». Introduzca el nombre de su empresa y seleccione su industria de la lista desplegable. Logaster le ofrece docenas de opciones sorprendentes.
Compre la que le guste más y descárguela en varios tamaños en el ICO y PNG. Iconos para Apple Touch también están disponibles.
Con este sencillo generador en línea, usted puede dibujar su favicon píxel por píxel. Vaya a favicon.cc. Cada cuadrado representa un 1 píxel. Pinte los cuadrados para construir su imagen en el futuro. Además, la plataforma puede generar un favicon basado en su imagen. Descargue el icono terminado en formato ico.
Esta herramienta en línea crea favicons que lucen muy bien en todos los navegadores y dispositivos. Todo lo que tiene que hacer es cargar la imagen. La plataforma guardará su icono en el formato compatible con su navegador o dispositivo. Además, obtendrá el código HTML de su favicon para agregar a su sitio web.
Este sitio es una gran manera de crear un icono minimalista, pero efectivo en sólo un par de pasos. Todo lo que necesita hacer es elegir el texto, la fuente, forma y color. Cuando el icono esté listo, descárguelo en .ico o .png. Como alternativa, puede convertir su imagen existente en .ico. El sitio ofrece una enorme selección de emojis. ¡Guarde cualquier emoji para colocarlo en su favicon!
¿Cómo puedo agregar un favicon a mi sitio web?
Los favicons son generalmente subidos a la carpeta raíz del sitio web.
-
Cómo agregar código html
Este es un único método para agregar un favicon a un sitio web, ya sea una página de aterrizaje o tienda en línea.
Usted necesita cargar un archivo con el icono a su servidor de alojamiento. Para ello, debe agregar el código html del icono a la carpeta raíz (www o public_html) de su sitio web. Puede hacerlo a través del panel de admin o FTP en Total Commander.
Busque el archivo index.html (si dispone de una página de aterrizaje o suscripción) o header.php (si su sitio web utiliza cualquier CMS popular). Coloque el siguiente código dentro de la etiqueta <head>:
<head>
<link rel=»icono de atajo» href=»/images/favicon.ico» type=»image/x-icon»>
</head>
Si el icono tiene un formato diferente a .ico, necesita cambiar el tipo de atributo a image/gif o image/png, dependiendo de su formato.
<head>
<link rel=»icono de atajo» href=»/images/favicon.png» type=»image/png»>
</head>
Ahora su favicon se muestra en la pestaña del explorador. Si no es el caso, intente borrar la memoria caché del navegador pulsando CTRL+R.
-
Cómo agregar un favicon fácilmente al sitio de WordPress
En primer lugar, en el Panel de Control de WordPress, seleccione «Apariencia > Personalizar». Esto abrirá el personalizador en el lado en vivo de su sitio. En el personalizador, seleccione «Identidad del Sitio». Es aquí donde encontrará la opción de añadir un icono de sitio web. Bajo «Icono de Sitio». Haga clic en el icono «Seleccionar la imagen». Ahora su biblioteca de medios se abrirá. Esto le permite elegir una imagen guardada, o cargar una nueva. Una vez que haya seleccionado una imagen, si hay que recortar la imagen para que tenga el tamaño correcto, puede hacerlo aquí. Su favicon aparecerá ahora en «Icono de Sitio» en su personalizador. Recuerde siempre que haga clic en «Guardar y Publicar» en la parte superior del personalizador así su favicon se guardará y se mostrará. Su sitio de navegador debe mostrar ahora el favicon del sitio.
Para llevar a casa
El papel de un buen favicon en el éxito su sitio web no debe ser subestimado. Esto es especialmente cierto en el competitivo espacio web donde miles de sitios están compitiendo por la atención del usuario. Asegúrese de poner suficiente empeño en crear un favicon único y reconocible. Al igual que un logotipo inteligente, un favicon de calidad promociona su sitio web y lo hace más atractivo a los ojos de los usuarios exigentes. ¡No pierda la oportunidad de hacer a su sitio web aún mejor!