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

nbdev
1

There is https://github.com/fastai/fastpages/tree/master/images/logo/png file. Not sure where should I make the change for it to appear something like below.

Something like this: image

2

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

3

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.

4

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.
Regards,
Bruno

5

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

6

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 https://realfavicongenerator.net/ 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 -%}
<head>
    <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">
</head>
{%- if site.annotations -%}
<script src="https://hypothes.is/embed.js" async></script>
{%- endif -%}

{% if site.use_math %}
    <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/KaTeX/0.12.0/katex.min.css" integrity="sha512-h7nl+xz8wgDlNM4NqKEM4F1NkIRS17M9+uJwIGwuo8vGqIl4BhuCKdxjWEINm+xyrUjNCnK5dCrhM0sj+wTIXw==" crossorigin="anonymous" />
    <script src="https://cdnjs.cloudflare.com/ajax/libs/KaTeX/0.12.0/katex.min.js" integrity="sha512-/CMIhXiDA3m2c9kzRyd97MTb3MC6OVnx4TElQ7fkkoRghwDf6gi41gaT1PwF270W6+J60uTmwgeRpNpJdRV6sg==" crossorigin="anonymous"></script>
    <script src="https://cdnjs.cloudflare.com/ajax/libs/KaTeX/0.12.0/contrib/auto-render.min.js" integrity="sha512-Do7uJAaHZm5OLrIv/yN4w0iG1dbu01kzdMNnFfu/mAqgUk6Nniv2JYHcwH+cNwjqgLcqcuBBk+JRvprLVI8azg==" crossorigin="anonymous"></script>
    <script src="https://cdnjs.cloudflare.com/ajax/libs/mathjax/2.7.5/MathJax.js" integrity="sha512-0doc9hKxR3PYwso42RD1p5ySZpzzuDiOwMrdCEh2WdJZCjcmFKc/wEnL+z8fBQrnHoiNWbo+3fiGkOYXBdQp4A==" crossorigin="anonymous"></script>
    <script>
    document.addEventListener("DOMContentLoaded", function() {
        renderMathInElement( document.body, {
        delimiters: [
            {left: "$$", right: "$$", display: true},
            {left: "[%", right: "%]", display: true},
            {left: "$", right: "$", display: false}
        ]}
        );
    });
    </script>
{% endif %}

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

<script>
    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>'));
    });
</script>

What am I missing ?

Thanks,
Bruno

7

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

8

What have you inserted in favicons.html?