Neste tutorial, estarei explicando como atribuir ícones (ou favicons) a páginas HTML, os formatos utilizáveis e a diferênça de atribuição entre o Internet Explorer e os navegadores em conformidade com a W3C.
Para atribuir um ícone, basta colocar a tag <link>, dentro de <head>, com o endereço da imagem que será usada como ícone como parâmetro para href e especificar o tipo de recurso e formato de arquivo. O exemplo a seguir usa uma imagem no formato Ícone do Windows (.ico), retirada do Blogger e deve funcionar em todos os navegadores em conformidade com a W3C, incluindo o Firefox:
<link rel="icon" type="image/vnd.microsoft.icon"
href="http://www.blogger.com/favicon.ico" />As imagens devem obedecer duas regras importantes: devem ter os tamanhos 16×16, 32×32 ou 48×48 e ter profundidades de cor de 8-bit, 24-bit ou 32-bit. É possível ainda, usar outros três formatos de imagem:
- image/png (PNG)
- image/gif (GIF)
- image/jpeg (JPEG)
No Internet Explorer, entretanto, apenas o formato Ícone do Windows (.ico) é suportado e, é declarado de outra maneira:
<link rel="SHORTCUT ICON" href="http://www.blogger.com/favicon.ico" />Isso se deve porque o uso de ícones foi originalmente introduzido pela Microsoft, utilizando seu formato de ícones padrão e com o tempo a W3C padronizou a utilização desses ícones, adicionando novos formatos de imagem. O Internet Explorer passou a suportar o padrão a partir da versão 9, mas usando apenas o formato Ícone do Windows (.ico). No Firefox, Google Chrome, Opera e Safari, podem ser usadas ambas as formas.
Adicionalmente, o Firefox aceita GIFs animadas e imagens APNG (Animated PNG), e o Opera suporta ambas e também imagens SVG (image/svg+xml).
Dica: Use o GIMP para criar ícones para seu site.
1 comentários:
Muito bom!
Postar um comentário