HTML Link Rel Generator

Loading tool...

What is HTML Link Rel Generator?

An HTML link tag connects a page to another resource or declares a relationship in the document head. Developers use link tags for canonical URLs, language alternates, icons, preload hints, preconnect hints, stylesheets, and more. This tool helps beginners avoid missing attributes such as as, type, href, or crossorigin.

How to use this tool

Choose the rel value that matches the relationship or browser hint you need.
Enter the href path or URL.
Add as, type, and crossorigin only when they apply to the selected rel value.
Copy the generated tag into the head section of your HTML.

What you can use it for

Create a preload tag for a font, script, image, or stylesheet.
Add preconnect or dns-prefetch for third-party origins.
Build link tags without forgetting as, type, or crossorigin attributes.

Use cases

Practical examples

Example

Preload a key stylesheet

A small site has a critical CSS file. The tool can generate a preload tag with the correct rel, href, as, and type attributes.

Example

Preconnect to a font host

A page uses a third-party font provider. A preconnect tag can prepare the browser connection before the font file is requested.

Common mistakes

Preloading too many resources.
Using preload without the correct as attribute.
Adding preconnect to domains that are not used on the page.

FAQ

Questions about HTML Link Rel Generator

When should I use preload?

Use preload for a small number of critical resources that the browser needs early. Do not preload every image, script, or stylesheet.

What does the as attribute do?

The as attribute tells the browser what type of resource is being preloaded, such as style, script, font, image, or fetch.

Do preconnect tags improve every page?

No. Preconnect is useful for important third-party origins. Extra preconnect tags can waste browser resources.