How to Add a Web Host Pro Banner or Logo to Your Website

Web Host Pro provides official banners, logos, icons, and a “Hosted by Web Host Pro” graphic that can be downloaded or hotlinked. The post outlines how to choose an appropriate size, copy the HTML code, and add the image in WordPress, Joomla, or custom HTML sites.

It also recommends making the image responsive, testing it on desktop and mobile, and using proper alt text and safe external-link attributes. The article ends by directing readers to browse the official files and contact support if the graphic does not display correctly.

Want to show that your website is hosted by Web Host Pro, recommend us to your visitors, or simply add a professional graphic to your site? You can use one of our official banners or logos without creating anything from scratch.

Web Host Pro provides several banner sizes, light and dark logos, standalone icons, and a “Hosted by Web Host Pro” graphic. You can either download the image and host it on your own website or use the provided hotlink code.

Step 1: Choose a Banner or Logo

Start by deciding what type of image fits your website best.

728 × 90 banner: A good choice for wide content areas, blog posts, headers, and footers.
Square banner: Works well in sidebars, resource pages, and promotional sections.
Full Web Host Pro logo: Best for partner pages, hosting credits, and website footers.
Web Host Pro icon: Useful when space is limited or you want a more subtle graphic.
Hosted by Web Host Pro graphic: A simple way to show visitors who powers your website.

Step 2: Decide Whether to Download or Hotlink the Image

You have two ways to add the image to your website.

Option 1: Download the Image

Downloading the file gives you full control. The image stays on your website even if the official banner or logo collection changes later.

Download the image from the banner or logo page, upload it to your website, and insert it through your website builder or content management system.

Option 2: Use the Hotlink Code

Hotlinking is faster because you can copy and paste the provided HTML without uploading a file. The image loads directly from the Web Host Pro media server.

Official banners and logos may be updated over time. If you want to keep a specific design permanently, downloading and hosting it on your own website is the safer choice.

Step 3: Copy the Banner or Logo Code

Each image page includes ready-to-use HTML. Copy the code shown beneath the banner or logo you want to use.

For example, this code displays the official 728 × 90 Web Host Pro banner and links it to the Web Host Pro website:

<a href="https://webhostpro.com/" target="_blank" rel="noopener"><img src="https://hotlink.webhost.pro/banners-26/simplifiedhosting26.webp" alt="Web Host Pro simplified web hosting" style="max-width:100%;height:auto;"></a>

This example displays the Hosted by Web Host Pro logo:

<a href="https://webhostpro.com/" target="_blank" rel="noopener"><img src="https://hotlink.webhost.pro/hostedbywebhostpro.png" alt="Hosted by Web Host Pro" width="350" height="70" style="max-width:100%;height:auto"></a>

Step 4: Add It to Your Website

WordPress

Open the page, post, footer, or widget area where you want the image to appear.
Add a Custom HTML block.
Paste the banner or logo code into the block.
Preview the page and publish your changes.

If you downloaded the image instead, add an Image block, upload the file, and link the image to https://webhostpro.com/.

Joomla or Another Website Builder

Look for a Custom HTML, Code, Embed, Image, Module, or Content Block option. Paste the HTML code into that area, or upload the downloaded image through the builder’s media manager.

Custom HTML Website

Open the HTML file for the page you want to update and paste the code where the image should appear. You can edit website files through cPanel File Manager, DirectAdmin File Manager, or an FTP program.

Step 5: Make the Image Responsive

A wide banner may look perfect on a desktop computer but overflow on a phone. Adding the following style keeps the image inside the available space:

style="max-width:100%;height:auto;"

A complete responsive image would look like this:

<img
  src="https://hotlink.webhost.pro/banners/cloud/728x90.webp"
  alt="Web Host Pro"
  width="728"
  height="90"
  style="max-width:100%;height:auto;"
>

The banner will remain at its normal size when enough space is available and automatically shrink on smaller screens.

Step 6: Preview and Test It

Before calling it finished, check the page on both a desktop computer and a phone.

Make sure the image loads correctly.
Click it and confirm that it opens the intended page.
Check that it does not extend beyond the page or overlap nearby content.
Confirm that the logo has enough contrast against the background.
Test both light and dark logo versions to see which one looks cleaner.

A Few Tips for Better Results

Do not stretch small images. Enlarging a small logo or banner can make it look blurry.
Use the correct logo version. Light logos work best on dark backgrounds, while dark logos work best on light backgrounds.
Keep banners away from clutter. A little empty space around the image makes it easier to notice and read.
Use meaningful alternative text. Text such as alt="Web Host Pro" helps visitors using screen readers understand the image.
Open external links safely. When using target="_blank", also include rel="noopener".
Download designs you want to keep. Official media may be refreshed as Web Host Pro branding changes.

Get the Official Files

Ready to add one to your website?

If the banner or logo does not display correctly, contact Web Host Pro support. We can help you find the right code, image size, or placement for your website.