FeaturedNOTICIAS

Cómo configurar íconos de fantasía (favicons) para su sitio web – CloudSavvy IT


Favicones

Los favicons son los iconos pequeños que ves en las pestañas del navegador. Por lo general, son simples archivos ICO, pero en los últimos años se han convertido en un ícono para su sitio web, con numerosos tamaños y tipos de la competencia.

¿Cómo se usa un favicon?

La mayoría de los navegadores admitirán múltiples tipos diferentes de favicons. La mayoría de las veces, su navegador buscará automáticamente favicons en las ubicaciones probables sin que usted se lo diga, pero también puede agregarlos manualmente a su sitio web.

Si no tiene el tamaño o formato exacto, la mayoría de los navegadores usarán la imagen de mayor resolución que puedan admitir y aumentarán o disminuirán los favicons. Realmente no necesita incluir 20 archivos favicon diferentes para cada resolución de icono «oficial», solo un par de alta resolución además de la predeterminada. Pero, si debe incluir cada uno, puede consultar esta hoja de trucos para obtener más información.

TE INTERESA>>  Marlon Wayans Blasts Ex As 'Entitled' Because Of Demands In New Paternity Suit

Una vez que tenga una imagen que le gustaría usar como ícono, puede crear favicons manualmente en cualquier editor de fotos. Sin embargo, en aras de la cordura, es probable que desee utilizar un generador de favicon para hacerlo automáticamente. Esto generará un montón de archivos que querrás vincular y etiquetas en el sección del HTML de su sitio web.

Si no está administrando su propio servidor web (es decir, si ha administrado el alojamiento con un servicio como SquareSpace), deberá verificar con su proveedor la configuración de los archivos favicon. Por lo general, lo manejarán por usted y solo tendrá que proporcionar los archivos.

Etiquetas Favicon regulares

Los favicons originales son favicon.ico archivos. El tamaño mínimo es de 16 × 16, pero los archivos ICO pueden contener múltiples resoluciones diferentes. Generalmente favicon.ico será un conjunto de iconos de 16 × 16, 32 × 32 y 48 × 48, todos agrupados. Puede crear este icono desde cualquier PNG utilizando generadores de favicon en línea.

CNN favicon.

Puede agregar su favicon agregando un enlace al favicon.ico archivo, generalmente ubicado en la raíz (directorio superior) de su servidor web, junto con su index.html y otros archivos

En realidad, no siempre necesita la etiqueta, ya que la mayoría de los navegadores verifican automáticamente el archivo, pero es bueno incluirlo. Este es, con mucho, el tipo más común de favicon, y será compatible en casi todas partes que sea compatible con favicons.

Si su favicon no funciona, lo más probable es que el archivo no esté en el lugar correcto. Comprobar si http://www.yourwebsite.com/favicon.ico es accesible y se muestra correctamente en su navegador. Si cargó el archivo manualmente, es posible que no tenga los permisos adecuados, que puede corregir desde una línea de comandos con:

sudo chmod +r favicon.ico

Lo que permitirá que su servidor web lo lea.

Favicons PNG

La mayoría de los navegadores más nuevos admiten favicons PNG de mayor resolución, para usar en áreas que no sean la barra de pestañas, como la página de pestañas nuevas de Chrome o el escritorio de Android. Probablemente desee estos para que su icono no se vea pixelado cuando explote.

Favicons PNG.

Puede usarlos además de favicon.ico archivo, ya que el navegador elegirá el de mayor resolución.



El generador de favicones también genera un android-chrome-512x512.png archivo, pero esto se verificará automáticamente y no necesita una etiqueta. Chrome en Android usará el ícono de Apple Touch para retroceder si falta. Si desea incluirlo, puede incluir un icono PNG de cualquier tamaño cambiando las dimensiones y señalando a un archivo diferente:

No es un gran problema agregar más enlaces, ya que la mayoría de los navegadores solo solicitarán el favicon que necesitan.

Apple Touch Icon

Este es el ícono que se usa cuando su página web se agrega a la pantalla de inicio de los usuarios de iOS desde Safari, y para varios otros lugares en la interfaz de usuario de iOS. Con las pantallas Retina, tener un ícono de alta resolución hace una gran diferencia.

Iconos táctiles de Apple.

El tamaño exacto ha cambiado mucho con diferentes versiones de iOS, pero siempre será un cuadrado, con un ancho actual de 180 píxeles para los iPhone Retina. Puede agregar un icono de iOS con un apple-touch-icon enlace, así:

iOS reducirá automáticamente los íconos de mayor resolución, pero puede agregar múltiples íconos en diferentes tamaños para ahorrar un poco de ancho de banda de la misma manera que los íconos PNG.

La mayoría de los navegadores verificarán automáticamente /apple-touch-icon.png, por lo que es posible que ni siquiera necesite la etiqueta. Debido a que este ícono es bastante común, también se usa como alternativa para muchos navegadores si no especifica un ícono PNG de alta resolución.

Icono de Safari y Touch Bar

Safari tiene la opción de usar iconos monocromos para la barra táctil de macOS. Esto no es totalmente necesario, y Safari seguirá usando favicons regulares si no está allí, pero se ve un poco mejor si su icono tiene un fondo de color.

barra táctil de enfoque de pestaña fijada

Puede hacer esto automáticamente con el generador de favicon, y tendrá que agregar:

A su creciente lista de enlaces. Safari no buscará este automáticamente.

Windows 10 Metro Tiles

Si alguien fija su sitio a su menú Inicio o escritorio, mostrará el ícono de su sitio.

CNN favicon anclado en Windows 10.

Esto debería recaer en otros favicons si no lo tiene, tanto como Safari no es del todo necesario. Pero para lucir mejor cuando se fija en el menú Inicio, necesitará algunas metaetiquetas para la configuración:



Realmente solo definimos el color del mosaico de fondo y el color del tema. El resto de la configuración se coloca en un archivo XML:


    
        
            
            #000000
        
    

Lo que parece un poco redundante solo para un enlace de archivo. Aún deberá colocar el mstile-150x150.png archivo en la raíz de su servidor web para que funcione correctamente.

Cómo moverse por el alojamiento de archivos en la raíz de su servidor web

Si realmente no desea exponer ningún archivo alojado en la raíz de su servidor, siempre puede redirigir /favicon.ico a una ubicación diferente Por ejemplo, en nginx, podría hacer:

location = /favicon.ico {
    root /new/images/path;
}

Lo que haría que nginx parezca /new/images/path por tus favicons Esto no tendrá ningún efecto en el lado del cliente, por lo que aún querrá vincular a /favicon.ico como si todo fuera igual



Source link

Deja una respuesta

Tu dirección de correo electrónico no será publicada.

Botón volver arriba
hentai creampir hentairulz.com saoff summer xxxx hot zoztube.mobi xhamsted ماياخليفة سكس parabg.com سكس قذف جماعى سكس جنوب افريقيا arab-porno.net سكس بنات محجبة freefuck redwap2.com karnataka blue film نيك خادمة freetvtube.info قصص نيك محارم الارشيف 23 sexy rapes teenextube.mobi latest scandals in bollywood milf manga truehentai.com la blue girl manga ang probinsyano june 19 pinoyshowstv.com enchong pokemon henatai hentaicredo.com boku no pico nokare .com gotporn.mobi www.freesexdoor.com indian first night xxx pornxvideos.info xxx six india sex samantha sex zatube.mobi cuddling porn mom son sleeping sex hdtporno.org velamma episode 74 indian free porn mms youjizz.sex velamma episode 79