Skip navigation

Buttons, Bows and Badges for Your Blog

Building a blogI used to have a sidebar overloaded with a ton of buttons, badges, icons, and bows, linking to feeds, feed readers, site submission services, links, social networking services, translations, and other goodies. Want some buttons and bows, and a few icons and badges associated with blogging and online social social networking? I’ve uncovered a wide collection to help you build your own cluttered gallery of icons and buttons, including building your own from scratch.

Free Buttons, Badges and Icons

Here are some resources to download and save for pre-made and free icons, buttons, and badges. Also included are a variety of graphic icons. Different from buttons, these are icons that you can use to spice up or help categorize your posts with graphic elements.
Example of buttons and badges on Lorelle on WordPress

Building Your Own Custom Buttons and Badges

There are a variety of online icon, buttons, bows, and badges you can get for your own blog. Making your own with any graphics program is not as easy as it seems, but online programs make the job simple, fast, and easy.

The rectangular buttons in the sidebar are probably the most common format. They are 80 x 15 pixels in size. The most common font used in the buttons is called “Silkscreen”, though Verdana is occasionally used.

Making Your Own Buttons, Icons, Gravatars, Avatars, and Badges

Many bloggers like to share their blog’s brand identity graphically through buttons, icons, favicons, gravatars, avatars, and badges. These are often surrounded by a link, such as the logo shown here:

<a href="http://lorelle.wordpress.com/" title="Lorelle on WordPress" rel="tag"><img src="http://lorelle.wordpress.com/files/2008/07/lowgrav2.gif" alt="" title="Lorelle on WordPress logo - copyrighted" width="291" height="305" /></a>

These types of badges and icons are typically featured in the footer or on the blog’s About Page, requesting visitors and fans to help promote the blog by showcasing the logo and links on their blogs.

In Adding Avatars and Gravatars to Your WordPress and WordPress.com Blog, I discuss how to create an avatar for Gravatar and add it to your WordPress blog, including specifics on image size and dimensions. Image sizes for avatars and Gravatars must be able to range from 128 pixels down to 16 pixels. Gravatars and avatars appear in blog comments, profile pages and panels, on forums, and in a variety of social networking and online communities as a visual representation of you and your blog.

Avatar 128 pixel of Lorelle on WordPress logoAvatar 80px Lorelle on WordPress logoAvatar 32px Lorelle on WordPress logoAvatar 16px Lorelle on WordPress logo

Icons used for blogroll links are typically 80 x 15 pixel rectangles, though there is a growing trend for small 16 pixel square blogroll link images. Even at 80×15, the ability to get much information into the tiny size frustrates many designers today, but it can be done.

However, the 128 pixel square logo, the most common new advertising format size, allows for a lot more room in which to put information such as marketing your blog and blog content. There is more room for text, messages, and attractive content that could be used in trade or pay to help promote your blog.

Use your imagination to come up with fun and inspiring graphics for your blog identity and brand and include these in your sidebar, header, footer, or on your about page to help others spread the graphic word about your blog.

Stop Content Theft Buttons and Badges

stoptheftred2.gifFor those determined to remind the world that their blog content is theirs and not available for the taking or stealing, check out the variety of buttons and badges to Stop Content Theft. Spam Blogs, known as splogs, are grabbing content from your blog feeds and using it as their own on blogs, aggregators, and “search services” surrounded with advertising, comments, social bookmarking service submit links, and making your content earn money for them without your permission and in violation of most copyrights. Spread the word to protect your blog’s content, and encourage people to ask first if they want to use it.

Learning More About Icons, Buttons, Bows, and Badges



Site Search Tags: , , , , , , , , , , , , , , , , , , , , , , , , , , , , ,

Feed on Lorelle on WordPress Subscribe Feedburner iconVia Feedburner Subscribe by Email Visit
Copyright Lorelle VanFossen, the author of Blogging Tips, What Bloggers Won't Tell You About Blogging.

