Profile photos with multiple blogs

It’s possible on Micro.blog to have multiple blogs or podcasts for a single Micro.blog account. When managing multiple blogs, you may want to override the image so that it’s different than your profile photo.

Changing the header

To change the home page to use a new image instead of your profile photo, you’ll need to create a custom theme to override the header on your site:

  1. Upload a new photo under Posts → Uploads. Copy the URL for the uploaded file.
  2. Click on Posts → Design and then Edit Custom Themes.
  3. Create a new theme. You can name it whatever you want.
  4. Click on the theme to edit it and look for the template layouts/partials/profile.html.
  5. In that template, replace “” with the URL for the image you uploaded in the Uploads tab.
  6. After saving it, make sure to go back to Posts → Design and select the custom theme to use for your site.

Podcast cover art

To customize the podcast cover art, upload a new PNG in Micro.blog on the web under Posts → Uploads. The dimensions should be 1400x1400 because that’s what Apple’s podcast directory prefers. Then click on Posts → Design and click the small preview of your current profile photo to pick the cover art for your podcast.

iOS home screen icon

Micro.blog-hosted blogs have a basic “favicon” based on your profile photo. This should appear in web browsers and feed readers. When adding a blog as an icon on the iOS home screen, though, a custom image needs to be provided to iOS.

  1. Upload a PNG of the right dimensions under Posts → Uploads. Copy the URL for the uploaded file.
  2. Create a new custom theme on Micro.blog (or use your current custom theme if you already have one). Custom themes are managed under Posts → Design → Edit Custom Themes.
  3. Search for the template layouts/partials/head.html and click on it to edit it.
  4. Add the HTML to reference your uploaded PNG file. It should be something like:
<link rel="apple-touch-icon" href="url-here" />

After saving the template, make sure the custom theme is set for your blog.

My favicon stopped showing up on browsers. I just checked to see if something had changed, but everything is set up following the instructions on this help page. Somehow it just stopped working. Is there some way to fix it ? Thanks.

Somewhat similarly, my blog.w4rner.com favicon is stuck on an old version of my micro.blog/w4rner profile photo

I started a topic the other day without realizing y’all were talking favicons over here. Came across an awesome site for generating/testing favicon for various platforms.

Safari was really slow to ditch it’s cache on the iPhone and still wants to be fussy on iPad but I trust that I have what I need in place for . The other two platforms seemed to want files we are unable to upload or that they require within the root directory.

I set out trying to get the pretty icon in my Safari favorites and home screen.

Of the package the site generated for me, this is what I kept as functional:

    <link rel="shortcut icon"
             href="https://moondeer.blog/uploads/2021/5260d2013e.png"  
            type="image/x-icon" />
    <link rel="apple-touch-icon" sizes="180x180"   
            href="https://moondeer.blog/uploads/2021/5260d2013e.png">
    <link rel="icon" type="image/png" sizes="32x32"   
             href="https://moondeer.blog/uploads/2021/91b72102d1.png">
    <link rel="icon" type="image/png" sizes="16x16" 
             href="https://moondeer.blog/uploads/2021/df2e80d9c3.png">
    <link rel="mask-icon" 
            href="https://moondeer.blog/uploads/2021/3b64fed44b.svg" 
           color="#4a577c">
    <meta name="msapplication-TileColor" content="#da532c">
    <meta name="theme-color" content="#da532c">

Later that day the iPhone finally came around:

image

Bump.

Still not showing the favicon, with no change made on my side.
Tried asking for help on the timeline, but no reply so far.

Ideas ? Thanks.

It looks like something has gone awry with the document head:

