El ícono clásico es un archivo ICO de 16 × 16, con compatibilidad de color y transparencia de 16 o 24 bits. Mucho más tarde, apareció en un tamaño de 32 × 32, pero los navegadores antiguos todavía lo reducen a 16 × 16.
¿Por qué lo necesitas ahora? Hoy en día, es un componente importante de la interfaz del sitio web, que también juega un papel importante en aplicaciones web avanzadas.
Favicon Checker Compruebe si su sitio web tiene favicon y cómo se muestra en diferentes navegadores
¿Cuál es su propósito?
Obviamente, es mucho más fácil buscar con esto al favorito que necesitas, ya que es más sencillo buscar un icono que ya es familiar que leer todos los nombres de sitios web. Por lo tanto, su trabajo es mejorar la experiencia del usuario. Esta es la razón principal para usarlo.
Actualmente, puedes encontrar este componente en todos los sitios web populares y modernos, también en navegadores en sus pestañas de navegación. Cabe resaltar que, las empresas globales tienen iconos reconocibles y populares que los ayudan a sobresalir de la multitud y de otras fuentes web (son buenos ejemplos de favicon para mirar). Sin duda, es una herramienta muy útil para sitios de todo tipo.
Fue creado para una búsqueda visual rápida que permita encontrar el sitio web exacto que se necesita entre miles de marcadores que hay en Internet, ayudando a su público a hallarlo más rápido y fácil.
El sitio web sin un icono de identificación personal irá con el símbolo genérico de un navegador, lo que significa que es imprescindible para ti, si te importan tus recursos de branding.
¿Cómo crear un Favicon de sitio web?
Puedes hacerlo por tu cuenta o usar ayuda en línea. No es necesario utilizar generadores en línea especiales para crear uno, aunque a menudo es bastante conveniente y simple.
He aquí algunos ejemplos:
- Favicon Generator
- Favicon Generator ORG
- Dynamic Drive Favicon Tool
- Favigen
- Gen Favicon
- Degraeve Favicon
Como ves, ni siquiera necesitas un diseñador gráfico para hacerlo. Sin embargo, si planeas lanzar un sitio global y vas a tener una marca de nivel mundial, entonces probablemente sería bueno recurrir a un diseñador profesional para crear algo único que coincida con tu marca.
No obstante, si lo harás tú mismo, te puede tomar unos 10 minutos hacer uno simple: solo tienes que cargar el logotipo de tu sitio web en uno de los sitios mencionados anteriormente y simplemente descargar el archivo listo. ¡Así de fácil!
Además, prueba estos sitios web que son inspiradores para encontrar algunas ideas interesantes sobre los favicon:
Consulte el sitio web para errores de SEO Ningún favicon perjudica la facilidad de uso del sitio web, pero las etiquetas de Título y Descripción que faltan pueden llevar a la pérdida de tráfico.
¿Cómo agregarlo al sitio web?
Una vez tengas el archivo listo, no es tan complicado colocarlo en el servidor. Primero tendrás que tener acceso a la herramienta de edición de texto y a la carpeta de origen de tu sitio web para poder ajustar el código HTML de tu sitio web.
Aquí una guía rápida:
1. Carga el archivo adecuado en tu servidor. Luego, escribe en la barra de direcciones de tu navegador en tu servidor FTP. Presiona el botón “Entrar”, inicia sesión y simplemente carga el archivo a la carpeta “root”.
2. A continuación, debes cambiar la página HTML de tu sitio web. Busca y descarga el archivo “header.php” o “index.html” del servidor. Si tu sitio está hecho con HTML simple, debes insertar el código en el área del encabezado del archivo “index.html”:
<link rel="shortcut icon" type="image/x-icon" href="http://yourwebsite.com/favicon.ico">Si estás trabajando con WordPress, inserta el código en el área del encabezado del archivo “header.php”:
<link rel="shortcut icon" type="image/x-icon" href="<?php bloginfo('url') ?>/favicon.ico">¡Listo! Realmente te sorprenderá lo fácil que es.
Crear un icono en Photoshop
¡Photoshop es un excelente programa para trabajar con imágenes!
Es una herramienta muy útil que te ayudará en diferentes situaciones e incluso te permitirá crear un ícono personalizado para sitio web. Si eres un diseñador, por supuesto, el programa de Photoshop es la mejor opción para usar. En el caso contrario, te recomendamos que consideres utilizar los sitios web que mencionamos anteriormente y así ahorrarás tiempo.
El problema es que Photoshop no admite archivos “ICO”. Por lo tanto, debes descargar e instalar el plugin de Telegraphics.
Ahora, en el menú de opciones selecciona la carpeta ARCHIVO, debes crear un archivo nuevo, con un lienzo de 64 × 64 píxeles (es más fácil trabajar con el tamaño grande), pega tu logotipo en el documento y haz todos los cambios necesarios.
Después, selecciona la carpeta IMAGE, ve a TAMAÑO DE LA IMAGEN y cámbiala a 16 × 16 píxeles, no olvides asegurarte de que tu ícono no se vea borroso al hacer clic en RESAMPLE IMAGE y BICUBIC SHARPER.
Cuando estés satisfecho con los resultados, abre la carpeta ARCHIVO y presione GUARDAR COMO.
Conclusión
Este componente es como un tipo de tarjeta de presentación, por lo que debe crearse con el mismo estilo que el sitio: cuanto más tengan en común el sitio y el icono, mejor.
Tiene que estar asociado con el sitio; porque esta es su función principal. Además, el icono debe ser relevante y claro: el usuario debe comprender de inmediato qué se muestra en icono y también debe ser memorable.
Por lo tanto, un ícono bien hecho hará que tu sitio se vea más profesional.
Si realmente quieres crear una marca personal, debes adoptar un enfoque muy serio para crear un favicon.
