Przejdź do treści
Icons byFox
← Wszystkie poradniki

Przewodnik programisty

Ikony powiadomień Android: jak usunąć biały kwadrat

Przygotuj małą ikonę z przezroczystością, pobierz warianty drawable i podłącz je przez setSmallIcon().

Porównanie nieprzezroczystego kwadratu i sylwetki ikony powiadomień.
Porównanie nieprzezroczystego kwadratu i sylwetki ikony powiadomień.

Jeśli powiadomienie pokazuje biały kwadrat zamiast logo, eksport większej ikony launchera nie rozwiąże problemu. Mała ikona powiadomienia musi opisywać sylwetkę z przezroczystym otoczeniem. Nieprzezroczyste tło staje się częścią tej sylwetki.

Przygotuj źródło

Użyj prostego znaku z przezroczystością. Unikaj zdjęć, cieniowanego tła i drobnych napisów. Biały znak może być niewidoczny na białym obszarze roboczym, dlatego sprawdź go na szachownicy lub ciemnym tle. Źródło do pobrania zawiera biały kształt bez prostokąta w tle.

Image Asset Studio w Android Studio ma osobny tryb ikon powiadomień i generuje białe ikony dla współczesnego Androida. Google udostępnia również Material Symbols w formatach do pobrania, jeśli potrzebujesz symbolu na początek. Sprawdź licencję dołączoną do tych materiałów.

Wyeksportuj właściwy format

W Generatorze Ikon od Fox'a dodaj Android Notification i wybierz jego podgląd. Dopasuj wielkość źródła pod kątem czytelności i pobierz eksport. Ten format pomija tło launchera i ozdobne badge. Dla obrazów korzysta z przezroczystości źródła: nie usuwa automatycznie tła fotografii.

Obecny eksport przedstawia małą ikonę 24 dp w pięciu gęstościach:

Katalog Rozmiar PNG
drawable-mdpi 24 × 24 px
drawable-hdpi 36 × 36 px
drawable-xhdpi 48 × 48 px
drawable-xxhdpi 72 × 72 px
drawable-xxxhdpi 96 × 96 px

To zestaw tworzony przez ten generator, a nie lista wszystkich możliwych obrazów w powiadomieniu. Duża grafika powiadomienia jest osobnym assetem.

Podłącz ikonę do powiadomienia

Scal wyeksportowane res/ z src/main/res/ modułu aplikacji. Przy domyślnej nazwie odwołaj się do zasobu podczas budowania powiadomienia:

val builder = NotificationCompat.Builder(context, channelId)
    .setSmallIcon(R.drawable.ic_stat_notification)
    .setContentTitle("Eksport zakończony")
    .setContentText("Twoje ikony są gotowe")

Przykład zakłada istniejący kanał powiadomień i standardową obsługę uprawnień w aplikacji. Pokazuje odwołanie do ikony, a nie kompletną implementację powiadomień. Po zmianie nazwy eksportu użyj nazwy zasobu z jego README.

Sprawdź typowe błędy

Jeśli cały obszar jest wypełniony, otwórz źródło i poszukaj jednolitego tła. Jeśli symbol jest za mały, przed zwiększeniem skali sprawdź przezroczyste marginesy. Jeśli Android pokazuje stary znak, sprawdź zasób wskazany w kodzie, który faktycznie wysyła powiadomienie.

Nie podstawiaj warstwy tematycznej launchera tylko dlatego, że jest monochromatyczna. Wymiary eksportu i miejsce użycia są inne. Zachowaj osobne zasoby launchera i powiadomień, aby każdy dopracować w jego docelowym rozmiarze.

Koło bezpiecznego obszaru w podglądzie

W panelu Kompozycja włącz Koło bezpiecznego obszaru. Suwakiem Średnica koła ustaw wartość od 20% do 100% krótszego boku ikony; domyślnie jest to 80%. Dopasuj skalę i położenie grafiki, obserwując jej odstęp od koła.

Nakładka służy wyłącznie do podglądu — nie trafia do PNG ani ZIP-a. Jej ustawienia są zapamiętywane w tej przeglądarce, ale nie są częścią udostępnianego projektu. W tym formacie koło jest jedynie pomocą do wyśrodkowania i oceny odstępów. Nie jest wymaganą maską ikony powiadomienia; nadal sprawdź czytelność małej sylwetki.

Pobierz i wypróbuj

Autorskie przykłady Fox'a: do edycji i bezpłatnego użytku komercyjnego. Diagramy służą jako instrukcja; do eksportu użyj źródłowego SVG.

Oficjalna dokumentacja i szablony

Sprawdź to w praktyce

Podejrzyj i wygeneruj ikony w Generatorze Ikon od Fox'a. Darmowy eksport, bez konta, a Twoje grafiki zostają w przeglądarce.

Otwórz generator ikon →

Android adaptive icons: warstwy, safe zone i instalacja

Przygotuj pierwszy plan i tło, sprawdź maski launchera i dodaj eksport res do projektu Android.

Czytaj poradnik →

Ikony tematyczne Android: warstwa monochrome

Przygotuj czytelną ikonę monochromatyczną, wyeksportuj zasoby Android i sprawdź je w launcherze obsługującym ikony tematyczne.

Czytaj poradnik →

Rozmiary ikon iOS: od PNG do AppIcon.appiconset

Poznaj rozmiary eksportu iOS, zaimportuj Contents.json do Xcode i wybierz katalog assetów lub Icon Composer.

Czytaj poradnik →

Rozmiary favicon: ICO, Apple touch icon i manifest PWA

Dodaj favicony i ikony PWA, skonfiguruj site.webmanifest i sprawdź bezpieczny obszar ikony maskable.

Czytaj poradnik →

Jak zapisać projekt ikon i wrócić do niego później

Zapisz ustawienia, warianty i własne grafiki w ZIP, a następnie bezpiecznie odtwórz projekt w generatorze.

Czytaj poradnik →

Tło gradientowe i podgląd samej ikony

Dobierz kolory i kierunek gradientu, porównaj warianty platform i sprawdź ikonę bez otaczającego interfejsu systemu.

Czytaj poradnik →