¿Cómo agrego un favicon a mi sitio web?

¿Qué marcado es el estándar moderno para agregar un favicon a mi sitio? ¿Cuál es el formato y tamaño de imagen estándar?

Para trabajar en todos los navegadores, .icose prefiere, ya que para el tamaño, 32x32 es el más utilizado, 16x16 también funciona (este es el tamaño real utilizado en el navegador en la mayoría de los lugares).

Tampoco en su pregunta, deben tener una profundidad de color de 8 o 24 bits.

Vale la pena señalar que, si planea que los usuarios de iWhatever marquen su sitio como favorito, eso es algo diferente <link>para la imagen, por ejemplo, StackOverflow:

<link rel="apple-touch-icon" href="https://cdn.sstatic.net/Sites/stackoverflow/img/apple-touch-icon.png">

Cual es:

Puede usar una herramienta como http://www.favicon.cc/ para importar una imagen y convertirla en un favicon, o simplemente crearla desde cero.

Después de eso, si nombra su archivo favicon.icoy lo coloca en la raíz de su sitio web, la mayoría de los navegadores lo obtienen automáticamente.

Pero también puede declararlo explícitamente en sus archivos html de esta manera:

<link rel="shortcut icon" type="image/png" href="path/to/your/favicon.png" />

Con las ventajas de usar otro formato que no sea ico, use diferentes favicons en diferentes páginas, coloque su favicon en otro lugar, use un nombre diferente a faviconetc.

http://en.wikipedia.org/wiki/Favicon

Marque con la ruta http del dominio completo para IE y mantenga favicon en la carpeta de documentos:

<link rel="shortcut icon" href="http://www.your-site-domain/favicon.ico">

Formato de imagen estándar:

• .ico
• 16 x 16 píxeles

Para diferentes dispositivos, navegadores y sistemas operativos, puede usar diferentes iconos. Por ejemplo, a continuación hay una lista que puede inspirarte. Corrija / edite la lista a medida que avanzan las cosas.

<link rel="icon" type="image/x-icon" href="/images/icons/favicon.ico" />
<link rel="icon" type="image/png" sizes="96x96" href="/images/icons/favicon-96x96.png" />
<link rel="icon" type="image/png" sizes="32x32" href="/images/icons/favicon-32x32.png" />
<link rel="icon" type="image/png" sizes="16x16" href="/images/icons/favicon-16x16.png" />
<link rel="shortcut icon" type="image/x-icon" href="/images/icons/favicon.ico" />
<link rel="apple-touch-icon" sizes="57x57" href="/images/icons/apple-touch-icon-57x57.png" />
<link rel="apple-touch-icon" sizes="60x60" href="/images/icons/apple-touch-icon-60x60.png" />
<link rel="apple-touch-icon" sizes="72x72" href="/images/icons/apple-touch-icon-72x72.png" />
<link rel="apple-touch-icon" sizes="76x76" href="/images/icons/apple-touch-icon-76x76.png" />
<link rel="apple-touch-icon" sizes="114x114" href="/images/icons/apple-touch-icon-114x114.png" />
<link rel="apple-touch-icon" sizes="120x120" href="/images/icons/apple-touch-icon-120x120.png" />
<link rel="apple-touch-icon" sizes="144x144" href="/images/icons/apple-touch-icon-144x144.png" />
<link rel="apple-touch-icon" sizes="152x152" href="/images/icons/apple-touch-icon-152x152.png" />
<link rel="apple-touch-icon" sizes="180x180" href="/images/icons/apple-touch-icon.png" />
<link rel="icon" type="image/png" href="/images/icons/android-chrome-192x192.png" sizes="192x192" />
<link rel="mask-icon" href="/images/icons/safari-pinned-tab.svg" color="#5bbad5" />
<meta name="msapplication-TileColor" content="#da532c" />
<meta name="msapplication-TileImage" content="/images/icons/mstile-144x144.png" />
<meta name="msapplication-config" content="/browserconfig.xml" />
<meta name="theme-color" content="#282B34" />

Ya no necesita un enlace, pero es útil. En cambio, siempre que deje el archivo llamado favicon.ico (y es un ico) en su raíz, se usará como favicon.

Tuve algunos problemas para crear mi archivo .ico con el GIMP, pero esta publicación brinda instrucciones detalladas. El truco parece estar guardando como formato GIF primero para convertirlo en una tabla de colores indexados, y luego convertirlo al formato ICO.