Как правильно добавить свой значок избранного для браузеров и iOS, Android и Windows 8 на свой сайт

  1. Каковы требования браузеров и операционных систем iOS, Android и Windows 8 к выпуску favicon?
  2. Какие имена следует давать файлам с иконками и куда их ставить
  3. как изменить код сайта, чтобы системы и браузеры могли найти нужные изображения
  4. Как создать весь необходимый набор файлов для favicon как можно быстрее?

Как правильно добавить свой значок избранного для браузеров и iOS, Android и Windows 8 на свой сайт

4,6 (91,11%) 9

Что такое favicon? Наверное, все знают. Это значок, который отображается на вкладке открытой страницы в браузере или в списке избранных страниц. Не все знают, что наиболее распространенный способ добавить их на страницу - неправильный и неоптимальный. Современные браузеры и операционные системы iOS, Android или Windows 8 ищут значки, которые предпочитают эти системы при открытии сайта. Они ищут их в другом месте, чем самые популярные favicon.ico, и в других размерах. Если вы хотите иметь полный контроль над значками своих страниц на мобильных устройствах и в разных браузерах, то вы попали по адресу. Эта статья объясняет все вопросы, связанные с этим.

Мы не будем заниматься созданием графических файлов * .ico и * .png в этой статье. Для создания файлов favicon'ek доступно в сети много онлайн генераторов. Лучшие по нашему мнению будут указаны в конце статьи. Если у вас есть необходимые навыки, вы можете создавать файлы ICO и PNG, используя графические программы, такие как Gimp, Photoshop или PaintShop Pro и редакторы иконок (например, IcoFX). Мы, конечно, будем использовать веб-сайт для редактирования кода HTML. паук 🙂 В статье речь пойдет в первую очередь о технических вопросах, связанных с:

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

Каковы требования браузеров и операционных систем iOS, Android и Windows 8 к выпуску favicon?

Favicon связан только с одним файлом с именем favicon.ico (иногда favicon.png), который большинство людей просто помещают в корневой каталог сайта. Есть браузеры, которые ищут его (например, MSIE) и некоторые системы. Однако этот файл также может содержать несколько разных размеров значков, которые используются браузерами для отображения в разных местах. Некоторые веб-мастера также добавляют ссылку на файл значка страницы в разделе HEAD с помощью кода, например,

<link rel = "ярлык" href = "favicon.ico" />

Это не совсем правильно, потому что во-первых не рекомендуется W3C и, во-вторых, это может вызвать неожиданное поведение браузеров. Решение в дальнейшей части статьи.

У нас также есть другие плохие новости ... Размещение одного файла favicon.ico недостаточно для того, чтобы контролировать, как делается аббревиатура для страницы, например, на экране мобильного устройства Apple или смартфона Android, и даже на плитках Windows 8. На практике это необходимо это создать почти десяток изображений и разместить их на своем сайте, а также добавить еще несколько строк кода в заголовок вашего сайта. Так чего же ждут отдельные браузеры?

MSIE ищет favicon.ico. Другие браузеры, с другой стороны, ожидают 16x16 файлов PNG, но не все из них, потому что, например, Safari на MacOS требует файл 32 × 32, а Google TV 96 × 96. Для Android Chrome M31 + требуется 196 × 196, а для Windows 8, в зависимости от версии IE, - 70 × 70, 144 × 144, 150 × 150, 310 × 310 и 310 × 350. Они были завышены в Microsoft? Не обязательно, потому что вам нужно контролировать появление ярлыков на ваших собственных страницах в системах Apple? Больше размеров! Например: 57 × 57, 60 × 60, 72 × 72, 76 × 76, 114 × 114, 120 × 120, 144 × 144, 152 × 152 и еще два файла по умолчанию, в том числе один из них не должен иметь тени или глянца но закругленные углы ...

Какие имена следует давать файлам с иконками и куда их ставить

Давайте систематизируем эту информацию, чтобы не умереть во всем этом. После подготовки файлов соответствующих размеров вы должны дать им имена, чтобы они могли легко распознать их содержание и назначение, а затем применить соответствующий HTML-код, чтобы сделать их доступными. Для этой цели вы можете использовать имя устройства и размеры изображения, хотя некоторые системы предъявляют строгие требования и ищут конкретные файлы без анализа кода страницы (например, MSIE или Apple iOS в некоторых случаях). Вот примеры:

favicon.ico
Этот файл используется старыми версиями MSIE, а также некоторыми другими браузерами.

Favicon-16 × 16.png
Отображается на вкладках в окне различных браузеров.

Favicon-32 × 32.png
Используется браузером Safari в системе MacOS.

Favicon-96 × 96.png
Используется Google TV.

