Favicon e ícone Apple Touch
Adicione ícones que apareçam nas abas do navegador e nas telas iniciais.
Favicon e ícone Apple Touch é uma aula grátis de HTML Academy no CoddyKit. Esta é a aula 4 de 4. Você pode ler a aula completa abaixo gratuitamente — depois pratica ao vivo no navegador com um editor de código integrado e um tutor de IA 24/7. Faz parte do caminho de aprendizado de HTML Academy, e seu progresso é sincronizado entre a web e o app CoddyKit. O curso de HTML Academy inclui 4 aulas no total.
O que é um ícone de favorito?
Um ícone de favorito é o pequeno ícone que aparece em:
- Abas do navegador
- Listas de favoritos
- Histórico do navegador
- Resultados de pesquisa (às vezes)
Ele ajuda os usuários a identificar seu site rapidamente entre várias abas abertas.
Link básico para ícone de favorito
Adicione um ícone de favorito com um elemento de link em head:
<head>
<!-- SVG favicon (modern, scales at any size) -->
<link rel="icon" type="image/svg+xml" href="/favicon.svg">
<!-- PNG fallback -->
<link rel="icon" type="image/png" href="/favicon.png">
<!-- Legacy ICO for Internet Explorer -->
<link rel="shortcut icon" href="/favicon.ico">
</head>Formatos de ícone de favorito
Estratégia recomendada para o formato do ícone de favorito:
- SVG — vetorial, redimensiona perfeitamente, arquivo pequeno (use primeiro)
- PNG 32x32 — alternativa para navegadores que não oferecem suporte a SVG
- ICO — formato legado que contém os tamanhos 16x16 e 32x32
Posicionamento do arquivo ICO
O arquivo favicon.ico na raiz do domínio é buscado automaticamente:
<!-- Browsers request /favicon.ico automatically -->
<!-- Placing it at the domain root means no link tag is needed:
/favicon.ico -- served without any HTML link tag
-->
<!-- But: specifying it explicitly is better: -->
<link rel="icon" href="/favicon.ico" sizes="32x32">Atributo sizes
O atributo sizes especifica as dimensões do ícone:
<link rel="icon" href="/icon-16.png" sizes="16x16">
<link rel="icon" href="/icon-32.png" sizes="32x32">
<link rel="icon" href="/icon-64.png" sizes="64x64">Ícone do Apple Touch
O ícone do Apple Touch aparece quando os usuários adicionam seu site à tela de início do iOS:
<link rel="apple-touch-icon" href="/apple-touch-icon.png">
<!-- Recommended size: 180x180 px -->
<!-- Used by: iOS Safari, some Android browsers -->
<!-- Apple applies rounded corners and gloss effect automatically -->
<!-- Pre-composited icon (no transparency) looks best -->Ícones maskable para Android
Aplicativos PWA do Android usam ícones maskable que preenchem o formato do ícone:
<link rel="manifest" href="/manifest.json">
<!-- In manifest.json: -->
<!--
{
"icons": [
{
"src": "/icon-192.png",
"sizes": "192x192",
"type": "image/png",
"purpose": "any maskable"
}
]
}
-->Ícone de favorito para modo escuro
Forneça um ícone de favorito SVG compatível com o modo escuro:
<!-- SVG favicon with dark mode support: -->
<!-- In /favicon.svg: -->
<!--
<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 32 32">
<style>
@media (prefers-color-scheme: dark) {
.icon-bg { fill: white; }
.icon-mark { fill: black; }
}
.icon-bg { fill: #0070f3; }
.icon-mark { fill: white; }
</style>
<circle class="icon-bg" cx="16" cy="16" r="16"/>
<text class="icon-mark" x="50%" y="60%">C</text>
</svg>
-->Manifesto de aplicativo web para ícones PWA
Configuração completa de ícones para Progressive Web Apps:
<link rel="manifest" href="/manifest.json">
<!-- manifest.json icons array: -->
<!--
"icons": [
{ "src": "/icon-192.png", "sizes": "192x192", "type": "image/png" },
{ "src": "/icon-512.png", "sizes": "512x512", "type": "image/png" }
]
-->Configuração completa do ícone de favorito
Uma configuração moderna completa para o ícone de favorito:
<head>
<!-- SVG: scales to any size, supports dark mode -->
<link rel="icon" type="image/svg+xml" href="/favicon.svg">
<!-- PNG fallback -->
<link rel="icon" type="image/png" href="/favicon-32.png" sizes="32x32">
<!-- Apple home screen -->
<link rel="apple-touch-icon" href="/apple-touch-icon.png">
<!-- PWA manifest (for Android home screen) -->
<link rel="manifest" href="/manifest.json">
</head>Testando ícones de favorito
Como verificar a configuração do ícone de favorito:
- Recarregue completamente (Ctrl+Shift+R / Cmd+Shift+R) para limpar o ícone de favorito armazenado em cache
- Use a ferramenta Favicon Checker (realfavicongenerator.net)
- Teste em um dispositivo iOS real o ícone do Apple Touch
- Verifique o manifesto PWA com Lighthouse → auditoria de PWA
Verificação rápida
Qual é o tamanho recomendado para as imagens do ícone do Apple Touch?
Recapitulação: ícones de favorito
Elementos essenciais dos ícones de favorito:
- Ícone de favorito SVG — moderno, redimensionável e compatível com o modo escuro
- PNG 32x32 — alternativa para navegadores sem suporte a SVG
- ICO na raiz — alternativa legada para IE
apple-touch-icon180×180 — tela de início do iOS- Manifesto de aplicativo web — ícones PWA do Android (192px e 512px)
Perguntas Frequentes
A aula “Favicon e ícone Apple Touch” é grátis?
Sim — o texto completo de “Favicon e ícone Apple Touch” é grátis para ler aqui na web. Para praticá-la interativamente (um editor de código integrado e um tutor de IA 24/7) e desbloquear o restante do curso de HTML Academy, atualize para CoddyKit PRO. O curso de HTML Academy inclui 4 aulas no total.
O que vou aprender em “Favicon e ícone Apple Touch”?
Adicione ícones que apareçam nas abas do navegador e nas telas iniciais. Você pratica HTML Academy com código prático que executa diretamente no navegador, e um tutor de IA 24/7 responde suas dúvidas enquanto trabalha na aula.
Preciso ter experiência prévia para começar HTML Academy?
Nenhuma experiência prévia é necessária. HTML Academy no CoddyKit é estruturado para alunos iniciantes até avançados, então você pode começar aqui ou desde o início e aprender no seu ritmo. Esta é a aula 4 de 4.
Quanto tempo leva a aula “Favicon e ícone Apple Touch”?
A maioria das aulas CoddyKit leva cerca de 5–10 minutos. Cada uma é compacta e interativa, então você faz progresso constante e retoma exatamente de onde parou entre web e app.
Posso escrever e executar código nesta aula de HTML Academy?
Sim. Cada aula de HTML Academy inclui um editor de código integrado, então você escreve e executa código real direto no navegador e recebe feedback de IA instantaneamente — nenhuma configuração local necessária.
Todas as aulas deste curso
- title e seu papel no SEO
- meta charset viewport author e description
- URLs canônicas e meta robots
- Favicon e ícone Apple Touch