38 Comments

  1. Posted November 13, 2005 at 1:40 pm | Permalink

    I was looking for that… niceeee :)

  2. Posted December 30, 2005 at 9:46 am | Permalink

    Fantastico also has a list of icon resources for web pages and desktop shortcut icons to help you find even more icon choices.

  3. Posted January 24, 2006 at 2:55 pm | Permalink

    Just spent an hour trying to find out how to put buttons onto my blog – going nuts now!!!!! Please can you help or point me towards an article that explains in simple language how to get the buttons onto my blog. I’m a techie teacher – suddenly I’m well out of my comfort zone with all this stuff.

    Hope you can help

    Richard

  4. Posted January 24, 2006 at 3:13 pm | Permalink

    To put buttons on your WordPress.com or WordPress blog, read Links Manager instructions from the WordPress Codex, the online manual for WordPress users.

    It’s really easy. The whole trick is to put the link in the URL line, and then put the icon location (upload the icon to your WordPress.com blog – do not link to an icon offsite). Then go to Link Categories under your Links panel and set the options to show the icon/graphic. Done.

    I’ll be writing more about setting up a sidebar like mine soon. Stay tuned. I hope this helps.

  5. Posted February 19, 2006 at 9:45 pm | Permalink

    How do you put “Subscribe to” buttons in your wordpress.com blog (e.g. bloglines, google reader, del.icio.us) that really subscribe or link to your feeds like the ones you have in your sidebar? I’ve only succeeded with putting up a bloglines button that links to bloglines.com but that’s about it.

    By the way, your blog has really helped me tremendously with my wordpress.com blog. As a non-techie, I benefited much from your simple easy to understand language. I’m glad I found it. :)

  6. Posted February 19, 2006 at 10:53 pm | Permalink

    I will be explaining it more later, but as mentioned in the comment above, go to Links in the Administration Panels. Click ADD LINK and put the address (URL) in the URL form and then the link (preferably to your own copy of the graphic you uploaded through the Write Post panel) to the graphic in the Image form box and SAVE.

    Then go to the Link Category panel and make sure that the category in which the link is included is set to SHOW IMAGES. Do not let it show descriptions, just the image.

    Done.

    I will have an article coming soon to explain all of this including the specialized links in the sidebar. And thanks for the kind words.

    • Posted October 23, 2011 at 2:23 am | Permalink

      Hi Lorelle,

      I was wondering if you had made that post on specialized links in the sidebar yet. I’ve been looking on your blog, but I haven’t noticed it myself yet. I want to put all of my social networking buttons across the top of my blog, but they don’t seem to be displaying even though I’ve added them (and the image URLs) to the Links list and they are displayed as “Visible”.

      If you know how to fix this issue it would definitely be appreciated.

      Thank you,

      Liz

    • Posted October 23, 2011 at 10:47 am | Permalink

      I’ve done so many articles on Widgets and the sidebar in WordPress. Here are a few off the top of my head.

      WordPress Tips: Exploring the WordPress Text Widget
      WordPress Widgets: The Next Generation of WordPress Plugins
      WordPress.com Blog Bling: Blogroll and Sidebar Bling

      WordPress.com has Widget that adds your social networks automatically. If you wish to not use that then use the Text Widget with the instructions from the article above. Don’t do it through the Links panel, just use the Text Widget and do it manually with HTML and you will get exactly what you want.

  7. Posted April 22, 2006 at 5:06 pm | Permalink

    Thank you for this information. Also, I want to thank you for all the times I didn’t thank you. Great blog/website with solid writing and valid technical information. Keep up the excellent work, please.

  8. Posted July 4, 2006 at 10:32 pm | Permalink

    I swear, if you were an animal you’d be the Energizer Bunny tap dancing on the Keyboards and boogy boarding on the Mouse. Yes. I am certainly more visual than…ummm, smart?

  9. Posted July 6, 2006 at 9:36 pm | Permalink

    Wow. You’ve done a prodigious job here. Seriously. I had to stay a while just to marvel at your work. Keep it up!

  10. Jagannath
    Posted July 29, 2006 at 5:56 am | Permalink

    mmm thanx..

    i used Feed Burner service to get all those ‘chicklets’ as they are called

    —–
    Jagannath .A.

    http://jagannath.wordpress.com

  11. Posted December 28, 2006 at 6:43 pm | Permalink

    I’m loving the Web 2.0 style buttons at the moment, really adds a professional touch to the website :)

  12. zooster
    Posted July 3, 2007 at 11:26 pm | Permalink

    I like those buttons very much, the remind me on web 2.0 standards which should be implemented in all sites.

  13. Posted July 20, 2007 at 10:46 am | Permalink

    Nice write up! There are automated ways in wordpress to add these buttons.

  14. nyunyu
    Posted October 10, 2007 at 9:11 pm | Permalink

    i am super happy to found your blog. i am first timer in blogging and still learning on how to customize my blog. planning to go to a webhost sometimes soon. i will add this blog to my blogroll if you dont mind.

  15. Posted March 12, 2008 at 8:06 am | Permalink

    can these buttons be adapted for digg, delicious etc?

  16. Posted March 12, 2008 at 12:46 pm | Permalink

    @ Hope:

    Whatever your heart desires. :D

  17. Posted May 9, 2008 at 1:39 am | Permalink

    can i use a badge??

  18. Posted May 9, 2008 at 8:21 am | Permalink

    @ Bagindo:

    These are free for usage.

  19. Posted May 12, 2008 at 7:28 am | Permalink

    Oh, I was locking for something like that. Thanks very much!!!!!!!!!

  20. Posted June 14, 2008 at 6:04 am | Permalink

    Hey. I have been looking at making some badges for my own blog (funnily enough I run a cottage industry badge company for real 1 inch badges). I will definately use the Dont Steal my Content idea on my blog, as people keep stealing text and hotlinking my images, wasting precious bandwidth. You can checkout my blog at http://www.koolbadges.co.uk/blog

  21. Louisa
    Posted September 22, 2008 at 2:53 am | Permalink

    This is a great site! My question is how did you enter the code in the post above without the button appearing? Does that make sense? I am trying to put a button on my site that people can also put on their’s so I need to be able to show the code and every time I input it it just posts the button. Can you tell me how to do this?
    Thanks!

  22. Posted September 22, 2008 at 10:38 am | Permalink

    @ Louisa:

    To publish code in your blog post and comments, see Writing and Publishing Code in Your WordPress Blog Posts. That will help.

  23. harmonics
    Posted October 14, 2008 at 2:41 pm | Permalink

    what a great resource…only, how do I get the animations to dance in my posts?

  24. Posted October 14, 2008 at 6:04 pm | Permalink

    @ harmonics:

    They are called animated gifs and you find them and download them from whatever source you want on the web. HOWEVER, they are HATED by most people and do not meet web standards for accessibility, so it is highly recommended that you get your kicks elsewhere and not use these on any web page where humans can see them. :D

  25. Posted February 1, 2009 at 5:35 am | Permalink

    I found a great source for free images which We can use for re-edit and as a raw content for websites, freehdphoto dot com

    hope it will help someone..

  26. littledarlings
    Posted June 18, 2009 at 1:24 am | Permalink

    I’ve spent most of my day trying to figure this out.. and finally stumbled upon your blog. I’m a real novice when it comes to blogging, and now the words ‘buttons’, ‘badges’ make some sense. I think you have a great site, especially for beginners like me! And this is just from reading 1 article, imagine once I’ve finished going through your blog, I would be an ‘almost’ expert!
    In any case, thanks sooo mucchhh, this is so helpful!

  27. konstelin
    Posted September 5, 2009 at 7:28 pm | Permalink

    Did anybody know about SEO on Fash sites??

    • Posted September 5, 2009 at 8:30 pm | Permalink

      I assume you mean “Flash” and unless you are using the latest version that includes accessibility features, there is no SEO value with Flash. Basically, it sucks for SEO and web accessibility.

  28. Posted January 23, 2010 at 10:21 am | Permalink

    very usefull, hurrah!! finally i got the idea to add a custom subscription button to my new blog.

  29. Posted March 29, 2010 at 1:07 am | Permalink

    Thanks very much for helping

  30. Posted July 1, 2010 at 11:29 am | Permalink

    Hello. This is my first time here. I found you by searching for a way to include a social bookmarking button on my wp.com blog. I have much less hair now thanks to the frustrating “technical” language that I’ve found on the web. Thank you for providing this type of support in easily understood and grammatically correct English.

    Burning questions for wp.com blogs:
    1. Do you know how to add the TweetMeme retweet button?

    2. How do we add the DamnSexy bookmarking buttons that are available as plugins on wp.org?

    3. When I tried to alter my CSS, the note in my admin panel said I have to pay for a CSS upgrade. Is there no way to add a bookmarking service FOR FREE so my readers can share my blog content on social networking sites?

    Thanks!

    Btw, this is my favorite shade of blue, so I’m definitely returning. :)

    • Posted July 6, 2010 at 8:13 pm | Permalink

      Plugins are not allowed on WordPress.com. If you have interest in a specific Plugin, please contact them through their forums, feedback, and Ideas pages to have your desires heard. They respond based upon the most requested requests.

      Bookmarking “services” and Plugins are overrated. Just add a link to whatever you want in your sidebar. People who use social bookmarking sites heavily usually use their own tools, not ones provided by the site.

      If you wish to customize the CSS, you will need to pay the extra fee. Good luck with your project.

  31. Kamlesh Bepari
    Posted March 12, 2012 at 10:26 pm | Permalink

    pls…tell me how to put feedburner badge in our own blog…..!!!!

    • Posted March 13, 2012 at 9:42 am | Permalink

      As you are not on a WordPress site, you’ll have to ask customer support for your publishing platform. They may do things differently.

  32. Posted April 12, 2013 at 1:56 am | Permalink

    For the reason that the admin of this website is working, no uncertainty very soon it will be renowned, due
    to its quality contents.

  33. Posted September 19, 2014 at 5:32 am | Permalink

    Woah! I’m really enjoying the template/theme of this site.
    It’s simple, yet effective. A lot of times it’s difficult
    to get that “perfect balance” between superb usability and appearance.
    I must say you have deliver a excellent job with this.

    Additionally, the blog loads super quick for me on Firefox.
    Superb Blog!


