Favicon, "Icono Favorito", es una imagen utilizada por los navegadores para representar gráficamente una página web. Anteriormente el único formato aceptado era el ".ico" y en tamaño 16×16 píxeles, pero hoy en día podemos utilizar otros formatos como ".png", ".jpg" y "svg" y tamaños. Actualmente favicon se utiliza comúnmente para:

  • Barra de navegación
  • Barra de favoritos
  • Iconos de escritorio
  • Icono de la pantalla de inicio móvil

La mayoría de los navegadores tendrán por defecto un archivo en la raíz de su sitio llamado "favicon.ico", pero podemos proporcionar otra ubicación de icono y tamaños a través de la <link /> etiqueta html.

Etiqueta HTML Link

Si no queremos utilizar el método predeterminado de navegadores para que el icono esté disponible y también para proporcionar variaciones en los tamaños utilizamos la etiqueta html <link /> .

<link rel=&quot;&quot; type=&quot;&quot; sizes=&quot;&quot; href=&quot;&quot;>

Rel

La propiedad "rel" significa "relación" y se utiliza para indicar la relación del vínculo en cuestión con la página. En los navegadores muy antiguos se utilizó el valor "icono de acceso directo", pero nos centraremos en el moderno y más utilizado, por lo que utilizaremos el valor "icono".

<link rel=&quot;icon&quot; type=&quot;&quot; sizes=&quot;&quot; href=&quot;&quot;>

Tipo, Nuevo

La propiedad "type" indica el tipo de formato MIME del archivo al que se hace referencia. Por ejemplo: Para un archivo en el formato ".ico" usamos "image/x-icon", ya en el formato ".png" sería "image/png". Aunque no se recomienda una propiedad obligatoria para admitir exploradores más antiguos (IE9 e IE10).

<link rel=&quot;icon&quot; type=&quot;image/png&quot; sizes=&quot;&quot; href=&quot;&quot;>

Tamaños, Año Nuevo

La propiedad "sizes" se utiliza para indicar el tamaño del icono al que se hace referencia. Como podemos proporcionar versiones optimizadas para diferentes usos, aquí hablamos con el navegador de qué tamaño y para que sepa cuál es el mejor icono para usar en cada caso.

<link rel=&quot;icon&quot; type=&quot;image/png&quot; sizes=&quot;228x228&quot; href=&quot;&quot;>

Href

La propiedad "href" indica la ubicación en el servidor del archivo al que se hace referencia.

<link rel=&quot;icon&quot; type=&quot;image/png&quot; sizes=&quot;228x228&quot; href=&quot;/icons/favicon.ico&quot;>

Colinha

ExploradorEtiqueta de enlace: "rel" / "type"Formatos aceptados
IE 8 o anteriorrel"icono de acceso directo".ico
IE 9, IE 10rel"icon" type -"image/x-icon".ico
IE 11rel"icon" type"image/x-icon o png o gif".ico, .png, .gif
Cromorel"icon" type"image/x-icon o png o gif".ico, .png, .gif
Firefoxrel"icon" type"image/x-icon o png o gif".ico, .png, .gif, .svg*
Safarirel"icon" type"image/x-icon o png o gif".ico, .png, .gif
Óperarel"icon" type"image/x-icon o png o gif".ico, .png, .gif

Dispositivos móviles

Algunos navegadores móviles permiten la creación de accesos directos en la pantalla de inicio y para ello podemos proporcionar imágenes con calidad y tamaños optimizados:

Dispositivo / NavegadorEtiqueta de enlace "rel"Tamaños (tamaño)
Apple / Safarirel"apple-touch-icon" o
rel"apple-touch-icon-precomposed"
76×76 – iPad 2 y iPad mini
120×120 – iPhone 4s, 5, 6
152×152 – iPad (retina)
180×180 – iPhone 6 Plus
Manzana / Opera Coastrel"icono"
228×228
Android / Chromerel"icono"
192×192

Tamaños más utilizados

Para terminar separé una lista con la mayoría de los tamaños utilizados y por quién:

TamañoNombreUso
32×32favicon-32.pngEstándar para la mayoría de los navegadores
57 x 57favicon-57.pngPredeterminado para la pantalla de inicio de iOS y iPhone de hasta 3 generaciones
76-76favicon-76.pngPantalla de inicio del iPad
96-96favicon-96.pngGoogleTV
120-120favicon-120.pngretina iPhone
128-128favicon-128.pngIcono de Chrome Web Store y pantalla de inicio de Windows 8
144-144favicon-144.pngIcono de metro IE10 *
152-152favicon-152.pngIpad
167-167favicon-167.pngRetina iPad
180-180favicon-180.pngiPhone 6 plus
192-192favicon-192.pngRecomendación de la aplicación web para desarrolladores de Google
195-195favicon-195.pngOpera Speed Dial (Versión 15 y anteriores)
196-196favicon-196.pngAcceso directo a la pantalla de inicio de Chrome en Android
228-228favicon-228.pngIcono de la costa de la ópera

Sitios generadores de Favicons

Para hacer nuestras vidas más fáciles hay sitios web que generan todos los tamaños principales automáticamente:

0 0 voto
Nota do Artigo
Subscribe
Notify of
guest
0 Comentários
Inline Feedbacks
View all comments
0
Would love your thoughts, please comment.x
()
x