Logo Questions Linux Laravel Mysql Ubuntu Git Menu
 

What favicon size does iPhone's "Add to Favorites" need?

I'm following Apple's Safari Web Content Guide - Configuring Web Applications and it works as expected most of the time. But when I want to add to favorites on iPhone, the favicon doesn't show up. Is it the size issue? Or what else should I do for the favorites icon to show up? Thanks

enter image description here


My Code:

<head>
  <meta charset="utf-8">
  <meta http-equiv="X-UA-Compatible" content="IE=edge">
  <meta name="viewport" content="width=device-width, initial-scale=1">
  <link rel="icon" type="image/x-icon/" href="{{ "/favicon.ico" | relative_url }}">
  <link rel="apple-touch-icon" href="{{ "/apple-touch-icon.png" | relative_url }}">
  <link rel="apple-touch-icon" sizes="76x76" href="{{ "/apple-touch-icon-76x76.png" | relative_url }}">
  <link rel="apple-touch-icon" sizes="120x120" href="{{ "/apple-touch-icon-120x120.png" | relative_url }}">
  <link rel="apple-touch-icon" sizes="152x152" href="{{ "/touch-icon-ipad.png" | relative_url }}">
  <link rel="apple-touch-icon" sizes="180x180" href="{{ "/touch-icon-iphone-retina.png" | relative_url }}">
  <link rel="apple-touch-icon" sizes="167x167" href="{{ "/touch-icon-ipad-retina.png" | relative_url }}">
  {%- seo -%}
  <link rel="stylesheet" href="{{ "/assets/main.css" | relative_url }}">
  {%- feed_meta -%}
  {%- if jekyll.environment == 'production' and site.google_analytics -%}
    {%- include google-analytics.html -%}
  {%- endif -%}
  <!-- site css -->
  <link rel="stylesheet" href="{{'/assets/main.css' | prepend: site.baseurl}}">
  {% seo %}
</head>

like image 589
Yuchen Zhang Avatar asked Oct 12 '25 22:10

Yuchen Zhang


2 Answers

<link rel="apple-touch-icon" href="apple-touch-icon.png">

Per Apple’s current guidance, default touch icon sizes are as follows: enter image description here

like image 120
Hossein Azizdokht Avatar answered Oct 14 '25 14:10

Hossein Azizdokht


I have figured it out and it is displaying the favicons properly now. Thanks a lot, @Charlie, for the favicon checker website: https://realfavicongenerator.net/favicon_checker#.YIHdji1h0Ts

It seemed like I messed up some favicon resolutions, so they caused the issue.

like image 38
Yuchen Zhang Avatar answered Oct 14 '25 14:10

Yuchen Zhang



Donate For Us

If you love us? You can donate to us via Paypal or buy me a coffee so we can maintain and grow! Thank you!