¿Cómo agregar un ícono de pestaña del navegador (favicon) para un sitio web?

578

He estado trabajando en un sitio web y me gustaría agregar un pequeño ícono a la pestaña del navegador.

¿Cómo puedo hacer esto en HTML y en qué lugar del código necesitaría colocarlo (por ejemplo, encabezado)? Tengo un .pngarchivo de logotipo que me gustaría convertir en un icono.

Relacionado: HTML establece la imagen en la pestaña del navegador .

html icons favicon chiflado
fuente
1
mira el enlace para más información. Estás en el camino correcto.
reggie
Cargue la imagen (favicon.ico) con FTP (lea nuestro tutorial de FTP) en la sección raíz de su sitio web. La sección raíz es el área del archivo principal, donde almacenaría el archivo index.html (index.asp, index.php, etc.) para su página principal. davesite.com sería la raíz davesite.com/webstation no sería la raíz davesite.com/webstation/html tampoco es raíz Este archivo, colocado correctamente, se cargará como predeterminado para todo su dominio.
Knookie 03 de
presione la tecla enter prematuramente allí; de todos modos, gracias por la respuesta. ¿Solo iba a decir que la primera parte (que pegué arriba) en el enlace que diste no pareció funcionar? Sin embargo, la segunda parte funcionó perfectamente - gracias
knookie
3
Aquí están las recomendaciones de w3.org con una advertencia de que IE antes de IE11 no admite .png como íconos favoritos .
Denys Séguret

Respuestas:

416

En realidad, hay dos formas de agregar un favicon a un sitio web.

<link rel="icon">

Simplemente agregue el siguiente código al <head>elemento:

<link rel="icon" href="http://example.com/favicon.png">

Los favicons PNG son compatibles con la mayoría de los navegadores, excepto IE <= 10 . Para compatibilidad con versiones anteriores, puede usar favicons ICO.

Tenga en cuenta que ya no tiene que preceder iconen el relatributoshortcut . Desde los tipos de enlace MDN :

El shortcuttipo de enlace a menudo se ve antes icon, pero este tipo de enlace no es conforme, se ignora y los autores web ya no deben usarlo .

favicon.ico en el directorio raíz

De otra respuesta SO (por @mercator ):

Todos los navegadores modernos (probados con Chrome 4, Firefox 3.5, IE8, Opera 10 y Safari 4) siempre solicitarán un a favicon.icomenos que haya especificado un icono de acceso directo a través de <link>.

Entonces, todo lo que tiene que hacer es hacer que la /favicon.icosolicitud a su sitio web devuelva su favicon. Desafortunadamente, esta opción no le permite usar un icono PNG.

Vea también favicon.png vs favicon.ico: ¿por qué debería usar PNG en lugar de ICO?

Michał Perłakowski
fuente
1
Si desea TODOS los íconos automáticamente (incluidos los íconos móviles, 'agregar a la pantalla de inicio', marcadores móviles, iOS / Droid, pestaña de escritorio, etc.), generación de archivos ICO, etc., así como código HTML copiable para dichos metaarchivos, todo con un clic, puede usar esta práctica herramienta (no estoy afiliado) realfavicongenerator.net
Albert Renshaw
2
Quiere agregar: su ícono debe tener una dimensión cuadrada, significa que el ancho es igual a la altura.
Nguyen Tan Dat
3
No olvides presionar Ctrl + F5 cuando lo pruebes. A veces se almacena en caché.
Hairi
Yo no encuentro que la simple colocación de un archivo ICO favicon.ico nombrado en el directorio raíz de mi sitio causado ya sea Firefox o Chrome para cargarlo. Entonces fui por la <link relruta. PERO, la dirección de mi sitio no se enumera de manera confiable en DNS, por lo que no puedo contar href="http://example.com"para recuperarla. Entonces llegué a esta solución en mi index.htmarchivo:<link rel="icon" href="favicon.ico">
CÓDIGO-LEA
426
  1. Use una herramienta para convertir su png a un archivo ico. Puede buscar "generador de favicon" y puede encontrar muchas herramientas en línea.

  2. Coloque la dirección ico en headcon una linketiqueta:

    <link rel="shortcut icon" href="http://sstatic.net/stackoverflow/img/favicon.ico">
