Como adiciono um favicon ao meu site?

Qual marcação é o padrão moderno para adicionar um favicon ao meu site? Qual é o formato e tamanho padrão da imagem?

Para trabalhar em todos os navegadores, .icoé preferível, quanto ao tamanho, 32x32 é o mais usado, 16x16 também funciona (esse é o tamanho real usado no navegador na maioria dos lugares).

Também não estão na sua pergunta, eles devem ter profundidade de cor de 8 ou 24 bits.

Pode ser interessante notar que, se você planeja marcar como favorito os usuários do iWhatever, isso é separado <link>para a imagem, por exemplo, StackOverflow:

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

Qual é:

Você pode usar uma ferramenta como http://www.favicon.cc/ para importar uma imagem e convertê-la em um favicon, ou apenas criá-la do zero.

Depois disso, se você nomear seu arquivo favicon.icoe colocá-lo na raiz do seu site, a maioria dos navegadores da web o obtém automaticamente.

Mas você também pode declarar explicitamente em seus arquivos html assim:

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

Com as vantagens de usar outro formato que não seja ico, use favicons diferentes em páginas diferentes, coloque seu favicon em outro lugar, use um nome diferente de faviconetc.

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

Marque o caminho http do domínio completo para o IE e mantenha o favicon na pasta do documento:

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

Formato de imagem padrão:

• .ico
• 16 x 16 pixels

Para diferentes dispositivos, navegadores e SO, você pode usar ícones diferentes. Por exemplo, abaixo, há uma lista que pode inspirar você. Corrija / edite a lista à medida que as coisas progridem.

<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" />

Você não precisa mais de um link, mas é útil. Em vez disso, desde que você deixe o arquivo chamado favicon.ico (e é um ico) em sua raiz, ele será usado como o favicon.

Eu tive um pequeno problema ao criar meu arquivo .ico com o GIMP, mas este post fornece instruções detalhadas. O truque parece estar salvando como formato GIF primeiro para converter em uma tabela de cores indexada e depois convertê-lo para o formato ICO.