---
title: "Diretrizes criativas de notificações push na web"
slug: "web-push-creative-guidelines"
updated: 2026-06-12T10:30:57Z
published: 2026-06-12T10:30:57Z
canonical: "docs.xtremepush.com/web-push-creative-guidelines"
---

> ## Documentation Index
> Fetch the complete documentation index at: https://docs.xtremepush.com/llms.txt
> Use this file to discover all available pages before exploring further.

# Diretrizes criativas de notificações push na web

Melhores práticas ao criar notificações push web ricas

> [!NOTE]
> Tamanho máximo do arquivo
> 
> Todos os arquivos enviados para a plataforma devem ter menos que 2MB.

Notificações push web podem ser enriquecidas com dois tipos de imagem: ícones e imagens.

## Ícone

O *ícone* é uma imagem quadrada que está sempre presente na mensagem. Por padrão, o sistema usará o ícone de configurações do seu site como imagem *do ícone* .

- **Dimensões sugeridas**: 256x256 px (deve ser quadrado)
- **Formatos de imagem válidos**: PNG, JPG (JPEG), GIF (apenas animado no Firefox no Windows)

O painel de pré-visualização mostra como será a notificação push nas diferentes plataformas:

### Windows (desktop)

![982](https://cdn.document360.io/b056e88b-f6c1-4bd2-b5b8-08e9336a17c9/Images/Documentation/95c43b4-Screenshot_2022-10-14_at_16.11.18(1).png?sv=2026-02-06&spr=https&st=2026-11-04T09%3A28%3A44Z&se=2026-11-04T10%3A28%3A44Z&sr=c&sp=r&sig=VVpzOK79E2cpu4DjSLzkwUV6C1zDwdz2dyXymi9GKKk%3D)

### Apple (desktop)

![768](https://cdn.document360.io/b056e88b-f6c1-4bd2-b5b8-08e9336a17c9/Images/Documentation/8c32d2f-Screenshot_2022-10-14_at_16.12.29(1).png?sv=2026-02-06&spr=https&st=2026-11-04T09%3A28%3A44Z&se=2026-11-04T10%3A28%3A44Z&sr=c&sp=r&sig=VVpzOK79E2cpu4DjSLzkwUV6C1zDwdz2dyXymi9GKKk%3D)

### Android

![854](https://cdn.document360.io/b056e88b-f6c1-4bd2-b5b8-08e9336a17c9/Images/Documentation/95abd5b-Screenshot_2022-10-14_at_16.13.04(1).png?sv=2026-02-06&spr=https&st=2026-11-04T09%3A28%3A44Z&se=2026-11-04T10%3A28%3A44Z&sr=c&sp=r&sig=VVpzOK79E2cpu4DjSLzkwUV6C1zDwdz2dyXymi9GKKk%3D)

## Imagem

Adicionar uma *imagem* é uma opção opcional. É maior que o ícone e é uma ótima ferramenta para marketing de conteúdo.

- **Dimensões**: 512x256 px (a imagem pode ter outros tamanhos, mas a razão deve ser 2:1).
- **Formatos de imagem válidos**: PNG, JPG (JPEG)
- **Diferenças entre dispositivos móveis e desktop**: Diferentes proporções de corte em imagens de desktop podem até ser quadradas, enquanto o Android sempre cortará para uma proporção de 2:1.

> [!TIP]
> Corte de Android
> 
> No celular, o Android corta a parte superior e inferior da imagem conforme o tamanho da tela do celular. Portanto, não há uma dimensão específica, mas a área segura para o conteúdo fica no meio da imagem.

![362](https://cdn.document360.io/b056e88b-f6c1-4bd2-b5b8-08e9336a17c9/Images/Documentation/893a433-webpush_windows10_example(1).png?sv=2026-02-06&spr=https&st=2026-11-04T09%3A28%3A44Z&se=2026-11-04T10%3A28%3A44Z&sr=c&sp=r&sig=VVpzOK79E2cpu4DjSLzkwUV6C1zDwdz2dyXymi9GKKk%3D)

**Windows 10 (a notificação aparece no centro de notificações do Windows)**

![368](https://cdn.document360.io/b056e88b-f6c1-4bd2-b5b8-08e9336a17c9/Images/Documentation/9497bc5-webpush_windowsold_example(1).png?sv=2026-02-06&spr=https&st=2026-11-04T09%3A28%3A44Z&se=2026-11-04T10%3A28%3A44Z&sr=c&sp=r&sig=VVpzOK79E2cpu4DjSLzkwUV6C1zDwdz2dyXymi9GKKk%3D)

**Windows (versões anteriores do Windows usam a notificação padrão do Chrome)**

![640](https://cdn.document360.io/b056e88b-f6c1-4bd2-b5b8-08e9336a17c9/Images/Documentation/dba338c-webpush_android_example(1).jpg?sv=2026-02-06&spr=https&st=2026-11-04T09%3A28%3A44Z&se=2026-11-04T10%3A28%3A44Z&sr=c&sp=r&sig=VVpzOK79E2cpu4DjSLzkwUV6C1zDwdz2dyXymi9GKKk%3D)

**Android (o corte das áreas superior e inferior depende do tamanho da tela do celular)**