Gustavo Costa De Oliveira
fuente
3
¡Gracias! Seguí los pasos correctamente y funciona muy bien en IE y Firefox, pero por alguna razón no funciona en Google Chrome, ¿tengo que eliminar el caché? o que tengo que hacer a partir de ahí?
PatrickGamboa
1
Me gusta usar el complemento de Photoshop: telegraphics.com.au/svn/icoformat/trunk/dist/README.html
Ben_Coding
2
La parte de "acceso directo" se puede eliminar en muchas circunstancias: stackoverflow.com/questions/13211206/… , mathiasbynens.be/notes/rel-shortcut-icon
bbc
72

El mejor que encontré es http://www.favicomatic.com/ Digo mejor porque me dio el favicon más nítido y no requirió edición después de su transformación. Generará favicons a 16x16 y 32x32 y para citarlos "¡Cada maldito tamaño, señor!" Además, su sitio se ve genial y es fácil de usar.

También generan el html que necesita usar para los archivos que generan.

<link rel="apple-touch-icon-precomposed" sizes="57x57" href="apple-touch-icon-57x57.png" />
<link rel="apple-touch-icon-precomposed" sizes="114x114" href="apple-touch-icon-114x114.png" />
<link rel="apple-touch-icon-precomposed" sizes="72x72" href="apple-touch-icon-72x72.png" />
<link rel="apple-touch-icon-precomposed" sizes="144x144" href="apple-touch-icon-144x144.png" />
<link rel="apple-touch-icon-precomposed" sizes="60x60" href="apple-touch-icon-60x60.png" />
<link rel="apple-touch-icon-precomposed" sizes="120x120" href="apple-touch-icon-120x120.png" />
<link rel="apple-touch-icon-precomposed" sizes="76x76" href="apple-touch-icon-76x76.png" />
<link rel="apple-touch-icon-precomposed" sizes="152x152" href="apple-touch-icon-152x152.png" />
<link rel="icon" type="image/png" href="favicon-196x196.png" sizes="196x196" />
<link rel="icon" type="image/png" href="favicon-96x96.png" sizes="96x96" />
<link rel="icon" type="image/png" href="favicon-32x32.png" sizes="32x32" />
<link rel="icon" type="image/png" href="favicon-16x16.png" sizes="16x16" />
<link rel="icon" type="image/png" href="favicon-128.png" sizes="128x128" />
<meta name="application-name" content="&nbsp;"/>
<meta name="msapplication-TileColor" content="#FFFFFF" />
<meta name="msapplication-TileImage" content="mstile-144x144.png" />
<meta name="msapplication-square70x70logo" content="mstile-70x70.png" />
<meta name="msapplication-square150x150logo" content="mstile-150x150.png" />
<meta name="msapplication-wide310x150logo" content="mstile-310x150.png" />
<meta name="msapplication-square310x310logo" content="mstile-310x310.png" />

Miré los primeros 20 resultados de Google, y este fue, de lejos, el mejor.

Jared Menard
fuente
44
¿Se supone que debo poner todo esto en mi etiqueta principal para cada página?
Noumenon
1
No lo pondría todo en tu etiqueta de la cabeza. Solo pondría las etiquetas necesarias para admitir los dispositivos que necesita admitir. Honestamente, puede sobrevivir con un solo <link rel = "icon" type = "image / ico" href = "/ images / favicon.ico">
Jared Menard el
55
Esta página de git explica para qué se utilizan la mayoría de estos íconos: github.com/audreyr/favicon-cheat-sheet
Jared Menard
14

Hay varios iconos diferentes e incluso pantallas de bienvenida que puede configurar para varios dispositivos. Esta respuesta explica cómo apoyarlos a todos.

Aquí hay algunos fragmentos que he usado con enlaces relevantes a donde reuní la información. Consulte mi blog para obtener más información y más información sobre la plantilla de proyecto ASP.NET MVC Boilerplate con todo esto integrado de inmediato (incluidos los archivos de imagen de muestra).