Favicon-196 × 196.png
Для Android Chrome M31 +.

mstile-70 × 70.png
Для Windows 8 и MSIE 11.

mstile-144 × 144.png
Для Windows 8 и MSIE 10.

mstile-150 × 150.png
Для Windows 8 и MSIE 11.

mstile-310 × 310.png
Для Windows 8 и MSIE 11.

mstile-310 × 150.png
Для Windows 8 и MSIE 11.

яблоко-сенсорный значок-57 × 57.png
Пользователи iPhone и iPad могут создавать ярлыки на странице на экранах своих устройств. Этот ярлык выглядит как любое другое встроенное приложение в системе. Когда пользователь добавляет такой ярлык, система ищет определенное изображение, и размер 57 × 57 пикселей типичен для экранов iPhone с iOE6, у которых нет дисплеев Retina или более ранних версий.

яблоко-сенсорный значок-60 × 60.png
Как и выше, но для устройств iPhone iOS7 без поддержки Retina.

яблоко-сенсорный значок-72 × 72.png
Как указано выше, но для устройств iPad iOS6 без Retina или более ранней поддержки.

яблоко-сенсорный значок-76 × 76.png
Как указано выше, но для устройств iPad iOS7 без Retina или более ранней поддержки.

яблоко-сенсорный значок-114 × 114.png
Как и выше, но для iPhone iOS6 устройств с экранами Retina или ранее.

яблоко-сенсорный значок-120 × 120.png
Как и выше, но для iPhone iOS7 устройств с экранами Retina.

яблоко-сенсорный значок-144 × 144.png
Как и выше, но для iPad iOS6 с экранами Retina или более ранними.

яблоко-сенсорный значок-152 × 152.png
Как и выше, но для iPad iOS7 с экранами Retina.

яблоко-сенсорный icon.png
Значок по умолчанию. Некоторые устройства могут искать этот конкретный файл. Размещение этого файла на сайте позволяет избежать некоторых ошибок 404.

яблоко-сенсорный значок-precomposed.png
Как и выше, за исключением того, что он имеет закругленные углы
То же, что и apple-touch-icon.png, ожидайте, что у него уже есть закругленные углы (но нет тени или блеска).

Все файлы могут быть помещены в подкаталог с изображениями, но лучшей идеей будет поместить их в основной путь. Почему? Есть несколько причин. Например, iOS ищет файлы apple-touch-icon-144 × 144.png в корневом каталоге страницы. Точно так же MSIE будет искать favicon.ico в корневом каталоге, когда значение «ссылки быстрого доступа» в разделе HEAD не определено (что, как упоминалось выше, не совсем правильно). Кроме того, MSIE 11 ищет в корневом каталоге файла browserconfig.xml , где находится определение значка для плиток Windows 8.

как изменить код сайта, чтобы системы и браузеры могли найти нужные изображения

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

<link rel = "icon" type = "image / png" href = "/ favicon-16x16.png" sizes = "16x16" /> <link rel = "icon" type = "image / png" href = "/ favicon -32x32.png "sizes =" 32x32 "/> <link rel =" icon "type =" image / png "href =" / favicon-96x96.png "sizes =" 96x96 "/> <link rel =" icon " type = "image / png" href = "/ favicon-160x160.png" sizes = "160x160" /> <link rel = "icon" type = "image / png" href = "/ favicon-196x196.png" sizes = "196x196" /> <link rel = "apple-touch-icon" sizes = "57x57" href = "/ apple-touch-icon-57x57.png" /> <link rel = "apple-touch-icon" размеры = "114x114" href = "/ apple-touch-icon-114x114.png" /> <link rel = "apple-touch-icon" sizes = "72x72" href = "/ apple-touch-icon-72x72.png" / > <link rel = "apple-touch-icon" sizes = "144x144" href = "/ apple-touch-icon-144x144.png" /> <link rel = "apple-touch-icon" sizes = "60x60" href = "/ apple-touch-icon-60x60.png" /> <link rel = "apple-touch-icon" sizes = "120x120" href = "/ apple-touch-icon-120x120.png" /> <link rel = "apple-touch-icon" sizes = "76x76" href = "/ apple-touch-icon-76x76.png" /> <link rel = "apple-touch-icon" sizes = "152x152" href = "/ apple-touch-icon-152x152.png" /> <meta name = "msapplication-TileColor" content = "# ffffff"> <meta name = "msapplication-TileImage" content = "/ mstile-144x144.png «>

