Free migration We move your site for you. Most sites within 24 hours.

Badges

Love Blue Arctic? Spread the word.

If your website runs on Blue Arctic, you can add a small credit to its footer. Choose a style, copy the code and paste it in. It’s entirely optional, and nothing about your account depends on it.

Choose a Badge
Affiliate Program

Choose your style

Footer badges

Every badge is one link and a small block of CSS. The black and white versions turn full colour on hover and on keyboard focus.

Minimal

The mark or the logo on its own. No wording, nothing to read: the quietest way to leave a credit.

Blue Arctic

Icon, black

Black by default, full colour on hover and keyboard focus · 35 × 28 px · for light footers

<!-- Blue Arctic badge -->
<a class="ba-badge ba-badge--lg" href="https://www.bluearctic.com/?utm_source=customer-site&amp;utm_medium=footer&amp;utm_campaign=spread-the-word">
    <span class="ba-badge__art">
      <img src="https://www.bluearctic.com/assets/images/brand/baicon-black.png" width="35" height="28" alt="Blue Arctic" loading="lazy">
      <img src="https://www.bluearctic.com/assets/images/brand/baicon-color.png" width="35" height="28" alt="" loading="lazy">
    </span>
</a>
<style>
.ba-badge{display:inline-flex;align-items:center;gap:.7em;text-decoration:none;color:#000;
  font:600 10px/1 -apple-system,BlinkMacSystemFont,"Segoe UI",Roboto,Arial,sans-serif;
  letter-spacing:.09em;text-transform:uppercase}
.ba-badge:hover,.ba-badge:focus-visible{text-decoration:none}
.ba-badge__art{position:relative;display:block;flex:none}
.ba-badge__art img{display:block;width:auto;height:22px}
.ba-badge--lg .ba-badge__art img{height:28px}
.ba-badge__art img+img{position:absolute;top:0;left:0;opacity:0;transition:opacity .2s ease}
.ba-badge:hover .ba-badge__art img+img,
.ba-badge:focus-visible .ba-badge__art img+img{opacity:1}
@media (prefers-reduced-motion:reduce){.ba-badge__art img+img{transition:none}}
</style>

Select the code above to copy it.

Blue Arctic

Icon, white

White by default, full colour on hover and keyboard focus · 35 × 28 px · for dark footers

<!-- Blue Arctic badge -->
<a class="ba-badge ba-badge--lg ba-badge--light" href="https://www.bluearctic.com/?utm_source=customer-site&amp;utm_medium=footer&amp;utm_campaign=spread-the-word">
    <span class="ba-badge__art">
      <img src="https://www.bluearctic.com/assets/images/brand/baicon-white.png" width="35" height="28" alt="Blue Arctic" loading="lazy">
      <img src="https://www.bluearctic.com/assets/images/brand/baicon-color.png" width="35" height="28" alt="" loading="lazy">
    </span>
</a>
<style>
.ba-badge{display:inline-flex;align-items:center;gap:.7em;text-decoration:none;color:#000;
  font:600 10px/1 -apple-system,BlinkMacSystemFont,"Segoe UI",Roboto,Arial,sans-serif;
  letter-spacing:.09em;text-transform:uppercase}