Agregue el siguiente marcado a su cabeza html. Las secciones comentadas son completamente opcionales. Si bien las secciones no comentadas se recomiendan para cubrir todos los usos de los íconos. No tengas miedo, la mayoría si son comentarios para ayudarte.

<!-- Icons & Platform Specific Settings - Favicon generator used to generate the icons below http://realfavicongenerator.net/ -->
<!-- shortcut icon - It is best to add this icon to the root of your site and only use this link element if you move it somewhere else. This file contains the following sizes 16x16, 32x32 and 48x48. -->
<!--<link rel="shortcut icon" href="favicon.ico">-->
<!-- favicon-96x96.png - For Google TV. -->
<link rel="icon" type="image/png" href="/content/images/favicon-96x96.png" sizes="96x96">
<!-- favicon-16x16.png - The classic favicon, displayed in the tabs. -->
<link rel="icon" type="image/png" href="/content/images/favicon-16x16.png" sizes="16x16">
<!-- favicon-32x32.png - For Safari on Mac OS. -->
<link rel="icon" type="image/png" href="/content/images/favicon-32x32.png" sizes="32x32">

<!-- Android/Chrome -->
<!-- manifest-json - The location of the browser configuration file. It contains locations of icon files, name of the application and default device screen orientation. Note that the name field is mandatory.
    https://developer.chrome.com/multidevice/android/installtohomescreen. -->
<link rel="manifest" href="/content/icons/manifest.json">
<!-- theme-color - The colour of the toolbar in Chrome M39+
    http://updates.html5rocks.com/2014/11/Support-for-theme-color-in-Chrome-39-for-Android -->
<meta name="theme-color" content="#1E1E1E">
<!-- favicon-192x192.png - For Android Chrome M36 to M38 this HTML is used. M39+ uses the manifest.json file. -->
<link rel="icon" type="image/png" href="/content/icons/favicon-192x192.png" sizes="192x192">
<!-- mobile-web-app-capable - Run Android/Chrome version M31 to M38 in standalone mode, hiding the browser chrome. -->
<!-- <meta name="mobile-web-app-capable" content="yes"> -->

<!-- Apple Icons - You can move all these icons to the root of the site and remove these link elements, if you don't mind the clutter.
    https://developer.apple.com/library/safari/documentation/AppleApplications/Reference/SafariHTMLRef/Introduction.html#//apple_ref/doc/uid/30001261-SW1 -->
<!-- apple-mobile-web-app-title - The name of the application if pinned to the IOS start screen. -->
<!--<meta name="apple-mobile-web-app-title" content="">-->
<!-- apple-mobile-web-app-capable - Hide the browsers user interface on IOS, when the app is run in 'standalone' mode. Any links to other pages that are clicked whilst your app is in standalone mode will launch the full Safari browser. -->
<!--<meta name="apple-mobile-web-app-capable" content="yes">-->
<!-- apple-mobile-web-app-status-bar-style - default/black/black-translucent Styles the IOS status bar. Using black-translucent makes it transparent and overlays it on top of your site, so make sure you have enough margin. -->
<!--<meta name="apple-mobile-web-app-status-bar-style" content="black">-->
<!-- apple-touch-icon-57x57.png - Android Stock Browser and non-Retina iPhone and iPod Touch -->
<link rel="apple-touch-icon" sizes="57x57" href="/content/images/apple-touch-icon-57x57.png">
<!-- apple-touch-icon-114x114.png - iPhone (with 2× display) iOS = 6 -->
<link rel="apple-touch-icon" sizes="114x114" href="/content/images/apple-touch-icon-114x114.png">
<!-- apple-touch-icon-72x72.png - iPad mini and the first- and second-generation iPad (1× display) on iOS = 6 -->
<link rel="apple-touch-icon" sizes="72x72" href="/content/images/apple-touch-icon-72x72.png">
<!-- apple-touch-icon-144x144.png - iPad (with 2× display) iOS = 6 -->
<link rel="apple-touch-icon" sizes="144x144" href="/content/images/apple-touch-icon-144x144.png">
<!-- apple-touch-icon-60x60.png - Same as apple-touch-icon-57x57.png, for non-retina iPhone with iOS7. -->
<link rel="apple-touch-icon" sizes="60x60" href="/content/images/apple-touch-icon-60x60.png">
<!-- apple-touch-icon-120x120.png - iPhone (with 2× and 3 display) iOS = 7 -->
<link rel="apple-touch-icon" sizes="120x120" href="/content/images/apple-touch-icon-120x120.png">
<!-- apple-touch-icon-76x76.png - iPad mini and the first- and second-generation iPad (1× display) on iOS = 7 -->
<link rel="apple-touch-icon" sizes="76x76" href="/content/images/apple-touch-icon-76x76.png">
<!-- apple-touch-icon-152x152.png - iPad 3+ (with 2× display) iOS = 7 -->
<link rel="apple-touch-icon" sizes="152x152" href="/content/images/apple-touch-icon-152x152.png">
<!-- apple-touch-icon-180x180.png - iPad and iPad mini (with 2× display) iOS = 8 -->
<link rel="apple-touch-icon" sizes="180x180" href="/content/images/apple-touch-icon-180x180.png">

