Pkgdown: Add a favicon

Created on 23 Jul 2017 · 9Comments · Source: r-lib/pkgdown

How is it possible to add a favicon to my pkgdown site automatically? E.g., through YALM settings.

Source

GegznaV

👍2

Most helpful comment

In my case, a favicon is indeed generated automatically but not visible when the webpage is loaded. Is there any thing I need to do so that the generated favicon is indeed used when the page is loaded?

choisy on 27 Sep 2018

👍5

All 9 comments

Hi,

to add a favicon in one of the entries of the top menu, you just specify an attribute "icon" for an entry of the navbar in the "_pkgdown.yaml" file in the root of your package.

For example:

title: mypackage
template:
  params:
    bootswatch: flatly
reference:
  - title: Exported Functions
    desc: ~
    contents:
      - '`aaaa`'
      - '`bbbb`'
navbar:
  type: inverse
  left:
    - icon: fa-home
      href: index.html
    - text: "faq"
      icon: fa-question-circle-o
      href: articles/faq.html

would give you an entry "home" in the navbar with just an icon, and an entry "faq" with both icon and text pointing to "faq.html"
As per build_site documentation, the list of icons can be found here:
http://fontawesome.io/icons/

You can also put favicons wherever you want in an article by inserting in this case the "full html specification" of the favicon (instead than only its name) in the text of the corresponding Rmd.

For example:

I want a <i class="fa fa-github" aria-hidden="true"></i> icon

would render in the website with a "github" icon.

HTH

lbusett on 29 Jul 2017

Thank you for your suggestion how to insert icons anywhere in the file. I did not know that and it will be helpful for me in the future 👍
Unfortunately, it was not exactly what I wanted by raising this issue. I was writing about the favicon (which is also known as a website icon). And I was wondering if there is a YAML setting, that enables this automatically.

At the moment as a temporary solution I wrote myself a function, which inserts HTML code, such as:

<link rel="icon" href="favicon.png" />

into the the <head> of all HTML files generated by pkgdown.

GegznaV on 29 Jul 2017

ah, well.... the names started with "fa fa", so I thought those where "favicons"... as you may have surmised I'm not really a web developer !

Sorry for the misunderstanding and glad it helped somehow nonetheless....

lbusett on 29 Jul 2017

A favicon is automatically generated from the package logo; I've added a note to the docs.

hadley on 20 Feb 2018

choisy on 27 Sep 2018

👍5

In my case, a favicon is indeed generated automatically but not visible when the webpage is loaded. Is there any thing I need to do so that the generated favicon is indeed used when the page is loaded?

Same for me.

cschwem2er on 6 Oct 2018

I figured it out! You need to manually run pkgdown::build_favicon() to build the favicon files first (ie... before build_site()). If you want to use your own icons....it seems like you'd need to provide a very formulaic set of favicon files. In a folder (from the top directory of the repository):
pkgdown/favicon

Then the files must be named (I think it's hard-coded into the source):

(just adding the single favicon.ico file was not enough)

OR...move your favicon.ico file to the man/figures folder (you may need to create this folder), and rename it "logo.png" (hopefully it's a png...). THEN, you can run build_favicon() (for example, on your organization's favicon).

ldecicco-USGS on 20 Mar 2019

OR...move your favicon.ico file to the man/figures folder (you may need to create this folder), and rename it "logo.png" (hopefully it's a png...). THEN, you can run build_favicon() (for example, on your organization's favicon).

I was having trouble until I read that. I found I needed to

Generate the favicons with pkgdown::build_favicons()
Manually move the contents of pkgdown/favicon to man/figures.
Call pkgdown::build_site() afterwards.

Not a big deal once I read https://github.com/r-lib/pkgdown/issues/379#issuecomment-475010096 and thought to try (2).

wlandau on 14 Dec 2019

👍1

@wlandau 's instructions got me most of the way there. The generated html is expecting the favicon files in docs/, so I also needed to copy them there.