How to Add Token Logo in MetaMask？

If a token is already indexed by major platforms (e.g. CoinGecko, CoinMarketCap, Etherscan), you can use their “Add to MetaMask” buttons to import both the token and its official logo. If the token isn’t yet indexed—or you want full control over the appearance—integrate MetaMask’s wallet_watchAsset API in your own website or DApp to prompt users to add the token with your custom logo.

I. Quick Manual Methods for Users

1. Via CoinGecko

Open the token’s page on CoinGecko.
Click the “Add to MetaMask” (fox icon) button.
Confirm in the MetaMask popup to import the token and its logo.

Tip: Supported on both desktop and mobile; on mobile, open CoinGecko in MetaMask’s built‑in browser.

2. Via CoinMarketCap

Visit the token’s detail page on CoinMarketCap.
Click the fox icon next to the token name.
Confirm in the wallet popup to add the token and logo.

3. Via Block Explorers (Etherscan, BscScan, Polygonscan, etc.)

Navigate to the token’s contract page on the relevant explorer.
From the “More” menu, select “Add token to MetaMask.”
Confirm in the MetaMask dialog to import the logo along with the token.

Note: If the explorer itself doesn’t yet display a logo, you must first submit the logo (via PR or support request) to that explorer.

II. Automatic Integration for Developers (EIP‑747)

Token issuers or DApp developers can leverage MetaMask’s wallet_watchAsset RPC to trigger an “Add Asset” popup with your custom logo.

1. API Overview

Method: wallet_watchAsset
Standard: EIP‑747 (Ethereum Improvement Proposal)
Purpose: Prompts MetaMask to add a specified token (with logo) to the user’s asset list.

2. Example Code

const tokenAddress = “0xYourTokenContractAddress”;
const tokenSymbol = “SYM”; // ≤5 characters
const tokenDecimals= 18; // decimals
const tokenImage = “https://yourdomain/logo.png”; // must use HTTPS

try {
const wasAdded = await window.ethereum.request({
method: “wallet_watchAsset”,
params: {
type: “ERC20”, // or other supported types
options: {
address: tokenAddress,
symbol: tokenSymbol,
decimals: tokenDecimals,
image: tokenImage,
},
},
});
if (wasAdded) {
console.log(“Token successfully added to MetaMask!”);
} else {
console.log(“User rejected the request.”);
}
} catch (error) {
console.error(“Failed to add token:”, error);
}

This also works for experimental NFT support and other EVM‑based tokens.

III. Important Notes

HTTPS Logo: The image URL must use HTTPS.
Network Matching: Ensure the user’s network matches the token’s chain ID.
Centralized Indexing: MetaMask’s built‑in search relies on its own database; unlisted tokens still require manual or API methods.
Security Reminder: Only add tokens from trusted sources to avoid phishing or fake logos.

By following the user manual and developer integration approaches above, you can ensure your token—and its logo—appear correctly in MetaMask.

© Original content by PandaAcademy
Unauthorized reproduction prohibited. Credit required when sharing.
PandaAcademy, a Web3 educational brand by PandaTool, positions as an open skills academy for the Web3 era.

本文由PandaAcademy原创，如若转载，请注明出处：https://academy.pandatool.org/en_US/kn/974

。PandaAcademy是PandaTool旗下的Web3学习中心，专注于向普通用户提供区块链和加密货币知识输出