<!-- Apple Startup Images - These are shown when the page is loading if the site is pinned https://gist.github.com/tfausak/2222823 -->
<!-- apple-touch-startup-image-1536x2008.png - iOS 6 & 7 iPad (retina, portrait) -->
<link rel="apple-touch-startup-image"
      href="/content/images/apple-touch-startup-image-1536x2008.png"
      media="(device-width: 768px) and (device-height: 1024px) and (orientation: portrait) and (-webkit-device-pixel-ratio: 2)">
<!-- apple-touch-startup-image-1496x2048.png - iOS 6 & 7 iPad (retina, landscape) -->
<link rel="apple-touch-startup-image"
      href="/content/images/apple-touch-startup-image-1496x2048.png"
      media="(device-width: 768px) and (device-height: 1024px) and (orientation: landscape) and (-webkit-device-pixel-ratio: 2)">
<!-- apple-touch-startup-image-768x1004.png - iOS 6 iPad (portrait) -->
<link rel="apple-touch-startup-image"
      href="/content/images/apple-touch-startup-image-768x1004.png"
      media="(device-width: 768px) and (device-height: 1024px) and (orientation: portrait) and (-webkit-device-pixel-ratio: 1)">
<!-- apple-touch-startup-image-748x1024.png - iOS 6 iPad (landscape) -->
<link rel="apple-touch-startup-image"
      href="/content/images/apple-touch-startup-image-748x1024.png"
      media="(device-width: 768px) and (device-height: 1024px) and (orientation: landscape) and (-webkit-device-pixel-ratio: 1)">
<!-- apple-touch-startup-image-640x1096.png - iOS 6 & 7 iPhone 5 -->
<link rel="apple-touch-startup-image"
      href="/content/images/apple-touch-startup-image-640x1096.png"
      media="(device-width: 320px) and (device-height: 568px) and (-webkit-device-pixel-ratio: 2)">
<!-- apple-touch-startup-image-640x920.png - iOS 6 & 7 iPhone (retina) -->
<link rel="apple-touch-startup-image"
      href="/content/images/apple-touch-startup-image-640x920.png"
      media="(device-width: 320px) and (device-height: 480px) and (-webkit-device-pixel-ratio: 2)">
<!-- apple-touch-startup-image-320x460.png - iOS 6 iPhone -->
<link rel="apple-touch-startup-image"
      href="/content/images/apple-touch-startup-image-320x460.png"
      media="(device-width: 320px) and (device-height: 480px) and (-webkit-device-pixel-ratio: 1)">

<!-- Windows 8 Icons - If you add an RSS feed, revisit this page and regenerate the browserconfig.xml file. You will then have a cool live tile!
     browserconfig.xml - Windows 8.1 - Has been added to the root of the site. This points to the tile images and tile background colour. It contains the following images:
     mstile-70x70.png - For Windows 8.1 / IE11.
     mstile-144x144.png - For Windows 8 / IE10.
     mstile-150x150.png - For Windows 8.1 / IE11.
     mstile-310x310.png - For Windows 8.1 / IE11.
     mstile-310x150.png - For Windows 8.1 / IE11.
     See http://www.buildmypinnedsite.com/en and http://msdn.microsoft.com/en-gb/library/ie/dn255024%28v=vs.85%29.aspx. -->
