En el diseño web, como probablemente sepas, cada detalle importa. Una persona que ha cambiado a su recurso no ve cada uno de los elementos por separado, sino que percibe la imagen completa como un paquete que consta de otros pequeños detalles. Por lo tanto, si se pierde algo en el proceso de desarrollo de su recurso, este detalle puede estropear más adelante todo el complejo, toda la composición.
Tal bagatela puede ser, por ejemplo, el fondo de un botón, una fuente elegida incorrectamente de algún elemento pequeño e incluso un favicon. De hecho, compruébelo usted mismo: los sitios grandes y conocidos tienen un ícono individual que lo indica en la sección "Marcadores" del navegador del usuario. Sin él, los desarrolladores del recurso no habrían podido crear la composición que buscaban originalmente.
Por lo tanto, al crear un diseño para su sitio, debe cuidar un detalle como el favicon. En este artículo, hablaremos sobre cómo combinarlo con el estilo general del recurso, así como qué tamaños debe tener esta imagen.
Icono del sitio
Primero, definamos qué es este elemento. En este momento, eche un vistazo al título de la pestaña de su navegador. Como puede ver, hay una pequeña imagen a la izquierda que indica una versión simplificada del logotipo del recurso. La misma imagen también está cerca del nombre del sitio que se muestra en los resultados de búsqueda. Esto es lo que guía al usuario cuando ve el título.
Muchos webmasters entienden que se necesita una imagen de este tipo, pero pocas personas saben qué tamaño de favicon para el sitio será el más apropiado. Por lo tanto, en este artículo no solo brindaremos información sobre cómo crear un icono de este tipo y cómo puede instalarlo en su recurso, sino que también hablaremos sobre los tamaños de las imágenes.
El propósito del favicon
Entonces, la imagen cerca del encabezado del sitio se usa para la identificación. Este es su propósito original: expresar el sitio cuyo nombre vemos, y hacerlo destacar a los ojos del resto. Esto se hace de la forma más sencilla posible mediante el uso de gráficos: intuitivamente percibimos la información en imágenes de forma mucho más rápida y sencilla que en formato de texto. Los Favicons nos ayudan a hacer precisamente eso. Pero no olvide que el tamaño del favicon es mínimo a los ojos del usuario. Este no es un logotipo en el "encabezado" del sitio, que puede contener información adicional en forma de inscripciones, algunas aclaraciones o información de contacto. Todo lo que se puede mostrar en el ícono al lado del nombre debe ajustarse al tamaño del favicon tanto como sea posible. Y él, como ya se indicó, es simplemente una miniatura (solo 16 por 16 píxeles).
Cómo elegiricono de favoritos?
Entonces, ¿cómo puede un webmaster diseñar un ícono para su sitio? Cabe señalar que simplemente comprimir el logotipo del sitio, en la mayoría de los casos, no funcionará. En los emblemas que se colocan en forma de logotipo de un recurso en particular, a menudo se ven varios elementos que no siempre se mostrarán correctamente en forma de miniatura. Es mejor abandonar inmediatamente tal empresa.
Por supuesto, el tamaño del favicon no permite hablar de simplemente insertar una inscripción allí. Cualquier texto será simplemente invisible en esta resolución. Necesitamos desarrollar un nuevo ícono que transmita el estilo del sitio. Para encontrar soluciones, de nuevo, volvamos a los sitios más grandes.
Mucha gente usa la primera letra estilizada del nombre del servicio como favicon. Esta es la forma, por ejemplo, Bing, Yahoo, Yandex, Wikipedia, Google. Hay otro enfoque: si tiene un nombre de sitio corto, puede establecerlo como fondo de su icono. Para que el tamaño del favicon (en píxeles alcanza, repito, 16 por 16 píxeles) muestre correctamente esta inscripción, no debe tener más de 3 letras. Esto es lo que hace, por ejemplo, el servicio Aol.
¿Cómo crear un favicon?
Hay varias formas de crear un ícono para el nombre del sitio. Por supuesto, lo más fácil es trabajar con diferentes soluciones listas para usar. Podemos hablar de algunos servicios o programas que le permiten hacer un ícono a partir de una imagen completa al reducirla. Sin embargo, recomendaría desarrollar dicho logotipo por su cuenta. Esto dará en primer lugarla oportunidad de aprender algo; y en segundo lugar, proporcionará más herramientas. Todo lo que necesita saber para esto es qué dibujar, y también saber qué tamaño debe tener el favicon en la versión final. Hablaremos sobre el tamaño del ícono para el sitio un poco más tarde, pero por ahora notaremos algunas sutilezas de trabajar con tales imágenes. En particular, sin mencionar el tamaño del favicon del sitio, se debe aclarar el formato de dicha imagen. Como señalan los diseñadores experimentados, la imagen debe guardarse como un archivo-p.webp
Puede guardar la imagen, por ejemplo, usando Photoshop, donde se dibujará el emblema.
Dimensiones de Favicon
Entonces, ahora hablemos sobre qué tan grande debe ser la imagen que vemos junto al nombre del sitio en los resultados de búsqueda. Por defecto, como ya se mencionó, su tamaño es de solo 16 píxeles (en cada lado). Sin embargo, si intenta editar esta imagen en Photoshop, verá por sí mismo lo inconveniente que es. Por lo tanto, recomendamos trabajar con una imagen ampliada, que en el futuro simplemente se puede comprimir a lo largo de los bordes y guardar en el formato requerido.
Multiplataforma
Sin embargo, hablando de cuán grande debe ser el favicon en su sitio, hay una cosa más a tener en cuenta. No todas las plataformas muestran una imagen de recurso de la misma manera. Por ejemplo, los dispositivos con pantalla Retina "ven" su favicon a 32 por 32 píxeles. Y en Safari y en la nueva plataforma Windows, y en absoluto, estos iconos alcanzan un tamaño de 64píxeles.
Por lo tanto, le recomendamos que guarde diferentes versiones del ícono y simplemente prevea su cambio según la plataforma del usuario en el futuro. Otro punto interesante: puede intentar cargar el ícono en el formato más grande, contando con el hecho de que se "reducirá" según el navegador.
Editores externos
Por supuesto que es bueno si eres bueno con Photoshop y sabes qué tamaño debe tener el favicon y cómo lograrlo mientras guardas tu imagen. Sin embargo, hay muchos principiantes que simplemente no se han topado con editores gráficos tan de cerca antes, por lo que no pueden dibujar la imagen deseada tan fácilmente. Para ayudar a estos webmasters, existen varios servicios que le permiten crear automáticamente el icono que le interesa. Muchos de ellos son incluso gratuitos, lo que no requiere ninguna inversión por parte del usuario.
A veces solo necesita registrarse para trabajar, pero, como comprenderá, esto se hace una vez; después de todo, las empresas no cambian su favicon con tanta frecuencia. Fíjate en Google, que cambia el logo todos los días, pero no toca el icono.
¿Cómo instalar un favicon?
En general, configurar su sitio de tal manera que muestre correctamente la imagen que necesita es muy simple. Basta con realizar una serie de sencillos pasos que permitirán a los motores de búsqueda, así como a simples navegadores, leer la información.
Para hacer esto, la imagen resultante debe guardarse conllamado favicon.ico y colocado en la raíz de su recurso. Eso es todo, ahora su imagen se reconocerá automáticamente y, después de un tiempo, se vinculará a su sitio.
Además de este enlace, puede agregar una línea más que "sugerirá" dónde se encuentra su icono. Tiene este aspecto:
Instala el código en el encabezado del sitio.
Conclusiones
Entonces, después de leer nuestro artículo, descubrió qué tamaño debe tener un favicon para un sitio y qué es. Además, creo que comprendió que encontrar el ícono correcto para su recurso es una necesidad, porque juega a su favor tanto en términos de aumentar el reconocimiento como en términos de destacarse adicionalmente entre sus competidores. Al menos los sitios más grandes hacen lo mismo, lo que puede tomarse como un excelente ejemplo. Y además, no requiere mucho esfuerzo: una vez que hizo un favicon y lo instaló correctamente en su sitio, puede olvidarse de él durante los próximos meses.
Por lo tanto, siéntete libre de experimentar, crea algo nuevo, inténtalo, ¡y todo saldrá bien!
