Cómo crear un favicon para el sitio: consejos útiles y servicios

1. Cómo crear un favicon
2. Como hacer un favicon en photoshop.
3. Cómo guardar un favicon
4. Cómo insertar un sitio de favicon
5. Como reemplazar el favicon
6. Cómo crear favicons más complejos.

Es difícil adivinar qué es un favicon cuando escuchas esta palabra por primera vez. Este es un icono en miniatura que se muestra en las pestañas de los navegadores, en las líneas de dirección y en otras áreas, según el sistema operativo que esté utilizando y el navegador de Internet. Puede ser llamado con seguridad uno de los elementos más complejos y caprichosos en el diseño de sitios web.

Crear un buen favicon es bastante difícil, ya que el icono es pequeño, debe ser claro y mostrar algo relacionado con su sitio. Crear un favicon que sea compatible con todos los navegadores populares también puede ser una tarea desalentadora. En este artículo trataremos todos los aspectos complejos de su creación. Si también necesitas un logo, entonces tenemos un articulo como hacerlo

Cómo crear un favicon

Comencemos con el diseño del favicon. El buen diseño, a pesar de su compacidad, debe reflejar la esencia de su sitio y ser una parte orgánica de la identidad corporativa. Normalmente, el icono es un signo gráfico (icono) de una empresa y no todo un logotipo (icono, texto y eslogan).

Como favicon, estos sitios web utilizan sus iconos (o imágenes cercanas a ellos).

El texto en el favicon no debe usarse, ya que este texto será ilegible debido al pequeño tamaño de la imagen. Las únicas excepciones a esta regla son los caracteres de texto de fama mundial que se asocian automáticamente con una marca específica. Por ejemplo, el recurso en línea Wikipedia dejó en el icono de la palabra "W", y Facebook, la letra "F".

En estos favicons hay letras que están fuertemente asociadas con una marca en particular. Por ejemplo, Facebook utiliza su signo gráfico. También tenga en cuenta que los píxeles son visibles en la imagen de Disney. Esto se debe a que la captura de pantalla se tomó en una pantalla Retina, que es compatible con iconos de 16 × 16, mientras que los sitios web usan iconos de 32 × 32.

Como los favicons son imágenes pequeñas, cada píxel juega un papel importante. A veces, después de reducir el logotipo, los píxeles individuales se vuelven visibles, debido a lo cual la imagen se vuelve "borrosa". Para lograr claridad, debe editar el icono en el nivel de píxel.

Para evitar esto, debe cambiar el tamaño del logotipo utilizando editores especiales como Photoshop o GIMP. Primero necesitas reducir el tamaño de la imagen a 64x64 píxeles (este es el favicon de tamaño más grande). Luego necesitas editar cada píxel usando la herramienta Lápiz hasta que la imagen sea clara. Este es un proceso laborioso, pero el resultado vale la pena. Cuando el favicon 64x64 esté listo, debe hacer el mismo trabajo con la imagen de 16 × 16, 24 × 24 y 32 × 32 píxeles. Tantos tamaños que necesitas para visualizar correctamente la imagen en todos los navegadores y gadgets:

• 64x64 - marcadores del navegador Safari;
• 32x32 - pantallas de alta resolución (Retina);
• 24x24 - marcadores de Internet Explorer y MicroSoft Edge;
• 16x16 - Google Chrome y otros navegadores.

Como hacer un favicon en photoshop.

Primero necesitas crear algunos lienzos con las dimensiones anteriores.

Luego debe agregar un ícono, una letra u otra imagen al lienzo.

Cómo guardar un favicon

Después de haber creado iconos de diferentes tamaños, guarde cada uno como un archivo PNG transparente (24 bits). En Photoshop, puede usar la función Guardar para Web disponible en el menú Archivo. Entonces necesita fusionar todos los archivos PNG en un archivo ICO. Puede usar tanto los archivos PNG como los archivos ICO al mismo tiempo, pero a menudo incluso Safari y Chrome prefieren solo el formato ICO. En mi opinión, es más fácil crear un archivo ICO. El formato ICO no es muy común, pero afortunadamente hay una serie de herramientas que pueden ayudarlo a convertir sus archivos a este formato. Para ello, prefiero usar Editor de X-Icon . Este es un servicio gratuito en línea que convierte instantáneamente las imágenes descargadas en un archivo ICO, después de lo cual puede descargarlas. Esto no es nada complicado, solo siga las instrucciones en el sitio. Si te consideras una persona desesperada, puedes experimentar con el editor de píxeles de este servicio y dibujar un favicon. (Aunque prefiero editar favicons en un editor más profesional, por ejemplo, en Photoshop).

Al cargar sus imágenes PNG en el Editor de X-Icon, obtendrá un archivo ICO en la salida.

Cómo insertar un sitio de favicon

Entonces, ya tienes un archivo ICO. Ahora necesitas agregarlo al sitio web. Cambie el nombre del archivo a favicon.ico y colóquelo en la carpeta raíz de su sitio web (donde se almacenan el archivo index.html y otros archivos estándar). Después de la adición exitosa, puede verla en su sitio web .com / favicon.ico. Casi todos los navegadores buscan el archivo favicon.ico en la carpeta raíz. Por lo tanto, es importante que descargues el favicon en esta carpeta. Para compatibilidad con diferentes navegadores, es mejor no agregar elementos HTML o enlaces que indiquen su ubicación. Este truco funciona para todos los navegadores, hasta IE6. Además, si tienes un sitio de WordPress, en muchos temas puedes agregar un favicon en la configuración del tema. Este método también puede ser utilizado.

Como reemplazar el favicon

Por alguna razón inexplicable, los navegadores lo agregan a la caché. Por lo tanto, cuando carga un nuevo archivo ICO, el navegador puede continuar mostrando su antiguo favicon. ¿Qué hacer en este caso? Puede agregar un archivo HTML temporal que indique la ubicación de su nuevo favicon. También al final de la URL debe agregar una cadena de consulta corta:

<link rel = "icono de acceso directo" href = "su sitio web .com / favicon.ico? v = 2 ″ />

Así que el navegador pensará que esta es una URL única y, por lo tanto, se verá obligada a mostrar un nuevo icono. Después de actualizar el favicon, este código HTML puede ser eliminado completamente. Si necesita realizar cambios en el favicon, use la misma técnica, aumentando cada vez el número después de la "v" en la cadena de consulta. Por lo tanto, el navegador siempre percibirá esta URL como única y mostrará su nueva versión. Y no olvide eliminar el código HTML después de una actualización exitosa.

Cómo crear favicons más complejos.

En este artículo, quería describir una forma universal y fácil de crear favicons que funcionarán en prácticamente cualquier plataforma. Pero en el diseño y desarrollo web no hay límite a la perfección. Si desea aprender a crear iconos más complejos, puede intentar usar el servicio favico.js . Te permite crear imágenes dinámicas con números variables. Gracias a este icono, puede ver el número de mensajes no leídos, incluso cuando la pestaña correspondiente no está activa. Si desea crear favicons animados en línea, puede intentar usar un generador de favicon favicon.cc .

Más generadores en línea que puedes encontrar aqui .

Si quieres compartir tus consejos sobre cómo crear favicons o hacer una pregunta, ¡te espero en los comentarios!