Want to replace a plain Home Screen icon with your own photo, logo, or design? Canva is often the first tool people recommend. It's useful, but it only solves part of the problem.
Designing an icon image and placing that image on your Home Screen are two different tasks. The right workflow depends on whether you want to launch an existing app, open a website, or provide a branded link to other people.
Here's how to make the image, choose a tool, and use it on iPhone or Android.
Start with a square image
A 512 × 512 px or larger square image is a practical starting point. You can design at 1024 × 1024 px for extra working room, but 1024 px is not a universal installation requirement.
PNG is a dependable format for logos, shapes, and text. Photos can also be edited as JPEGs. Transparent backgrounds may look different depending on the platform and installation method, so use a solid background if you want a more predictable result.
Remember how small Home Screen icons appear. A clear shape, strong contrast, and a little padding usually work better than tiny text or elaborate details. You generally don't need to round the image corners yourself: the operating system often handles that when displaying the icon.
Which tool should you use to design the icon?
Canva: best for matching designs
Canva works well when you want a coordinated set of icons with consistent colors, typography, and shapes.
A simple workflow:
- Create a custom 1024 × 1024 px design.
- Choose a background color and add your photo, logo, or shapes.
- Preview it at a small size to check readability.
- Export the finished image as a PNG.
If you need a transparent PNG, check whether that export option is available on your plan. Canva is great for designing the artwork, but exporting an image doesn't change any Home Screen icon by itself.
Photos and basic editors: best for quick personal icons
If you're using a pet photo, a portrait, or an existing image, a basic photo editor may be all you need. Crop the image to a square, keep the main subject near the center, and adjust brightness or contrast if necessary.
This approach is quick and requires little design work. Its limitation is consistency: creating a whole set of matching icons is easier with a dedicated design tool.
OJapp: for turning a URL into a Home Screen entry
OJapp is not a drawing or photo-editing tool. It lets you associate a chosen image and name with a URL that people can open from their Home Screen.
For example, you can design a logo in Canva and use it as the icon for your blog, store, or profile page. The image editor creates the artwork; OJapp handles the URL-based Home Screen entry.
It does not replace the installed icon of an arbitrary native app. The final appearance and launch behavior also depend on the browser and operating system.
Quick comparison by goal
| Your goal | A suitable approach |
|---|---|
| Design a custom icon from scratch | Canva |
| Turn a photo into an icon image | Photos or a basic editor |
| Launch an app or URL from a custom image on iPhone | Apple Shortcuts |
| Give a webpage its own custom Home Screen entry | OJapp or a similar URL-based tool |
| Set the official icon for a website you control | Web App Manifest and related site settings |
The key distinction is between creating the image and deciding what the icon opens.
How to add a custom icon on iPhone
For a personal icon that launches an app or opens a URL, Apple's built-in Shortcuts app is a common choice.
- Create a new shortcut.
- Add an action such as Open App or Open URLs.
- Choose Add to Home Screen from the shortcut's options or sharing menu.
- Set the name and select your icon image.
- Add it to your Home Screen.
The exact menu labels can vary with iOS versions.
This creates a new shortcut icon, not a replacement for the original app's icon. The original app remains installed and unchanged.
You can also add websites directly from Safari. However, Safari may use the site's own icon configuration, so direct website installation does not always let you choose an arbitrary image.
How to add a custom icon on Android
On Android, browsers such as Chrome can offer Add to Home screen or Install for websites. Depending on the site and browser, the result may be a shortcut or an installed web app.
The icon often comes from the website's metadata and the browser's installation behavior. Android does not offer one universal built-in method for assigning any image to every app or URL.
To customize existing app icons, check the features of your device's launcher or its support for icon packs. The steps vary across manufacturers and launchers.
If you manage the website itself, you can configure its Web App Manifest. Supplying suitable icons, including a maskable variant where appropriate, can improve how the icon fits different Android shapes.
Why does my icon look wrong?
A few common problems are easy to check:
- Blurry: The original image may be too small or stretched.
- Cropped: Move important details away from the edges.
- Unexpected background: Check how transparency is handled.
- Old artwork: The browser or operating system may still be using a previously saved icon.
- Different appearance across devices: iOS, Android, browsers, and launchers do not all render icons identically.
Web Home Screen icons do not necessarily update as soon as the source image changes. When testing a new design, remove the old Home Screen entry if necessary and add it again on a real device.
Conclusion: design first, then choose how it launches
To make a Home Screen icon, start with a clean square image. Use Canva for coordinated designs or a photo editor for a quick personal image.
Then decide what that image should open. Shortcuts is useful for personal iPhone launchers. URL-based tools can create custom entries for websites. On Android, your browser and launcher determine which options are available.
The important question isn't just where you design the icon. It's what you want that icon to do.
