How to Add a Favicon to Your HTML Page

hdply · 2026-07-17

Open your site and look at the browser tab: if you see a blank page icon, you're missing a favicon. It's a small detail, but it's the difference between a page that looks unfinished and one that looks intentional — especially when someone has a dozen tabs open and picks yours by its icon.

What a favicon is

A favicon ("favorite icon") is the little image shown in the browser tab, in bookmarks, and in history. Browsers look for one automatically; if they don't find it, you get the default document glyph.

The quickest way: an emoji favicon

You don't even need an image file. A tiny inline SVG turns an emoji into a favicon — paste this into your <head> and change the emoji:

<link rel="icon" href="data:image/svg+xml,<svg xmlns=%22http://www.w3.org/2000/svg%22 viewBox=%220 0 100 100%22><text y=%22.9em%22 font-size=%2290%22>🚀</text></svg>">

No files to upload, no extra requests — perfect for a single self-contained page.

The standard way: an image file

For a real logo, make a square PNG (512 × 512 is a good source size), then reference it:

<link rel="icon" type="image/png" href="/favicon.png">

Upload favicon.png next to your HTML. On hdply, that means adding the image to the same site so it's served from the same address. Browsers cache favicons hard, so after changing one you may need a forced refresh to see it update.

Covering phones and high-res screens

To look sharp when someone saves your page to a phone home screen, add one more line pointing at a larger icon:

<link rel="apple-touch-icon" href="/apple-touch-icon.png">

A 180 × 180 PNG covers iOS. You don't need the old pile of a dozen icon sizes that tutorials from years ago recommended — a modern PNG favicon plus one touch icon is plenty.

Why it isn't showing up

Three usual culprits: the path is wrong (the file isn't where the href says), the browser cached the old state (hard-refresh), or the file isn't actually deployed (open the favicon's URL directly — if it 404s, that's your answer).