- Каковы требования браузеров и операционных систем iOS, Android и Windows 8 к выпуску favicon?
- Какие имена следует давать файлам с иконками и куда их ставить
- как изменить код сайта, чтобы системы и браузеры могли найти нужные изображения
- Как создать весь необходимый набор файлов для 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" 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-код для вставки на ваш сайт. Мы настоятельно рекомендуем!
Похожие
Как обновить Windows 10 до Windows 10 Октябрь 2018 Обновление.... ие: недавно было обнаружено, что ряд людей, которые установили обновление для Windows 10 за октябрь 2018 года удалили некоторые из своих файлов , Хотя число затронутых пользователей невелико, Microsoft сочла целесообразным Как найти папку профиля Chrome в Windows, Mac и Linux
В вашем профиле Chrome хранятся настройки браузера, закладки, расширения, приложения и сохраненные пароли. Ваш профиль хранится в отдельной папке на вашем компьютере, поэтому, если что-то пойдет не так с Chrome, ваша информация будет сохранена. Если у вас возникнут Как установить и играть в игры Gameboy на свой телефон Android?
Мобильные игры - это крутой и один из любимых способов скоротать свободное время. Что еще круче, так это возможность играть в игры, которые не поддерживаются на мобильном устройстве. С помощью нескольких простых шагов вы сможете это сделать. Людям надоело играть в метро и серфить бегать, давай обновимся После того, как вы получите крутой Эмулятор GBA Вы можете попрощаться со всеми старыми играми и поздороваться с новым Как перенести контакты с Android на Nokia N8
это менее болезненно, чем это В прошлом я перенес мою адресную книгу из моего старого Nokia на устройстве Google Android и теперь у меня есть Психотерапия как реабилитационное лечение?
... как часть реабилитации в соответствии с вышеупомянутым законом. Первое письмо, которое я получил от Палаты, было призывом дополнить заявку и уточнить будущее событие и указать: Были ли индивидуальные сеансы психотерапии назначены врачом; Является ли индивидуальный сеанс психотерапии реабилитационной процедурой (!) В полученном нами приглашении мы можем прочесть, что «орган по толкованию не имеет права предвосхищать, являются ли отдельные сеансы Как записать изображение с экрана устройства iOS 8 на моем компьютере?
... и OS X Yosemite сделали много улучшений. Включая, среди прочего, функции Handoff или Continuity. Одним из наиболее интересных решений также является возможность записи iGadgets из iOS 8 в виде фильмов на компьютерах Mac. Ранее эта функция была недоступна. Как это сделать? Вы найдете ответ в этом руководстве. iOS Как просматривать файлы с вашего компьютера на Android через Wi-Fi
... Android мы можем получить доступ к файлам с компьютера несколькими способами. Существуют специальные приложения для потоковой передачи мультимедиа, мы также можем делиться отдельными каталогами по сети. И как получить самый простой доступ ко всем дискам и копировать файлы без лишних брызг и дополнительных функций? Потоковое мультимедиа или обмен ресурсами полезны, но много раз я упускал возможность просматривать файлы со своего компьютера непосредственно Как загрузить компьютер с диска или USB-накопителя
... ios-do-after-booting/"> BIOS вашего компьютера загрузить операционную систему из другого места, чем обычно. Это можно сделать двумя способами: изменив порядок загрузки в микропрограмме BIOS или UEFI (чтобы он каждый раз пытался загрузиться с CD или USB), или открыв загрузочное меню при запуске (поэтому загрузка будет выполняться только с компакт-диска). или USB то один раз). Мы покажем вам оба метода в этом руководстве. Первый является постоянным, пока вы не измените его снова, но должен Визуальная социология. Фотография как метод исследования
Автор: Петр Штомпка Издатель: PWN Publishing House Язык публикации: польский Год издания: 2012 Тип обложки: мягкая обложка Количество страниц: 150 страниц Вес: 0.34 кг Размеры: 165x235 мм ISBN: 9788301143671 40,00 злотых Один из первых анализов на польском рынке о возможности использования Что такое облачные вычисления и как работает «облако»?
... как о виртуальном «пространстве», объединяющем пользователей со всего земного шара, оно похоже на облако, обменивающееся информацией через сети. Итак, если мы вернемся к вопросу о том, что такое облачные вычисления, это относится к совместному использованию ресурсов, программного обеспечения и информации через сеть, в данном случае Интернет. Информация и данные хранятся на физических или виртуальных серверах, которые обслуживаются и контролируются поставщиком облачных Как разблокировать загрузчик на смартфонах Huawei
... и для начинающих пользователей, тем более что нам нужно сначала разблокировать загрузчик. Разблокировка позволит нам не только запускать root, но и загружать кастомные Recovery и другие ПЗУ и модификации системы. Так как же разблокировать загрузчик? Разблокировка загрузчика
Комментарии
Как насчет применения всей этой информации, советов и хитростей здесь, чтобы создать галерею изображений Colorbox в Drupal 8 ?Global Hostinger Платформа веб-хостинга мирового класса. Наше видение заключается в том, чтобы позволить миллионам людей во всем мире раскрыть возможности Интернета и дать им возможность учиться, творить и расти. Выберите свой план веб-хостинга 1 веб-сайт 1 учетная запись электронной почты Пропускная способность 100 ГБ 1X вычислительная мощность и память Неограниченное Какие действия SEO должны быть выполнены, чтобы гарантировать, что такой сайт достиг стабильной и высокой позиции в результатах поиска?
Какие действия SEO должны быть выполнены, чтобы гарантировать, что такой сайт достиг стабильной и высокой позиции в результатах поиска? #wiemyjak Что такое одностраничный сайт? Одностраничный веб-сайт - это веб-сайт, который не состоит из множества подстраниц. Это веб-сайт, построенный только на одной странице Однако достаточно ли для того, чтобы засовывать в телефон технические новинки, чтобы создать оборудование, которое станет еще одним хитом?
Однако достаточно ли для того, чтобы засовывать в телефон технические новинки, чтобы создать оборудование, которое станет еще одним хитом? В следующем тесте я постараюсь ответить на эти вопросы и показать все плюсы и минусы нового продукта Nokia. Перед Nokia E52 стоит очень сложная задача. Это преемник модели E51, которая была очень успешным и популярным телефоном. Пользователи влюбились в E51 за их надежность, качество используемых материалов и технические возможности, заключенные в компактный Как мы можем рассчитать расстояние параллакса как можно точнее?
Как мы можем рассчитать расстояние параллакса как можно точнее? Во второй статье об измерении расстояний с параллаксом мы будем использовать реальный метод, очень похожий на тот, который используется астрономами и который был адаптирован для использования в классе (см. Предыдущую статью Пессель, 2017 ). Вместо того чтобы использовать приборы для измерения угла (как в предыдущей статье, основанные на измерениях с теодолитом) для вычисления расстояния до «звезды», теперь Но сколько учителей знают, как выполнять эти задачи, поскольку не каждый может найти это в себе?
Как мы можем рассчитать расстояние параллакса как можно точнее? Во второй статье об измерении расстояний с параллаксом мы будем использовать реальный метод, очень похожий на тот, который используется астрономами и который был адаптирован для использования в классе (см. Предыдущую статью Пессель, 2017 ). Вместо того чтобы использовать приборы для измерения угла (как в предыдущей статье, основанные на измерениях с теодолитом) для вычисления расстояния до «звезды», теперь Какие требования предъявляются к тестеру веб-сайта?
Какие требования предъявляются к тестеру веб-сайта? Для оборудования требуется следующее: Обновленный ПК или ноутбук Высокоскоростной Интернет Некоторые сайты даже требуют веб-камеры - я лично использую недорогую марку под названием Logitech HD Pro Веб-камера что я купил на амазоне. Вы также должны уметь говорить по-английски и иметь хорошие навыки письма, потому что некоторые компании На основе структуры EF4 - Как создать шаблон, не касаясь кода?
Какие требования предъявляются к тестеру веб-сайта? Для оборудования требуется следующее: Обновленный ПК или ноутбук Высокоскоростной Интернет Некоторые сайты даже требуют веб-камеры - я лично использую недорогую марку под названием Logitech HD Pro Веб-камера что я купил на амазоне. Вы также должны уметь говорить по-английски и иметь хорошие навыки письма, потому что некоторые компании Каковы требования Google AdSense?
Каковы требования Google AdSense? Почему Google AdSense отклонил мою заявку? Что делать, если Google AdSense отклоняет мою заявку? Этот пост собирается ответить на все ваши вопросы подробно. Это более 3000+ слов, так что возьмите чашку кофе ..;) Почему Google AdSense так популярен? Google AdSense является одной из старейших сетей, предлагающих публикацию рекламы и работающих в системе Pay Per Click. Можно спросить, поскольку JSX переместил разметку в код JavaScript, почему стили должны быть разделены?
Можно спросить, поскольку JSX переместил разметку в код JavaScript, почему стили должны быть разделены? В отличие от разделения стилей и логики, для объединения их в линию могут использоваться разные подходы. Пример этого можно увидеть ниже: <button style = "background: red; border-radius: 8px; color: white;"> Click Me </ button> Встроенные стили перемещают определения CSS из файла CSS. Таким образом, это устраняет необходимость импортировать файл и Хотите ли вы информировать пользователей вашего сайта об изменениях, новостях или, например, политике использования файлов cookie?
Хотите ли вы информировать пользователей вашего сайта об изменениях, новостях или, например, политике использования файлов cookie? Вы можете сделать это с помощью специальной движущейся панели, прикрепленной к главной странице сайта. С помощью этого руководства вы узнаете, как этого добиться на платформе Wordpress. Однако что, если мы хотим что-то изменить, добавить, обновить?
Однако что, если мы хотим что-то изменить, добавить, обновить? Тогда может оказаться, что вся операция должна повторяться с самого начала. Звучит ужасно? Сайт для небольшой компании Следует также отметить, что при таком сценарии речь идет о сайтах, стоимость которых, безусловно, не будет составлять 10 000 злотых . Иногда стоимость веб-сайта может достигать 100 000 злотых или более, например, интернет-магазин с расширенными функциями и специальными функциями
Каковы требования браузеров и операционных систем iOS, Android и Windows 8 к выпуску favicon?
Так чего же ждут отдельные браузеры?
350. Они были завышены в Microsoft?
Почему?
Quot; encoding = "utf-8"?
Как это сделать?
И как получить самый простой доступ ко всем дискам и копировать файлы без лишних брызг и дополнительных функций?
Так как же разблокировать загрузчик?
Какие действия SEO должны быть выполнены, чтобы гарантировать, что такой сайт достиг стабильной и высокой позиции в результатах поиска?
Wiemyjak Что такое одностраничный сайт?