Web clip icon что это

Just Blog about nothing

Назначение иконки веб-страницы (веб-приложения) для Web Clip

Пост является вольным переводом текста из документации Apple Configuring Web Applications.

Примечание: Web Clip функционал доступен в iOS 1.1.3 и выше. Имя файла apple-touch-icon-precomposed.png доступно в iOS 2.0 и выше. Поддержка нескольких иконок для разных разрешений устройств доступна в iOS 4.2 и выше.

Вы можете захотеть, чтобы у пользователя была возможность добавить ваше web приложение или web-страницу на домашний экран (Home screen). Такие ссылки, представленные иконками, называются Web Clip. Следуйте следующим простым шагам, чтобы указать иконку, отображающую ваше web-приложение или web-страницу в iOS.

• Чтобы указать иконку для всего сайта (каждой страницы сайта), разместите файл иконки в формате PNG с именем apple-touch-icon.png или apple-touch-icon-precomposed.png в корневой директории сайта. Если вы используете имя apple-touch-icon-precomposed.png , то Safari в iOS не будет добавлять к иконке никаких эффектов.
• Чтобы определить иконку для одной страницы или заменить иконку сайта специальной иконкой для конкретной страницы, добавьте тег link , например так:

Если нет иконки, которая подходит рекомендованным размерам для устройства, используется наименьшая из иконок, имеющих размер, больше рекомендованного. Если нет иконок с размером больше рекомендованного, то используется самая большая иконка. Если подходят несколько иконок, то используется иконка имеющая ключевое слово precomposed .

Если нет иконок, указанных с использованием элемента link , то в корневой директории сайта ищутся иконки с префиксом apple-touch-icon. или apple-touch-icon-precomposed. . Например, если подходящий размер иконки для устройства 57 x 57, то система в следующем порядке ищет иконки с именами:

1. apple-touch-icon-57×57-precomposed.png
2. apple-touch-icon-57×57.png
3. apple-touch-icon-precomposed.png
4. apple-touch-icon.png

Для получения информации о размерах иконок веб-страниц смотрите “Custom Icon and Image Creation Guidelines”.

В конце поста приведу основную информацию об иконках, для получения более подробных сведений, следуйте по ссылке, приведённой выше. Итак, размеры для iPhone и iPod touch:

• 57 x 57 пикселей;
• 114 x 114 пикселей (высокое разрешение, iPhone/iPod touch 4).

• 72 x 72 пискеля.

Если вы не используете ключевое слово precomposed, то iOS автоматически добавит к иконке следующие эффекты:

• закруглённые углы;
• тень;
• отражающий блеск.

Например, иконка выглядящая так:

На домашнем экране будет выглядеть так:

Если вы используете автоматическое добавление эффекта iOS, то изображение иконки должно удовлетворять следующим требованиям:

• иметь прямые углы;
• не иметь свечения или блеска.

Как подключить иконки apple-touch #2375

У пользователей iOS есть возможность добавить сайт на рабочий экран устройства. Ссылки на сайты, расположенные на рабочем экране, выводятся в виде иконок, называемых также Web-clips. Вы можете задать для своего сайта иконку apple-touch — например, логотип компании или иное желаемое изображение (если иконка apple-touch задана не будет — устройство сделает скриншот страницы Вашего сайта и использует его в качестве иконки, что на рабочем экране выглядит не самым лучшим образом).

Рассмотрим подробно, как задать иконку apple-touch для своего сайта.

Обратите внимание!

• Служба технической поддержки не предоставляет консультаций по редактированию шаблонов.
• Для того чтобы самостоятельно работать с шаблонами, Вам необходимо получить расширенные права доступа к системе управления. Получить их Вы можете самостоятельно, следуя инструкции по ссылке.

Шаг 1

Для начала Вам необходимо определиться — какое изображение Вы хотите использовать в качестве иконки. Это обязательно должна быть картинка формата PNG.

