[Como] Criar um Favicon e Apple Ícone para o seu site

Apple iPad / iPhone

Há alguns anos, os favicons que haviam perdido muito de sua relevância ressuscitaram, pois cada vez mais navegadores os suportam e, de fato, os tornam uma parte muito visual da experiência do usuário. Tablets e navegadores de smartphone também usam esses ícones. Isso aumentou a importância de ter um bom favicon. No entanto, as formas de apresentação desses ícones variam de acordo com o cliente que navega no site. Os desktops exigem um determinado ícone, Apple dispositivos exigem algo diferente, tamanhos diferentes também complicam as coisas. 

 

Uma solução simples - Free Online Icon Generator para Apple e ícones Favicon

 Iconifier.net é uma solução simples que, dado um quadrado JPG, GIF ou PNG, irá gerar um conjunto de ícones de vários tamanhos para que você possa usar e escolher aqueles que deseja apoiar em seu site. Você só precisa fazer o download dos ícones gerados e incorporá-los ao código do seu site. Você pode integrar essas etapas em seu processo de design da web.

Incorpore o (s) ícone (s) de favicons ao seu site

Depois de criar o ícone favicon.ico usando Iconifier.net acima, e colocá-lo na raiz do seu site, adicione o seguinte código entre o e do seu site

A Apple Ícones

Depois de criar os vários ícones usando o site acima, você também terá que incluir um código ligeiramente diferente para Apple Dispositivos iPhone / iPad (e possivelmente Android). Novamente carregue os arquivos de ícone gerados na raiz do seu site e coloque o seguinte código entre as tags HEAD.

<link rel=”apple-touch-icon ”tamanhos =” 114 × 114 ″ href = ”/ touch-icon-114 × 114.png” />

<link rel=”apple-touch-icon ”tamanhos =” 72 × 72 ″ href = ”/ touch-icon-72 × 72.png” />

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

Dispositivos iOS irão lidar com isso automaticamente em seus navegadores e redimensionar e adicionar alguns efeitos de acordo para que correspondam ao estilo do dispositivo em que estão sendo vistos.

A propósito, ótimos desenvolvedores de iOS e Android não são fáceis de contratar - se você está procurando um bom desenvolvedor de aplicativos e sabe como encontrar um bom candidato nós temos você coberto CollectiveRay. - mostraremos todos os ótimos lugares para encontrar bons candidatos.

Ícones para dispositivos Android

Android foi construído com base no Apple toque nos ícones, mas espere que os ícones já estejam em sua versão final. Esta versão final é "PRECOMPOSED" e os dispositivos Android esperam que esta tag esteja no lugar. Portanto, carregue novas versões, com nomes ligeiramente diferentes (como adicionar pré-compostos no nome) e, em seguida, adicione a seguinte marcação. A parte mais importante é o rel =apple-touch-icon-pré-composto. Coloque os arquivos na raiz do seu site e adicione este código entre os e tags do seu html

<link rel=”apple-tocar-ícone-pré-composto ”tamanhos =” 114 × 114 ″ href = ”/apple-touch-icon-114 × 114-precomposed.png ”>

<link rel=”apple-tocar-ícone-pré-composto ”tamanhos =” 72 × 72 ″ href = ”/apple-touch-icon-72 × 72-precomposed.png ”>

<link rel=”apple-touch-icon-precomposed ”href =” / touch-icon-iphone-precomposed.png ”>

Mais detalhes sobre os Favicons podem ser encontrados na Wikepedia: https://en.wikipedia.org/wiki/Favicon

Sobre o autor
David Attard
Autor: David AttardSite: https://www.linkedin.com/in/dattard/
David tem trabalhado na ou em torno da indústria online / digital nos últimos 18 anos. Ele tem vasta experiência nas indústrias de software e web design usando WordPress, Joomla e nichos ao seu redor. Como consultor digital, seu foco é ajudar as empresas a obter uma vantagem competitiva usando uma combinação de seu website e plataformas digitais disponíveis hoje.

Mais uma coisa... Você sabia que as pessoas que compartilham coisas úteis como esta postagem também parecem FANTÁSTICAS? ;-)
. deixe um útil comente com suas ideias, depois compartilhe com seu (s) grupo (s) do Facebook, que considerariam isso útil e vamos colher os benefícios juntos. Obrigado por compartilhar e ser legal!

Divulgação: Esta página pode conter links para sites externos de produtos que amamos e recomendamos de todo o coração. Se você comprar produtos que sugerimos, podemos receber uma taxa de referência. Essas taxas não influenciam nossas recomendações e não aceitamos pagamentos por análises positivas.

 

quem somos nós?

CollectiveRay é administrado por David Attard - trabalhando dentro e ao redor do nicho de web design por mais de 12 anos, oferecemos dicas práticas para pessoas que trabalham com e em sites. Também administramos DronesBuy.net - um site para entusiastas de drones.

David Attard

 

 

Autor (es) em destaque em:  Logotipo da revista Inc   Logotipo do Sitepoint   Logotipo do CSS Tricks    logotipo do webdesignerdepot   Logotipo WPMU DEV   e muitos mais ...