Ferramentas › Design
Estúdio de favicon e ícones de app
Transforme um logo em favicon.ico, apple-touch-icon, ícones adaptativos e maskable do Android, um conjunto AppIcon do iOS e site.webmanifest.
O que vem dentro
favicon.ico (16, 32, 48), favicons PNG, apple-touch-icon, ícones Android Chrome e maskable, site.webmanifest, um conjunto AppIcon do iOS para Xcode, mipmaps do Android com ícone adaptativo e este trecho de HTML:
<link rel="icon" href="/favicon.ico" sizes="48x48"> <link rel="icon" type="image/png" sizes="32x32" href="/favicon-32x32.png"> <link rel="icon" type="image/png" sizes="16x16" href="/favicon-16x16.png"> <link rel="apple-touch-icon" href="/apple-touch-icon.png"> <link rel="manifest" href="/site.webmanifest"> <meta name="theme-color" content="#F39A3D">
Como funciona
- Seu logo é desenhado em um canvas em cada tamanho, com zonas seguras para ícones maskable e adaptativos.
- O favicon.ico guarda PNGs de 16, 32 e 48 px, que todo navegador atual lê.
Perguntas
Qual imagem de origem funciona melhor?
Um SVG, ou um PNG quadrado de pelo menos 512×512 com um pouco de espaço vazio em volta da marca.