<head>
	<meta name="generator" content="Hugo 0.54.0">
  <meta charset="utf-8">
  <meta name="viewport" content="width=device-width, initial-scale=1">
  <title>{micro maique}</title>
  <link rel="stylesheet" href="//fonts.googleapis.com/css?family=Source+Sans+Pro:300,300i,600">
  <link rel="stylesheet" href="/style.css?0">
  <link rel="stylesheet" href="/custom.css?0">
  </head><body><a rel="me" href="https://writing.exchange/@maique"></a>
  <a rel="me" href="https://mastodon.social/@maique"></a>
  <a rel="me" href="https://fosstodon.org/@maique"></a>
 <a rel="me" href="https://maique.xyz/@maique"></a>
	<link rel="shortcut icon" href="https://micro.blog/maique/favicon.png" type="image/x-icon">

    <link href="https://micro.maiquemadeira.com/feed.xml" rel="alternate" type="application/rss+xml" title="{micro maique}">
      <link href="https://micro.maiquemadeira.com/podcast.xml" rel="alternate" type="application/rss+xml" title="Podcast">
      <link rel="alternate" type="application/json" title="{micro maique}" href="https://micro.maiquemadeira.com/feed.json">
      <link rel="EditURI" type="application/rsd+xml" href="https://micro.maiquemadeira.com/rsd.xml">
    <link rel="me" href="https://micro.blog/maique">
	
	
	
	<link rel="authorization_endpoint" href="https://micro.blog/indieauth/auth">
	<link rel="token_endpoint" href="https://micro.blog/indieauth/token">
	<link rel="micropub" href="https://micro.blog/micropub">
	<link rel="microsub" href="https://micro.blog/microsub">
	<link rel="webmention" href="https://micro.blog/webmention">
	<link rel="subscribe" href="https://micro.blog/users/follow">
<link rel="apple-touch-icon" href="https://micro.maiquemadeira.com/uploads/2020/dbc6c58c04.png">

    
    	<script src="https://cdn.jsdelivr.net/npm/jquery@1.12.4/dist/jquery.min.js"></script>
<script type="text/javascript" src="/assets/bigfoot/dist/bigfoot.min.js"></script>
<link rel="stylesheet" type="text/css" href="/assets/bigfoot/dist/bigfoot-number.css">
<script type="text/javascript">
    $.bigfoot();
</script>

    
    	


	<meta property="og:title" content="{micro maique}">


<meta property="og:description" content="Find <a href=&quot;https://micro.blog/maique&quot;>@maique on Micro.blog</a>.">
<meta property="og:type" content="article">
<meta property="og:url" content="https://micro.maiquemadeira.com/">








  
    <meta property="og:updated_time" content="2021-03-04T23:16:11+01:00">

Specifically this bit, the head closes and body begins too early

</head><body><a rel="me" href="https://writing.exchange/@maique"></a>
  <a rel="me" href="https://mastodon.social/@maique"></a>
  <a rel="me" href="https://fosstodon.org/@maique"></a>
 <a rel="me" href="https://maique.xyz/@maique"></a>
1 Like

Thanks!
That’s odd, don’t remember messing with it.
I’ll fire up the laptop as soon as possible and try to fix it.
Appreciate the help :blush:

1 Like

@maique Did you have any luck fixing it? Also, which theme are/were you using?

No, not yet. I’m using a slightly modified Kiko, but it was working fine for a long time, and I don’t remember changing anything. No tweaks, new plugins,…

I did check the source of the site, and I’m not getting the same result on different browsers, if that makes any sense. It does not to me.

I’ll have to dig a little deeper, with my limited knowledge of the whole thing, but can’t find the time to focus on it at the moment. It’s bothering me, but I can live with it at the moment… :pensive:

@manton - What about .Site.Params.twitter_username? How do those work across multiple sites under a single account?

The Twitter username is currently set per account, so it will be the same for all sites.

This feature was originally designed for signing in with IndieAuth, so I think we need to revise it. It might be better if we extracted the social network usernames into a plug-in, which could be configured separately for each site instead of once on the user account.

OK, because I couldn’t get that parameter to appear on a second website under the same account. Is there anything I need to do for those parameters to be available on Red Oak as they are on Cypress?