How to Build Your Own IP Checker Website
Making your own "what's my IP" page is one of the friendliest first projects on the web. This practical guide shows how to build your own IP checker, from a tiny static page to a polished one with its own animal mascot.
Two ways to build an IP checker
Before any code, it helps to know that there are two honest ways to build an IP checker, and they differ in where the reading happens.
The first is server-side. If your page runs on a server — with something like Node, PHP, or Python behind it — the server already sees the visitor's public IP on the incoming connection and can print it straight into the HTML. The second is client-side. If your page is just static files with no backend, it cannot read the connection itself, so it asks a separate public IP API from the browser and shows whatever that service returns. Our companion article on how an IP checker works explains the mechanics of both in more depth.
For a first project, the client-side route is by far the easiest, because you do not need to run or pay for any server. So that is what we will build.
A static IP checker never sees your IP on its own. It borrows the answer from a public IP API, which sees your public address the normal way and hands it back to the browser.
The smallest possible version
Here is a complete, working "what's my IP" page. Save it as index.html, open it in a browser, and it will fetch and display your public IP address.
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>What's My IP?</title>
</head>
<body>
<h1>Your public IP address is:</h1>
<p id="ip">Loading…</p>
<script>
fetch('https://api.ipify.org?format=json')
.then(function (response) { return response.json(); })
.then(function (data) {
document.getElementById('ip').textContent = data.ip;
})
.catch(function () {
document.getElementById('ip').textContent = 'Sorry, could not load your IP.';
});
</script>
</body>
</html>That is the entire application. Let us walk through the important line.
The fetch() call sends a request to a public IP API — here, a well-known free one that returns JSON like {"ip":"203.0.113.42"}. The .then() steps turn the response into JSON and drop the ip value into the paragraph. The .catch() handles the case where the request fails, so your page degrades gracefully instead of sitting on "Loading…" forever.
Adding a friendly animal
A bare number is functional, but the whole charm of this genre is personality. Adding a mascot is just markup and a little style. You might drop in an emoji and a headline like this inside the <body>:
<div style="font-size: 4rem">🦊</div>
<h1>The fox has found your IP!</h1>
<p id="ip">Loading…</p>Pick any creature you like — a fox, a duck, a whale. You are now part of a long tradition, which our article on why there are so many animal IP websites affectionately explains. There is no committee to join; adding your animal is the whole ritual.
Choosing and respecting a public IP API
Your page leans entirely on the API you call, so choose thoughtfully. A few practical points:
- Use HTTPS. Always call the API over
https://so the response cannot be tampered with in transit. - Respect rate limits. Free APIs usually cap how many requests you can make. Do not poll in a tight loop; fetch once when the page loads.
- Have a fallback. If your first API is down, your
.catch()should show a friendly message rather than a broken page. - Check CORS. The API must allow browser requests from other sites. Reputable public IP APIs are built for exactly this and set the right headers.
| Extra you might add | Where it comes from | Reliability |
|---|---|---|
| Public IP | Public IP API | Accurate |
| Approximate location | A geolocation API | Often rough |
| Internet provider (ASN) | A geolocation / ASN API | Usually good |
| Browser details | navigator in JavaScript | Self-reported |
If you add a location line, be honest about it. As our guide on IP geolocation covers, that city is an estimate and can be badly wrong, so label it as approximate.
Hosting your static page
Because everything is HTML, CSS, and JavaScript, hosting is delightfully simple. You do not need a server that runs code — you only need somewhere to serve files. Options include free static-hosting platforms, an object storage bucket configured for website hosting, or any small web server you already run. Upload index.html, point a domain at it if you like, and you are live.
This is a big part of why the genre exists at all: the cost and effort to publish a working IP checker are close to zero, which is exactly the story told in our history of old-school IP checkers.
Where to go next
Once the basics work, the fun is in the polish: a copy-to-clipboard button, a dark mode, a little animation when your animal "finds" the IP. Keep the core honest and fast, and you will have built something in the same spirit as every creature in the IP Animals zoo. When you are ready to see how yours stacks up against the classics, our IP animal field guide is a fun tour of the species already out there.
Frequently asked questions
Do I need a server to build an IP checker?
No. A static HTML page with a little JavaScript can call a public IP API from the browser and display your address, so you can host the whole thing as static files with no backend at all.
How does the browser find my IP if there's no server code?
The page uses the fetch() function to request your IP from a public IP API. That API sees your public IP the normal way and returns it, and your JavaScript puts the value on the page.
Where can I host a static IP checker?
Anywhere that serves static files works: static hosting platforms, a simple object storage bucket configured for web hosting, or your own small web server. Since it is just HTML, CSS, and JavaScript, hosting is cheap and easy.
Is it legal and safe to make a "what's my IP" page?
Showing a visitor their own public IP is a normal, harmless thing that countless sites do. Just be transparent, respect any usage limits of the API you rely on, and avoid logging or misusing visitor data.