FavIcon no es más que una pequeña imagen que aparece en la parte superior izquierda junto con el título de la barra de direcciones de la aplicación.La especificación de tamaño estándar para favicon.ico es de 16 por 16 píxeles. Por favor, vea la figura adjunta.
Desde la experiencia de mi favicon.ico no aparece, estoy compartiendo mi experiencia. No puedes conseguir que se muestre hasta que pongas tu sitio web en un host, por lo tanto, intenta ponerlo en un host local usando XAMPP – http://www.apachefriends.org/en/xampp.html. Así es como aparece el favicon y como otros recomendaron, cambiar:
Un favicon es un icono del navegador que representa una marca o un sitio web. Los favicones, que suelen aparecer junto al título de una página web en las pestañas del navegador, también pueden encontrarse en las barras de direcciones, listas de favoritos, páginas de resultados de búsqueda, barras de herramientas, historial del navegador y otros lugares de la web.
Si estoy escudriñando rápidamente la página de resultados, probablemente decidiré explorar Joy Us Garden y Easy to Grow Bulbs antes que The Succulent Source por varias razones. No sólo aparecen en primer lugar en la SERP, sino que además sus favicons, URLs, títulos de páginas y meta descripciones apuntan a que son sitios web dedicados a todo lo relacionado con las plantas y que tienen una respuesta a mi pregunta.
Ahora imagina estos tres sitios web en las pestañas del navegador en un escritorio. Sería mucho más fácil recordar los favicons personalizados de Joy Us Garden y Easy to Grow Bulbs que el favicon por defecto de The Succulent Source. En un mar de pestañas abiertas, es más probable que vuelva a hacer clic en las pestañas con faviconos personalizados y pase más tiempo en esos sitios.
Por último, digamos que hago clic en cada uno de estos sitios. Al visitar Joy Us Garden y Easy to Grow Bulbs, me doy cuenta inmediatamente de que los faviconos personalizados se basan en los logotipos de los sitios web. El colorido logotipo de este último se muestra a continuación. Reconocerás el tulipán como su favicon.
<link rel=”apple-touch-icon-precomposed” sizes=”152×152″ href=”/path/to/favicon-152.png”>Nota: todo lo que sea “retina” y anterior cambiará el tamaño del icono por defecto de 120px ya que no se ha especificado ningún atributo de tamaño.Para más información sobre los iconos táctiles, consulta la documentación oficial de Apple, que también explica cómo eliminar la barra de estado, añadir un título de aplicación personalizado e incluso una pantalla de lanzamiento para tu web-app.¿Es necesario declarar estas etiquetas HTML en el <head>? No. Mientras los iconos táctiles se suban a la carpeta raíz de la página web, Apple sabrá buscarlos allí, sin embargo, otros sistemas operativos también utilizan estos iconos – ¡incluso Android! Es mejor definirlos en el <head>.WindowsWindows 10 (Metro UI) utiliza un formato de mosaico para mostrar los iconos de las apps (con una opción alternativa de “Añadir sitio a las Apps”), que es un poco más complejo cuando se compara con otros métodos, pero vamos a empezar con los tamaños (px) antes de discutir la implementación. Nota: los 270x serán escalados a 150x en pantallas de baja densidad.Un archivo browserconfig.xml con el siguiente código debe ser subido al directorio raíz de su sitio web:<?xml version=”1.0″ encoding=”utf-8″?>
Un favicon es un icono del navegador que representa una marca o un sitio web. Los favicones se ven con más frecuencia junto al título de una página web en las pestañas del navegador, pero también pueden encontrarse en las barras de direcciones, las listas de favoritos, las páginas de resultados de búsqueda, las barras de herramientas, el historial del navegador y otros lugares de la web.
Si estoy escudriñando rápidamente la página de resultados, probablemente decidiré explorar Joy Us Garden y Easy to Grow Bulbs antes que The Succulent Source por varias razones. No sólo aparecen en primer lugar en la SERP, sino que además sus favicons, URLs, títulos de páginas y meta descripciones apuntan a que son sitios web dedicados a todo lo relacionado con las plantas y que tienen una respuesta a mi pregunta.
Ahora imagina estos tres sitios web en las pestañas del navegador en un escritorio. Sería mucho más fácil recordar los favicons personalizados de Joy Us Garden y Easy to Grow Bulbs que el favicon por defecto de The Succulent Source. En un mar de pestañas abiertas, es más probable que vuelva a hacer clic en las pestañas con faviconos personalizados y pase más tiempo en esos sitios.
Por último, digamos que hago clic en cada uno de estos sitios. Al visitar Joy Us Garden y Easy to Grow Bulbs, me doy cuenta inmediatamente de que los faviconos personalizados se basan en los logotipos de los sitios web. El colorido logotipo de este último se muestra a continuación. Reconocerás el tulipán como su favicon.