Ícones e cores do navegador

Navegadores modernos facilitam a personalização de determinados componentes, como ícones, a cor da barra de endereço e até mesmo elementos como blocos personalizados. Esses ajustes simples podem aumentar o engajamento e fazer com que os usuários voltem ao seu site.

Navegadores modernos facilitam a personalização de determinados componentes, como ícones, a cor da barra de endereço e até mesmo elementos como blocos personalizados. Esses ajustes simples podem aumentar o engajamento e fazer com que os usuários voltem ao seu site.

Fornecer ícones e blocos excelentes

Quando um usuário acessa sua página, o navegador tenta recuperar um ícone do HTML. Ele pode ser exibido em muitos locais, incluindo a guia do navegador, o botão de aplicativos recentes ou a guia de páginas novas (ou acessadas recentemente), entre outros.

Fornecer uma imagem de alta qualidade torna seu site mais reconhecível, facilitando a localização dele pelos usuários.

Para oferecer suporte total a todos os navegadores, será preciso adicionar algumas tags ao elemento <head> de cada página.

<!-- icon in the highest resolution we need it for -->
<link rel="icon" sizes="192x192" href="icon.png">

<!-- reuse same icon for Safari -->
<link rel="apple-touch-icon" href="ios-icon.png">

<!-- multiple icons for IE -->
<meta name="msapplication-square310x310logo" content="icon_largetile.png">

Chrome e Opera

O Chrome e o Opera usam icon.png, que é dimensionado para o tamanho necessário pelo dispositivo. Para impedir o dimensionamento automático, você também pode fornecer tamanhos adicionais especificando o atributo sizes.

Safari

O Safari também usa a tag <link> com o atributo rel: apple-touch-icon para indicar o ícone da tela inicial.

<link rel="apple-touch-icon" href="touch-icon-iphone.png">

Um PNG não transparente de 180 px ou 192 px quadrados é ideal para o apple-touch-icon.

Não é recomendável incluir várias versões pelo atributo sizes. Anteriormente, o Safari para iOS considerava a palavra-chave -precomposed para evitar a adição de efeitos visuais, mas isso não é mais necessário desde o iOS 7.

Internet Explorer e Windows Phone

A nova experiência de tela inicial do Windows 8 oferece suporte a quatro layouts diferentes para sites fixos e requer quatro ícones. Você pode deixar as meta tags relevantes de fora se não quiser oferecer suporte a um tamanho específico.

<meta name="msapplication-square70x70logo" content="icon_smalltile.png">
<meta name="msapplication-square150x150logo" content="icon_mediumtile.png">
<meta name="msapplication-wide310x150logo" content="icon_widetile.png">

Blocos no Internet Explorer

Os "Sites Fixos" e os "Blocos Dinâmicos" giratórios da Microsoft vão muito além de outras implementações e estão fora do escopo deste guia. Saiba mais na página da MSDN sobre como criar blocos dinâmicos.

Colorir elementos do navegador

Usando diferentes elementos meta, você pode personalizar o navegador e até mesmo elementos da plataforma. Lembre-se de que algumas personalizações podem funcionar apenas em certas plataformas ou navegadores, mas elas podem aprimorar a experiência de forma significativa.

O Chrome, o Firefox OS, o Safari, o Internet Explorer e o Opera Coast permitem definir cores para elementos do navegador e até para a plataforma usando meta tags.

Cor de tema meta para Chrome e Opera

Para especificar a cor do tema para o Chrome no Android, use a cor de tema meta.

<!-- Chrome, Firefox OS and Opera -->
<meta name="theme-color" content="#4285f4">
Cores do tema estilizando a barra de endereço no Chrome.

Estilo específico do Safari

O Safari permite que você personalize a barra de status e especifique uma imagem de inicialização.

Especificar uma imagem de inicialização

Por padrão, o Safari mostra uma tela em branco durante o tempo de carregamento e, depois de vários carregamentos, uma captura de tela do estado anterior do app. Você pode evitar isso pedindo ao Safari para mostrar uma imagem de inicialização explícita, adicionando uma tag de link, com rel=apple-touch-startup-image. Exemplo:

<link rel="apple-touch-startup-image" href="icon.png">

A imagem precisa estar no tamanho específico da tela do dispositivo de destino ou não será usada. Consulte as Diretrizes de conteúdo da Web do Safari para mais detalhes.

Embora a documentação da Apple sobre esse assunto seja escassa, a comunidade de desenvolvedores descobriu uma forma de direcionar todos os dispositivos usando consultas de mídia avançadas para selecionar o dispositivo adequado e especificar a imagem correta. Esta é uma solução que funciona, cortesia de tfausak's gist

Mudar a aparência da barra de status

Você pode mudar a aparência da barra de status padrão para black ou black-translucent. Com black-translucent, a barra de status flutua na parte de cima do conteúdo da tela cheia, em vez de empurrá-la para baixo. Isso aumenta a altura do layout, mas obstrui a parte de cima. Confira o código necessário:

<meta name="apple-mobile-web-app-status-bar-style" content="black">

Captura de tela usando preto translúcido.
Captura de tela usando black-translucent

Captura de tela usando preto
Captura de tela usando black