w3schools para link icon codigo bootstrap html5 browser favicon

html5 - para - HTML 5 Favicon-¿Soporte?



shortcut icon html5 (2)

Las respuestas proporcionadas (en el momento de esta publicación) son solo respuestas de enlace, así que pensé en resumir los enlaces en una respuesta y lo que voy a utilizar.

Cuando se trabaja para crear Favicons de Navegador Cruzado (incluyendo iconos táctiles), hay varias cosas a considerar.

El primero (por supuesto) es Internet Explorer. IE no es compatible con favicons PNG hasta la versión 11. Por lo tanto, nuestra primera línea es un comentario condicional para favicons en IE 9 y siguientes:

<!--[if IE]><link rel="shortcut icon" href="path/to/favicon.ico"><![endif]-->

Para cubrir los usos del icono, créelo a 32x32 píxeles. Observe que rel="shortcut icon" para que IE reconozca el icono, necesita el shortcut palabra que no es estándar. También incluimos el favicon .ico en un comentario condicional de IE porque Chrome y Safari usarán el archivo .ico si está presente, a pesar de otras opciones disponibles, no lo que nos gustaría.

Lo anterior cubre IE hasta IE 9. IE 11 acepta favicons PNG, sin embargo, IE 10 no. Además, IE 10 no lee comentarios condicionales, por lo que IE 10 no mostrará un favicon. Con IE 11 y Edge disponible, no veo IE 10 en uso generalizado, por lo que ignoro este navegador.

Para el resto de los navegadores vamos a usar la forma estándar de citar un favicon:

<link rel="icon" href="path/to/favicon.png">

Este icono debe tener un tamaño de 196x196 píxeles para cubrir todos los dispositivos que puedan usar este ícono.

Para cubrir los iconos táctiles en los dispositivos móviles, vamos a utilizar la forma patentada de Apple para citar un icono táctil:

<link rel="apple-touch-icon-precomposed" href="apple-touch-icon-precomposed.png">

El uso de rel="apple-touch-icon-precomposed" no aplicará el brillo reflexivo cuando se marque como favorito en iOS. Para que iOS aplique el brillo, use rel="apple-touch-icon" . Este icono debe tener un tamaño de 180x180 píxeles, ya que es el tamaño actual recomendado por Apple para los últimos iPhones y iPads. He leído que Blackberry también usará rel="apple-touch-icon-precomposed" .

Como nota: Chrome para Android afirma:

Apple-touch- * están en desuso, y solo serán compatibles por un corto tiempo. (Escrito a partir de beta para m31 de Chrome).

Azulejos personalizados para IE 11+ en Windows 8.1+

IE 11+ en Windows 8.1+ ofrece una forma de crear mosaicos anclados para su sitio.

Microsoft recomienda crear algunos mosaicos con el siguiente tamaño:

Pequeño: 128 x 128

Medio: 270 x 270

Ancho: 558 x 270

Grande: 558 x 558

Estas deberían ser imágenes transparentes ya que definiremos un fondo de color a continuación.

Una vez que se crean estas imágenes, debe crear un archivo xml llamado browserconfig.xml con el siguiente código:

<?xml version="1.0" encoding="utf-8"?> <browserconfig> <msapplication> <tile> <square70x70logo src="images/smalltile.png"/> <square150x150logo src="images/mediumtile.png"/> <wide310x150logo src="images/widetile.png"/> <square310x310logo src="images/largetile.png"/> <TileColor>#009900</TileColor> </tile> </msapplication> </browserconfig>

Guarde este archivo xml en la raíz de su sitio. Cuando se fija un sitio, IE buscará este archivo. Si desea nombrar el archivo xml como algo diferente o tenerlo en una ubicación diferente, agregue esta metaetiqueta al head :

<meta name="msapplication-config" content="path-to-browserconfig/custom-name.xml" />

Para obtener información adicional sobre los mosaicos personalizados IE 11+ y el uso del archivo XML, visite el sitio web de Microsoft .

Poniendolo todo junto:

Para poner todo junto, el código anterior se vería así:

<!-- For IE 9 and below. ICO should be 32x32 pixels in size --> <!--[if IE]><link rel="shortcut icon" href="path/to/favicon.ico"><![endif]--> <!-- Touch Icons - iOS and Android 2.1+ 180x180 pixels in size. --> <link rel="apple-touch-icon-precomposed" href="apple-touch-icon-precomposed.png"> <!-- Firefox, Chrome, Safari, IE 11+ and Opera. 196x196 pixels in size. --> <link rel="icon" href="path/to/favicon.png">

Windows Phone Live Tiles