Данное изображение Вам необходимо загрузить в раздел «Иллюстрации».

• Подробнее о том, как загружать иллюстрации, Вы можете прочитать в инструкции по ссылке.

Шаг 2

После загрузки перейдите к редактированию картинки и скопируйте ее адрес.

• О том, как перейти к редактированию иллюстрации, читайте по ссылке.

Шаг 3

Перейдите к разделу «Настройки» — «Шаблоны и файлы».

Шаг 4

Выберите раздел «Шаблоны» и откройте для редактирования шаблон » _Главная. Верх «.

Шаг 5

Разместите перед закрывающим тегом следующий код:

Шаг 6

И сохраните изменения в шаблоне.

Готово!

Обратите внимание!

• Данная инструкция является примером реализации описанного функционала. Показанные в инструкции результаты могут отличаться от реальных по причине специфики шаблонов конкретного сайта или иных технических нюансов.

Мы создаём веб-сайты для России и зарубежных рынков с 1997 года. Наша команда – более пятисот сотрудников в разных странах и городах.

Понимание потребностей онлайн-бизнеса, опыт взаимодействия с тысячами клиентов, высокая квалификация персонала, собственные «ноу-хау» и хороший объём заказов позволяют веб-студии Мегагрупп.ру предлагать услуги высокого качества по удивительно низким и «вкусным» ценам.

Этот сайт был создан на платформе
CMS S3 от Megagroup.ru

Данный сайт защищен с помощью reCAPTCHA и соответствует
Политике конфиденциальности и Условиям использования Google.

Подробное руководство по фавикону для сайта

Все важные знания о фавиконах: зачем нужны, как выбрать сделать и установить на сайт для разных разделов и устройств. Обновленный материал.

В статье:

1. Что такое фавикон
2. Зачем он нужен и на что влияет
3. Какую картинку выбрать для фавикона
4. Как создать favicon и установить на сайт
5. Размеры фавикона для браузеров и устройств

Что такое фавикон

Favicon (от англ. FAVorites ICON — «значок для избранного») — значок сайта или страницы.

• браузером на открытой вкладке и в закладках рядом с URL сайта;
• в качестве ярлыка на смартфоне, если пользователь вынесет сайт на рабочий стол;
• в поисковой выдаче Яндекса около заголовка на сниппете сайта.

В Google фавиконки не отображаются. Поисковик периодически тестирует эту функцию, так что они могут появиться в будущем.

Хотя в результатах иностранного поисковика фавиконов нет, они все равно отображаются на вкладках браузера и в закладках.

Зачем нужен фавикон

Посмотрим, для чего нужен файл favicon.ico и можно ли без него обойтись. Иногда на форумах новички спрашивают, дает ли использование favicon.ico бонусы при продвижении. Фавикон никак не влияет на оптимизацию и ранжирование, тем не менее, у него есть другие плюсы.

Favicon привлекает внимание к сайту. Без иконки сниппет меньше заметен взгляду, кажется, что ему чего-то не хватает.

• С фавиконом сайт запоминается лучше

Иконка для сайта — элемент бренда. Пользователь лучше запомнит логотип из фавикона и свяжет его с брендом, если будет видеть его на сайте и других площадках.

• Упрощает поиск нужного сайта

В закладках и истории проще искать нужный сайт не по тексту заголовка, а по опознавательной картинке — знакомому фавикону.

• Избавляет от ошибки в лог-файлах

Браузеры запрашивают файл favicon.ico и если не находят строку с указанием фавикона, сервер отмечает в логах ошибку 404.

К примеру, такую:

Какую картинку выбрать для фавикона

Если сайт представляет компанию, в фавикон лучше поставить логотип бренда или его фрагмент, если логотип сложный, детализированный или вытянутый. Если логотипа нет, подберите изображение и цветовую гамму по ассоциации с тематикой сайта.

• Контрастную

Раньше любая иконка бросалась в глаза, потому что не все сайты их ставили. Сейчас выделиться сложнее, по запросу «как варить кофе» сайт без фавикона нашелся только на восьмой странице. Привлечь внимание лучше яркой контрастной иконкой, иногда для этого ставят стрелку, указывающую на сайт.

Фавикон в выдаче, на вкладках браузера и в закладках очень маленького размера. Детализированное изображение никто не разглядит. Подберите картинку, где будет минимум деталей, два-три цвета, однозначное прочтение смысла.

Фавикон не будет выделять сайт в выдаче, если у конкурентов будут такие же картинки. Банальные популярные иконки лучше не использовать.

Как создать favicon для сайта

Есть три самых распространенных способа:

1. Специальный плагин для Photoshop
   Позволяет работать этому популярному редактору изображений с форматом ico.
2. Специальные программы для изготовления фавиконов
   Они специально «заточены» для изготовления иконок для сайта.
3. Онлайн генератор favicon
   Самый простой и доступный способ — загрузить картинку в генератор, который сделает иконку для сайта из любого изображения. Иконка получится красивее, если изображение-донор кадрировать до квадрата.

Загрузите квадратную картинку в генератор от PR-CY, он создаст архив с файлом ICO, в котором будет несколько вариантов фавикона, в том числе ретина иконки.

Как установить фавикон на сайт

1. Создайте картинку для фавикона с именем favicon.ico.
2. Готовый файл нужно сохранить в корневом каталоге сайта.
3. Если вы захотите использовать разные фавиконы для разделов сайта, скопируйте путь к изображению https://sitename.ru/favicon.ico. Если вы используете один favicon для всего сайта, путь к нему указывать не нужно.
4. Добавьте ссылку на размещенный файл в HTML-код главной:

Атрибут «rel» указывает на тип ресурса. Большинство браузеров распознают «icon», для Internet Explorer нужен «shortcut icon».

От формата файла зависит тип передаваемых данных. Для ICO это «image/x-icon» или «image/vnd.microsoft.icon», для PNG — «image/png» и аналогично для других форматов.

Для мобильных устройств часто прописывают отдельные фавиконы, указывая, к примеру, rel=»apple-touch-icon».

Фавиконка не появится сразу после установки кода, нужно дождаться, пока поисковик ее проиндексирует.

Как установить разные favicon для отдельных страниц

Разным страницам сайта можно указать разные фавиконки, чтобы они различались на вкладках. К примеру, веб-мастер может установить разные цвета одной иконки для блога, каталога и форума или для главной и разных сервисов, как у PR-CY:

Как установить разные фавиконки разделам сайта:

1. Фавикон для главной и остальных страниц назовите favicon.ico, для отдельных разделов укажите названия по этим разделам, чтобы не запутаться.
2. В коде нужной страницы пропишите путь к другой фавиконке раздела:

Размеры фавиконов для браузеров и устройств

С технической точки зрения быстрее и проще сделать одну иконку ICO, PNG или SVG для всех устройств. С точки зрения юзабилити лучше сделать несколько для разных устройств и браузеров, потому что они могут отличаться внешне — где-то требуется больший размер, где-то достаточно небольшого файла.

Если мобильный пользователь захочет добавить ссылку на сайт на главный экран смартфона, в Android и iOS иконкой для ссылки станет фавикон.

Если это возможно, ориентируйтесь на каждую платформу, с которой пользователи могут открыть сайт.

Достаточный пакет фавиконок для популярных браузеров

Стандартно для фавикона делают файл favicon.ico — это контейнер для нескольких файлов. Будет достаточно favicon.ico с файлами в размерах 16×16, 32×32 и 48×48.

Этот пакет обеспечит нормальный внешний вид фавиконок на разных платформах. В остальных случаях система масштабирует до нужного размера.

Дополнительно можно добавить файлы для мобильных устройств.

Android

Обычно используют файл .png размером 180×180, можно использовать прозрачность. Указать фавикон и его расположение для Android можно через спецификацию Web App Manifest. В ней описан простой JSON-файл, в котором веб-мастеры указывают иконки, размеры и форматы для сайта или приложения.

Манифест указывают с помощью:

С помощью файла-манифеста у сайта, который пользователь вынес на главный экран смартфона, будет настроенный качественный фавикон.

Цвет файла и фона для иконки можно указать с помощью метаданных в HTML, к примеру:

Apple

Для iOS иногда используют размер 57×57, но рекомендуют лучше делать иконку PNG размером 180×180. В документации Safari такие называются Web Clips, в них не должно быть прозрачности, углы автоматически округлятся при добавлении на главный экран. Это значок высокого расширения, он будет отображаться и в других браузерах.

В rel нужно указать “apple-touch-icon.png”.

Apple поддерживает и другой формат иконок. Для закрепленных вкладок в Safari и кнопок на Touch Bar в MacBook есть возможность указать монохромную векторную маску и цвет, который ее заполнит при наведении.

Настраивают с помощью link rel=»mask-icon».

Edge и IE 12

Цвет файла и фона для иконки можно указать с помощью метаданных в HTML.

У Microsoft есть «Browser configuration schema reference» — XML-документ, в котором перечислены различные значки, соответствующие интерфейсу. Файлы конфигурации браузера позволяют задавать настройки с помощью внешних XML-файлов.

       #da532c   

Зачастую для сайта хватит фавикона одного или трех размеров, чтобы они выглядели нормально. Но лучше уделить немного времени и отдельно прописать файлы для разных ОС и браузеров, чтобы фавикон выглядел качественно на любом устройстве в выдаче поисковика, на вкладке, панели закладок и на экране смартфона.

Фавикон — маленькая, но очень важная иконка

Термин Favicon образован путём сочетания двух английских слов: Favorites — избранные и Icon — значок. Каждый современный сайт обладает собственной иконкой, которая отображается во вкладке браузера. Эти значки показывают некоторые поисковые системы напротив каждого сайта в поисковой выдаче. Иконка будет также отображаться на мобильных устройствах, если пользователь вынесет любимый сайт на рабочий стол для быстрого доступа.

Читать также

В поисковой выдаче Яндекса, а также в новостном разделе.

На панели закладок, а также на открытых вкладках в любом браузере.

В поисковой выдаче Google фавиконы не видны, но это не повод не добавлять такие изображения на свой сайт. Как видите, мест, где отображается иконка, предостаточно: браузерные вкладки, Яндекс, закладки избранных сайтов. Это особые места расположения и важно быть в них заметными — выделяться индивидуальной картинкой. Далее расскажем, почему именно.

Зачем фавикон на сайте

Обычно Favicon устанавливают сразу после создания сайта. Файл помещается в корневую директорию на хостинге. Вот несколько причин, почему установка значка делает сайт привлекательным для посетителей:

• Выделение сайта в поисковой выдаче. Некоторые поисковые системы, например, Yandex — показывают иконку напротив каждого сайта после ввода поискового запроса. Яркий значок привлекает внимание пользователей, иногда даже заставляя кликать по ссылке.
• Упрощение поиска. При просмотре списка недавно посещённых сайтов гораздо проще найти ресурс с яркой иконкой. Кроме того, значки отображаются в закладках браузера. Значит, пользователи найдут любимый сайт гораздо быстрее.
• Визуальная привлекательность. Владельцы мобильных устройств нередко сохраняют закладки на главный экран, чтобы не тратить время на поиск любимых сайтов. Чёткая и красивая иконка станет приятным дополнением на рабочем столе. Главное, чтобы изображение соответствовало нужному разрешению.
  Устранение ошибок. Перед загрузкой сайта браузер обращается к файлу Favicon.ico, который обычно хранится в корневой директории хостинга. Если файл отсутствует — в журнале сервера появляется ошибка 404, означающая отсутствие документа по указанному адресу.
• Повышение функциональности. Динамический Favicon позволяет отслеживать изменения на сайте без открытия нужной вкладки браузера. Например, можно показывать уведомления, количество личных сообщений и другую информацию, полезную пользователям.

Какой значок выбрать

Перед тем, как углубиться в технические настройки, расскажем о том, как же выбрать подходящее изображение. Учтите, что фавикон — лицо вашего сайта и оно должно соответствовать ряду критериев, которые мы перечислим далее.

Итак, идеальный фавикон для вашего сайта может быть:

Тематический

Изображение должно соответствовать тематике сайта. Например, если ресурс принадлежит бренду, желательно поставить его логотип. Слишком сложный логотип можно обрезать так, чтобы не потерять узнаваемость.

Владельцы информационных сайтов устанавливают изображения, характеризующие направленность работы. Например, сайту с рецептами для кондитеров будет уместно использовать в качестве фавикона изображение торта. Логотип в данном случае расскажет о вашей деятельности меньше. Конечно, если картинка пирога — не ваш официальный символ.

Контрастный

Высокая контрастность изображения привлекает внимание потенциальных пользователей и мотивирует нажать по ссылке в поисковой выдаче. Идеально подходят яркие цвета — красный или оранжевый. Некоторые владельцы информационных сайтов рисуют небольшую стрелку «вправо».

Простой

В поисковой выдаче значки обладают небольшим размером. То же касается закладок браузера. Поэтому мелкие детали изображения становятся почти неразличимыми при уменьшении. Если владелец сайта решил использовать шрифт, лучше нарисовать начальную букву названия бренда в тематическом стиле.

Креативный

Favicon может быть одновременно простым и оригинальным. Желательно пользоваться услугами опытных дизайнеров для наилучшего результата. Тогда затраты на создание значка обязательно окупятся — посетители сайта запомнят фирменный стиль.

При разработке фавикона стоит помнить, что он не должен ассоциироваться у пользователей с чем-то негативным или компанией-конкурентом.

Размер фавикон

Раньше создатели сайтов делали одинаковый значок для всех устройств, поскольку основная часть посетителей открывала сайт через персональные компьютеры. Сегодня доля пользователей мобильных устройств увеличилась, поэтому возникла необходимость создания значков увеличенного размера. Благодаря высокому разрешению они выглядят красиво и качественно после добавления ссылки на рабочий стол.

Размер фавикон для сайтов

Стандартный размер для сайтов — 32 на 32 точки. Такое разрешение хорошо выглядит во многих браузерах. При необходимости программное обеспечение самостоятельно масштабирует изображение до нужного размера. Формат файла иконки — .ico.

Для устройств на Android

Лучше всего подходят графические файлы .png размером 180 на 180 точек. Чтобы прописать расположение значка, рекомендуется пользоваться Web App Manifest. Значок останется хорошо читаемым даже после добавления закладки на рабочий стол.

Для устройств на iOS

Обычно устройства компании Apple работают с иконками 180 на 180 точек в формате .png. В документации Safari они называются Web Clips. Прозрачность фона должна отсутствовать. Скругление углов осуществляется автоматически при добавлении закладки на главный экран.

Также поддерживается формат .svg, который подходит для закреплённых вкладок, показываемых на Touch Bar в современных ноутбуках MacBook. Особенность рассматриваемого способа — в возможности добавления монохромной маски. При наведении курсора значок заполняется цветом и выделяется на панели.

Способы создания иконки

Плагин для Photoshop

Самый известный графический редактор работает с многочисленными плагинами, расширяющими его функциональность. Например, веб-мастера могут перевести любое растровое изображение в формат .ico, который подходит для сайтов. Разумеется, сначала нужно установить дополнение на сайт.

Специальное программное обеспечение

Разработчики сделали отдельные программы для рисования иконок. Опытные дизайнеры могут нарисовать любой значок путём использования встроенных инструментов. Поддерживается прозрачность, регулировка размера и другие функции. Результат остаётся экспортировать в файл .ico.

