"Made on Ubuntu Linux"
This is a demonstration of the various "Made on Ubuntu" and "Made on Linux" badges that are available.
They are all available for download at the very bottom of this page.
These images are all provided to you as is, and I make no claims to the copyright. Check with the original copyright holder before using them in a commercial manner.
Demos
Feel free to include the following images on any website that you have made using Ubuntu or any other flavor of Linux. I only ask that you do not hotlink any images. Instead, upload them to your own image host and change the corresponding value in the markup.
Hover over the images to see rollover effect. Click on the demo boxes to see sample code!
Ubuntu versions
These badges are using the Ubuntu branding. Keep scrolling for the general Linux badges.
Color version
This one uses the standard Ubuntu colors.
Black text
White text
<style type="text/css">
.badge {
background-image: url(badge_color_blacktext_25.png);
width:96px;
height:64px;
}
.badge:hover {
background-image: url(badge_color_blacktext.png);
}
.badge a {
display:block;
width:96px;
height:64px;
}
.badge a {
background-image: url(badge_color_blacktext_25.png);
display:block;
width:96px;
height:64px;
}
.badge a:hover {
background-image: url(badge_color_blacktext.png);
}
</style>
<div class="badge"><a href="http://www.ubuntu.com/"></a></div>
<style type="text/css">
.badge {
background-image: url(badge_color_whitetext_25.png);
width:96px;
height:64px;
}
.badge:hover {
background-image: url(badge_color_whitetext.png);
}
.badge a {
display:block;
width:96px;
height:64px;
}
.badge a {
background-image: url(badge_color_whitetext_25.png);
display:block;
width:96px;
height:64px;
}
.badge a:hover {
background-image: url(badge_color_whitetext.png);
}
</style>
<div class="badge"><a href="http://www.ubuntu.com/"></a></div>
Monochrome version
Smooth, black and white versions that are slightly more low-key than their color counterparts.
Dark version
Light version
<style type="text/css">
.badge {
background-image: url(badge_black_25.png);
width:96px;
height:64px;
}
.badge:hover {
background-image: url(badge_black.png);
}
.badge a {
display:block;
width:96px;
height:64px;
}
.badge a {
background-image: url(badge_black_25.png);
display:block;
width:96px;
height:64px;
}
.badge a:hover {
background-image: url(badge_black.png);
}
</style>
<div class="badge"><a href="http://www.ubuntu.com/"></a></div>
<style type="text/css">
.badge {
background-image: url(badge_white_25.png);
width:96px;
height:64px;
}
.badge:hover {
background-image: url(badge_white.png);
}
.badge a {
display:block;
width:96px;
height:64px;
}
.badge a {
background-image: url(badge_white_25.png);
display:block;
width:96px;
height:64px;
}
.badge a:hover {
background-image: url(badge_white.png);
}
</style>
<div class="badge"><a href="http://www.ubuntu.com/"></a></div>
Linux versions
These badges are using Tux as the logo, and just straight sans-serif for the text, as Linux as a whole doesn't really have any unified branding in terms of fonts.
Color version
This one uses the standard Tux colors.
Black text
White text
<style type="text/css">
.badge {
background-image: url(tux_badge_color_blacktext_25.png);
width:96px;
height:64px;
}
.badge:hover {
background-image: url(tux_badge_color_blacktext.png);
}
.badge a {
display:block;
width:96px;
height:64px;
}
.badge a {
background-image: url(tux_badge_color_blacktext_25.png);
display:block;
width:96px;
height:64px;
}
.badge a:hover {
background-image: url(tux_badge_color_blacktext.png);
}
</style>
<div class="badge"><a href="http://linux.com/"></a></div>
<style type="text/css">
.badge {
background-image: url(tux_badge_color_whitetext_25.png);
width:96px;
height:64px;
}
.badge:hover {
background-image: url(tux_badge_color_whitetext.png);
}
.badge a {
display:block;
width:96px;
height:64px;
}
.badge a {
background-image: url(tux_badge_color_whitetext_25.png);
display:block;
width:96px;
height:64px;
}
.badge a:hover {
background-image: url(tux_badge_color_whitetext.png);
}
</style>
<div class="badge"><a href="http://linux.com/"></a></div>
Monochrome version
Smooth, black and white versions that are slightly more low-key than their color counterparts.
Dark version
Light version
<style type="text/css">
.badge {
background-image: url(tux_badge_blacktext_25.png);
width:96px;
height:64px;
}
.badge:hover {
background-image: url(tux_badge_blacktext.png);
}
.badge a {
display:block;
width:96px;
height:64px;
}
.badge a {
background-image: url(tux_badge_blacktext_25.png);
display:block;
width:96px;
height:64px;
}
.badge a:hover {
background-image: url(tux_badge_blacktext.png);
}
</style>
<div class="badge"><a href="http://linux.com/"></a></div>
<style type="text/css">
.badge {
background-image: url(tux_badge_whitetext_25.png);
width:96px;
height:64px;
}
.badge:hover {
background-image: url(tux_badge_whitetext.png);
}
.badge a {
display:block;
width:96px;
height:64px;
}
.badge a {
background-image: url(tux_badge_whitetext_25.png);
display:block;
width:96px;
height:64px;
}
.badge a:hover {
background-image: url(tux_badge_whitetext.png);
}
</style>
<div class="badge"><a href="http://linux.com/"></a></div>
Arch Linux versions
These badges are using the official Arch Linux logo and its official font - Liberation sans.
Color version
This one uses the standard Arch colors.
Black text
White text
<style type="text/css">
.badge {
background-image: url(arch_color_blacktext_25.png);
width:96px;
height:64px;
}
.badge:hover {
background-image: url(arch_color_blacktext.png);
}
.badge a {
display:block;
width:96px;
height:64px;
}
.badge a {
background-image: url(arch_color_blacktext_25.png);
display:block;
width:96px;
height:64px;
}
.badge a:hover {
background-image: url(arch_color_blacktext.png);
}
</style>
<div class="badge"><a href="http://www.archlinux.org/"></a></div>
<style type="text/css">
.badge {
background-image: url(arch_color_whitetext_25.png);
width:96px;
height:64px;
}
.badge:hover {
background-image: url(arch_color_whitetext.png);
}
.badge a {
display:block;
width:96px;
height:64px;
}
.badge a {
background-image: url(arch_color_whitetext_25.png);
display:block;
width:96px;
height:64px;
}
.badge a:hover {
background-image: url(arch_color_whitetext.png);
}
</style>
<div class="badge"><a href="http://www.archlinux.org/"></a></div>
Monochrome version
Smooth, black and white versions that are slightly more low-key than their color counterparts.
Dark version
Light version
<style type="text/css">
.badge {
background-image: url(arch_blacktext_25.png);
width:96px;
height:64px;
}
.badge:hover {
background-image: url(arch_blacktext.png);
}
.badge a {
display:block;
width:96px;
height:64px;
}
.badge a {
background-image: url(arch_blacktext_25.png);
display:block;
width:96px;
height:64px;
}
.badge a:hover {
background-image: url(arch_blacktext.png);
}
</style>
<div class="badge"><a href="http://www.archlinux.org/"></a></div>
<style type="text/css">
.badge {
background-image: url(arch_whitetext_25.png);
width:96px;
height:64px;
}
.badge:hover {
background-image: url(arch_whitetext.png);
}
.badge a {
display:block;
width:96px;
height:64px;
}
.badge a {
background-image: url(arch_whitetext_25.png);
display:block;
width:96px;
height:64px;
}
.badge a:hover {
background-image: url(arch_whitetext.png);
}
</style>
<div class="badge"><a href="http://www.archlinux.org/"></a></div>
Terms
As long as you have the copyright holder's permission, you may use these images in any way you want. I do ask that you link to this site as a way of crediting me, but you don't have to - and I'm not going to bitch about it if you don't.
As the whole point of the badges is to let people know of pages that have been made using Ubuntu or whatever flavor of Linux you prefer, slapping the badge on a website that has been made in Windows XP using Frontpage is kind of pointless. So I suppose the only mandatory term of use is that you genuinely feel like you've made the site using Linux - whatever that may mean to you.
Download
All the badges can be downloaded in archives below:
Sites that use these badges:
If you want your site on this list, send me an email. My email address is available further down this page.
Contact
If you want to contact me, please email me at tommy.brunn@gmail.com
I would love to see people using these badges, so if you do, please send me an email letting me know!
Spare a Digg?
If you think this is worth spreading, please considering using one or more of the social media buttons located below.