buttons

From IndieWeb


Buttons are badges, logos, and banners that you can use to link to indieweb.org and related sites & technologies, and similar images for a handful of sites similarly aligned in principles or development approaches.

Logos

Main article: logo

Full color logomark (with logotype)

For other versions (size, color, file formats), see the indieweb/branding repo on GitHub.

Buttons

80x15

as an SVG

as an SVG

as an SVG

88x31

indiewebcamp button 88 by 31 pixels indiewebcamp button 88 by 31 pixels retro version

webmention button 88 by 31 pixels

microformats button 88 by 31 pixels

See below for other (not IndieWeb focused) 88x31 buttons.

Community Contributions

IndieWeb

by Jeena Paradies

IndieWeb Verified

by Chris Aldrich

An 80x15 antipixel button in orange and Twitter blue that reads IWC on the left and VERIFIED on the right.

IndieWeb Building Blocks

Aaron Parecki linked some IWC, Webmentions, Microfomats, and other small (80x15) buttons/badges at https://aaronparecki.com/2017/12/30/7/indieweb-badge

... more ...

Feel free to upload your own IndieWeb or IndieWebCamp related logos and embed them here!

Related efforts

Some 88x31 and 80x15 buttons related to but not particularly IndieWeb:

Tools and resources

Brainstorming

Webmentions Accepted

Idea: an I ❀️ Webmentions or Webmentions accepted βœ… button to indicate your site accepts webmentions.

Link the button to your webmention endpoint with a query param of the page its on as the default target.

Have your webmention endpoint present a form UI to submit a webmention with the target auto-filled in with the default target from abovementioned link.

Use-case: Webmention-faq#How_do_you_know_if_a_website_uses_webmentions.3F

Indiewebified

For some old school web fun, if your site passes the tests at Indiewebify.me, one could add a button to their site with a link to Indiewebify.me and/or to the link indicating that their site passed. (Contextual note: many of these old buttons were originally used to indicate that a site used certain specifications or passed certain validation tests.)

80x15 button with an orange box containing a + sign on the left and the pixelated word INDIEWEBIFIED on the right.

Rendering on high resolution displays

Suggestion: add style="image-rendering:pixelated;" to the img tag for small badges when viewed on high-resolution displays. They will retain their pixelated look instead of made blurry when scaled up.

Previously

Need to be updated

These need to be updated to the new logo.

See Also