<!-- application-name - Windows 8+ - The name of the application if pinned to the start screen. -->
<!--<meta name="application-name" content="">-->
<!-- msapplication-TileColor - Windows 8 - The tile colour which shows around your tile image (msapplication-TileImage). -->
<meta name="msapplication-TileColor" content="#5cb95c">
<!-- msapplication-TileImage - Windows 8 - The tile image. -->
<meta name="msapplication-TileImage" content="/content/images/mstile-144x144.png">

Mi archivo browserconfig.xml. Explicación completa arriba.

<?xml version="1.0" encoding="utf-8"?>
<browserconfig>
  <msapplication>
    <tile>
      <square70x70logo src="/Content/Images/mstile-70x70.png"/>
      <square150x150logo src="/Content/Images/mstile-150x150.png"/>
      <square310x310logo src="/Content/Images/mstile-310x310.png"/>
      <wide310x150logo src="/Content/Images/mstile-310x150.png"/>
      <TileColor>#5cb95c</TileColor>
    </tile>
  </msapplication>
</browserconfig>

Mi archivo manifest.json. Explicación completa arriba.

{
    "name": "ASP.NET MVC Boilerplate (Required! Update This)",
    "icons": [
        {
            "src": "\/Content\/icons\/android-chrome-36x36.png",
            "sizes": "36x36",
            "type": "image\/png",
            "density": "0.75"
        },
        {
            "src": "\/Content\/icons\/android-chrome-48x48.png",
            "sizes": "48x48",
            "type": "image\/png",
            "density": "1.0"
        },
        {
            "src": "\/Content\/icons\/android-chrome-72x72.png",
            "sizes": "72x72",
            "type": "image\/png",
            "density": "1.5"
        },
        {
            "src": "\/Content\/icons\/android-chrome-96x96.png",
            "sizes": "96x96",
            "type": "image\/png",
            "density": "2.0"
        },
        {
            "src": "\/Content\/icons\/android-chrome-144x144.png",
            "sizes": "144x144",
            "type": "image\/png",
            "density": "3.0"
        },
        {
            "src": "\/Content\/icons\/android-chrome-192x192.png",
            "sizes": "192x192",
            "type": "image\/png",
            "density": "4.0"
        }
    ]
}

Una lista de los archivos en el proyecto (tenga en cuenta que los nombres de estos archivos son importantes si decide colocar algunos de ellos en la raíz de su proyecto para evitar el uso de las metaetiquetas anteriores):

favicon.ico
browserconfig.xml
Content/Images/
    android-chrome-144x144.png
    android-chrome-192x192.png
    android-chrome-36x36.png
    android-chrome-48x48.png
    android-chrome-72x72.png
    android-chrome-96x96.png
    apple-touch-icon.png
    apple-touch-icon-57x57.png
    apple-touch-icon-60x60.png
    apple-touch-icon-72x72.png
    apple-touch-icon-76x76.png
    apple-touch-icon-114x114.png
    apple-touch-icon-120x120.png
    apple-touch-icon-144x144.png
    apple-touch-icon-152x152.png
    apple-touch-icon-180x180.png
    apple-touch-icon-precomposed.png (180x180)
    favicon-16x16.png
    favicon-32x32.png
    favicon-96x96.png
    favicon-192x192.png
    manifest.json
    mstile-70x70.png
    mstile-144x144.png
    mstile-150x150.png
    mstile-310x150.png
    mstile-310x310.png
    apple-touch-startup-image-1536x2008.png
    apple-touch-startup-image-1496x2048.png
    apple-touch-startup-image-768x1004.png
    apple-touch-startup-image-748x1024.png
    apple-touch-startup-image-640x1096.png
    apple-touch-startup-image-640x920.png
    apple-touch-startup-image-320x460.png

Gastos generales totales

Si elimina los comentarios, eso es 3 KB de HTML adicional, si no admite pantallas de bienvenida, eso es 1.5 KB. Si está utilizando compresión GZIP en su contenido HTML, lo que todo el mundo debería estar haciendo en estos días, eso le deja con unos 634 bytes de sobrecarga por solicitud para admitir todas las plataformas o 446 bytes sin pantallas de presentación. Personalmente, creo que vale la pena admitir dispositivos IOS, Android y Windows, pero es su elección, ¡solo estoy dando las opciones!