Первая группа касается значков и значков по умолчанию для Android, для которых требуются записи в разделе HEAD. Средняя часть - это определение значков для устройств Apple, а последняя определяет плитки для Windows 8, то есть цвет фона плитки и значок, отображаемый на нем. Кроме того, файл browserconfig.xml, используемый MS Internet Explorer 11 в системах Windows 8, может быть помещен в корневой каталог системы при поиске изображений листов, что позволяет избежать 404 ошибок и обеспечивает контроль над плитками собственных проектов в этой системе. Файл может выглядеть так:

<? xml version = "1.0&quot; encoding = "utf-8"?> <browserconfig> <msapplication> <tile> <square70x70logo src = "/ mstile-70x70.png" /> <square150x150logo src = "/ mstile-150x150. png "/> <square310x310logo src =" / mstile-310x310.png "/> <wide310x150logo src =" / mstile-310x150.png "/> <TileColor> # da532c </ TileColor> </ tile> </ msapplication> < / browserconfig>

Как создать весь необходимый набор файлов для favicon как можно быстрее?

Навыки использования графической программы были бы необходимы, если бы не человеческая изобретательность, благодаря которой был создан онлайн-инструмент, позволяющий быстро справиться с проблемой favicon, которую мы избаловали создателям браузеров и операционных систем. Рекомендуем посетить сайт http://realfavicongenerator.net/ , Мы наткнулись на этот инструмент в поисках информации о требованиях iOS, касающихся favicon, и результаты работы программы этого браузера побудили нас написать эту статью и сообщить нашим читателям об этом великолепном решении. Все, что вам нужно для создания набора необходимых значков, - это одно изображение размером 260 × 260 пикселей, предпочтительно PNG с прозрачностью на альфа-канале, что позволит вам получить наилучшие результаты. Пользоваться приложением очень просто. Просто загрузите файл PNG и на следующем шаге укажите несколько параметров, касающихся внешнего вида значков для iOS и Windows 8, а также предпочтительный алгоритм сжатия, масштабирования, и это в основном все. На последнем этапе мы можем загрузить набор файлов в виде пакета .zip и HTML-код для вставки на ваш сайт. Мы настоятельно рекомендуем!

Каковы требования браузеров и операционных систем iOS, Android и Windows 8 к выпуску favicon?
Так чего же ждут отдельные браузеры?
350. Они были завышены в Microsoft?
Не обязательно, потому что вам нужно контролировать появление ярлыков на ваших собственных страницах в системах Apple?
Почему?
Quot; encoding = "utf-8"?

Новости

Как сбалансировать юзабилити и дизайн при создании сайта — User House
Красота или уродство в веб-дизайне всегда связаны с восприятием конкретного человека. То, что для одного «красиво», может быть «ужасным» для другого и наоборот. Но как же так получается, что многие популярные

Чем лучше юзабилити сайта – тем больше лояльных клиентов
Хотите понять, как посетители воспринимают сайт? Это очень просто. Представьте, что вы говорите по телефону с директором, и в это время вам звонит кто-то из родственников, а у вас еще работы на четыре

Знакомство с юзабилити-тестированием сайта. // webknowledge.ru
Перевод статьи:   An Introduction To Website Usability Testing. Автор:   Thomas Churm. При создании нового сайта необходимо учитывать множество факторов. Для того чтобы у посетителей возникло

Специалист по web-usability – боец невидимого фронта
Ярослав Перевалов Что такое usability engineering? Часто ли вы, бродя по Сети, обращаете внимание на то, насколько качественно структурирована информация на сайте и насколько удобно устроена навигация?

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

25 советов как улучшить юзабилити (usability) вашего сайта. | Блог об интернет деятельности и трудовых буднях Максима Вячеславовича
Доброго времени суток, дорогие друзья! Сегодня мы поговорим с вами о такой важной вещи как U sability (юзабилити) сайта , о том, как улучшить данный фактор, зная его основные принципы и правила.

Что такое юзабилити и зачем оно нужно
Юзабилити включает простоту, удобство в пользовании, тестирование, проведение аудита проекта. Юзабилити сайтов, интернет-магазинов — это неотъемлимая часть выгодного ведения бизнеса. Задача юзабилити

Юзабилити тестирование сайта турагентства
«Когда информации много и она дешева, дорогим становится внимание». James Gleick Представим сайт, владелец которого считает его достаточно хорошим, удобным и привлекательным. Он размещает рекламные объявления

Юзабилити
Юзабилити (от англ. слова «usability» – практичность, простота использования) – это весьма распространенное ныне понятие объединяет максимальное удобство использования сайта и полезность информации, на

5 шагов для успешного юзабилити-тестирования приложения
Представьте: вы придумали и разработали мобильное приложение с приятным, на ваш взгляд, дизайном, удобным функционалом, полезными опциями, выпустили релиз продукта, но… Несмотря на мощную маркетинговую

Карта