Tutoriais

Como criar um ícone de atalho do seu site para adicionar a tela de início do iPhone

5
Apple touch icon

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
Clique para ampliar

Apple touch icon - WordPress

O iOS insere automaticamente no ícone uma sombra,para tirar essa sombra mude o <link rel=”apple-touch-icon” para:
<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" />

Sombra

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

no blogger

O iOS insere automaticamente no ícone uma sombra,para tirar essa sombra mude o rel=”apple-touch-icon” para:

rel="apple-touch-icon-precomposed"

Seu código ficará assim,observe :

<link href='urldoícone' rel='apple-touch-icon-precomposed'/>

Sombra

Após fazer todos esses passos toquem em “Salvar” e veja o ícone pelo seu dispositivo.

TechApple

Como encontrar o número de série, o IMEI, o MEID, o CDN e o número do ICCID de seu iPhone,iPad e iPod touch

Previous article

Como transferir aplicativos para iPhone e iPad

Next article

You may also like

Comments

Leave a reply

O seu endereço de e-mail não será publicado. Campos obrigatórios são marcados com *

More in Tutoriais