Онлайн-генераторы

Самый простой вариант, не требующий покупки дорогостоящего программного обеспечения — использование конвертеров, работающих онлайн. Например, на сайте PR-CY такая задача выполняется всего за пару кликов. Нужно пройти следующие шаги:

1. Выбрать изображение с компьютера. Подойдут любые графические файлы. Рекомендуется пользоваться квадратными изображениями для повышения качества результата.
2. Подождать несколько секунд. Нажать зелёную кнопку «Скачать архив», который будет сохранен на компьютере в формате .zip.
3. Распаковать архив любым архиватором. В архиве будут находиться иконки в необходимых форматах.

Как установить фавикон

Рассмотрим 3 варианта установки фавикона: на главной странице сайте, в его подразделах, а также динамический фавикон.

Настроить фавикон для главной страницы сайта

1. Создайте изображение любым удобным способом из перечисленных нами выше.
2. Готовый файл сохраните в корневой директории.
3. Впишите ссылку на значок в код HTML главной страницы.

Рекомендуется пользоваться форматом .ico, если хотите добиться совместимости с устаревшими браузерами, например, с Internet Explorer. Современные веб-обозреватели могут показывать иконки в формате .png. Значок появляется через некоторое время после загрузки. Необходимо дождаться, пока поисковая система заново проиндексирует сайт.

Как настроить фавикон для других разделов сайта

Некоторые веб-мастера устанавливают разные значки для определённых разделов ресурса. Например, можно сделать иконки разного цвета для главной страницы, каталога, блога и так далее. Первым делом нужно подготовить несколько тематических иконок. Затем открыть файловый менеджер для управления содержимым хостинга. Загрузите дополнительные иконки в корневую директорию или в самостоятельно выбранный раздел сайта.

Во избежание путаницы называйте иконки по-разному. Не рекомендуется использовать цифры в названии — гораздо лучше употреблять слово, характеризующее раздел. Для блога — favicon_blog, для форума — favicon_forum и так далее. Аналогично поступайте с разделами. Грамотно организованное дисковое пространство на хостинге служит залогом простого управления сайтом.

В коде нужной страницы пропишите адрес расположения нужной иконки. Сохраните изменения.

Как сделать динамический значок

Создатели современных сайтов стремятся, чтобы пользователям было удобнее отслеживать изменение информации, даже если вкладка закрыта. Использования звуковых уведомлений недостаточно, поскольку некоторые пользователи отключают звук на компьютере. Появилась идея устанавливать динамические значки. Они изменяются при определённых условиях. Триггером становятся поступление личных сообщений или прочих важных уведомлений.

К сожалению, стандартные инструменты HTML не позволяют создать динамический значок. Реализовать поставленную задачу позволяет язык программирования JavaScript. Совершенно не обязательно писать скрипт самостоятельно и тратить время. Существуют готовые решения от различных разработчиков. Большой популярностью обладает проект Favico.js, предлагающий веб-мастерам бесплатно скачать нужный скрипт.

Установка скрипта осуществляется через Yarn или Bower.

На сайте проекта выложена полная документация, описывающая использование скрипта. Приводятся примеры, позволяющие увидеть реализацию решения. Например, можно добавлять счётчик, плеер видео, изменять цветовой оттенок и так далее. Единственный недостаток — длительное отсутствие обновлений. Судя по комментариям, проект был заморожен примерно два года назад. Впрочем, возможности скрипта удовлетворяют большинство пользователей.

Установка фавикон в конструкторах сайта

Тут всё просто и наглядно: заходите в настройки сайта используемой платформы и загружаете изображение. Конструктор обычно сразу же предлагает сервисы для конвертации и пишет необходимые требования к изображению.

Защитный ключ fido что это

Как убрать записи с яндекса

Почему убрали впн в опере

Что лучше xiaomi или huawei