37 Trackbacks/Pingbacks

  1. Lorelle on WordPress » Buttons, Bows and Badges for Your Blog

    A great list of sources for buttons bows and badges.
    Lorelle on WordPress » Buttons, Bows and Badges for Your Blog

  2. [...] @*/ Total Discussions:  Total Tags: 1 0 by 0 people 0 List of button maker resources by gregbd on 11/15/2005 [...]

  3. [...] Buttons, Bows and Badges for Your Blog Little mini icon things. [via blog-her] (tags: graphics) [...]

  4. [...] Este personaje se encargo de hacer un listado con buenos links. de los que destaco este que está completisimo.[...]

  5. [...] Buttons, Bows and Badges for Your Blog [...]

  6. [...] Located a source to create free glassy web buttons. Other web design resources and free online button generators. more… [...]

  7. [...] Create Web Buttons Located a source to create free glassy web buttons. Other web design resources and free online button generators. [...]

  8. [...] Lorelle on WordPress » Buttons, Bows and Badges for Your Blog (tags: badges blog blogging Blogs button buttons graphics webdesign useful) [...]

  9. [...] Lorelle on WordPress » Buttons, Bows and Badges for Your Blog. [...]

  10. [...] Located a source to create free glassy web buttons. Other web design resources and free online button generators. [...]

  11. [...] Blatently stolen from Lorelle on WordPress. Now I just need to write a greasemonkey script. Digg | Del.icio.us | BlinkList | Furl Spurl | Reddit | Simpy | RawSugar [...]

  12. [...] Buttons, Bows and Badges for Your Blog [...]

  13. [...] You are free to use these however you like. Edit them, recolor them, resize, do whatever you want. If you choose to make your own buttons and badges to alert your blog reader’s to your copyright policy and the potential for content theft, you can use any graphics program or one of the online tools featured in Buttons, Bows and Badges for Your Blog. [...]

  14. [...] Buttons, Bows and Badges for Your Blog « Lorelle on WordPress (tags: badges button) [...]

  15. population of queensbury ny

    Your post is on target. Keep it up.

  16. [...] with a graphics program, or through one of the different button or badges online tools listed in Buttons, Bows and Badges for Your Blog. Save the graphic in your WordPress Theme folder on your blog. Use the graphic in your link and add [...]

  17. [...] Buttons, Bows, and Badges for Your Blog [...]

  18. [...] Lorelle on WordPress – Free button and badge makers, and tons of badges, buttons, and icons for download! [...]

  19. [...] Searching through Lorelle’s blog for information on buttons and icons. [...]

  20. [...] Buttons, Bows and Badges for Your Blog | Lorelle [...]

  21. [...] Buttons, Bows and Badges for Your Blog | Lorelle [...]

  22. [...] Buttons, Bows and Badges for Your Blog | Lorelle [...]

  23. [...] Buttons, Bows and Badges for Your Blog [...]

  24. [...] Buttons, Bows and Badges for Your Blog | Lorelle [...]

  25. [...] Buttons, Bows and Badges for Your Blog [...]

  26. [...] Buttons, Bows and Badges for Your Blog : Kind of a cop-out, but hey I have been reading a lot about creating blog badges this week. Check out my sweet one on the right sidebar! [...]

  27. [...] Posted by VANextDoor I used to have a sidebar overloaded with a ton of buttons, badges, icons, and bows, linking to feeds, feed readers, site submission services, links, social networking services, translations, and other goodies. Want some buttons and bows, and a few icons and badges associated with blogging and online social social networking? I've uncovered a wide collection to help you build your own cluttered gallery of icons and buttons, including building your … Read More [...]

  28. [...] Lorelle on WordPress » Buttons, Bows and Badges for Your Blog [...]

  29. [...] Lorelle on WordPress [...]

  30. […] Buttons, Bows and Badges for Your Blog […]

  31. […] a translated version of the front page of my blog in different languages. I simply used one of the online buttons and badge makers to create these, one for each […]

  32. […] Buttons, Bows, and Badges for Your Blog […]

  33. […] Buttons, Bows, and Badges for Your Blog […]

  34. […] Buttons, Bows, and Badges for Your Blog […]

  35. […] Buttons, Bows and Badges for Your Blog […]

  36. […] Buttons, Bows and Badges for Your Blog […]

  37. […] Buttons, Bows and Badges for Your Blog […]

Post a Comment

Follow

Get every new post delivered to your Inbox.

Join 20,684 other followers

%d bloggers like this: