Guides / Finipix / Putting it online

Add a Favicon and Link Preview (Open Graph) to Your Page

By the Qorlize team · Last reviewed November 11, 2026

Finipix guide · Resize and compress images for the web. Open Finipix

You paste your new page's address into a group chat and the preview is a grey box with the bare URL, or worse, it shows last week's headline and an old photo. In the browser tab, the page has a blank generic icon. Both come from a few lines in the <head> of your HTML: the favicon links and the Open Graph tags. Neither is visible on the page itself, which is why they are easy to forget until the link goes out.

The favicon: the small icon in the tab

Browsers look for an icon declared with <link rel="icon"> in the head. A setup that covers current browsers and phones looks like this:

<link rel="icon" href="/favicon.ico" sizes="32x32">
<link rel="icon" href="/icon.svg" type="image/svg+xml">
<link rel="apple-touch-icon" href="/apple-touch-icon.png">

What each format is for:

If you only make one file, make a square 180×180 PNG and link it as both the icon and the apple-touch-icon. Browsers scale it down for the tab. Design it to read at 16 pixels: a single letter or simple mark works, a full logo with small text does not. For the touch icon, a solid background color is the safe choice; a transparent PNG may not look the way you expect on a home screen.

To make the full set without an image editor, the Favicon set tab in Finipix builds favicon.ico, 192 and 512-pixel PNGs and a 180-pixel apple-touch-icon with a background color you pick from one image, in the browser, along with the link tags to copy. Making a favicon set from your logo covers sizes, simplifying the design and testing in more detail.

Browsers cache favicons aggressively. If you change the icon and still see the old one, open the page in a private window, or rename the file (for example icon-v2.png) and update the link.

Link previews and the Open Graph tags

When you share a link in KakaoTalk, Facebook, LinkedIn, Slack, Discord or most other apps, a server belonging to that app fetches your page and reads its Open Graph tags. These are <meta property="og:…"> lines defined by the Open Graph protocol (ogp.me). If they are missing, the app guesses from the <title>, the description and the first image it finds, which is where odd previews come from.

<meta property="og:title" content="Spring Pop-up Store, Seongsu">
<meta property="og:description" content="March 14 to 30. Limited items, reservations open now.">
<meta property="og:image" content="https://www.example.com/images/og-popup.jpg">
<meta property="og:image:width" content="1200">
<meta property="og:image:height" content="630">
<meta property="og:image:alt" content="Storefront with the spring display">
<meta property="og:url" content="https://www.example.com/popup/">
<meta property="og:type" content="website">

• og:title: the headline in the preview. It can differ from the browser title; keep it short enough not to be cut off.
• og:description: one or two sentences. Some apps show only the first line.
• og:image: the picture. Meta's documentation recommends at least 1200×630 pixels, keeping close to a 1.91:1 ratio, with 600×315 as the minimum for the large preview layout. Keep text and faces away from the edges, because some apps crop to a square or a narrower shape. Finipix's Share image preset crops a picture to 1200×630 in the browser and lets you click the preview to choose which part stays.
• og:image:width / height: optional, but Meta notes that they let the preview render correctly the first time the link is shared.
• og:url: the canonical address of the page, without tracking parameters.
• og:type: website is right for a landing page. The Open Graph protocol lists it among the basic properties.

Use full addresses, not relative paths

This is the mistake that breaks most previews. Inside your page, images/og.jpg works because the browser resolves it against the page. The app's preview server reads the tag as plain text, so give it the complete address starting with https://. The same goes for og:url.

That also means the tags can only be finished once you know where the page will live. Add them after you have the final address (see how to put an HTML file online), and make sure the image file is actually uploaded to that address. A preview server cannot read files on your computer, and it cannot reach a page that requires a login.

KakaoTalk keeps old previews

KakaoTalk is where most Korean links get shared, and its preview has a habit that surprises people. Kakao's servers cache the preview information for a URL, and a post from Kakao on its developer forum says the same URL is cached for at least an hour, with preview images cached for several hours by image URL and separately on users' devices. So if you share the link once before the tags are right, fixing the HTML does not change what KakaoTalk shows.

Kakao Developers provides a tool for this. In its documentation it is called KakaoTalk URL meta information management (카카오톡 URL 메타정보 관리, found under the Tools menu); in Kakao's forum posts it is often called the sharing debugger. You need to sign in with a Kakao account to use it.

1. Sign in at developers.kakao.com and open the Tools menu, then the URL meta information tool.
2. Enter your page's address and look up the meta information. It shows what Kakao currently has cached.
3. Press the cache reset button (캐시 초기화), then share the link again in a chat to check.

If the text updates but the old image stays, change the image's URL: upload it as og-popup-v2.jpg, or add a query such as ?v=2, and update og:image. Because images are cached by their URL, a new address is the reliable way to force a new picture.

Testing before you send the link

• Facebook and Instagram links: Meta's Sharing Debugger (developers.facebook.com/tools/debug/) shows which tags its crawler read, lists errors and warnings, and fetches the page again, which also refreshes the cached preview.
• KakaoTalk: the Kakao tool above.
• Other apps: most have no public tool. Send the link to yourself or to a test chat. Some apps cache too, so test with the final tags, not a draft.
• Check the source: open the published page, press Ctrl+U to view the source, and confirm the tags are really there and every og:image address opens on its own in a new tab.

Adding the tags to your file

All of these go inside <head>, which you edit in a text editor such as VS Code or Notepad. Paste the block, replace the addresses and text, and save with UTF-8 encoding so Korean text in the tags is not garbled.

Finipage covers part of this. In the Document section of the properties panel you can edit the page title (<title>) and the description (meta name="description"), which some apps fall back to when Open Graph tags are missing. Favicon links and og: tags have no field in Finipage, so add them with a text editor. If you edit the page in Finipage afterwards, View HTML source lets you check that the head still contains them. Before sharing anything, go through the landing page checklist.

Want to try it on your own images? Open Finipix. It runs in your browser and your images stay on your device.