favicon.png vs favicon.ico - Por que devo usar o PNG em vez de OIC?

Question

Além do fato de que o PNG é um formato de imagem mais comum, existe alguma razão técnica para favorecer Favicon.png vs. favicon.ico?

Estou apoiando navegadores modernos que suportam ícones favoritos da PNG.

Answer 1

Resposta substituída (e virou wiki da comunidade) devido a inúmeras atualizações e notas de vários outros neste tópico:

• ICOs e PNGs permitem transparência completa baseada em canal alfa
• O ICO permite a compatibilidade com versões anteriores aos navegadores mais antigos (por exemplo, IE6)
• O PNG provavelmente tem suporte de ferramentas mais amplo para transparência, mas você pode encontrar ferramentas para criar ICOs de canal alfa, como o Ferramenta de acionamento dinâmico e Photoshop Plugin mencionado por @mercator.

Sinta -se à vontade para consultar as outras respostas aqui para obter mais detalhes.

Answer 2

Todos os navegadores modernos (testados com Chrome 4, Firefox 3.5, IE8, Opera 10 e Safari 4) sempre solicitarão um favicon.ico A menos que você especifique um ícone de atalho via <link>. Então, se você não especificar explicitamente um, é melhor sempre ter um favicon.ico arquivo, para evitar um 404. Yahoo! sugere que você o torne pequeno e em cache.

E você também não precisa procurar um PNG apenas para a transparência alfa. Arquivos OIC Suporte a transparência da Alpha bem (ou seja, cor de 32 bits), embora quase nenhuma ferramenta permita criá-las. Eu uso regularmente Gerador favicon de unidade dinâmica para criar favicon.ico arquivos com transparência alfa. É a única ferramenta on -line que conheço que pode fazê -lo.

Há também um grátis Photoshop plug-in isso pode criá -los.

Answer 3

Os arquivos .png são bons, mas os arquivos .ico fornecem transparência de canal alfa também, mais Eles lhe dão compatibilidade com versões anteriores.

Dê uma olhada em que tipo Stackoverflow Usos, por exemplo (observe que é transparente):

<link rel="shortcut icon" href="http://sstatic.net/so/favicon.ico"> 
<link rel="apple-touch-icon" href="http://sstatic.net/so/apple-touch-icon.png"> 

O Apple-Itouch Thingy é para os usuários do iPhone que fazem um atalho para um site.

Answer 4

A vantagem teórica dos arquivos *.ico é que eles são contêineres do que podem conter mais de um ícone. Você pode, por exemplo, armazenar uma imagem com o Alpha Channel e uma versão de 16 cores para sistemas herdados, ou pode adicionar ícones de 32x32 e 48x48 (que deveriam aumentar ao arrastar um link para o Windows Explorer).

Essa boa ideia, no entanto, tende a entrar em conflito com as implementações do navegador.

Answer 5

O PNG tem 2 vantagens: possui tamanho menor e é mais amplamente utilizado e suportado (exceto nos favoritos dos favoritos). Conforme mencionado antes da OIC, pode ter vários ícones de tamanho, que são úteis para aplicativos de desktop, mas não muito para sites. Eu recomendaria que você coloque um favicon.ico na raiz do seu aplicativo. E se você tiver acesso ao chefe das páginas do seu site, use a tag para apontar para um arquivo PNG. O navegador mais antigo mostrará o Favicon.ico e os mais novos, o PNG.

Para criar arquivos de PNG e ícone, eu recomendaria O gimp.

Answer 6

Algumas ferramentas sociais como o Google+ usam um método simples para obter um favicon para links externos, buscandohttp://your.domainname.com/favicon.ico

Já que eles não pretendem o conteúdo HTML, o <link> A tag não funcionará. Nesse caso, convém usar uma regra Mod_rewrite ou apenas colocar o arquivo no local padrão.

Answer 7

Uma lata de OIC ser um png.

Mais precisamente, você pode armazenar um ou mais PNG dentro deste formato mínimo de contêiner, em vez do bitmap+alfa usual que todos associam fortemente à OIC.

O apoio é velho, aparecendo no Windows Vista (2007) e é bem suportado pelos navegadores, embora não necessariamente pelo software de edição de ícones.

Qualquer PNG válido (inteiro incluindo cabeçalho) pode ser preso Cabeçalho de 6 byte ICO e 16 bytes de diretório de imagem.
O GIMP tem suporte nativo. Basta exportar como ICO e marcar "comprimido (PNG)".

Answer 8

Evite PNG em qualquer caso, se desejar compatibilidade confiável do IE6.