Olá pessoal,hoje eu vou ensinar como colocar um ícone no seu site, para adicionar na tela de início do iPad,iPhone e iPod um atalho de seu no dispositivo,vou ensinar para colocar em WordPress e Blogger. O ícone de atalho poder ser uma ótima opção para quem não tem aplicativo próprio de seu site (via FTP).
No WordPress.org
1. Primeiramente escolha os ícones que irão aparecer e envie no formato PNG ao diretório raiz do seu site.
2. No seu painel do wordpress vá em Aparência > Editor e Procure pelo arquivo “Header.php”,dentro do arquivo Header.php procure por “<head>” e insira o código abaixo embaixo de <head>.
Em href=”” (no código) coloque o título da imagem do ícone. Se você colocou o título do ícone de íconedoiphone.png o href=”” ficará assim: href=”íconedoiphone.png”
Código
<link rel="apple-touch-icon" href="títulodaimagemiphone.png" /> <link rel="apple-touch-icon" sizes="72x72" href="títulodaimagemparaipad.png" /> <link rel="apple-touch-icon" sizes="114x114" href="títulodaimagemparaiphoneretina.png" /> <link rel="apple-touch-icon" sizes="144x144" href="títulodaimagemparaipadretina.png" />
Resoluções:
- iPhone e iPod Touch: 57×57 píxels
- iPad: 72×72 píxels
- iPhone com retina: 114×114 píxels
- iPad com retina: 144×144 pixels
<link rel="apple-touch-icon-precomposed"
Sem sombra,seu código ficará assim,observe o “precomposed”
<link rel="apple-touch-icon-precomposed" href="títulodaimagemiphone.png" /> <link rel="apple-touch-icon-precomposed" sizes="72x72" href="títulodaimagemparaipad.png" /> <link rel="apple-touch-icon-precomposed" sizes="114x114" href="títulodaimagemparaiphoneretina.png" /> <link rel="apple-touch-icon-precomposed" sizes="144x144" href="títulodaimagemparaipadretina.png" />
Após fazer todos os passos clique em “Atualizar Arquivo” e veja o seu ícone pelo dispositivo
No Blogger
Adicionar um ícone no Blogger é diferente do wordpress.org
1. Em seu painel do Blogger vá em Modelo > Editar HTML > Procure por <head> e adicione o código.
Coloque embaixo de <head> :
No Blogger,ao invés de você colocar o título do ícone você deve colocar a URL do ícone,seu código ficará assim:
Código
<link href='urldoícone' rel='apple-touch-icon'/>
Clique para ampliar
O iOS insere automaticamente no ícone uma sombra,para tirar essa sombra mude o rel=”apple-touch-icon” para:
rel="apple-touch-icon-precomposed"
Comments