Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

Sign up for GitHub

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Jump to bottom

Add a favicon #379

Closed
GegznaV opened this issue Jul 23, 2017 · 10 comments
Closed

Add a favicon #379

GegznaV opened this issue Jul 23, 2017 · 10 comments

Comments

@GegznaV
Copy link

GegznaV commented Jul 23, 2017 •
edited
Loading

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

lbusett commented Jul 28, 2017 •
edited
Loading

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

@GegznaV
Copy link
Author

GegznaV commented Jul 29, 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.

@lbusett
Copy link
Contributor

lbusett commented Jul 29, 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....

@hadley hadley closed this as completed in f0bcfc1 Feb 20, 2018
@hadley
Copy link
Member

hadley commented Feb 20, 2018

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

@choisy
Copy link

choisy commented Sep 27, 2018

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?

@cschwem2er
Copy link

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.

@ldecicco-USGS
Copy link

ldecicco-USGS commented Mar 20, 2019 •
edited
Loading

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):
image

(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).

@wlandau
Copy link

wlandau commented Dec 14, 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

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

Not a big deal once I read #379 (comment) and thought to try (2).

@achubaty
Copy link

@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.

@harshkrishna17 harshkrishna17 mentioned this issue Jul 3, 2022
Closed
@melissavanbussel
Copy link
Contributor

I was struggling with getting this to work at work, and here is the solution that ended up working for me. This assumes you have a logo.png file under man/figures/ and that you haven't run or are unable to run build_favicons().

In your _pkgdown.yml:

template:
  includes:
    in_header: '<link rel="icon" type="image/x-icon" href="logo.png">'

This will get it to work on the home page of the site.

To get it to work on the other pages as well, you need to make a copy of the logo.png under the reference folder in your CI/CD pipeline. For me, I added this to .gitlab-ci.yml but if you're using GitHub Actions it would be in whichever file controls the actions:

- cp -r man/figures/logo.png public/reference/

(Depending on exactly how things are configured, you might need to play around a bit with the folders there. It's called public for me but it might be something else for you)

Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment
Assignees
No one assigned
Labels
None yet
Projects
None yet
Milestone
No milestone
Development

No branches or pull requests
9 participants
@hadley @ldecicco-USGS @wlandau @achubaty @lbusett @cschwem2er @choisy @GegznaV @melissavanbussel