Diseño de etiquetas para sitios web

1. Prepare un software de producción de íconos: en primer lugar, debe comprender que el llamado ícono (Icon) es un formato de archivo gráfico especial, que tiene .ico como extensión.

2. Determine las especificaciones del ícono: la especificación es 16x16 y el mejor color utilizado no debe exceder los 16 colores (para mayor claridad). Puede buscar íconos en formato *.ico en su computadora y puede conocer el formato abriendo estos íconos.

3. Diseña tu propio ícono: puedes convertir el logotipo de tu sitio web en una miniatura o diseñar un patrón único como ícono. Luego, nombre este archivo de icono favicon.ico.

4. Por último, sólo necesitas subir este archivo de icono (favicon.ico) al directorio raíz del servidor donde se encuentra tu sitio web. (Es decir, la carpeta donde se encuentra su página de inicio index.html). No es necesario realizar ninguna modificación en los archivos de la página web. IE buscará automáticamente en el directorio raíz del sitio web tan pronto como encuentre favicon.ico. archivo, El icono aparecerá en la barra de direcciones y en la lista de favoritos del visitante.

El uso del logotipo de personalidad del sitio web Favicon

Estrictamente hablando, el tema del favicon no tiene nada que ver con la tecnología SEO, ni mucho que ver con la discusión sobre la tecnología de servidor web. Sin embargo, durante la construcción del sitio web, es necesario crear un logotipo personalizado para el sitio web que se ajuste al tema del sitio web. Esto está directamente relacionado con si la marca del sitio web se puede moldear con éxito. Desde algunas perspectivas, esto todavía está dentro del alcance de la promoción de un sitio web, y el éxito requiere no sólo un buen diseño de página y un logotipo de sitio web impresionante, sino también un favicon.

¿Qué es un favicon?

El llamado favicon es la abreviatura de FavoritesIcon, como su nombre indica, permite a los favoritos del navegador distinguir diferentes sitios web en forma de iconos además de mostrar los títulos correspondientes. Por supuesto, no se trata solo del favicon. La visualización del favicon también difiere según el navegador: en la mayoría de los navegadores convencionales, como Firefox e Internet Explorer (5.5 y superiores), el favicon no sólo se muestra en favoritos, sino también en el favorito. Al mismo tiempo, aparece en la barra de direcciones. En este momento, el usuario puede arrastrar el favicon al escritorio para crear un acceso directo al sitio web. Además, el navegador con pestañas incluso tiene muchas funciones extendidas, como Firefox e incluso admite favicon. en formato animado.

Desde un punto de vista técnico específico, favicon no sólo hace que el sitio web parezca más profesional, sino que también puede reducir el uso del ancho de banda del servidor hasta cierto punto: generalmente para mejorar la usabilidad del sitio web, crearemos un archivo de error 404 personalizado para su sitio web. En este caso, si el sitio web no tiene un archivo favicon.ico correspondiente, el servidor web llamará a este archivo 404 personalizado cada vez que un usuario marque como favorito el sitio web/página web. y registrado en el registro de errores del sitio web. Evidentemente, esto debería evitarse.

Cómo hacer Favicon.ico

El método para hacer favicon.ico es bastante simple. Primero, utiliza herramientas gráficas para crear 2 imágenes pequeñas con 256 colores que reflejen el tema del. sitio web: 1 es de 32 × 32 píxeles y el otro es de 16 × 16 píxeles. Cabe señalar que la paleta de colores debe seleccionarse como la "paleta de colores predeterminada de Windows". De lo contrario, los gráficos pueden cambiar de color en la visualización final de manera muy diferente a su intención original.

Cabe señalar que en muchas descripciones de favicon.ico, es común decir que la imagen debe tener 16 colores. Cabe decir que este tipo de declaraciones están muy desactualizadas: en los primeros tiempos. En Windows 95, el favicon .ico de 16 colores puede ser una opción segura, lo que garantiza que se pueda usar normalmente en la mayoría de los casos, pero ahora no existen tales restricciones y 16 colores solo pueden reducir en gran medida el efecto de visualización del icono.

En cuanto a la imagen de 16×16 píxeles cuando se usa en el navegador, ¿por qué necesitamos preparar una imagen de 32×32 píxeles? La razón es que, como se mencionó anteriormente, el favicon también se muestra en el navegador. barra de direcciones, los usuarios pueden arrastrar el favicon al escritorio para crear un acceso directo al sitio web, y el ícono del escritorio debe mostrarse en 32×32. Si su Favicon.ico no incluye una imagen de 32 píxeles, el sistema solo puede. use el ícono predeterminado del navegador para marcar un sitio web/página web, como la "e" azul en Internet Explorer, no logra el propósito de crear una marca de sitio web a través de favicon.ico.

Después de crear las imágenes, utilice un pequeño programa como Image2Ico para convertir las dos imágenes en un archivo Icon. También puede hacerlo a través de un sitio web que puede crear Favicon en línea. Sin embargo, debe tenerse en cuenta que este sitio web requiere que el formato del archivo fuente de la imagen sea Pic.

Uso de favicon.ico en páginas web

El principio para que los navegadores llamen a favicon es buscar primero el archivo favicon.ico en el directorio donde se encuentra la página web. , vaya al directorio raíz del sitio web Busque a continuación.

Por lo tanto, la forma más sencilla de utilizar Favicon en una página web es nombrar el archivo de icono creado Favicon.ico y luego subirlo al directorio raíz del sitio web.

Si desea configurar diferentes íconos para diferentes páginas (permitir que diferentes páginas web muestren diferentes Favicon), debe agregar el siguiente código al archivo html de la página web:

Una cosa más que debe explicarse es: algunos servidores host de espacios web no admiten el formato de archivo de íconos, ¡así que no hay nada que puedas hacer!