Cómo crear un logotipo de URL

Un favicon es una forma creativa y práctica de agregar un toque visual sutil a la presencia de su sitio web. Los Favicons son imágenes pequeñas que los navegadores web usan en las pestañas de las páginas y en las barras de direcciones. Muestran un logotipo o una imagen asociada con el sitio web que actúa como un identificador de marca visual junto al título o la URL. Los Favicons son identificadores de sitios particularmente útiles en la navegación con pestañas porque el espacio de texto disponible utilizado para los títulos de las páginas se reduce a casi nada a medida que el usuario abre más pestañas.

Paso 1

Diseñe el ícono que desea usar en un programa de edición de fotografías o gráficos. Puede tomar un logotipo o imagen existente asociado con su sitio o marca y ajustarlo para cumplir con los estándares de favicon. Los Favicons siempre usan dimensiones cuadradas y tienen un tamaño máximo admitido de 256 por 256 píxeles. Recorte y cambie el tamaño de la imagen para que quepa en un cuadrado de 256 por 256 píxeles si va a utilizar un empaquetador de iconos para admitir varios tamaños. Si solo va a hacer una versión, elija un tamaño de 16 por 16 píxeles.

Paso 2

Exporte el gráfico del icono como un archivo de imagen PNG desde el programa de diseño gráfico. PNG es el formato de imagen estándar de W3C para favicons. Algunos navegadores pueden mostrar archivos JPG como favicons, pero el estándar no es oficialmente compatible. Además, es posible que los programas de empaquetado de iconos no funcionen con imágenes en otros formatos. Los Favicons también admiten archivos GIF e ICO.

Paso 3

Empaqueta tu archivo PNG exportado en un archivo ICO con un programa de conversión de ICO. Un programa de conversión de íconos procesa un favicon PNG, lo formatea para varios tamaños de favicon ampliamente admitidos y los incrusta en un solo archivo. Los archivos ICO proporcionan favicons de mayor resolución que 16 por 16 píxeles para los dispositivos que los admiten.

Paso 4

Inicie sesión en el servicio de alojamiento de su sitio web y cargue el archivo PNG o ICO en el servidor de medios de su sitio web. Copie la URL del archivo cargado; lo necesitará para adjuntar el favicon al sitio.

Paso 5

Abra el programa de edición de su sitio y agregue el siguiente código, modificado con la URL del archivo favicon como se indica, al

sección de su sitio web.

Para archivos PNG:

Para archivos ICO:

A menos que esté utilizando un sitio controlado por CMS o incluya un archivo basado en

sección , tendrá que agregar el código a cada página en la que desee que aparezca el ícono. El favicon aparece después de guardar y actualizar las páginas del sitio.

Consejo

Los programas de edición de fotos como Photoshop y Corel Draw funcionan bien para diseñar y formatear el icono. Alternativamente, puede usar programas gratuitos como Paint.net y Pixlr.

Advertencia

Algunos navegadores asocian automáticamente un archivo de imagen ubicado en el directorio /favicon como favicon; sin embargo, la organización W3C desaconseja esta práctica porque no es un estándar admitido universalmente y es contrario a los principios de la arquitectura web. Además, muchos servicios de alojamiento web y sistemas CMS no permiten que el usuario coloque contenido multimedia fuera de los directorios de archivos multimedia, lo que hace que esta práctica sea imposible.