How do I add a logo next to the fastpages blog name?

There is file. Not sure where should I make the change for it to appear something like below.

Something like this: image

Where do you want this logo to appear?

You will have to customize the HTML if you want this in the header or the footer. There is a customizing fastpages section in the README I would start there

Hi @hamelsmu, thanks for your response. My blog name is Raj Kumar. I want logo to just appear before blog name. Okay, I will start with customising HTML. Thanks.

Hi @hamelsmu,
I am having the same issue to replace the logo in index.html. Replacing a costume logo doesn’t reflect on the website.

Follow the example of the image that’s there now?

Hi @hamelsmu,

Sorry the late answer.

I customize the header like this:

{% comment %}
  Placeholder to allow defining custom head, in principle, you can add anything here, e.g. favicons:

  1. Head over to to add your own favicons.
  2. Customize default _includes/custom-head.html in your source directory and insert the given code snippet.
{% endcomment %}

{%- include favicons.html -%}
    <link rel="apple-touch-icon" sizes="180x180" href="/images/apple-touch-icon.png">
    <link rel="icon" type="image/png" sizes="32x32" href="/images/favicon-32x32.png">
    <link rel="icon" type="image/png" sizes="16x16" href="/images/favicon-16x16.png">
    <link rel="manifest" href="/site.webmanifest">
    <meta name="msapplication-TileColor" content="#da532c">
    <meta name="theme-color" content="#ffffff">
{%- if site.annotations -%}
<script src="" async></script>
{%- endif -%}

{% if site.use_math %}
    <link rel="stylesheet" href="" integrity="sha512-h7nl+xz8wgDlNM4NqKEM4F1NkIRS17M9+uJwIGwuo8vGqIl4BhuCKdxjWEINm+xyrUjNCnK5dCrhM0sj+wTIXw==" crossorigin="anonymous" />
    <script src="" integrity="sha512-/CMIhXiDA3m2c9kzRyd97MTb3MC6OVnx4TElQ7fkkoRghwDf6gi41gaT1PwF270W6+J60uTmwgeRpNpJdRV6sg==" crossorigin="anonymous"></script>
    <script src="" integrity="sha512-Do7uJAaHZm5OLrIv/yN4w0iG1dbu01kzdMNnFfu/mAqgUk6Nniv2JYHcwH+cNwjqgLcqcuBBk+JRvprLVI8azg==" crossorigin="anonymous"></script>
    <script src="" integrity="sha512-0doc9hKxR3PYwso42RD1p5ySZpzzuDiOwMrdCEh2WdJZCjcmFKc/wEnL+z8fBQrnHoiNWbo+3fiGkOYXBdQp4A==" crossorigin="anonymous"></script>
    document.addEventListener("DOMContentLoaded", function() {
        renderMathInElement( document.body, {
        delimiters: [
            {left: "$$", right: "$$", display: true},
            {left: "[%", right: "%]", display: true},
            {left: "$", right: "$", display: false}
{% endif %}

function wrap_img(fn) {
    if (document.attachEvent ? document.readyState === "complete" : document.readyState !== "loading") {
        var elements = document.querySelectorAll(".post img");, function(el, i) {
            if (el.getAttribute("title") && (el.className != "emoji")) {
                const caption = document.createElement('figcaption');
                var node = document.createTextNode(el.getAttribute("title"));
                const wrapper = document.createElement('figure');
                wrapper.className = 'image';
                el.parentNode.insertBefore(wrapper, el);
    } else { document.addEventListener('DOMContentLoaded', fn); }
window.onload = wrap_img;

    document.addEventListener("DOMContentLoaded", function(){
    // add link icon to anchor tags
    var elem = document.querySelectorAll(".anchor-link")
    elem.forEach(e => (e.innerHTML = '<i class="fas fa-link fa-xs"></i>'));

What am I missing ?


I sorted it out by inserting the html into favicons.html .