.ba-badge:hover,.ba-badge:focus-visible{text-decoration:none}
.ba-badge--light{color:#fff}
.ba-badge__art{position:relative;display:block;flex:none}
.ba-badge__art img{display:block;width:auto;height:22px}
.ba-badge--lg .ba-badge__art img{height:28px}
.ba-badge__art img+img{position:absolute;top:0;left:0;opacity:0;transition:opacity .2s ease}
.ba-badge:hover .ba-badge__art img+img,
.ba-badge:focus-visible .ba-badge__art img+img{opacity:1}
@media (prefers-reduced-motion:reduce){.ba-badge__art img+img{transition:none}}
</style>

Select the code above to copy it.

Blue Arctic

Icon, full colour

Full colour, unchanged on hover · 35 × 28 px · for light footers

<!-- Blue Arctic badge -->
<a class="ba-badge ba-badge--lg ba-badge--static" href="https://www.bluearctic.com/?utm_source=customer-site&amp;utm_medium=footer&amp;utm_campaign=spread-the-word">
    <span class="ba-badge__art">
      <img src="https://www.bluearctic.com/assets/images/brand/baicon-color.png" width="35" height="28" alt="Blue Arctic" loading="lazy">
    </span>
</a>
<style>
.ba-badge{display:inline-flex;align-items:center;gap:.7em;text-decoration:none;color:#000;
  font:600 10px/1 -apple-system,BlinkMacSystemFont,"Segoe UI",Roboto,Arial,sans-serif;
  letter-spacing:.09em;text-transform:uppercase}
.ba-badge:hover,.ba-badge:focus-visible{text-decoration:none}
.ba-badge__art{position:relative;display:block;flex:none}
.ba-badge__art img{display:block;width:auto;height:22px}
.ba-badge--lg .ba-badge__art img{height:28px}
.ba-badge--static .ba-badge__art{transition:opacity .2s ease}
.ba-badge--static:hover .ba-badge__art,
.ba-badge--static:focus-visible .ba-badge__art{opacity:.85}
@media (prefers-reduced-motion:reduce){.ba-badge--static .ba-badge__art{transition:none}}
</style>

Select the code above to copy it.

Blue Arctic

Logo, black

Black by default, full colour on hover and keyboard focus · 147 × 22 px · for light footers

<!-- Blue Arctic badge -->
<a class="ba-badge" href="https://www.bluearctic.com/?utm_source=customer-site&amp;utm_medium=footer&amp;utm_campaign=spread-the-word">
    <span class="ba-badge__art">
      <img src="https://www.bluearctic.com/assets/images/brand/balogo-black.png" width="147" height="22" alt="Blue Arctic" loading="lazy">
      <img src="https://www.bluearctic.com/assets/images/brand/balogo-color-black.png" width="147" height="22" alt="" loading="lazy">
    </span>
</a>
<style>
.ba-badge{display:inline-flex;align-items:center;gap:.7em;text-decoration:none;color:#000;
  font:600 10px/1 -apple-system,BlinkMacSystemFont,"Segoe UI",Roboto,Arial,sans-serif;
  letter-spacing:.09em;text-transform:uppercase}
.ba-badge:hover,.ba-badge:focus-visible{text-decoration:none}
.ba-badge__art{position:relative;display:block;flex:none}
.ba-badge__art img{display:block;width:auto;height:22px}
.ba-badge__art img+img{position:absolute;top:0;left:0;opacity:0;transition:opacity .2s ease}
.ba-badge:hover .ba-badge__art img+img,
.ba-badge:focus-visible .ba-badge__art img+img{opacity:1}
@media (prefers-reduced-motion:reduce){.ba-badge__art img+img{transition:none}}
</style>

Select the code above to copy it.

Blue Arctic

Logo, white

White by default, full colour on hover and keyboard focus · 147 × 22 px · for dark footers

<!-- Blue Arctic badge -->
<a class="ba-badge ba-badge--light" href="https://www.bluearctic.com/?utm_source=customer-site&amp;utm_medium=footer&amp;utm_campaign=spread-the-word">
    <span class="ba-badge__art">
      <img src="https://www.bluearctic.com/assets/images/brand/balogo-white.png" width="147" height="22" alt="Blue Arctic" loading="lazy">
      <img src="https://www.bluearctic.com/assets/images/brand/balogo-color-white.png" width="147" height="22" alt="" loading="lazy">
    </span>
</a>
<style>
.ba-badge{display:inline-flex;align-items:center;gap:.7em;text-decoration:none;color:#000;
  font:600 10px/1 -apple-system,BlinkMacSystemFont,"Segoe UI",Roboto,Arial,sans-serif;
  letter-spacing:.09em;text-transform:uppercase}
.ba-badge:hover,.ba-badge:focus-visible{text-decoration:none}
.ba-badge--light{color:#fff}
.ba-badge__art{position:relative;display:block;flex:none}
.ba-badge__art img{display:block;width:auto;height:22px}
.ba-badge__art img+img{position:absolute;top:0;left:0;opacity:0;transition:opacity .2s ease}
.ba-badge:hover .ba-badge__art img+img,
.ba-badge:focus-visible .ba-badge__art img+img{opacity:1}
@media (prefers-reduced-motion:reduce){.ba-badge__art img+img{transition:none}}
</style>

Select the code above to copy it.

Blue Arctic

Logo, full colour

Full colour, unchanged on hover · 147 × 22 px · for light footers

<!-- Blue Arctic badge -->
<a class="ba-badge ba-badge--static" href="https://www.bluearctic.com/?utm_source=customer-site&amp;utm_medium=footer&amp;utm_campaign=spread-the-word">
    <span class="ba-badge__art">
      <img src="https://www.bluearctic.com/assets/images/brand/balogo-color-black.png" width="147" height="22" alt="Blue Arctic" loading="lazy">
    </span>
</a>
<style>
.ba-badge{display:inline-flex;align-items:center;gap:.7em;text-decoration:none;color:#000;
  font:600 10px/1 -apple-system,BlinkMacSystemFont,"Segoe UI",Roboto,Arial,sans-serif;
  letter-spacing:.09em;text-transform:uppercase}
.ba-badge:hover,.ba-badge:focus-visible{text-decoration:none}
.ba-badge__art{position:relative;display:block;flex:none}
.ba-badge__art img{display:block;width:auto;height:22px}
.ba-badge--static .ba-badge__art{transition:opacity .2s ease}
.ba-badge--static:hover .ba-badge__art,
.ba-badge--static:focus-visible .ba-badge__art{opacity:.85}
@media (prefers-reduced-motion:reduce){.ba-badge--static .ba-badge__art{transition:none}}
</style>

Select the code above to copy it.

Blue Arctic

Logo, full colour on dark

Full colour, unchanged on hover · 147 × 22 px · for dark footers

<!-- Blue Arctic badge -->
<a class="ba-badge ba-badge--light ba-badge--static" href="https://www.bluearctic.com/?utm_source=customer-site&amp;utm_medium=footer&amp;utm_campaign=spread-the-word">
    <span class="ba-badge__art">
      <img src="https://www.bluearctic.com/assets/images/brand/balogo-color-white.png" width="147" height="22" alt="Blue Arctic" loading="lazy">
    </span>
</a>
<style>
.ba-badge{display:inline-flex;align-items:center;gap:.7em;text-decoration:none;color:#000;
  font:600 10px/1 -apple-system,BlinkMacSystemFont,"Segoe UI",Roboto,Arial,sans-serif;
  letter-spacing:.09em;text-transform:uppercase}
.ba-badge:hover,.ba-badge:focus-visible{text-decoration:none}
.ba-badge--light{color:#fff}
.ba-badge__art{position:relative;display:block;flex:none}
.ba-badge__art img{display:block;width:auto;height:22px}
.ba-badge--static .ba-badge__art{transition:opacity .2s ease}
.ba-badge--static:hover .ba-badge__art,
.ba-badge--static:focus-visible .ba-badge__art{opacity:.85}
@media (prefers-reduced-motion:reduce){.ba-badge--static .ba-badge__art{transition:none}}
</style>

Select the code above to copy it.

Hosting credits

Says who runs the hosting. Pick the wording that reads naturally next to the rest of your footer.

Hosted by Blue Arctic

Hosted by, icon, black

Black by default, full colour on hover and keyboard focus · about 180 × 22 px · for light footers

<!-- Blue Arctic badge -->
<a class="ba-badge" href="https://www.bluearctic.com/?utm_source=customer-site&amp;utm_medium=footer&amp;utm_campaign=spread-the-word">
    <span class="ba-badge__art">
      <img src="https://www.bluearctic.com/assets/images/brand/baicon-black.png" width="27" height="22" alt="" loading="lazy">
      <img src="https://www.bluearctic.com/assets/images/brand/baicon-color.png" width="27" height="22" alt="" loading="lazy">
    </span>
    <span class="ba-badge__text">Hosted by <b>Blue Arctic</b></span>
</a>
<style>
.ba-badge{display:inline-flex;align-items:center;gap:.7em;text-decoration:none;color:#000;
  font:600 10px/1 -apple-system,BlinkMacSystemFont,"Segoe UI",Roboto,Arial,sans-serif;
  letter-spacing:.09em;text-transform:uppercase}
.ba-badge:hover,.ba-badge:focus-visible{text-decoration:none}
.ba-badge__art{position:relative;display:block;flex:none}
.ba-badge__art img{display:block;width:auto;height:22px}
.ba-badge__art img+img{position:absolute;top:0;left:0;opacity:0;transition:opacity .2s ease}
.ba-badge:hover .ba-badge__art img+img,
.ba-badge:focus-visible .ba-badge__art img+img{opacity:1}
.ba-badge b{font-weight:800}
@media (prefers-reduced-motion:reduce){.ba-badge__art img+img{transition:none}}
</style>

Select the code above to copy it.

Hosted by Blue Arctic

Hosted by, icon, white

White by default, full colour on hover and keyboard focus · about 180 × 22 px · for dark footers

<!-- Blue Arctic badge -->
<a class="ba-badge ba-badge--light" href="https://www.bluearctic.com/?utm_source=customer-site&amp;utm_medium=footer&amp;utm_campaign=spread-the-word">
    <span class="ba-badge__art">
      <img src="https://www.bluearctic.com/assets/images/brand/baicon-white.png" width="27" height="22" alt="" loading="lazy">
      <img src="https://www.bluearctic.com/assets/images/brand/baicon-color.png" width="27" height="22" alt="" loading="lazy">
    </span>
    <span class="ba-badge__text">Hosted by <b>Blue Arctic</b></span>
</a>
<style>
.ba-badge{display:inline-flex;align-items:center;gap:.7em;text-decoration:none;color:#000;
  font:600 10px/1 -apple-system,BlinkMacSystemFont,"Segoe UI",Roboto,Arial,sans-serif;
  letter-spacing:.09em;text-transform:uppercase}
.ba-badge:hover,.ba-badge:focus-visible{text-decoration:none}
.ba-badge--light{color:#fff}
.ba-badge__art{position:relative;display:block;flex:none}
.ba-badge__art img{display:block;width:auto;height:22px}
.ba-badge__art img+img{position:absolute;top:0;left:0;opacity:0;transition:opacity .2s ease}
.ba-badge:hover .ba-badge__art img+img,
.ba-badge:focus-visible .ba-badge__art img+img{opacity:1}
.ba-badge b{font-weight:800}
@media (prefers-reduced-motion:reduce){.ba-badge__art img+img{transition:none}}
</style>

Select the code above to copy it.

Hosted by Blue Arctic

Hosted by, icon, full colour

Full colour, unchanged on hover · about 180 × 22 px · for light footers

<!-- Blue Arctic badge -->
<a class="ba-badge ba-badge--static" href="https://www.bluearctic.com/?utm_source=customer-site&amp;utm_medium=footer&amp;utm_campaign=spread-the-word">
    <span class="ba-badge__art">
      <img src="https://www.bluearctic.com/assets/images/brand/baicon-color.png" width="27" height="22" alt="" loading="lazy">
    </span>
    <span class="ba-badge__text">Hosted by <b>Blue Arctic</b></span>
</a>
<style>
.ba-badge{display:inline-flex;align-items:center;gap:.7em;text-decoration:none;color:#000;
  font:600 10px/1 -apple-system,BlinkMacSystemFont,"Segoe UI",Roboto,Arial,sans-serif;
  letter-spacing:.09em;text-transform:uppercase}
.ba-badge:hover,.ba-badge:focus-visible{text-decoration:none}
.ba-badge__art{position:relative;display:block;flex:none}
.ba-badge__art img{display:block;width:auto;height:22px}
.ba-badge--static .ba-badge__art{transition:opacity .2s ease}
.ba-badge--static:hover .ba-badge__art,
.ba-badge--static:focus-visible .ba-badge__art{opacity:.85}
.ba-badge b{font-weight:800}
@media (prefers-reduced-motion:reduce){.ba-badge--static .ba-badge__art{transition:none}}
</style>

Select the code above to copy it.

Hosted by Blue Arctic

Hosted by, logo, black

Black by default, full colour on hover and keyboard focus · about 175 × 15 px · for light footers

<!-- Blue Arctic badge -->
<a class="ba-badge ba-badge--xs" href="https://www.bluearctic.com/?utm_source=customer-site&amp;utm_medium=footer&amp;utm_campaign=spread-the-word">
    <span class="ba-badge__text">Hosted by</span>
    <span class="ba-badge__art">
      <img src="https://www.bluearctic.com/assets/images/brand/balogo-black.png" width="100" height="15" alt="Blue Arctic" loading="lazy">
      <img src="https://www.bluearctic.com/assets/images/brand/balogo-color-black.png" width="100" height="15" alt="" loading="lazy">
    </span>
</a>
<style>
.ba-badge{display:inline-flex;align-items:center;gap:.7em;text-decoration:none;color:#000;
  font:600 10px/1 -apple-system,BlinkMacSystemFont,"Segoe UI",Roboto,Arial,sans-serif;
  letter-spacing:.09em;text-transform:uppercase}
.ba-badge:hover,.ba-badge:focus-visible{text-decoration:none}
.ba-badge__art{position:relative;display:block;flex:none}
.ba-badge__art img{display:block;width:auto;height:22px}
.ba-badge--xs .ba-badge__art img{height:15px}
.ba-badge__art img+img{position:absolute;top:0;left:0;opacity:0;transition:opacity .2s ease}
.ba-badge:hover .ba-badge__art img+img,
.ba-badge:focus-visible .ba-badge__art img+img{opacity:1}
@media (prefers-reduced-motion:reduce){.ba-badge__art img+img{transition:none}}
</style>

Select the code above to copy it.

Hosted by Blue Arctic

Hosted by, logo, white

White by default, full colour on hover and keyboard focus · about 175 × 15 px · for dark footers

<!-- Blue Arctic badge -->
<a class="ba-badge ba-badge--xs ba-badge--light" href="https://www.bluearctic.com/?utm_source=customer-site&amp;utm_medium=footer&amp;utm_campaign=spread-the-word">
    <span class="ba-badge__text">Hosted by</span>
    <span class="ba-badge__art">
      <img src="https://www.bluearctic.com/assets/images/brand/balogo-white.png" width="100" height="15" alt="Blue Arctic" loading="lazy">
      <img src="https://www.bluearctic.com/assets/images/brand/balogo-color-white.png" width="100" height="15" alt="" loading="lazy">
    </span>
</a>
<style>
.ba-badge{display:inline-flex;align-items:center;gap:.7em;text-decoration:none;color:#000;
  font:600 10px/1 -apple-system,BlinkMacSystemFont,"Segoe UI",Roboto,Arial,sans-serif;
  letter-spacing:.09em;text-transform:uppercase}
.ba-badge:hover,.ba-badge:focus-visible{text-decoration:none}
.ba-badge--light{color:#fff}
.ba-badge__art{position:relative;display:block;flex:none}
.ba-badge__art img{display:block;width:auto;height:22px}
.ba-badge--xs .ba-badge__art img{height:15px}
.ba-badge__art img+img{position:absolute;top:0;left:0;opacity:0;transition:opacity .2s ease}
.ba-badge:hover .ba-badge__art img+img,
.ba-badge:focus-visible .ba-badge__art img+img{opacity:1}
@media (prefers-reduced-motion:reduce){.ba-badge__art img+img{transition:none}}
</style>

Select the code above to copy it.

Hosted by Blue Arctic

Hosted by, logo, full colour

Full colour, unchanged on hover · about 175 × 15 px · for light footers

<!-- Blue Arctic badge -->
<a class="ba-badge ba-badge--xs ba-badge--static" href="https://www.bluearctic.com/?utm_source=customer-site&amp;utm_medium=footer&amp;utm_campaign=spread-the-word">
    <span class="ba-badge__text">Hosted by</span>
    <span class="ba-badge__art">
      <img src="https://www.bluearctic.com/assets/images/brand/balogo-color-black.png" width="100" height="15" alt="Blue Arctic" loading="lazy">
    </span>
</a>
<style>
.ba-badge{display:inline-flex;align-items:center;gap:.7em;text-decoration:none;color:#000;
  font:600 10px/1 -apple-system,BlinkMacSystemFont,"Segoe UI",Roboto,Arial,sans-serif;
  letter-spacing:.09em;text-transform:uppercase}
.ba-badge:hover,.ba-badge:focus-visible{text-decoration:none}
.ba-badge__art{position:relative;display:block;flex:none}
.ba-badge__art img{display:block;width:auto;height:22px}
.ba-badge--xs .ba-badge__art img{height:15px}
.ba-badge--static .ba-badge__art{transition:opacity .2s ease}
.ba-badge--static:hover .ba-badge__art,
.ba-badge--static:focus-visible .ba-badge__art{opacity:.85}
@media (prefers-reduced-motion:reduce){.ba-badge--static .ba-badge__art{transition:none}}
</style>

Select the code above to copy it.

Hosting by Blue Arctic

Hosting by, icon, black

Black by default, full colour on hover and keyboard focus · about 185 × 22 px · for light footers

<!-- Blue Arctic badge -->
<a class="ba-badge" href="https://www.bluearctic.com/?utm_source=customer-site&amp;utm_medium=footer&amp;utm_campaign=spread-the-word">
    <span class="ba-badge__art">
      <img src="https://www.bluearctic.com/assets/images/brand/baicon-black.png" width="27" height="22" alt="" loading="lazy">
      <img src="https://www.bluearctic.com/assets/images/brand/baicon-color.png" width="27" height="22" alt="" loading="lazy">
    </span>
    <span class="ba-badge__text">Hosting by <b>Blue Arctic</b></span>
</a>
<style>
.ba-badge{display:inline-flex;align-items:center;gap:.7em;text-decoration:none;color:#000;
  font:600 10px/1 -apple-system,BlinkMacSystemFont,"Segoe UI",Roboto,Arial,sans-serif;
  letter-spacing:.09em;text-transform:uppercase}
.ba-badge:hover,.ba-badge:focus-visible{text-decoration:none}
.ba-badge__art{position:relative;display:block;flex:none}
.ba-badge__art img{display:block;width:auto;height:22px}
.ba-badge__art img+img{position:absolute;top:0;left:0;opacity:0;transition:opacity .2s ease}
.ba-badge:hover .ba-badge__art img+img,
.ba-badge:focus-visible .ba-badge__art img+img{opacity:1}
.ba-badge b{font-weight:800}
@media (prefers-reduced-motion:reduce){.ba-badge__art img+img{transition:none}}
</style>

Select the code above to copy it.

Hosting by Blue Arctic

Hosting by, icon, white

White by default, full colour on hover and keyboard focus · about 185 × 22 px · for dark footers

<!-- Blue Arctic badge -->
<a class="ba-badge ba-badge--light" href="https://www.bluearctic.com/?utm_source=customer-site&amp;utm_medium=footer&amp;utm_campaign=spread-the-word">
    <span class="ba-badge__art">
      <img src="https://www.bluearctic.com/assets/images/brand/baicon-white.png" width="27" height="22" alt="" loading="lazy">
      <img src="https://www.bluearctic.com/assets/images/brand/baicon-color.png" width="27" height="22" alt="" loading="lazy">
    </span>
    <span class="ba-badge__text">Hosting by <b>Blue Arctic</b></span>
</a>
<style>
.ba-badge{display:inline-flex;align-items:center;gap:.7em;text-decoration:none;color:#000;
  font:600 10px/1 -apple-system,BlinkMacSystemFont,"Segoe UI",Roboto,Arial,sans-serif;
  letter-spacing:.09em;text-transform:uppercase}
.ba-badge:hover,.ba-badge:focus-visible{text-decoration:none}
.ba-badge--light{color:#fff}
.ba-badge__art{position:relative;display:block;flex:none}
.ba-badge__art img{display:block;width:auto;height:22px}
.ba-badge__art img+img{position:absolute;top:0;left:0;opacity:0;transition:opacity .2s ease}
.ba-badge:hover .ba-badge__art img+img,
.ba-badge:focus-visible .ba-badge__art img+img{opacity:1}
.ba-badge b{font-weight:800}
@media (prefers-reduced-motion:reduce){.ba-badge__art img+img{transition:none}}
</style>

Select the code above to copy it.

Hosting by Blue Arctic

Hosting by, icon, full colour

Full colour, unchanged on hover · about 185 × 22 px · for light footers

<!-- Blue Arctic badge -->
<a class="ba-badge ba-badge--static" href="https://www.bluearctic.com/?utm_source=customer-site&amp;utm_medium=footer&amp;utm_campaign=spread-the-word">
    <span class="ba-badge__art">
      <img src="https://www.bluearctic.com/assets/images/brand/baicon-color.png" width="27" height="22" alt="" loading="lazy">
    </span>
    <span class="ba-badge__text">Hosting by <b>Blue Arctic</b></span>
</a>
<style>
.ba-badge{display:inline-flex;align-items:center;gap:.7em;text-decoration:none;color:#000;
  font:600 10px/1 -apple-system,BlinkMacSystemFont,"Segoe UI",Roboto,Arial,sans-serif;
  letter-spacing:.09em;text-transform:uppercase}
.ba-badge:hover,.ba-badge:focus-visible{text-decoration:none}
.ba-badge__art{position:relative;display:block;flex:none}
.ba-badge__art img{display:block;width:auto;height:22px}
.ba-badge--static .ba-badge__art{transition:opacity .2s ease}
.ba-badge--static:hover .ba-badge__art,
.ba-badge--static:focus-visible .ba-badge__art{opacity:.85}
.ba-badge b{font-weight:800}
@media (prefers-reduced-motion:reduce){.ba-badge--static .ba-badge__art{transition:none}}
</style>

Select the code above to copy it.

Hosting by Blue Arctic

Hosting by, logo, black

Black by default, full colour on hover and keyboard focus · about 180 × 15 px · for light footers

<!-- Blue Arctic badge -->
<a class="ba-badge ba-badge--xs" href="https://www.bluearctic.com/?utm_source=customer-site&amp;utm_medium=footer&amp;utm_campaign=spread-the-word">
    <span class="ba-badge__text">Hosting by</span>
    <span class="ba-badge__art">
      <img src="https://www.bluearctic.com/assets/images/brand/balogo-black.png" width="100" height="15" alt="Blue Arctic" loading="lazy">
      <img src="https://www.bluearctic.com/assets/images/brand/balogo-color-black.png" width="100" height="15" alt="" loading="lazy">
    </span>
</a>
<style>
.ba-badge{display:inline-flex;align-items:center;gap:.7em;text-decoration:none;color:#000;
  font:600 10px/1 -apple-system,BlinkMacSystemFont,"Segoe UI",Roboto,Arial,sans-serif;
  letter-spacing:.09em;text-transform:uppercase}
.ba-badge:hover,.ba-badge:focus-visible{text-decoration:none}
.ba-badge__art{position:relative;display:block;flex:none}
.ba-badge__art img{display:block;width:auto;height:22px}
.ba-badge--xs .ba-badge__art img{height:15px}
.ba-badge__art img+img{position:absolute;top:0;left:0;opacity:0;transition:opacity .2s ease}
.ba-badge:hover .ba-badge__art img+img,
.ba-badge:focus-visible .ba-badge__art img+img{opacity:1}
@media (prefers-reduced-motion:reduce){.ba-badge__art img+img{transition:none}}
</style>

Select the code above to copy it.

Hosting by Blue Arctic

Hosting by, logo, white

White by default, full colour on hover and keyboard focus · about 180 × 15 px · for dark footers

<!-- Blue Arctic badge -->
<a class="ba-badge ba-badge--xs ba-badge--light" href="https://www.bluearctic.com/?utm_source=customer-site&amp;utm_medium=footer&amp;utm_campaign=spread-the-word">
    <span class="ba-badge__text">Hosting by</span>
    <span class="ba-badge__art">
      <img src="https://www.bluearctic.com/assets/images/brand/balogo-white.png" width="100" height="15" alt="Blue Arctic" loading="lazy">
      <img src="https://www.bluearctic.com/assets/images/brand/balogo-color-white.png" width="100" height="15" alt="" loading="lazy">
    </span>
</a>
<style>
.ba-badge{display:inline-flex;align-items:center;gap:.7em;text-decoration:none;color:#000;
  font:600 10px/1 -apple-system,BlinkMacSystemFont,"Segoe UI",Roboto,Arial,sans-serif;
  letter-spacing:.09em;text-transform:uppercase}
.ba-badge:hover,.ba-badge:focus-visible{text-decoration:none}
.ba-badge--light{color:#fff}
.ba-badge__art{position:relative;display:block;flex:none}
.ba-badge__art img{display:block;width:auto;height:22px}
.ba-badge--xs .ba-badge__art img{height:15px}
.ba-badge__art img+img{position:absolute;top:0;left:0;opacity:0;transition:opacity .2s ease}
.ba-badge:hover .ba-badge__art img+img,
.ba-badge:focus-visible .ba-badge__art img+img{opacity:1}
@media (prefers-reduced-motion:reduce){.ba-badge__art img+img{transition:none}}
</style>

Select the code above to copy it.

Hosting by Blue Arctic

Hosting by, logo, full colour

Full colour, unchanged on hover · about 180 × 15 px · for light footers

<!-- Blue Arctic badge -->
<a class="ba-badge ba-badge--xs ba-badge--static" href="https://www.bluearctic.com/?utm_source=customer-site&amp;utm_medium=footer&amp;utm_campaign=spread-the-word">
    <span class="ba-badge__text">Hosting by</span>
    <span class="ba-badge__art">
      <img src="https://www.bluearctic.com/assets/images/brand/balogo-color-black.png" width="100" height="15" alt="Blue Arctic" loading="lazy">
    </span>
</a>
<style>
.ba-badge{display:inline-flex;align-items:center;gap:.7em;text-decoration:none;color:#000;
  font:600 10px/1 -apple-system,BlinkMacSystemFont,"Segoe UI",Roboto,Arial,sans-serif;
  letter-spacing:.09em;text-transform:uppercase}
.ba-badge:hover,.ba-badge:focus-visible{text-decoration:none}
.ba-badge__art{position:relative;display:block;flex:none}
.ba-badge__art img{display:block;width:auto;height:22px}
.ba-badge--xs .ba-badge__art img{height:15px}
.ba-badge--static .ba-badge__art{transition:opacity .2s ease}
.ba-badge--static:hover .ba-badge__art,
.ba-badge--static:focus-visible .ba-badge__art{opacity:.85}
@media (prefers-reduced-motion:reduce){.ba-badge--static .ba-badge__art{transition:none}}
</style>

Select the code above to copy it.

Proudly hosted by Blue Arctic

Proudly hosted by, black

Black by default, full colour on hover and keyboard focus · about 165 × 32 px · for light footers

<!-- Blue Arctic badge -->
<a class="ba-badge ba-badge--lg ba-badge--stack" href="https://www.bluearctic.com/?utm_source=customer-site&amp;utm_medium=footer&amp;utm_campaign=spread-the-word">
    <span class="ba-badge__art">
      <img src="https://www.bluearctic.com/assets/images/brand/baicon-black.png" width="35" height="28" alt="" loading="lazy">
      <img src="https://www.bluearctic.com/assets/images/brand/baicon-color.png" width="35" height="28" alt="" loading="lazy">
    </span>
    <span class="ba-badge__text">Proudly hosted by <b>Blue Arctic</b></span>
</a>
<style>
.ba-badge{display:inline-flex;align-items:center;gap:.7em;text-decoration:none;color:#000;
  font:600 10px/1 -apple-system,BlinkMacSystemFont,"Segoe UI",Roboto,Arial,sans-serif;
  letter-spacing:.09em;text-transform:uppercase}
.ba-badge:hover,.ba-badge:focus-visible{text-decoration:none}
.ba-badge__art{position:relative;display:block;flex:none}
.ba-badge__art img{display:block;width:auto;height:22px}
.ba-badge--lg .ba-badge__art img{height:28px}
.ba-badge__art img+img{position:absolute;top:0;left:0;opacity:0;transition:opacity .2s ease}
.ba-badge:hover .ba-badge__art img+img,
.ba-badge:focus-visible .ba-badge__art img+img{opacity:1}
.ba-badge b{font-weight:800}
.ba-badge--stack .ba-badge__text{line-height:1.5}
.ba-badge--stack b{display:block;font-size:11.5px}
@media (prefers-reduced-motion:reduce){.ba-badge__art img+img{transition:none}}
</style>

Select the code above to copy it.

Proudly hosted by Blue Arctic

Proudly hosted by, white

White by default, full colour on hover and keyboard focus · about 165 × 32 px · for dark footers

<!-- Blue Arctic badge -->
<a class="ba-badge ba-badge--lg ba-badge--light ba-badge--stack" href="https://www.bluearctic.com/?utm_source=customer-site&amp;utm_medium=footer&amp;utm_campaign=spread-the-word">
    <span class="ba-badge__art">
      <img src="https://www.bluearctic.com/assets/images/brand/baicon-white.png" width="35" height="28" alt="" loading="lazy">
      <img src="https://www.bluearctic.com/assets/images/brand/baicon-color.png" width="35" height="28" alt="" loading="lazy">
    </span>
    <span class="ba-badge__text">Proudly hosted by <b>Blue Arctic</b></span>
</a>
<style>
.ba-badge{display:inline-flex;align-items:center;gap:.7em;text-decoration:none;color:#000;
  font:600 10px/1 -apple-system,BlinkMacSystemFont,"Segoe UI",Roboto,Arial,sans-serif;
  letter-spacing:.09em;text-transform:uppercase}
.ba-badge:hover,.ba-badge:focus-visible{text-decoration:none}
.ba-badge--light{color:#fff}
.ba-badge__art{position:relative;display:block;flex:none}
.ba-badge__art img{display:block;width:auto;height:22px}
.ba-badge--lg .ba-badge__art img{height:28px}
.ba-badge__art img+img{position:absolute;top:0;left:0;opacity:0;transition:opacity .2s ease}
.ba-badge:hover .ba-badge__art img+img,
.ba-badge:focus-visible .ba-badge__art img+img{opacity:1}
.ba-badge b{font-weight:800}
.ba-badge--stack .ba-badge__text{line-height:1.5}
.ba-badge--stack b{display:block;font-size:11.5px}
@media (prefers-reduced-motion:reduce){.ba-badge__art img+img{transition:none}}
</style>

Select the code above to copy it.

Proudly hosted by Blue Arctic

Proudly hosted by, full colour

Full colour, unchanged on hover · about 165 × 32 px · for light footers

<!-- Blue Arctic badge -->
<a class="ba-badge ba-badge--lg ba-badge--static ba-badge--stack" href="https://www.bluearctic.com/?utm_source=customer-site&amp;utm_medium=footer&amp;utm_campaign=spread-the-word">
    <span class="ba-badge__art">
      <img src="https://www.bluearctic.com/assets/images/brand/baicon-color.png" width="35" height="28" alt="" loading="lazy">
    </span>
    <span class="ba-badge__text">Proudly hosted by <b>Blue Arctic</b></span>
</a>
<style>
.ba-badge{display:inline-flex;align-items:center;gap:.7em;text-decoration:none;color:#000;
  font:600 10px/1 -apple-system,BlinkMacSystemFont,"Segoe UI",Roboto,Arial,sans-serif;
  letter-spacing:.09em;text-transform:uppercase}
.ba-badge:hover,.ba-badge:focus-visible{text-decoration:none}
.ba-badge__art{position:relative;display:block;flex:none}
.ba-badge__art img{display:block;width:auto;height:22px}
.ba-badge--lg .ba-badge__art img{height:28px}
.ba-badge--static .ba-badge__art{transition:opacity .2s ease}
.ba-badge--static:hover .ba-badge__art,
.ba-badge--static:focus-visible .ba-badge__art{opacity:.85}
.ba-badge b{font-weight:800}
.ba-badge--stack .ba-badge__text{line-height:1.5}
.ba-badge--stack b{display:block;font-size:11.5px}
@media (prefers-reduced-motion:reduce){.ba-badge--static .ba-badge__art{transition:none}}
</style>

Select the code above to copy it.

General credits

For sites where hosting is not the point you want to make.

Powered by Blue Arctic

Powered by, icon, black

Black by default, full colour on hover and keyboard focus · about 190 × 22 px · for light footers

<!-- Blue Arctic badge -->
<a class="ba-badge" href="https://www.bluearctic.com/?utm_source=customer-site&amp;utm_medium=footer&amp;utm_campaign=spread-the-word">
    <span class="ba-badge__art">
      <img src="https://www.bluearctic.com/assets/images/brand/baicon-black.png" width="27" height="22" alt="" loading="lazy">
      <img src="https://www.bluearctic.com/assets/images/brand/baicon-color.png" width="27" height="22" alt="" loading="lazy">
    </span>
    <span class="ba-badge__text">Powered by <b>Blue Arctic</b></span>
</a>
<style>
.ba-badge{display:inline-flex;align-items:center;gap:.7em;text-decoration:none;color:#000;
  font:600 10px/1 -apple-system,BlinkMacSystemFont,"Segoe UI",Roboto,Arial,sans-serif;
  letter-spacing:.09em;text-transform:uppercase}
.ba-badge:hover,.ba-badge:focus-visible{text-decoration:none}
.ba-badge__art{position:relative;display:block;flex:none}
.ba-badge__art img{display:block;width:auto;height:22px}
.ba-badge__art img+img{position:absolute;top:0;left:0;opacity:0;transition:opacity .2s ease}
.ba-badge:hover .ba-badge__art img+img,
.ba-badge:focus-visible .ba-badge__art img+img{opacity:1}
.ba-badge b{font-weight:800}
@media (prefers-reduced-motion:reduce){.ba-badge__art img+img{transition:none}}
</style>

Select the code above to copy it.

Powered by Blue Arctic

Powered by, icon, white

White by default, full colour on hover and keyboard focus · about 190 × 22 px · for dark footers

<!-- Blue Arctic badge -->
<a class="ba-badge ba-badge--light" href="https://www.bluearctic.com/?utm_source=customer-site&amp;utm_medium=footer&amp;utm_campaign=spread-the-word">
    <span class="ba-badge__art">
      <img src="https://www.bluearctic.com/assets/images/brand/baicon-white.png" width="27" height="22" alt="" loading="lazy">
      <img src="https://www.bluearctic.com/assets/images/brand/baicon-color.png" width="27" height="22" alt="" loading="lazy">
    </span>
    <span class="ba-badge__text">Powered by <b>Blue Arctic</b></span>
</a>
<style>
.ba-badge{display:inline-flex;align-items:center;gap:.7em;text-decoration:none;color:#000;
  font:600 10px/1 -apple-system,BlinkMacSystemFont,"Segoe UI",Roboto,Arial,sans-serif;
  letter-spacing:.09em;text-transform:uppercase}
.ba-badge:hover,.ba-badge:focus-visible{text-decoration:none}
.ba-badge--light{color:#fff}
.ba-badge__art{position:relative;display:block;flex:none}
.ba-badge__art img{display:block;width:auto;height:22px}
.ba-badge__art img+img{position:absolute;top:0;left:0;opacity:0;transition:opacity .2s ease}
.ba-badge:hover .ba-badge__art img+img,
.ba-badge:focus-visible .ba-badge__art img+img{opacity:1}
.ba-badge b{font-weight:800}
@media (prefers-reduced-motion:reduce){.ba-badge__art img+img{transition:none}}
</style>

Select the code above to copy it.

Powered by Blue Arctic

Powered by, icon, full colour

Full colour, unchanged on hover · about 190 × 22 px · for light footers

<!-- Blue Arctic badge -->
<a class="ba-badge ba-badge--static" href="https://www.bluearctic.com/?utm_source=customer-site&amp;utm_medium=footer&amp;utm_campaign=spread-the-word">
    <span class="ba-badge__art">
      <img src="https://www.bluearctic.com/assets/images/brand/baicon-color.png" width="27" height="22" alt="" loading="lazy">
    </span>
    <span class="ba-badge__text">Powered by <b>Blue Arctic</b></span>
</a>
<style>
.ba-badge{display:inline-flex;align-items:center;gap:.7em;text-decoration:none;color:#000;
  font:600 10px/1 -apple-system,BlinkMacSystemFont,"Segoe UI",Roboto,Arial,sans-serif;
  letter-spacing:.09em;text-transform:uppercase}
.ba-badge:hover,.ba-badge:focus-visible{text-decoration:none}
.ba-badge__art{position:relative;display:block;flex:none}
.ba-badge__art img{display:block;width:auto;height:22px}
.ba-badge--static .ba-badge__art{transition:opacity .2s ease}
.ba-badge--static:hover .ba-badge__art,
.ba-badge--static:focus-visible .ba-badge__art{opacity:.85}
.ba-badge b{font-weight:800}
@media (prefers-reduced-motion:reduce){.ba-badge--static .ba-badge__art{transition:none}}
</style>

Select the code above to copy it.

Powered by Blue Arctic

Powered by, logo, black

Black by default, full colour on hover and keyboard focus · about 185 × 15 px · for light footers

<!-- Blue Arctic badge -->
<a class="ba-badge ba-badge--xs" href="https://www.bluearctic.com/?utm_source=customer-site&amp;utm_medium=footer&amp;utm_campaign=spread-the-word">
    <span class="ba-badge__text">Powered by</span>
    <span class="ba-badge__art">
      <img src="https://www.bluearctic.com/assets/images/brand/balogo-black.png" width="100" height="15" alt="Blue Arctic" loading="lazy">
      <img src="https://www.bluearctic.com/assets/images/brand/balogo-color-black.png" width="100" height="15" alt="" loading="lazy">
    </span>
</a>
<style>
.ba-badge{display:inline-flex;align-items:center;gap:.7em;text-decoration:none;color:#000;
  font:600 10px/1 -apple-system,BlinkMacSystemFont,"Segoe UI",Roboto,Arial,sans-serif;
  letter-spacing:.09em;text-transform:uppercase}
.ba-badge:hover,.ba-badge:focus-visible{text-decoration:none}
.ba-badge__art{position:relative;display:block;flex:none}
.ba-badge__art img{display:block;width:auto;height:22px}
.ba-badge--xs .ba-badge__art img{height:15px}
.ba-badge__art img+img{position:absolute;top:0;left:0;opacity:0;transition:opacity .2s ease}
.ba-badge:hover .ba-badge__art img+img,
.ba-badge:focus-visible .ba-badge__art img+img{opacity:1}
@media (prefers-reduced-motion:reduce){.ba-badge__art img+img{transition:none}}
</style>

Select the code above to copy it.

Powered by Blue Arctic

Powered by, logo, white

White by default, full colour on hover and keyboard focus · about 185 × 15 px · for dark footers

<!-- Blue Arctic badge -->
<a class="ba-badge ba-badge--xs ba-badge--light" href="https://www.bluearctic.com/?utm_source=customer-site&amp;utm_medium=footer&amp;utm_campaign=spread-the-word">
    <span class="ba-badge__text">Powered by</span>
    <span class="ba-badge__art">
      <img src="https://www.bluearctic.com/assets/images/brand/balogo-white.png" width="100" height="15" alt="Blue Arctic" loading="lazy">
      <img src="https://www.bluearctic.com/assets/images/brand/balogo-color-white.png" width="100" height="15" alt="" loading="lazy">
    </span>
</a>
<style>
.ba-badge{display:inline-flex;align-items:center;gap:.7em;text-decoration:none;color:#000;
  font:600 10px/1 -apple-system,BlinkMacSystemFont,"Segoe UI",Roboto,Arial,sans-serif;
  letter-spacing:.09em;text-transform:uppercase}
.ba-badge:hover,.ba-badge:focus-visible{text-decoration:none}
.ba-badge--light{color:#fff}
.ba-badge__art{position:relative;display:block;flex:none}
.ba-badge__art img{display:block;width:auto;height:22px}
.ba-badge--xs .ba-badge__art img{height:15px}
.ba-badge__art img+img{position:absolute;top:0;left:0;opacity:0;transition:opacity .2s ease}
.ba-badge:hover .ba-badge__art img+img,
.ba-badge:focus-visible .ba-badge__art img+img{opacity:1}
@media (prefers-reduced-motion:reduce){.ba-badge__art img+img{transition:none}}
</style>

Select the code above to copy it.

Powered by Blue Arctic

Powered by, logo, full colour

Full colour, unchanged on hover · about 185 × 15 px · for light footers

<!-- Blue Arctic badge -->
<a class="ba-badge ba-badge--xs ba-badge--static" href="https://www.bluearctic.com/?utm_source=customer-site&amp;utm_medium=footer&amp;utm_campaign=spread-the-word">
    <span class="ba-badge__text">Powered by</span>
    <span class="ba-badge__art">
      <img src="https://www.bluearctic.com/assets/images/brand/balogo-color-black.png" width="100" height="15" alt="Blue Arctic" loading="lazy">
    </span>
</a>
<style>
.ba-badge{display:inline-flex;align-items:center;gap:.7em;text-decoration:none;color:#000;
  font:600 10px/1 -apple-system,BlinkMacSystemFont,"Segoe UI",Roboto,Arial,sans-serif;
  letter-spacing:.09em;text-transform:uppercase}
.ba-badge:hover,.ba-badge:focus-visible{text-decoration:none}
.ba-badge__art{position:relative;display:block;flex:none}
.ba-badge__art img{display:block;width:auto;height:22px}
.ba-badge--xs .ba-badge__art img{height:15px}
.ba-badge--static .ba-badge__art{transition:opacity .2s ease}
.ba-badge--static:hover .ba-badge__art,
.ba-badge--static:focus-visible .ba-badge__art{opacity:.85}
@media (prefers-reduced-motion:reduce){.ba-badge--static .ba-badge__art{transition:none}}
</style>

Select the code above to copy it.

Compact

For footers with very little room. Small, and still legible at a glance.

Blue Arctic

Compact, black

Black by default, full colour on hover and keyboard focus · about 107 × 18 px · for light footers

<!-- Blue Arctic badge -->
<a class="ba-badge ba-badge--sm" href="https://www.bluearctic.com/?utm_source=customer-site&amp;utm_medium=footer&amp;utm_campaign=spread-the-word">
    <span class="ba-badge__art">
      <img src="https://www.bluearctic.com/assets/images/brand/baicon-black.png" width="22" height="18" alt="" loading="lazy">
      <img src="https://www.bluearctic.com/assets/images/brand/baicon-color.png" width="22" height="18" alt="" loading="lazy">
    </span>
    <span class="ba-badge__text"><b>Blue Arctic</b></span>
</a>
<style>
.ba-badge{display:inline-flex;align-items:center;gap:.7em;text-decoration:none;color:#000;
  font:600 10px/1 -apple-system,BlinkMacSystemFont,"Segoe UI",Roboto,Arial,sans-serif;
  letter-spacing:.09em;text-transform:uppercase}
.ba-badge:hover,.ba-badge:focus-visible{text-decoration:none}
.ba-badge__art{position:relative;display:block;flex:none}
.ba-badge__art img{display:block;width:auto;height:22px}
.ba-badge--sm .ba-badge__art img{height:18px}
.ba-badge__art img+img{position:absolute;top:0;left:0;opacity:0;transition:opacity .2s ease}
.ba-badge:hover .ba-badge__art img+img,
.ba-badge:focus-visible .ba-badge__art img+img{opacity:1}
.ba-badge b{font-weight:800}
@media (prefers-reduced-motion:reduce){.ba-badge__art img+img{transition:none}}
</style>

Select the code above to copy it.

Blue Arctic

Compact, white

White by default, full colour on hover and keyboard focus · about 107 × 18 px · for dark footers

<!-- Blue Arctic badge -->
<a class="ba-badge ba-badge--sm ba-badge--light" href="https://www.bluearctic.com/?utm_source=customer-site&amp;utm_medium=footer&amp;utm_campaign=spread-the-word">
    <span class="ba-badge__art">
      <img src="https://www.bluearctic.com/assets/images/brand/baicon-white.png" width="22" height="18" alt="" loading="lazy">
      <img src="https://www.bluearctic.com/assets/images/brand/baicon-color.png" width="22" height="18" alt="" loading="lazy">
    </span>
    <span class="ba-badge__text"><b>Blue Arctic</b></span>
</a>
<style>
.ba-badge{display:inline-flex;align-items:center;gap:.7em;text-decoration:none;color:#000;
  font:600 10px/1 -apple-system,BlinkMacSystemFont,"Segoe UI",Roboto,Arial,sans-serif;
  letter-spacing:.09em;text-transform:uppercase}
.ba-badge:hover,.ba-badge:focus-visible{text-decoration:none}
.ba-badge--light{color:#fff}
.ba-badge__art{position:relative;display:block;flex:none}
.ba-badge__art img{display:block;width:auto;height:22px}
.ba-badge--sm .ba-badge__art img{height:18px}
.ba-badge__art img+img{position:absolute;top:0;left:0;opacity:0;transition:opacity .2s ease}
.ba-badge:hover .ba-badge__art img+img,
.ba-badge:focus-visible .ba-badge__art img+img{opacity:1}
.ba-badge b{font-weight:800}
@media (prefers-reduced-motion:reduce){.ba-badge__art img+img{transition:none}}
</style>

Select the code above to copy it.

Blue Arctic

Compact, full colour

Full colour, unchanged on hover · about 107 × 18 px · for light footers

<!-- Blue Arctic badge -->
<a class="ba-badge ba-badge--sm ba-badge--static" href="https://www.bluearctic.com/?utm_source=customer-site&amp;utm_medium=footer&amp;utm_campaign=spread-the-word">
    <span class="ba-badge__art">
      <img src="https://www.bluearctic.com/assets/images/brand/baicon-color.png" width="22" height="18" alt="" loading="lazy">
    </span>
    <span class="ba-badge__text"><b>Blue Arctic</b></span>
</a>
<style>
.ba-badge{display:inline-flex;align-items:center;gap:.7em;text-decoration:none;color:#000;
  font:600 10px/1 -apple-system,BlinkMacSystemFont,"Segoe UI",Roboto,Arial,sans-serif;
  letter-spacing:.09em;text-transform:uppercase}
.ba-badge:hover,.ba-badge:focus-visible{text-decoration:none}
.ba-badge__art{position:relative;display:block;flex:none}
.ba-badge__art img{display:block;width:auto;height:22px}
.ba-badge--sm .ba-badge__art img{height:18px}
.ba-badge--static .ba-badge__art{transition:opacity .2s ease}
.ba-badge--static:hover .ba-badge__art,
.ba-badge--static:focus-visible .ba-badge__art{opacity:.85}
.ba-badge b{font-weight:800}
@media (prefers-reduced-motion:reduce){.ba-badge--static .ba-badge__art{transition:none}}
</style>

Select the code above to copy it.

Using the mark

Before you paste

  • The artwork is served from bluearctic.com. Each badge links two small PNGs rather than embedding them, so the file stays about a kilobyte and the mark stays current if we ever refresh it.
  • Nothing else loads. No JavaScript, no icon font, no external stylesheet, no tracking script. The CSS block is the whole implementation.
  • The link carries a campaign tag so we can see how much traffic customer footers send us. It is a plain link: no nofollow, and it does not open a new tab.
  • Please keep the proportions. Change the height in the CSS to resize; the width is set to auto so the artwork scales with it. Do not set both.
  • Please don’t recolour the artwork. Black, white and full-colour versions are all above, so one should already fit.

Other ways to help

Other ways to help

Leave a review

A few honest sentences from someone who runs a site with us help more than anything we write.

Review us on Trustpilot Review us on G2

Follow along

Pass a post on when it’s useful to someone you know.

LinkedIn Facebook X YouTube

Tell someone who needs hosting

Send them the plans page. If they’re moving from another host, we move the website for free on Shared Web Hosting and Managed WordPress plans, and most sites are moved within 24 hours.

Plans and pricing Website migration

Join the affiliate program

A badge is a credit, not a commission. If you recommend us often, the affiliate program pays commission on qualified referrals.

Affiliate program

Need a different badge?

If you need a size, lockup or file format that isn’t here, tell us where it’s going and we’ll make one.

Ask for a Custom Badge
View Affiliate Program