Promptslove

Preferred Sources Button Maker

Make your own "Add as preferred source on Google" button. Pick from 73 styles, float it anywhere on the page, then copy the code for your platform or download it as an image. Free, no signup.

1. Your site and button type

Domains and subdomains only. Google doesn't accept subfolders like /blog.

2. Pick a style

73 styles, every one with the Google icon in its real colours.

3. Customise

Placement

Inline

Floating

Edge

Live preview

This runs the exact code you'll copy.

4. Get the code for your platform

Add your domain in step 1. Until then, this code points at example.com.

  1. 1Open the page or template.
  2. 2Paste the code where the button should appear, for example at the end of the article.
  3. 3Publish and click it once to test.
Paste where the button should appear
<!-- Google preferred sources button -->
<style>
.psb-169atw{box-sizing:border-box;position:relative;display:inline-flex;align-items:center;text-decoration:none;cursor:pointer;font-family:-apple-system,BlinkMacSystemFont,'Segoe UI',Roboto,Helvetica,Arial,sans-serif;line-height:1.25;transition:transform .15s,box-shadow .15s,filter .15s;gap:9px;padding:9px 17px 9px 17px;border-radius:999px;background:#ffffff;color:#1f1f1f;font-size:15px;font-weight:500;border:1px solid #dadce0;box-shadow:0px 1px 3px rgba(15,23,42,.18);white-space:nowrap}
.psb-169atw:hover{filter:brightness(.96)}
.psb-169atw:focus-visible{outline:3px solid #1a73e8;outline-offset:3px}
.psb-169atw-w{margin:16px 0;text-align:left}
@media (max-width:480px){.psb-169atw{white-space:normal}}
</style>
<div id="psb-169atw-w" class="psb-169atw-w"><a class="psb-169atw" href="https://www.google.com/preferences/source?q=example.com" target="_blank" rel="noopener" title="Add as preferred source on Google"><svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24" width="20" height="20" aria-hidden="true" focusable="false" style="display:block;width:20px;height:20px;flex:none"><path fill="#4285F4" d="M22.56 12.25c0-.78-.07-1.53-.2-2.25H12v4.26h5.92a5.06 5.06 0 0 1-2.2 3.32v2.77h3.57c2.08-1.92 3.27-4.74 3.27-8.1z"/><path fill="#34A853" d="M12 23c2.97 0 5.46-.98 7.28-2.66l-3.57-2.77c-.98.66-2.23 1.06-3.71 1.06-2.86 0-5.29-1.93-6.16-4.53H2.18v2.84A11 11 0 0 0 12 23z"/><path fill="#FBBC05" d="M5.84 14.09a6.6 6.6 0 0 1 0-4.18V7.07H2.18a11 11 0 0 0 0 9.86l3.66-2.84z"/><path fill="#EA4335" d="M12 5.38c1.62 0 3.06.56 4.21 1.64l3.15-3.15C17.45 2.09 14.97 1 12 1A11 11 0 0 0 2.18 7.07l3.66 2.84C6.71 7.31 9.14 5.38 12 5.38z"/></svg><span>Add as preferred source on Google</span></a></div>

Image version

Downloads

Transparent backgrounds. Made in your browser, nothing is uploaded.

The ZIP has all images, the code, a demo page and install notes for Plain HTML.

How to add a preferred sources button

  1. 1

    Enter your domain

    Type your domain and check it comes up in Google's tool. Then choose a styled link, a styled button with Google's popup, or the official button.

  2. 2

    Pick a style and placement

    Browse 73 styles across 10 families. Set your wording, size and colours, then choose inline, floating or a bar.

  3. 3

    Copy the code or download it

    Choose from 13 install routes and follow the steps, or download PNG, SVG and a ZIP with everything.

Where to place the button

Google doesn't publish placement rules, so test what suits your readers. Here is how I'd think about each option.

End of article (inline)
The reader just finished your content, so this is the most natural moment to ask.
Bottom right or bottom left
Always within reach and out of the way. Add a close button and a delay so it stays polite.
Bottom centre
Hard to miss on a phone. Keep it small so it doesn't cover your content.
Middle left or right, or a side tab
Sits beside long reads on desktop. Move it to a bottom corner on mobile using the "On mobile" option.
Top or bottom bar
The loudest choice, with room for a message. Check it doesn't clash with a sticky header or cookie banner.
Top corners
Usually collide with menus. Use them only if your header leaves the space free.

Works with your platform

Step 4 gives you exact steps and ready-made code for each of these. On anything else, the Plain HTML code works wherever your platform accepts custom HTML.

  • Plain HTML
  • WordPress
  • Elementor
  • Shopify
  • Webflow
  • Squarespace
  • Wix
  • Ghost
  • Blogger
  • React / Next.js
  • Astro
  • Tag Manager
  • Email / Markdown

Frequently asked questions

What is a Google preferred source?

It is a Google Search setting that lets a reader pick the sites they want to see more of. Those sites then show up more often for that reader in Top Stories, AI Mode and AI Overviews. Your button simply makes it one click for them to choose you.

Will this button improve my rankings?

No, not directly. The button is not a ranking signal you can buy with a snippet of code. It persuades your own readers to opt in, and only those readers see the effect. Treat it like a follow button, not an SEO hack.

Is my site eligible?

Google accepts domains and subdomains, such as example.com or news.example.com. Subfolders such as example.com/blog are not eligible. To check, type your domain into step 1 and use the eligibility link, which opens Google's own tool. If your site comes up there, you are good.

What is the difference between the three button types?

A styled link is plain HTML with no script, and it sends readers to Google's page. Styled + Google popup uses your chosen style with Google's script, so readers can add you without leaving your page. The official button is drawn by Google, which also translates it, but you can only choose light or dark.

Can I use the button in emails and newsletters?

Yes. Scripts and most CSS get stripped from email, so use the Email / Markdown tab. It gives you an image link, Markdown and a plain link. Download the PNG, upload it to your email platform and paste its address into the Image URL box.

Can I see how many people added my site?

Only clicks. Google does not tell you when a reader confirms, so nobody can count confirmed adds. Turn on the GA4 option to log a preferred_source_click event, and treat that number as the upper limit.

Where should I put the button?

Most people do best with an inline button at the end of an article, where the reader has just got value from you. Add a quiet floating button if you want it on every page. Avoid the header, where it competes with your main call to action.

Will the code slow down my site?

The styled link is just a few lines of HTML and CSS with no outside requests. The popup and official modes load Google's publisher.js, which is loaded asynchronously so it doesn't block your page from rendering.

Is this tool made by Google?

No. This is an independent free tool from Promptslove, and it is not affiliated with or endorsed by Google. Google and the Google logo are trademarks of Google LLC. The code only uses the link and script that Google publishes in its own documentation.

Is my domain stored anywhere?

No. Everything runs in your browser, including the images and the ZIP. Your domain and wording are not sent to our server.

Now give them more to come back for

Readers pick sources that keep helping them. Promptslove has 29,000+ prompts and 1,200+ Gen AI prompts to help you publish more of what they want.

Get lifetime access

Independent tool, not affiliated with or endorsed by Google. Google and the Google logo are trademarks of Google LLC. Button code follows Google's preferred sources documentation.