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

  1. Seu logo é desenhado em um canvas em cada tamanho, com zonas seguras para ícones maskable e adaptativos.
  2. 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.