WebClip icon not working on home screen
I know, this is not a new technique and this question has bee asked a few times in different variations. But none of them (nor googling) could help me fixing my problem. I’m using the following links:
It’s a WordPress theme, so I cannot simply put the icons in the web root. The icons actually do work, for example when I add the site to my iPads favs, I can see the beautiful retina icon. But when hitting «Add to Home Screen» it does not work and show a black icon instead:
Create a Web Clip Icon for iPhones
Much like you can bookmark web pages in a desktop browser, you can save a link to any web page on an iPhone or iPad by clicking the Export icon circled in red in the top figure and then choosing Add to Home Screen, as shown in the bottom figure.
A Web Clip icon looks just like the icons that come with native iTunes apps. When a visitor to your website adds a Web Clip icon to her Home screen (the desktop of her device), it creates a link to your website, much like a bookmark in a desktop web browser.
This Web Clip icon gives your visitors a great shortcut back to your web site, and it’s a powerful way to keep them thinking about you. Unfortunately, many users of the iPhone and iPad don’t even realize it’s possible to save a link to a website in this way.
Here’s how it works: When a user taps the middle button in the button bar at the bottom of the iPhone or iPod touch, Safari offers several options.
When you choose Add to Home screen, a small image, called a Web Clip icon, is saved to the Home screen of the iPhone or iPad with a link to the web page. This link makes going to a website by clicking an icon just as easy as launching an app. Click a Web Clip icon, and the iPhone and iPad launch Safari and open the page in a browser in one slick action.
As a web designer, you can create an image to serve as your Web Clip icon. If you don’t, the iPod touch, iPhone, or iPad saves a screenshot of whatever is displayed on the screen and uses that as the icon. It’s a good idea to go to just a little extra effort and specify the image that you want to use as the icon on the Home screen.
In this figure, you can see a Web Clip icon created from the main image used in this design. This image is cropped and simplified to serve as a better icon than a screen capture of the entire page, which would include the text and other images at such a small size that they would be impossible to read.
Here’s how you create a Web Clip icon and specify it in the code of your page:
- Use a graphics program, such as Photoshop, to create the image you want to serve as your icon. The image should measure 114-x-114 pixels and be saved in the PNG format. Note: High-resolution devices display the icon at 114 x 114. Older iPhones display it at 57-x-57 pixels, iPads display 72-x-72 pixels. You can create one of each size, or you can let the device scale down the image automatically. Also note that you can use a JPEG image, but if you want to make sure the icon works on all devices, saving it as a PNG image is the safest option.
- Name the image apple-touch-icon.png and upload it to the root directory of your website.
- (Optional) If you want to save the image in a subdirectory or you want to use a different Web Clip icon for the home page than you use for internal pages in your site, you can add this code to the section of any web page to specify the name and location of the image.
overflow-clip-margin
The overflow-clip-margin CSS property determines how far outside its bounds an element with overflow: clip may be painted before being clipped. The bound defined by this property is called the overflow clip edge of the box.
Syntax
/* values */ overflow-clip-margin: 20px; overflow-clip-margin: 1em; /* | */ overflow-clip-margin: content-box 5px; /* Global values */ overflow-clip-margin: inherit; overflow-clip-margin: initial; overflow-clip-margin: revert; overflow-clip-margin: revert-layer; overflow-clip-margin: unset;
The value, which defaults to padding-box , specifies the box edge to use as the overflow clip edge origin. The value specified in overflow-clip-margin must be nonnegative.
Note: If the element does not have overflow: clip then this property will be ignored.
Formal definition
| Initial value | 0px |
|---|---|
| Applies to | all elements |
| Inherited | no |
| Computed value | the computed and a keyword |
| Animation type | discrete |
Formal syntax
overflow-clip-margin =
||
=
content-box |
padding-box |
border-box
Examples
HTML
div class="box"> Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. div>
CSS
.box border: 3px solid black; width: 250px; height: 100px; overflow: clip; overflow-clip-margin: 20px; >
Result
Specifications
| Specification |
|---|
| CSS Overflow Module Level 3 # overflow-clip-margin |
Browser compatibility
BCD tables only load in the browser
See also
- Related CSS properties: text-overflow , white-space , overflow , overflow-inline , overflow-x , overflow-y , clip , display
Found a content problem with this page?
- Edit the page on GitHub.
- Report the content issue.
- View the source on GitHub.
This page was last modified on Apr 19, 2023 by MDN contributors.
Your blueprint for a better internet.
MDN
Support
- Product help
- Report an issue
Our communities
Developers
- Web Technologies
- Learn Web Development
- MDN Plus
- Hacks Blog
- Website Privacy Notice
- Cookies
- Legal
- Community Participation Guidelines
Visit Mozilla Corporation’s not-for-profit parent, the Mozilla Foundation.
Portions of this content are ©1998– 2023 by individual mozilla.org contributors. Content available under a Creative Commons license.
Создание favicon для сайта 2020
Favicon – это значок (иконка), который отображается во вкладке браузера, закладках, а также в сниппетах результатов поиска.
Favicon играет важную роль в веб-приложениях. Он может улучшить внешний вид сайта в выдаче, повышает узнаваемость вашего сайта, помогает пользователю быстро найти необходимую страницу в закладках и вкладках.
Кроме того, пользователь может добавить страницу вашего сайта на главный экран телефона или сохранить как веб-приложение. В таком случае с помощью favicon можно быстро найти сайт среди большого количества других приложений.
Какой формат использовать для favicon?
Раньше в качестве основного формата использовали ICO. Особенность данного формата – мульти-размерность. Данный файл может хранить в себе несколько размеров иконки. На смену ICO пришел формат PNG. ICO все еще поддерживаемый, но большинство современных браузеров выбирают PNG формат иконки, который легче. Некоторые браузеры не могут выбрать правильный значок в файле ICO, что приводит к неправильному использования значка с низким разрешением.
О каких платформах пойдет речь в этой статье?
- Десктопные браузеры
- Chrome на Android
- Иконка закладки в iOS (PWA)
- macOS
- Windows
Десктопные браузеры
Начнем, пожалуй, с классического десктопа.
Как было упомянуто ранее, формат ICO сегодня является устаревшим, но это не значит, что про него нужно забыть. Формат ICO может спасти вашу иконку и корректно отображать favicon в некоторых случаях. Например, до 11 версии IE PNG-формат не поддерживается. Поэтому для IE10 и младших версий нужно использовать старый формат ICO. В таком случае желательно использовать следующую комбинацию ICO и PNG форматов:
Для создания мульти-размерной иконки ICO можно использовать сервис-конвертер icoconvert. При генерации иконки необходимо выбрать следующие размеры: 16х16, 32х32, 48х48 (highest resolution icon).
Иконки PNG имеют следующие размеры: 16х16, 32х32, 96х96, 120х120. Зачем иконка 120х120? Яндекс Справка сообщает, что может воспользоваться иконкой данного размера.
Если обратить внимание на значение rel (тип ресурса), то icon – учитывается большинством браузеров, а shortcut icon – учитывается браузером IE.
Chrome на Android
Android ожидает увидеть значок 192х192 в формате PNG, alpha-канал (прозрачность) приветствуется.
Android Chrome полагается на манифест веб-приложения. Любой сайт может использовать манифест для того, чтобы ссылаться на некоторые значки.
Сам файл манифеста формата json и объявляется следующей строкой:
Файл манифеста для Android Chrome можно сгенерировать с помощью сервиса RealFaviconGenerator.
Иконки должны иметь следующие размеры: 72х72, 96х96, 144х144, 192х192, 512х512 в формате PNG, прозрачность приветствуется. Так как иконка может иметь прозрачный фон, то в манифесте можно указать цвет с помощью background_color.
Стоит отметить, что на телефоне пользователь имеет возможность сохранить страницу браузера на главный экран. Это будет просто ссылка на страницу вашего сайта, подтянется иконка с названием android-icon-192×192.png, которая объявлена у вас в коде.
Если же подключить к сайту манифест, то при открытии страницы пользователю может быть предложено сохранить сайт в качестве приложения. В данном случае вы имеет возможность объявить визуально ту же иконку (android-icon-192×192.png) или переделать дизайн иконки для приложения под свои нужды и объявить в манифесте с соответствующими размерами.
Иконка закладки в iOS (PWA)
iOS Safari ожидает увидеть apple touch icon. Это иконка PNG формата 180х180, без alpha-канала (без прозрачности). Углы иконки будут автоматически скруглены, что упрощает создание apple touch icon.
Пользователи iOS также могут добавить сайт на главный экран, и он будет выглядеть как приложение. Такая ссылка отображается в виде значка и называется Web Clip.
Нижеперечисленные размеры иконок предназначены для поддержки различных устройств, например, для iPhone и iPad:
В коде нужно добавить атрибут rel=«apple-touch-icon» и указать размер с помощью sizes.
Если на сайте нет значка, размер которого является рекомендованным для устройства, то будет использована сама близкая по размеру иконка большего размера. Основная apple touch icon это иконка размером – 180х180. Остальные устройства могут уменьшать иконку.
При создании иконки не забывайте об отступах. Они должны быть не менее 4px со всех сторон. Это необходимо, чтобы ваша иконка не обрезалась, так как значок приложения в iOS имеет скругленные углы.
Следует отметить, что устройства под iOS не единственные, которые ищут apple touch icon. Некоторые браузеры, вроде Android Chrome, могут использовать apple touch иконки, так как они встречаются чаще других PNG иконок высоких разрешений.
macOS
В Mac OS дела обстоят совершенно иначе. Если пользователь попробует сохранить сайт на рабочий стол, то вместо иконки сайта будет отображен скриншот страницы.
Чтобы добавить иконку необходимо использовать формат SVG, который позволит сделать маску иконки. Данная иконка будет отображена при закреплении вкладки в Safari.
В коде нужно добавить атрибут rel=«mask-icon». Сама SVG-иконка должна быть черного цвета. Цвет иконки задается в атрибуте color=»#e52037″.
SVG-иконка используется в закрепленной вкладке (pinned tab – no focus) в монохромном виде. При наведении (pinned tab – focus) иконка будет закрашена в цвет, который имеет атрибут «color». В touch bar также передается цвет атрибута «color».
При создании иконки необходимо убрать все имеющиеся тени, сделать ее плоской и простой. Упростить иконку до одного объекта можно с помощью операций «Union» и «Flatten». Данные операции легко применить в программе Figma.
Если закрыть глаза на создание иконки-маски, то браузер просто отобразит первую букву домена вашего сайта.
Windows
С Windows нужно немного запариться, чтобы сделать хорошо.
Для IE10 и более младших версий необходимо использовать формат ICO, так как до IE11 формат PNG не поддерживался.
С приходом IE11 и Windows 8.1 появилась возможность закреплять сайты в виде живых плиток. Для маленьких плиток используется по умолчанию favicon, а для больших и широких плиток необходимо задавать изображение конкретного размера. Это можно сделать с помощью добавления тегов метаданных в разметку сайта или создать browserconfig.xml (файл конфигурации браузера).
Пример добавление тегов метаданных в разметку веб-сайта для больших плиток:
Данной строкой мы указываем цвет фона плитки:
Можно указать имя вашего веб-сайта:
Что такое browserconfig? Это XML-документ, в котором перечислены различные значки, соответствующие пользовательскому интерфейсу Metro UI.
Чтобы подключить файл browserconfig в разметке необходимо добавить следующую строку в head:
Сам файл будет выглядеть следующим образом:
#ffc40d В browserconfig файле определены изображения для различных размеров плитки.
Microsoft рекомендует брать больший размер изображений в целях поддержки экранов с высокой плотностью пикселей.
В следующем списке приведены некоторые рекомендации по использованию различных размеров:
- Small — 70×70 (Рекомендуемый размер: 128×128)
- Medium — 150×150 (Рекомендуемый размер: 270×270)
- Wide — 310×150 (Рекомендуемый размер: 558×270)
- Large — 310×310 (Рекомендуемый размер: 558×558)
Подготовка favicons
Перед тем как добавлять ваши иконку в корневую папку сайта необходимо их подготовить. Исходные размеры иконок не очень большие, но можно их сжать с наименьшей потерей качества.
Например, в моем случае вес всех изображений был 200кб, после сжатия 50кб. Качество изображений практически не изменилось. Вы можете воспользоваться любым удобным сервисом для сжатия картинок. Я использовала iloveimg.
Заключение
Последовательность подключения в разметке веб-сайта:
С помощью последней строки кода «theme-color» можно закрасить адресную строку и строку уведомлений в любой цвет. В значении content задается цвет.
Для проверки иконок вашего сайта воспользуйтесь RealFaviconGenerator. Данный сервис покажет, как отображаются ваши иконки на разных платформах, подскажет где и какие могут быть проблемы.
Кроме того, данный сервис может сгенерировать необходимые размеры, форматы иконок и код. Но необходимо проверять исходники на наличие всех рекомендуемых размеров для корректного отображения на различных устройствах.