Los favicons reemplazan el ícono del globo terráqueo en la barra de direcciones.
Credito de imagen: r0mu / iStock / Getty Images
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 pequeñas imágenes que los navegadores web utilizan 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 visual de la marca 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 icono que desee utilizar 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 íconos de página siempre usan dimensiones cuadradas y tienen un tamaño máximo admitido de 256 por 256 píxeles. Recorta y ajusta el tamaño de la imagen para que quepa en un cuadrado de 256 por 256 píxeles si vas a utilizar un paquete 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.
Video del día
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 empaquetadores de iconos no funcionen con imágenes en otros formatos. Los favicons también admiten archivos GIF e ICO.
Paso 3
Empaque su archivo PNG exportado en un archivo ICO con un programa de conversión ICO. Un programa de conversión de iconos procesa un favicon PNG, lo formatea para varios tamaños de favicon diferentes 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.
Etapa 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 de favicon como se indica, a la sección de su sitio web.
Para archivos PNG:
Para archivos ICO:
A menos que esté utilizando un sitio controlado por CMS o incluya una sección basada en archivos, tendrá que agregar el código a cada página en la que desee incluir el ícono. El favicon aparece después de guardar y actualizar las páginas del sitio.
Propina
Los programas de edición de fotografías como Photoshop y Corel Draw funcionan bien para diseñar y formatear el icono. Alternativamente, puede utilizar programas gratuitos como Paint.net y Pixlr.
Advertencia
Algunos navegadores asocian automáticamente un archivo de imagen ubicado en el directorio / favicon como un favicon; sin embargo, la organización del W3C desaconseja esta práctica porque no es un estándar con soporte universal 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.
