search

alshedivat / al-folio

A beautiful, simple, clean, and responsive Jekyll theme for academics
https://alshedivat.github.io/al-folio/
MIT License
11.01k stars 11.15k forks source link

Add support for apple-touch-icon #2774

Open BenoitGaston opened 1 week ago

BenoitGaston commented 1 week ago

Have you checked that your feature request isn't already filed?

Description & Motivation

Adding this line:<link rel="apple-touch-icon" href=link_to_my_icon_asset /> below the shortcut icon line inside index.html will make that: adding a shortcut on an iOS device will use the chosen icon instead of a generic one.

The change is very simple.

Pitch

No response

Alternatives

No response

Additional context

No response

george-gca commented 1 week ago

I don't get it. Can you explain it further?

BenoitGaston commented 1 week ago

Sure. First sorry for the poor wording that reflect my ignorance of html.

When using Safari on an iOS device, one has the option to Add a website icon to your Home Screen (see here).

However, this icon needs to be referenced as apple-touch-icon in the html file (see here). If this reference is missing an icon with the web site initial is created by iOS.

After building, and deploying my webpage (to my own domain not to gihub), I added the icon on iOS and obtained the icon shared above on the left (with just my initial).

So what I did was to modify the file _site/index.html to add this line:

<link rel="apple-touch-icon" href="/assets/img/the_name_of_myshortcut_image.jpg>

below this line

<link rel="shortcut icon" href="/assets/img/the_name_of_myshortcut_image.jpg>

and deploy again to my own domain.

And now I am able to get the icon above on the right (with my short cut picture) when adding a shortcut to my iPhone home screen.

I hope this makes sense.

Best,

george-gca commented 1 week ago

Now it makes sense. Tbh what doesn't make sense for me (but I am not against it) is creating a shortcut for your portfolio website on your phone. But it can be a nice addition.

Would you mind sending a PR for this? Maybe create a field for it in _config.yml in the social list, currently pointing to Einstein's profile picture?

BenoitGaston commented 1 week ago

Sure I will.

Indeed I am not using a self-referred shortcut on my phone but it is nice to be able to share it with relatives.

BenoitGaston commented 1 week ago

Sorry if my question is naive but the only place in the code where I can see a reference to shortcut icon is here.

Does it mean that I just need to duplicate this if else block and replace shortcut icon apple-touch-icon`?

george-gca commented 1 week ago

Yes, but pointing to the file defined in _config.yml.