Badges

Love Blue Arctic? Spread the word.

If Blue Arctic powers your website, we’d love for you to help spread the word. Choose a style below, copy the code, and paste it into your website footer. It takes about ten seconds, it is entirely optional, and nothing about your account depends on it.

Choose a Badge Affiliate Program

Choose your style

Pick one, copy the code, paste it in your footer.

Every badge is a single link and a small block of CSS. No JavaScript, no icon font, no framework, nothing to install. 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.

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.changelogs.com/ba/?utm_source=customer-site&amp;utm_medium=footer&amp;utm_campaign=spread-the-word">
    <span class="ba-badge__art">
      <img src="https://www.changelogs.com/ba/assets/images/brand/baicon-black.png" width="35" height="28" alt="Blue Arctic" loading="lazy">
      <img src="https://www.changelogs.com/ba/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.

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.changelogs.com/ba/?utm_source=customer-site&amp;utm_medium=footer&amp;utm_campaign=spread-the-word">
    <span class="ba-badge__art">
      <img src="https://www.changelogs.com/ba/assets/images/brand/baicon-white.png" width="35" height="28" alt="Blue Arctic" loading="lazy">
      <img src="https://www.changelogs.com/ba/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.

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.changelogs.com/ba/?utm_source=customer-site&amp;utm_medium=footer&amp;utm_campaign=spread-the-word">
    <span class="ba-badge__art">
      <img src="https://www.changelogs.com/ba/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.

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.changelogs.com/ba/?utm_source=customer-site&amp;utm_medium=footer&amp;utm_campaign=spread-the-word">
    <span class="ba-badge__art">
      <img src="https://www.changelogs.com/ba/assets/images/brand/balogo-black.png" width="147" height="22" alt="Blue Arctic" loading="lazy">
      <img src="https://www.changelogs.com/ba/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.

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.changelogs.com/ba/?utm_source=customer-site&amp;utm_medium=footer&amp;utm_campaign=spread-the-word">
    <span class="ba-badge__art">
      <img src="https://www.changelogs.com/ba/assets/images/brand/balogo-white.png" width="147" height="22" alt="Blue Arctic" loading="lazy">
      <img src="https://www.changelogs.com/ba/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.

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.changelogs.com/ba/?utm_source=customer-site&amp;utm_medium=footer&amp;utm_campaign=spread-the-word">
    <span class="ba-badge__art">
      <img src="https://www.changelogs.com/ba/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.

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.changelogs.com/ba/?utm_source=customer-site&amp;utm_medium=footer&amp;utm_campaign=spread-the-word">
    <span class="ba-badge__art">
      <img src="https://www.changelogs.com/ba/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.changelogs.com/ba/?utm_source=customer-site&amp;utm_medium=footer&amp;utm_campaign=spread-the-word">
    <span class="ba-badge__art">
      <img src="https://www.changelogs.com/ba/assets/images/brand/baicon-black.png" width="27" height="22" alt="" loading="lazy">
      <img src="https://www.changelogs.com/ba/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.changelogs.com/ba/?utm_source=customer-site&amp;utm_medium=footer&amp;utm_campaign=spread-the-word">
    <span class="ba-badge__art">
      <img src="https://www.changelogs.com/ba/assets/images/brand/baicon-white.png" width="27" height="22" alt="" loading="lazy">
      <img src="https://www.changelogs.com/ba/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.changelogs.com/ba/?utm_source=customer-site&amp;utm_medium=footer&amp;utm_campaign=spread-the-word">
    <span class="ba-badge__art">
      <img src="https://www.changelogs.com/ba/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

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.changelogs.com/ba/?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.changelogs.com/ba/assets/images/brand/balogo-black.png" width="100" height="15" alt="Blue Arctic" loading="lazy">
      <img src="https://www.changelogs.com/ba/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

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.changelogs.com/ba/?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.changelogs.com/ba/assets/images/brand/balogo-white.png" width="100" height="15" alt="Blue Arctic" loading="lazy">
      <img src="https://www.changelogs.com/ba/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

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.changelogs.com/ba/?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.changelogs.com/ba/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.changelogs.com/ba/?utm_source=customer-site&amp;utm_medium=footer&amp;utm_campaign=spread-the-word">
    <span class="ba-badge__art">
      <img src="https://www.changelogs.com/ba/assets/images/brand/baicon-black.png" width="27" height="22" alt="" loading="lazy">
      <img src="https://www.changelogs.com/ba/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.changelogs.com/ba/?utm_source=customer-site&amp;utm_medium=footer&amp;utm_campaign=spread-the-word">
    <span class="ba-badge__art">
      <img src="https://www.changelogs.com/ba/assets/images/brand/baicon-white.png" width="27" height="22" alt="" loading="lazy">
      <img src="https://www.changelogs.com/ba/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.changelogs.com/ba/?utm_source=customer-site&amp;utm_medium=footer&amp;utm_campaign=spread-the-word">
    <span class="ba-badge__art">
      <img src="https://www.changelogs.com/ba/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

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.changelogs.com/ba/?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.changelogs.com/ba/assets/images/brand/balogo-black.png" width="100" height="15" alt="Blue Arctic" loading="lazy">
      <img src="https://www.changelogs.com/ba/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

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.changelogs.com/ba/?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.changelogs.com/ba/assets/images/brand/balogo-white.png" width="100" height="15" alt="Blue Arctic" loading="lazy">
      <img src="https://www.changelogs.com/ba/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

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.changelogs.com/ba/?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.changelogs.com/ba/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.changelogs.com/ba/?utm_source=customer-site&amp;utm_medium=footer&amp;utm_campaign=spread-the-word">
    <span class="ba-badge__art">
      <img src="https://www.changelogs.com/ba/assets/images/brand/baicon-black.png" width="35" height="28" alt="" loading="lazy">
      <img src="https://www.changelogs.com/ba/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.changelogs.com/ba/?utm_source=customer-site&amp;utm_medium=footer&amp;utm_campaign=spread-the-word">
    <span class="ba-badge__art">
      <img src="https://www.changelogs.com/ba/assets/images/brand/baicon-white.png" width="35" height="28" alt="" loading="lazy">
      <img src="https://www.changelogs.com/ba/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.changelogs.com/ba/?utm_source=customer-site&amp;utm_medium=footer&amp;utm_campaign=spread-the-word">
    <span class="ba-badge__art">
      <img src="https://www.changelogs.com/ba/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, 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.changelogs.com/ba/?utm_source=customer-site&amp;utm_medium=footer&amp;utm_campaign=spread-the-word">
    <span class="ba-badge__art">
      <img src="https://www.changelogs.com/ba/assets/images/brand/baicon-black.png" width="27" height="22" alt="" loading="lazy">
      <img src="https://www.changelogs.com/ba/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, 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.changelogs.com/ba/?utm_source=customer-site&amp;utm_medium=footer&amp;utm_campaign=spread-the-word">
    <span class="ba-badge__art">
      <img src="https://www.changelogs.com/ba/assets/images/brand/baicon-white.png" width="27" height="22" alt="" loading="lazy">
      <img src="https://www.changelogs.com/ba/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, 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.changelogs.com/ba/?utm_source=customer-site&amp;utm_medium=footer&amp;utm_campaign=spread-the-word">
    <span class="ba-badge__art">
      <img src="https://www.changelogs.com/ba/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, 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.changelogs.com/ba/?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.changelogs.com/ba/assets/images/brand/balogo-black.png" width="100" height="15" alt="Blue Arctic" loading="lazy">
      <img src="https://www.changelogs.com/ba/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, 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.changelogs.com/ba/?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.changelogs.com/ba/assets/images/brand/balogo-white.png" width="100" height="15" alt="Blue Arctic" loading="lazy">
      <img src="https://www.changelogs.com/ba/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, 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.changelogs.com/ba/?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.changelogs.com/ba/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.changelogs.com/ba/?utm_source=customer-site&amp;utm_medium=footer&amp;utm_campaign=spread-the-word">
    <span class="ba-badge__art">
      <img src="https://www.changelogs.com/ba/assets/images/brand/baicon-black.png" width="22" height="18" alt="" loading="lazy">
      <img src="https://www.changelogs.com/ba/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.changelogs.com/ba/?utm_source=customer-site&amp;utm_medium=footer&amp;utm_campaign=spread-the-word">
    <span class="ba-badge__art">
      <img src="https://www.changelogs.com/ba/assets/images/brand/baicon-white.png" width="22" height="18" alt="" loading="lazy">
      <img src="https://www.changelogs.com/ba/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.changelogs.com/ba/?utm_source=customer-site&amp;utm_medium=footer&amp;utm_campaign=spread-the-word">
    <span class="ba-badge__art">
      <img src="https://www.changelogs.com/ba/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

A few things worth knowing 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 do not recolour the artwork. The black, white and full-colour files are all provided above, so there should be a version that already fits.
Need a size or a lockup that is not here? Ask us and we will put one together.

Affiliate Program

Want to earn from referrals?

A badge is a credit, not a commission. If you regularly recommend Blue Arctic to clients, friends or other businesses, the affiliate program pays commission on qualified referrals. The two are independent: you can display a badge, join the program, do both, or do neither.

View Affiliate Program

Other ways to help

Other ways to spread the word.

Leave a review

A few honest sentences from someone who actually runs a site with us is worth more than anything we can write about ourselves.

Review us on Trustpilot Review us on G2

Follow along

Follow along, and pass a post on when it is useful to someone you know.

LinkedIn Facebook X YouTube

Tell someone who needs hosting

Send them the plans page. If they are moving from somewhere else, we move the website for free, planned for zero downtime and handled by our engineers.

Plans and pricing Website migration

Join the affiliate program

If you send referrals often enough that a credit is not the right fit, the program pays commission on qualified sales.

Affiliate program

Thank you for the credit.

If you need a size, a lockup or a file format that is not on this page, tell us what you are putting it in and we will build it.

Ask for a Custom Badge View Affiliate Program