Nota al margen sobre el icono web actual / pantalla de bienvenida / situación de configuración

Esta situación con iconos específicos del proveedor, pantallas de bienvenida y etiquetas especiales para controlar el navegador web o iconos anclados es ridícula. En un mundo perfecto, todos usaríamos un archivo favicon.svg que podría verse bien en cualquier tamaño y podría ubicarse en la raíz de la página. Solo FireFox admite esto en el momento de la escritura (consulte CanIUse.com ).

Sin embargo, los iconos no son la única configuración en estos días, hay varias configuraciones específicas de otros proveedores (mostradas arriba) pero un archivo favicon.svg cubriría la mayoría de los casos de uso.

Actualizar

Actualizado para incluir la nueva versión de Android / Chrome M39 + favicon / opciones de temas. Curiosamente, han seguido un enfoque similar a Microsoft pero están utilizando un archivo JSON en lugar de XML.

Muhammad Rehan Saeed
fuente
11

He creado un generador de Favicon en línea con el que puedes crear favicons desde Font Awesome Icons . Puede obtener una vista previa del favicon creado en vivo en el navegador.

ingrese la descripción de la imagen aquí

Si desea funciones adicionales, no dude en enviar un problema o una solicitud de extracción aquí :).

eclipse
fuente
10

Lo hice con éxito para mi sitio web.

La única excepción es que el navegador SeaMonkey requiere un código HTML insertado en su <head>; mientras que los otros navegadores seguirán mostrando favicon.ico sin ninguna inserción de HTML. Además, cualquier navegador que no sea IE puede usar otros tipos de imágenes, no solo el formato .ico. Espero que esto ayude.

Barbie laptop gamer
fuente
5

Hay muchas soluciones complicadas arriba. ¿Para mi? Utilicé GIMP para guardar una copia del archivo PNG original después de cambiar el tamaño de la imagen a 32 x 32 píxeles.

Solo asegúrese de guardarlo como un archivo * .ico y usar el 

<link rel="shortcut icon" href="http://sstatic.net/stackoverflow/img/favicon.ico">

listados arriba

beep_check
fuente
4

Te recomiendo que pruebes http://faviconer.com para convertir tu .PNG o .GIF a un archivo .ICO.

Puede crear ambos 16x16y 32x32(para la nueva pantalla de retina) en un archivo .ICO.

No hay problemas con IE y Firefox

Dmitri A
fuente
3

Para que Chrome muestre el ícono de la página (favicon), debe verificar su sitio web desde un servidor de alojamiento o puede usar un host local mientras desarrolla y prueba su sitio web en su PC.

Miloud Eloumri
fuente
2 
<link rel="shortcut icon" 
href="http://someWebsiteLocation/images/imageName.ico">

Si puedo agregar más claridad para aquellos de ustedes que todavía están confundidos. El archivo .ico tiende a proporcionar más transparencia que el .png, por eso recomiendo convertir su imagen aquí como se mencionó anteriormente: http://www.favicomatic.com/done también, dentro del href está solo la ubicación de la imagen , puede ser cualquier ubicación de servidor, recuerde agregar el http: // en frente, de lo contrario no funcionará.

dizad87
fuente
1

No he usado otros, pero https://realfavicongenerator.net/ parece ser la mejor opción, y aún no se ha mencionado aquí.

Admite SVG como imágenes de origen para generar favicons, y proporciona opciones útiles para anular imágenes para diferentes plataformas. Además, de forma predeterminada, no genera toneladas de imágenes para ser compatibles con versiones anteriores de todas las plataformas obsoletas. En cambio, le da opciones para verificar si las quiere.

Desde un correo electrónico que me envió el desarrollador, también tienen planes para agregar soporte para generar favicons SVG, así como la sensibilidad del tema SVG , creo, que es una característica totalmente increíble.

mbomb007
fuente
0

Utilice amablemente el código a continuación en la sección del encabezado de su archivo de índice.

<link rel="icon" href="yourfevicon.ico" />
chitraksh bairathee
fuente