Ícones e cores do navegador

Os 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 simples ajustes podem aumentar o engajamento e fazer com que os usuários voltem ao seu site.

Os 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 simples ajustes podem aumentar o engajamento e fazer com que os usuários voltem ao seu site.

Forneça ótimos ícones e blocos

Quando um usuário visita sua página da Web, o navegador tenta buscar um ícone no HTML. Ele pode aparecer em muitos lugares, incluindo a guia do navegador, a opção de apps recentes, a página da guia nova ou visitada recentemente e muito mais.

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, é necessário 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 evitar o escalonamento automático, também é possível 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 com 180 ou 192 pixels quadrado é ideal para o ícone de toque da Apple.

Não é recomendável incluir várias versões usando o atributo sizes. Anteriormente, o Safari para iOS consideraria a palavra-chave -precomposed para evitar a adição de efeitos visuais, mas isso não é 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 fixados e requer quatro ícones. Você pode deixar de fora as metatags relevantes se não quiser oferecer compatibilidade com 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 fixados" e "Blocos dinâmicos" giratórios da Microsoft vão muito além de outras implementações e estão além do escopo deste guia. Saiba mais na página da MSDN sobre como criar blocos ativos (link em inglês).

Colorir elementos do navegador

Usando diferentes elementos meta, é possível personalizar o navegador e até mesmo elementos da plataforma. Lembre-se de que algumas delas podem funcionar apenas em determinadas plataformas ou navegadores, mas elas podem melhorar muito a experiência.

O Chrome, o Firefox OS, o Safari, o Internet Explorer e o Opera Coast permitem definir cores para os 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 do tema meta.

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

Estilo específico do Safari

O Safari permite aplicar estilo à barra de status e especificar 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. É possível evitar isso instruindo o Safari a 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 maneira de segmentar todos os dispositivos usando consultas de mídia avançadas para selecionar o dispositivo adequado e especificar a imagem correta. Confira uma solução que funciona, cortesia de tfausak's gist.

Alterar a aparência da barra de status

É possível mudar a aparência da barra de status padrão para black ou black-translucent. Com o black-translucent, a barra de status flutua sobre o conteúdo da tela cheia, em vez de empurrá-la para baixo. Isso aumenta a altura do layout, mas obstrui a parte superior. Este é 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