Si un usuario está usando un teléfono con Windows, puede fijar un sitio web a la pantalla de inicio de su teléfono. Desafortunadamente, cuando lo hacen, muestra una captura de pantalla de su teléfono, no un favicon (ni siquiera el código específico de MS al que se hace referencia más arriba). Para crear un "Live Tile" para usuarios de Windows Phone para su sitio web, debe usar el siguiente código:

Aquí hay instrucciones detalladas de Microsoft, pero aquí hay una sinopsis:

Paso 1

Cree una imagen cuadrada para su sitio web, para admitir pantallas de alta resolución, créelo a un tamaño de 768x768 píxeles.

Paso 2

Agrega una superposición oculta de esta imagen. Aquí hay un código de ejemplo de Microsoft:

<div id="TileOverlay" onclick="ToggleTileOverlay()" style=''background-color: Highlight; height: 100%; width: 100%; top: 0px; left: 0px; position: fixed; color: black; visibility: hidden''> <img src="customtile.png" width="320" height="320" /> <div style=''margin-top: 40px''> Add text/graphic asking user to pin to start using the menu... </div> </div>

Paso 3

A continuación, puede agregar la siguiente línea para agregar un pin al enlace de inicio:

<a href="javascript:ToggleTileOverlay()">Pin this site to your start screen</a>

Microsoft recomienda que detecte el teléfono con Windows y solo muestre ese vínculo a esos usuarios, ya que no funcionará para otros usuarios.

Etapa 4

A continuación, agrega algunos JS para alternar la visibilidad de la superposición

<script> function ToggleTileOverlay() { var newVisibility = (document.getElementById(''TileOverlay'').style.visibility == ''visible'') ? ''hidden'' : ''visible''; document.getElementById(''TileOverlay'').style.visibility = newVisibility; } </script>

Nota sobre los tamaños

Estoy usando un tamaño, ya que cada navegador escalará la imagen según sea necesario. Podría agregar más HTML para especificar varios tamaños si lo desea para aquellos con un ancho de banda menor, pero ya estoy comprimiendo los archivos PNG con TinyPNG y esto me parece innecesario. Además, de acuerdo con la answer philippe_b , Chrome y Firefox tienen errores que hacen que el navegador cargue todos los tamaños de íconos. Usar un ícono grande puede ser mejor que muchos más pequeños debido a esto.

Otras lecturas

Para aquellos que deseen obtener más información, consulte los enlaces a continuación:

Estaba leyendo la página de Favicon en Wikipedia. Mencionan las especificaciones de HTML 5 para Favicon:

La especificación HTML5 actual recomienda especificar íconos de tamaño en múltiples tamaños usando los atributos rel = "icon" sizes = "lista de dimensiones de íconos separados por espacios" dentro de una etiqueta. [ source ] Múltiples formatos de íconos, incluidos los formatos de contenedor como Microsoft .ico y Macintosh .icns, así como los Gráficos vectoriales escalables pueden proporcionarse incluyendo el tipo de contenido del ícono en forma de tipo = "tipo de contenido del archivo" dentro del etiqueta.

Mirando el artículo citado (W3), muestran este ejemplo:

<link rel=icon href=favicon.png sizes="16x16" type="image/png"> <link rel=icon href=windows.ico sizes="32x32 48x48" type="image/vnd.microsoft.icon"> <link rel=icon href=mac.icns sizes="128x128 512x512 8192x8192 32768x32768"> <link rel=icon href=iphone.png sizes="57x57" type="image/png"> <link rel=icon href=gnome.svg sizes="any" type="image/svg+xml">

Mi pregunta es, ¿los navegadores admiten el método HTML 5?

Nota: sé que Apple usa su método de metaetiqueta apple-touch-icon sobre el método HTML5.

El artículo de wikipedia afirma:

Sin embargo, el navegador web Google Chrome seleccionará el tamaño de coincidencia más cercano a los proporcionados en los encabezados HTML para crear iconos de aplicaciones de 128 × 128 píxeles cuando el usuario elija Crear accesos directos a aplicaciones ... desde el menú "Herramientas".

¿Cómo maneja esto Internet Explorer (v9 a v11) y Firefox? ¿Y es correcto el artículo sobre cómo maneja Chrome los Favicons HTML? (No se cita ninguna fuente para que Chrome confirme esto).

Al buscar no pude encontrar realmente ninguna información (creíble) sobre HTML 5 Favicon aparte del artículo de Wikipedia.

No, no todos los navegadores admiten el atributo de sizes :

Tenga en cuenta que algunas plataformas definen tamaños específicos: