Как включить фавикон в Safari для macOS и iOS? »WebNots

Шаг 3: У вас будет множество вариантов настройки браузера Safari на вашем iPhone или iPad. Включите ползунок напротив параметра «Показывать значки на вкладках» и включите его.

Включить отображение значков на вкладках

Шаг 4: Теперь, когда вы включили значок в iOS Safari. Но вы не увидите значок веб-сайта на вкладке браузера на iPhone / iPad, как Mac Safari. Поскольку размер экрана ограничен, мобильные браузеры не отображают значок на вкладке браузера. Чтобы увидеть значки, откройте любой веб-сайт, а затем нажмите кнопку «Открыть новую вкладку» в правом нижнем углу.

Навигация по записям

Похожие записи

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

Кроме того, большинство расширений Chrome бесплатны, их легко загрузить и использовать. Расширения Chrome помогут вам настроить браузер и улучшить работу…

Общий хостинг — лучший вариант для создания нового блога. Однако со временем сайт будет расти в размерах и привлекать большое количество посетителей. В этом случае вы не можете продолжать использовать серверы общего хостинга и должны перейти на серверы с более высокими ресурсами. У вас есть несколько вариантов, таких как VPS, Cloud и выделенные серверы. В…

В нашей предыдущей статье мы объяснили, как уменьшить время запуска в Windows 10. В течение этого периода многие приложения будут загружаться во время запуска и задерживать время загрузки вашего компьютера. Вы можете знать некоторые приложения, но многие из них загружаются при запуске без вашего ведома. Например, всякий раз, когда вы подключаете сетевой диск, есть проверка…

В Windows 10 есть множество замечательных функций, которые улучшают работу пользователей. Однако одним из немногих его недостатков является то, что он генерирует случайное имя компьютера во время установки. ОС назначает имя с префиксом «DESKTOP», за которым следует комбинация цифр и букв, например «DESKTOP-8DGNCKM». Это может сбивать с толку, когда вам нужно идентифицировать свои компьютеры, особенно…

Microsoft Excel — универсальный инструмент для повышения производительности, но он по-прежнему подвержен различным проблемам. Иногда он может открываться не сразу, когда вы нажимаете на электронную таблицу. Даже 30-секундная задержка может помешать ходу выполнения вашей работы, особенно если вам нужно регулярно открывать и закрывать электронные таблицы. В более серьезной ситуации Excel может зависнуть на долгое время,…

Приложения Microsoft Office — одни из самых популярных для документирования. Иногда у вас есть несколько пользователей, использующих разные родные языки на одном компьютере. Они могут готовить документы, презентации или использовать Outlook. Хотя люди набирают текст на английском, многие считают удобным отображать пункты меню на их родном языке. К счастью, Microsoft Office позволяет вам изменить язык…

Не обновляются значки веб-сайтов (фавиконы) в Safari на Mac: как исправить?

Возможность видеть в Safari иконки сайтов значительно упрощает взаимодействие со вкладками. Ведь по фавиконам можно быстро определить необходимую вкладку, просто посмотрев на значок. Аналогично можно поступать и в списке закладок, и в истории. Как только эта возможность появилась, ею сразу же стали пользоваться многие. Но замечали ли вы, что иногда значки сайтов отсутствуют или отображаются неправильно? В этом материале мы расскажем как обновить значки веб-сайтов в Safari на Mac.

♥ ПО ТЕМЕ: Как управлять Mac с iPhone или iPad (блокировка, перезагрузка, выключение, звук, просмотр файлов, воспроизведение и т.д.).

 

Как удалить кэш иконок сайтов в Safari

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

1. Закройте Safari и выйдите из приложения.

2. Используя Finder, нажмите Переход → Переход к папке… в строке меню.

3. Введите ~/Library/Safari/Favicon Cache/ во всплывающем окне и нажмите Перейти.

4. Выберите все элементы в папке кэша и переместите их в корзину. Вы можете выбрать всё с помощью сочетание клавиш ⌘Cmd + A и потом перетащить это в корзину или же щелкните правой кнопкой мыши по выделенному и выберите «Переместить в корзину».

5. Очистите корзину или удалите из нее эти элементы.

6. Откройте Safari.

Папка кэша значков Safari будет перестраиваться при посещении веб-сайтов. И вам нужно будет посетить сайты (обновить страницы), которые вы сохранили ранее, чтобы для них появились значки. Но те из них, которые отображались неправильно или отсутствовали, должны будут показываться правильно.

♥ ПО ТЕМЕ: Как сделать клавишу Caps Lock в macOS действительно полезной.

 

Альтернативный вариант

Если вы предпочитаете попробовать другой вариант, а этот вам кажется сложным, есть другой путь устранения проблемы. Правда, он гарантированной помощи не обещает.

Откройте веб-сайт с неправильным значком в частном окне Safari. Вы можете легко сделать это, щелкнув правой кнопкой мыши Safari в доке и выбрав «Новое частное окно» или выбрав Файл → Новое частное окно в строке меню.

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

Этот вариант исходит от форума сообщества Apple. Этот метод срабатывает не для всех пользователей, но его можно и попробовать.

♥ ПО ТЕМЕ: Размер папок в Finder на Mac: как включить.

 

Как включить отображение значков (фавиконов) в Safari

Напоминаем, что для включения значков в Safari на Mac надо выполнить следующие простые шаги:

1. В запущенном и открытом Safari нажмите Safari → Настройки… в строке меню.

2. Перейдите на панель «Вкладки».

3. Установите флажок «Отображать значки веб-сайтов на вкладках», чтобы включить значки.

♥ ПО ТЕМЕ: Как быстро открыть недавно закрытые вкладки в Safari на Mac – три способа.

 

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

Смотрите также:

Safari — Служба поддержки Apple

Safari — самый быстрый и экономичный способ работы в интернете на Вашем Mac. На настраиваемой начальной странице можно разместить любимое фоновое изображение и нужные Вам разделы, например Избранное, часто посещаемые сайты, предложения Siri, список для чтения, вкладки iCloud и отчет о конфиденциальности. На вкладках теперь отображаются наглядные значки Favicon, а при наведении указателя на вкладки отображаются миниатюры веб‑сайтов. Можно даже быстро перевести содержимое веб‑сайта с другого языка, если для этого языка поддерживается перевод.

Примечание. Функции перевода доступны не для всех языков и не во всех регионах.

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

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

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

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

Быстрый просмотр содержимого вкладок. Favicon — это значок или логотип веб‑сайта. Он отображается на вкладке и наглядно показывает, какая веб‑страница открыта на этой вкладке. Чтобы быстро просмотреть содержимое вкладки, задержите на ней указатель.

Использование надежных паролей. При регистрации новой учетной записи в интернете Safari автоматически создает и заполняет для Вас новый надежный пароль. Если Вы выбрали параметр «Использовать надежный пароль», этот пароль сохраняется в связке ключей iCloud и автоматически заполняется на всех устройствах, где выполнен вход с тем же Apple ID. Safari безопасно отслеживает Ваши пароли и определяет их наличие в опубликованных списках взломанных паролей. Это также помогает Вам пользоваться функцией «Вход с Apple» там, где она доступна. (См. раздел Использование функции «Вход с Apple» на Mac в Руководстве пользователя macOS.)

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

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

Перевод веб‑страниц (бета-версия). В Safari можно мгновенно переводить целые веб‑страницы. При открытии веб‑страницы, которую Safari может перевести, в адресной строке появляется кнопка перевода . При нажатии этой кнопки Safari может перевести веб‑страницу между следующими языками: русский, английский, испанский, упрощенный китайский, французский, немецкий и португальский (Бразилия). Когда перевод веб‑страницы закончен, кнопка меняет цвет .

Режим «Картинка в картинке». Во время воспроизведения видео нажмите и удерживайте кнопку «Аудио»  на вкладке. В открывшемся подменю выберите пункт «Войти в режим “Картинка в картинке”». Видео переместится в плавающее окно, которое можно перетягивать, увеличивать и уменьшать — и Вы сможете продолжать просмотр, занимаясь другими делами на Mac. В этом же подменю можно настроить параметры автовоспроизведения. Чтобы отключить звук в видео, нажмите .

Смотрите Наш дом: Как жить на планете Земля в приложении Apple TV

Руководство по созданию Favicon для всех платформ в 2019 году

Добро пожаловать в руководство по проектированию favicon. В этой статье мы подробно расскажем, как создать идеальный favicon, с конкретными советами по созданию иконок для Apple Touch, Windows 8, Android, Chrome, Opera и Safari. Также вы найдете удобное руководство по различным размерам и форматам favicon.

Итак, во-первых, что такое favicon? Сокращенно от англ. FAVorite ICON — «иконка для избранного» – это маленькие символы, которые появляются в строке URL и списке закладок. Сегодня favicon расширяет бренд сайта за пределы окна браузера во многих контекстах, но мы вернемся к этому позже.

На заре Интернета, создание favicon заключалось в прикреплении ссылки на файл иконки размером 16x16px, и на этом все. В настоящее время все немного сложнее – существуют разные размеры и процессы для разных контекстов. Создание правильного favicon – это наука.

7 дней дизайн-перезагрузки

Мощнейние спикеры, самое дружелюбное дизайн-комьнити и желание делать клевый дизайн.
Скидка 10% по промокоду UXPUB

Присоединиться

В этой статье вы узнаете, как создать favicon. Мы начнем с советов о том, как он должен выглядеть, а затем перейдем к конкретным советам о том, как создать favicon для различных контекстов.

Мы будем использовать шаблон Apply Pixels, чтобы легко генерировать различные требуемые размеры иконок, а в качестве примера – иконку Apply Pixels.

Логотип Apply Pixels, который используется в качестве примера favicon в этой статье

1. Сделайте его узнаваемым

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

2. Используйте свой логотип

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

3. Он должен быть понятным

Есть также несколько моментов, которые вы должны избегать. Не используйте favicon в качестве маркетингового инструмента – это означает отсутствие ценников, баннеров «new» или «updated» и т. д. На самом деле, вообще не помещайте текст в favicon. Текст плохо масштабируется, и высока вероятность, что он будет неразборчивым. Наконец, не используйте фотографию – она ​​будет размытой и неузнаваемой в таком мелком размере.

4. Создайте две версии

Когда в Internet Explorer 5 впервые появились favicon, они появились в строке URL-адреса и в списке закладок. Сегодня они также отображаются во многих других контекстах, включая списки закладок, контекстные меню и даже домашние экраны мобильных устройств и телевизоров. Из-за этого довольно трудно прогнозировать, как ваш значок будет отображаться для конечного пользователя.

Чтобы ваш favicon выглядел хорошо в различных контекстах, вы должны предоставить его в двух стилях:

• Логотип на прозрачном фоне. Эта версия отображается в строке URL-адреса, списках закладок и в других местах, где favicon отображается рядом с URL-адресом или именем вашего веб-сайта.
• Логотип на фоне со сплошной заливкой: эта версия используется в сетчатых закладках и контекстных меню, где браузер или устройство применяет маску к фону, для достижения единообразного контекста.

5. Создание favicon для десктопного браузера

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

Favicon в классическом стиле отображается на панели закладок и в строке URL в Google Chrome

Вам нужно будет предоставить этот тип иконки в трех размерах, все в формате PNG с прозрачным фоном:

Добавьте этот favicon в HTML <head>, как показано ниже:

<link rel="icon" type="image/png" href="/favicon-16x16.png">
<link rel="icon" type="image/png" href="/favicon-32x32.png">
<link rel="icon" type="image/png" href="/favicon-48x48.png">

6. Создание иконки Apple Touch

Apple iOS использует иконки Apple Touch для представления веб-сайтов, сохраненных на домашнем экране iOS, в качестве закладок. Это означает, что иконка Apple Touch, как все иконки приложений iOS, будет округлена c помощью маски в форме суперэллипса, называемого сквиркл (squircle).

Он также будет отображаться на любом фоне, который пользователь

выбрал для своего домашнего экрана. Поэтому ваша иконка Apple Touch должна иметь сплошную заливку фона.

Вы можете использовать иконку Apple Touch 180×180, которая автоматически масштабируется для различных размеров iPhone и iPad. Это подойдет для большинства случаев. Если нет, вы можете предоставить дополнительные размеры для различных устройств Apple

Favicon Apple должна быть в формате PNG. Вы можете использовать иконку Apple Touch 180x180, которая автоматически масштабируется для различных размеров iPhone и iPad. Это подойдет для большинства случаев.

Если нет, вы можете предоставить дополнительные размеры для различных устройств Apple:

• 60×60
• 76×76
• 120×120
• 152×152
• 180×180 (Обязательно)

Добавьте этот favicon в HTML <head>, как показано ниже:

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

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

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

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

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

7. Плитка Windows 8 и файл browserconfiguration.xml

Хотя Windows 8 больше не поддерживается Microsoft, многие пользователи планшетов продолжают работать на этой ОС. В зависимости от вашей пользовательской базы, вы можете также создать favicon для этой платформы.

Вот как могла бы выглядеть favicon Apply Pixels, в качестве плиток Windows 8:

Плитка Windows 558×270 является единственным не квадратным favicon.

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

Плитка Windows 8 состоит из двух компонентов:

• Передний план: ваш favicon с прозрачным фоном.
• Фон: фон плитки, сгенерированный Windows.

Все плитки Windows должны быть в формате PNG с прозрачным фоном. Это размеры, которые вам нужно использовать.

Для Windows 8:

И для Windows 8.1:

• 128×128
• 270×270
• 558×270
• 558×558

Windows 8.0

Цвет фона указывается в HTML-тегах <meta> и файле browserconfig.xml, которые необходимо предоставить:

<meta name="msapplication-TileColor" content="#2b5797"></meta>

<meta name="msapplication-TileImage" content="/mstile-144x144.png">

Windows 8.1

Включает browserconfiguration.xml в корневой каталог вашего сайта:

 <?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>#2b5797</TileColor>
 </tile>
 </msapplication>
 </browserconfig> 

Примечание: Указанные размеры favicon в файле browserconfiguration.xml не соответствуют размерам, указанным выше. Это связано с тем, что в целях масштабирования Microsoft рекомендует предоставлять изображения, размер которых превышает стандартные размеры плитки.

8. Android, Chrome и Opera

Android, Chrome и Opera используют android-chrome-192×192.png и android-chrome-512×512.png, которые рекомендует Google.

С момента появления в Android адаптивных иконок к иконкам веб-сайтов, добавленных на домашний экран Android, будет применена маска 192×192. Поэтому иконка приобретает форму предпочитаемого пользователем стиля маскирования. Это может быть сквиркл, эллипс, прямоугольник, прямоугольник с закругленными углами или каплевидная фигура.

В этом случае favicon со сплошной заливкой маскирован в форме сквиркл операционной системы Android Pie. Другие фигуры включают в себя эллипсы, прямоугольник, прямоугольник с закругленными углами и каплевидную фигуру

Вам необходимо создать favicon в формате PNG со сплошным фоном следующих размеров:

Установите эти иконки, добавив файл site.webmanifest на свой сайт и разместив ссылку на него в тегах <head>:

<link rel=”manifest” href=”/site.webmanifest”>

Ниже приведен код для файла site.webmanifest:

 {
 "name": "",
 "short_name": "",
 "icons": [
 {
 "src": "/android-chrome-192x192.png",
 "sizes": "192x192",
 "type": "image/png"
 },
 {
 "src": "/android-chrome-512x512.png",
 "sizes": "512x512",
 "type": "image/png"
 }
 ],
 "theme_color": "#ffffff",
 "background_color": "#ffffff",
 "display": "standalone"
 } 

9. Закрепленная вкладка Safari

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

В отличие от остальных favicon, этот создается из изображения в формате SVG

Эта иконка должна быть 100% черным SVG-файлом с прозрачным фоном. SVG может быть только одним слоем, и Safari требует, чтобы атрибут viewBox для SVG был установлен в “0 0 16 16”.

Добавьте этот favicon в HTML <head>, как показано ниже:

<link rel=”mask-icon” href=”your_icon.svg”>

10. Как насчет Google TV, Chrome Web Store и иконок Apple Touch для версий предшествовавших iOS 7?

А что насчет Google TV, Chrome Web Store и иконок Apple Touch для версий, предшествовавших iOS 7? Существует ряд размеров и форматы favicon, которые не были включены в эту статью, либо потому, что они практически устарели, либо потому, что они редко актуальны для обычного веб-разработчика. В общем, разработчики и дизайнеры должны стремиться поддерживать как можно более широкий спектр устройств и операционных систем, но иногда это просто не имеет смысла.

Например: Google TV был заменен на Android TV в 2014 году, а SDK был вовсе упразднен. Chrome Web Store, вероятно, имеет значение только в том случае, если вы создаете приложение, расширение или тему Chrome, а процент устройств iOS работающих под управлением iOS 7 или более ранней версии сейчас менее, чем ~1 %.

Шпаргалка

Итак, если вы хотите поддерживать полный набор устройств и браузеров, в таблице ниже указаны соответствующие размеры. Ранее favicon должен был быть предоставлен в формате ICO. Сегодня можно использовать файлы в формате PNG (за исключением иконки закрепленной вкладки Safari, которая должна быть представлена в формате SVG).

Если хотите узнать простой способ проектирования и экспорта всех размеров favicon, взгляните на наш шаблон.

Размеры	Фон	Формат
Классические десктопные браузеры
16×16	Прозрачный	PNG
32×32	Прозрачный	PNG
48×48	Прозрачный	PNG
Apple iOS
180×180	Сплошная заливка	PNG
Windows 8.0
144×144	Прозрачный	PNG
Windows 8.1
128×128	Прозрачный	PNG
270×270	Прозрачный	PNG
558×270	Прозрачный	PNG
558×558	Прозрачный	PNG
Google Android и Chrome
192×192	Сплошная заливка	PNG
512×512	Сплошная заливка	PNG
Opera Coast
228×228	Сплошная заливка	PNG
Safari Pinned Tab
Vector	Прозрачный	SVG

О favicon и не только

Форматы favicon

Основными форматами для favicon являются ICO, PNG и SVG. При желании, значок сайта можно сделать в форматах JPEG или анимированном GIF. Но из-за слабой поддержки основными браузерами использование таких значков превращается в нецелесообразную экзотику. Хотя и можно сделать favicon в формате GIF без анимации, но не нужно – лучше в PNG.

Favicon.ico

Хотя формат ICO сейчас считается устаревшим, но сбрасывать со счетов его ещё рано. Основными достоинствами этого формата являются: возможность хранения в одном файле нескольких вариантов размеров иконки сайта и поддержка полупрозрачности. Надо помнить что, IE10 и более ранние версии этого браузера понимают только ICO. Так же следует учитывать то, что этот формат довольно широко используется в операционной системе Windows. Т. е. favicon.ico используется как изображение для вкладок, панели задач, рабочего стола. Поэтому для корректного отображения на этих объектах, создаётся файл в формате ICO, содержащий три изображения рекомендуемых размеров: 16х16, 32х32 и 48х48. Сделать такой файл можно здесь. Подключение favicon.ico на сайте производится с помощью следующего кода:

<link href="/favicon.ico" rel="shortcut icon" type="image/vnd.microsoft.icon" />

В параметре href указывается путь до иконки сайта. В этом примере и далее в этой статье предполагается, что файл favicon размещён в корне сайта. Если файл иконки размещается не в корне сайта, то тогда нужно указать соответствующий путь.

Favicon.png

Формат PNG предоставляет более широкие возможности для изображения, чем ICO. Сейчас очень большое количество сайтов используют favicon в формате PNG. Он поддерживается всеми основными браузерами. Подключение favicon.png на сайте производится с помощью следующего кода:

<link href="/favicon.png" rel="icon" type="image/png" />

Favicon.svg

Формат SVG — новый открытый формат векторной графики. В силу того, что изображения в SVG масштабируются без потери качества, он идеально подходит для favicon. Этот формат является рекомендацией консорциума W3C, его поддерживают ещё не все браузеры, но за ним будущее. Подключение favicon.svg на сайте производится с помощью следующего кода:

<link href="/favicon.svg" rel="icon" type="image/svg+xml" />

Отслеживать поддержку SVG браузерами можно здесь.

Favicon – устройства, ОС, технологии

С приходом HTML 5 появилась возможность указывать размеры favicon. Теперь различные мобильные устройства или браузеры могут выбрать необходимый размер значка и использовать его, например, как изображение для ярлыка на рабочем столе. За указание размеров отвечает атрибут size. Делается это так:

<link href="/favicon-32x32.png" rel="icon" type="image/png" />
<link href="/favicon-16x16.png" rel="icon" type="image/png" />

Для favicon.svg можно сделать так:

<link href="/favicon.svg" rel="icon" type="image/svg+xml" />

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

Windows

Начиная с версии Windows 8.1, появилась возможность закреплять сайты с помощью т. н. живых плиток. Для изображений на плитках малого размера будет использоваться favicon. Для средних и больших плиток лучше задать изображения подходящих размеров. Сделать это можно двумя способами: разместить в заголовке сайта специальные метатеги или создать файл конфигурации браузера. Второй способ более предпочтителен т. к. размещение лишних тегов метаданных увеличивает заголовок страницы, что не лучшим образом сказывается на скорости загрузки. И так, создаётся файл browserconfig.xml следующего содержания:

<?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>

Он описывает четыре изображения для различных размеров живых плиток: три квадратные и одно прямоугольное. В теге TileColor указывается фоновый цвет плитки. Сами изображения следует брать большего размера, примерно в 1,8-2 раза. Например, для плитки 70×70 лучше взять изображение размером 128×128. Делается это с целью поддержки экранов с высокой плотностью пикселов. Подключение файла конфигурации браузера на сайте производится с помощью следующего кода: 

<meta name="msapplication-config" content="browserconfig.xml" />

Mac OS и Safari

Версии Safari под Mac OS поддерживают формат SVG. Такое изображение нужно для закладок в этом браузере. Но есть один момент – элементы изображения должны быть или чёрными или белыми. В коде подключения используется атрибут color. Так вот, после подключения все элементы чёрного цвета будут отображаться тем цветом, который указан в этом атрибуте. Подключение для Safari в Mac OS производится с помощью следующего кода:

<link href="/safari-pinned-tab.svg" rel="mask-icon" color="#598473" />

Обратите внимание на то, что имя файла и значение rel должны быть такими, как в примере.

Apple (iOS)

Safari в устройствах Apple, на базе операционной системы iOS тоже использует иконку сайта для закладок. Но favicon может использоваться и как значок на рабочем столе. Для того, чтобы на устройствах Apple значок сайта смотрелся прилично, понадобятся изображения в формате PNG и несколько строк кода. Устройств на базе iOS довольно много и они имеют различные размеры экранов. Для каждого размера нужен свой значок. Размеры этих значков следующие: 57×57, 60×60, 72×72, 76×76, 114×114, 120×120, 144×144, 152×152, и 180×180. В некоторых источниках рекомендуется писать код для каждого размера favicon. Объясняется это тем, что иконки для устройств от Apple, в виду их большой популярности, используются (ищутся) устройствами других производителей. Вот так подключается изображение для одного из размеров:

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

Можно обойтись без девяти строк кода и ограничиться тремя, хотя файлы всех девяти размеров лучше загрузить на сайт. Используется одна хитрость: если иконка не соответствует рекомендуемому размеру устройства, то используется иконка большего размера. Подключаем изображение размером 180×180 следующим образом:

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

Затем добавим строку кода из предыдущего примера:

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

Т. е. по крайней мере, основная иконка должна быть 180×180. Остальные устройства могут уменьшить изображение. Есть ещё одна тонкость, иконки в iOS оформляются в определённом стиле, т. е. используются скругленные уголки, тень, блики. Когда загружается значок сайта, устройство начинает приводить его к этому стилю. Если это не нужно, то добавляем следующий код:

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

А ещё можно указать заголовок:

<meta name="apple-mobile-web-app-title" content="Aitishnik.RU" />

Android

К сожалению, изображения в формате SVG пока не поддерживаются ОС Android. Поэтому используются изображения в формате PNG. Для настроек используется файл manifest.json. Он может быть следующего содержания:

{
    "name": "Aitishnik.RU",
    "icons": [
        {
            "src": "android-chrome-192x192.png",
            "sizes": "192x192",
            "type": "image/png"
        },
        {
            "src": "android-chrome-256x256.png",
            "sizes": "256x256",
            "type": "image/png"
        }
    ],
    "theme_color": "#ffffff",
    "background_color": "#ffffff",
    "start_url": "http://www.aitishnik.ru",
    "display": "standalone"
}

Файл – манифест описывает настройки отображения сайта на домашнем экране, как веб-приложения. В примере:

name – подпись к приложению. Если ключ name не указан, то для подписи будет использоваться содержимое тега title из заголовка сайта. Если значение name длинное, то можно добавить ключ short_name для короткой подписи.

icons – этот ключ определяет набор иконок. Внутри него ключи src, sizes и type определяют источник изображения, размер и тип изображения соответственно.

theme_color – передаёт цветовое значение строки состояния.

background_color – фоновый цвет для иконки на домашнем экране.

display – режим отображения веб-приложения.

Файл manifest.json подключается в заголовке сайта следующим кодом:

<link rel="manifest" href="/manifest.json" />

Заключение

У человека, прочитавшего всё вышеизложенное, может сложиться впечатление, что всё это очень сложно и нудно. Отчасти это так. Но к счастью, есть сервисы, которые делают всю эту работу за нас. Например, http://realfavicongenerator.net. На этом ресурсе можно сгенерировать все нужные иконки и получить код для вставки на сайт.

Вот и всё. Удачи в сайтостроении!

Об авторе:

Меня зовут Андрей Золкин. Из более, чем пятнадцати лет работы в сфере информационных технологий, десять лет работаю с системами, базирующимися на открытом исходном коде. На страницах сайта Aitishnik.Ru веду блоги по CMC Joomla и Debian GNU/Linux.

 

Ещё о сайтостроении

• • Чем должна заканчиваться каждая страница успешного сайта? …

    Существует ряд ошибок, которые допускают многие владельцы сайтов при его создании. Одну из таких ошибок можно заметить на многих веб-ресурсах. Это не только игнорирование хостинга и бесплатная аренда сервера в Киеве с тестовым периодом, но и резкое…

  • Создание логотипа для привлечения посетителей …

    Быть может, у пользователя уже есть готовый сайт, который удовлетворяет его со всех точек зрения. Тем не менее, число посетителей нестабильно. В чем же причина этого? Не хватает запоминающегося логотипа. На практике он всегда работает на…

  • Выбираем цвет сайта

    Наверняка у каждого завсегдатая интернет-сети есть несколько любимых сайтов. Неважно, какова их тематика и направленность, важно то, почему человек выбирает тот или иной сайт. Ведь, согласитесь, в сети всегда есть из чего выбрать: где…

  • Что лучше хостинг или VPS

    Сказать, то VPS лучше виртуального хостинга (или наоборот) некорректно, поскольку они предназначены для разных аудиторий.ВПС актуален в том случае, когда виртуальный хостинг не в силах поддерживать web-проект, или же пользователю нужно…

  • Сайт: основные функции, разработка и продвижение…

    Информация всегда была и продолжает оставаться одним из важнейших элементов привлечения внимания – к товарам, услугам, личности и т.д. Особенно ее роль велика сегодня, когда Интернет занял плотное место, как в личной жизни, так и в…

  • Основная цель выделенного сервера

    Выделенный сервер – это название говорит само за себя, покупая эту услугу у провайдера, вы фактически получаете в свое пользование конкретный сервер. Виртуальный хостинг — это абсолютная противоположность понятию “выделенного”, в данном…

Как создать favicon (фавикон) для сайта

О чем статья:

• Что такое фавикон и каких форматов он бывает

• Какие требования предъявляют разные платформы

• С помощью каких инструментов можно создать иконку

• Можно ли не создавать фавикон и как это повлияет на выдачу

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

Favicon – это сокращение от favorites icon, то есть иконка для избранного. Это может быть логотип сайта или любое другое изображение, которое позволит сделать ресурс узнаваемым. Первоначально фавикон служил для визуального выделения сайтов в закладках. Сейчас он отображаться практически везде, где это возможно: во вкладках и на пустом начальном экране десктопных и мобильных браузеров, в адресной строке и на странице поисковой выдачи рядом с url сайта. Когда вы сохраняете закладку на сайт на главном экране мобильного устройства, там тоже будет отображаться фавикон. Поэтому если раньше можно было создать favicon одного размера только для отображения в браузере, то сейчас необходимо генерировать иконки под разные контексты, платформы и технологии.

Так выглядят фавиконки во вкладках браузера и в сохраненных ссылках. 

Формат и стили фавиконов

Очень долго основным форматом фавикона был .ico. Он удобен тем, что в файл можно прописать сразу несколько размеров иконок с разной битностью. Сейчас ему на смену пришли форматы .png и .svg. Формат .svg используется в Safari MacOS, а .png — в остальных операционных системах и платформах. .ico до сих пор используется, но современные версии браузеров иногда не могут выбрать правильную иконку в файле, из-за чего фавикон отображается в низком разрешении. Фавиконку можно сделать в форматах .jpeg и .gif, однако мы не рекомендуем их использовать, потому что такие фавиконы поддерживают не все браузеры.

С помощью сервиса caniuse.com можно проверить поддержку браузерами разных типов фавиконов. Современные сайты переходят на форматы фавиконов в .svg и .png, так как те мало весят и хорошо отображаются.. 

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

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

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

Фавиконки отображаются на пустой стартовой странице Google

Особенности фавиконов для разных платформ

Десктоп

Несмотря на то, что формат .ico постепенно устаревает, его всё ещё можно встретить в браузерах Internet Explorer 10 версии и ниже. В них .png не поддерживается, поэтому для корректного отображения нужно прописать в коде сайта комбинацию .ico и .png форматов фавиконок. Размеры иконок: Google рекомендует устанавливать иконки, размеры которых кратны 48 пикселям. Т.е. 48х48, 96х96, 144х144. Или использовать формат .svg, который не имеет конкретного размера. Яндекс указывает в Справке, что рекомендуемые размеры favicon: 120х120 пикселей – именно такая иконка выглядит четче и заметнее в его сервисах, а также 16х16, 32х32 пикселей. Из всех форматов рекомендуемый – также .svg.

Если вы используете формат .ico, мультиразмерную иконку удобно создавать в сервисе icoconvert или аналогичном. В настройках выберите следующие размеры: 16х16; 32х32; 48х48 пикселей. Andriod, Chrome и Opera Google рекомендует создать фавикон для этих платформ размером 192х192 и 512х512 пикселей в формате .png. Назовите файлы соответственно android-icon-192×192.png или android-chrome-512×512.png.

Так выглядят фавиконы в мобильной версии браузера Google Chrome

Andriod, Chrome и Opera

Google рекомендует создать фавикон для этих платформ размером 192х192 и 512х512 пикселей в формате .png. Назовите файлы соответственно android-icon-192×192.png или android-chrome-512×512.png. 

Если вы хотите, чтобы иконку вашего сайта можно было сохранить на домашнем экране телефона, планшета и даже телевизора теперь, создайте файл .png размером 192х192 пикселя и веб-манифест – текстовый файл JSON, который предоставляет информацию о приложении. Затем добавьте файл site.webmanifest на свой сайт и сошлитесь на него в HTML-странице в теге <head> таким образом:
<link rel=”manifest” href=”/site.webmanifest”>

В манифесте есть ключ icons. Он принимает список иконок, их размеры и форматы. Если его не указать, браузер будет искать в коде такие варианты, как favicon.ico, <link rel=”icon” или, в крайнем случае, использует скриншот страницы.
Если вы подключили манифест, то можно сохранить сайт на экране устройства, как приложение. 

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

Mac OS и iOS Safari Web Clip

Для корректного отображения в Mac OS favicon нужно создавать в формате .svg. Тогда иконка корректно отобразится при закреплении вкладки в браузере Safari. При создании фавикона, его нужно сделать простым, плоским и убрать все тени.
Для iOS Safari создают apple touch icon – фавикон в формате .png размером 180х180 пикселей. Как и в ОС Android, страницу сайта можно сохранить на экран мобильного устройства, и иконки в этом случае будут выглядеть как приложение. Такая ссылка называется Web Clip.

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

Apple touch icon используются не только в iOS. Браузер Chrome также может искать их в коде сайта, так как такие фавиконки часто встречаются, сделаны в нужном формате .png и в высоком разрешении.

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

	Ретина версия 6 и ниже	Ретина версия 7	Не ретина версия 6 и ниже	Не ретина версия 7
iPhone	144х144	120х120	57х57	60х60
iPad	144х144	152х152	72х72	76х76

Для iPhone 6 Plus версия 8 и выше – 180х180 пикселей.

Другие варианты 

Android TV (до 2014 г. – Google TV)	Opera Coast
96х96	228х228

Как создать?

Для создания фавикона используйте графические редакторы или специальные сервисы. 

Adobe Photoshop или Figma

Если у вас есть навыки работы в графических редакторах, будет несложно создать фавиконку. В Photoshop, например, для этого даже есть специальный плагин – Favicon.ico. В редакторе сразу можно задать размер созданного
изображения в пикселях и фон – прозрачный или непрозрачный.

Realfavicongenerator.net – генерирует фавикон разных размеров онлайн. Загружайте исходник размером не менее 260х260 пикселей, желательно квадратной формы. Затем выберите настройки для iOS, Android, Windows Phone, MacOS Safari. Дополнительно выберите степень сжатия. В результате получаете все типы иконок и код для вставки. 

Favicon.cc – еще один сервис для создания favicon формата .ico. Вы можете загрузить готовую картинку или нарисовать самостоятельно, используя инструменты графического редактора.

Не стоит создавать фавикон простым переименованием файла в нужный формат. Допустим, у вас есть файл favicon.png и вы его просто переименовываете favicon.ico. Такой значок будет отображаться с ошибкой или не показываться.

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

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

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

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

Положите файлы в корневую директорию сайта и проверьте корректность. Для этого введите в адресную строку “yoursite.com/favicon.ico” для файлов формата .ico, для других форматов — соответствующее расширение файла. Браузер должен отобразить иконку.

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

Десктоп (ico) — <link rel=»icon» type=»image/ico» href=»favicon.ico»>

Декстоп (png) — <link rel=»icon» type=»image/png» href=»favicon.png»>

Apple — <link rel=»apple-touch-icon» href=»apple-touch-favicon.png»>

Safari — <link rel=”mask-icon” href=”icon.svg”>

Андроид — <link rel=»shortcut icon» href=»favicon.png»>

Иконки в устройствах Apple всегда закругляются по углам, чтобы этого избежать используйте apple-touch-icon-precomposed вместо apple-touch-icon.

Проверьте ответ сервера. Фавикон индексирует специальный робот. Чтобы индексация прошла успешно, проверьте, что ссылка на фавикон не закрыта от индексации в файле robot.txt и отдает ответ сервера HTTP 200.

Узнайте, виден ли фавикон. Проверьте через сервисы, подставив адрес своего сайта: 

Если у сайта нет фавиконки, то Яндекс.Вебмастер предупреждает об ошибке. Она может отображаться в журнале с системной информацией. Если же браузер не нашел в коде сайта нужный файл, например, favicon.ico, то сервер зафиксирует ошибку 404.

Когда поисковые роботы видят наличие технических недостатков, то понижают сайт в выдаче. Так фавиконы косвенно влияют на SEO-продвижение ресурса.

Запомните

1. Формат.ico устаревает. И Google, и Яндекс рекомендуют и использовать форматы .svg и .png. Проверяйте, какие форматы поддерживают браузеры с помощью сервиса caniuse.com.
2. Раньше было достаточно создать один размер фавикона 16х16 пикселей. Сейчас делайте иконки во всех размерах. Если создали фавикон одного размера, то многие браузеры смогут перевести его нужный размер, но не исключены ошибки и некорректное отображение. Если в коде будут прописаны все размеры, то браузер подтянет нужный.
   

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

4. Чтобы сделать favicon, воспользуйтесь графическими редакторами – Adobe Photoshop или Figma. Или специальными сервисами: realfavicongenerator.net, favicon.cc и аналогичными. Генерируйте иконки online сразу для всех видов браузеров и мобильных платформ.

5. Положите созданную фавиконку в корневой каталог сайта или пропишите ссылку в теге <head>. Если вам нужны разные иконки для каждого раздела сайта, прописывайте их на каждой странице.

6. Чтобы пользователи могли сохранять сайт как приложение на домашний экран мобильного устройства, создайте веб-манифест и свяжите его с кодом на сайте.

7. Проверьте корректность индексации. Ответ сервера должен быть HTTP 200. Посмотрите видимость фавикона в Яндексе и Google через сервисы поисковиков.

8. Наличие favicon может повлиять на рейтинг сайта. Яндекс.Вебмастер фиксирует отсутствие иконки, как ошибку на сайте, а технические ошибки влияют на место в выдаче. 

Материал подготовила Светлана Сирвида-Льорентэ.

Как включить Favicon в Safari (iOS 12 и macOS Mojave)

Удивительно, сколько времени понадобилось Apple, чтобы создать простую функцию, которую пользователи просили целую вечность. Я имею в виду, что до iOS 11 пользователи не могли видеть favicon в Safari, что меня сильно беспокоило. К счастью, в iOS 12 появилась поддержка favicon, и это одна из тех крошечных вещей, которые доставляют мне много радости. Тем не менее, по какой-то причине favicon в Safari не включен по умолчанию, и вы должны включить его вручную. Так как Apple нигде не упоминает favicon в Safari, это не так просто, как их включить. Вот почему, чтобы упростить задачу для наших читателей, мы привели это изящное руководство, в котором мы покажем вам, как включить favicon в Safari в iOS 12:

• Включение Favicon в Safari в iOS 12

Примечание. Мы используем iPhone X для демонстрации этого учебника, в котором говорится, что эта функция будет работать на любом iPhone, если он работает на iOS 12.

Если вы долгое время пользуетесь iOS, вы знаете, что Apple любит скрывать определенные настройки приложения в своем основном приложении «Настройки». То же самое относится и к конкретным настройкам Safari, поэтому, чтобы включить favicon, вам придется использовать приложения «Настройки». Просто следуйте инструкциям, приведенным ниже, и вы сможете сделать это за несколько секунд. Это будет краткий учебник:

1. Откройте приложение «Настройки», а затем нажмите на Safari.

2. Здесь прокрутите вниз, чтобы найти опцию «Показать значки во вкладках» и включить ее.

3. Вот и все. Теперь вы должны видеть значок избранного на вкладках Safari, как показано на рисунке ниже.

До после

• Включение Favicon в Safari в MacOS Mojave

1. Включение Favicon в Safari в MacOS Mojave даже проще, чем в iOS 12. Сначала откройте Safari, а затем нажмите сочетание клавиш «Command + Comma», чтобы открыть панель настроек. Здесь нажмите на меню вкладок.

2. В меню «Вкладки» включите последний параметр «Показывать значки веб-сайтов во вкладках» . Вот и все, теперь вы включили Favicon в Safari.

3. На рисунках ниже вы можете видеть, как выглядят ваши вкладки Safari до и после включения Favicon.

До После

Наслаждайтесь сайтом Favicon в вашем браузере Safari

Возможность показа favicon отсутствует в Safari с момента его создания, и это была одна из наиболее востребованных пользователем функций приложения. С iOS 12 и macOS Mojave Apple наконец-то дала пользователям то, о чем они просили. Я люблю эту функцию, но как насчет тебя? Как вы думаете, поддержка favicon в Safari имеет какое-то значение или это не влияет на вас вообще? Дайте нам знать, написав в разделе комментариев ниже.

report this ad

Как обновить значки в Safari на Mac, чтобы вернуть значки веб-сайтов

Возможность видеть значки веб-сайтов в Safari очень удобна. Он позволяет сразу определить нужный сайт, увидев его значок на вкладке, в списке закладок и в истории. Итак, когда эта функция была добавлена, многие люди ухватились за нее. Но замечали ли вы когда-нибудь пропавшие или неправильные значки значков, показывающие неправильный значок?

Вы можете «обновить» значки веб-сайтов в Safari на Mac всего за несколько шагов, и здесь мы покажем вам, как это сделать.

Удалите кэш значков Safari

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

1) Закройте и выйдите из Safari .

2) В Finder щелкните Перейти > Перейти к папке в строке меню

3) Введите ~ / Library / Safari / Favicon Cache / во всплывающем окне и нажмите Идите .

4) Выберите все элементы в папке кэша и переместите их в корзину . Вы можете выбрать все с помощью сочетания клавиш Command + A, а затем перетащить их в корзину или щелкнуть правой кнопкой мыши и выбрать «Переместить в корзину».

5) Очистите корзину или удалите из нее эти элементы. (Чтобы получить помощь по обоим параметрам, ознакомьтесь с нашим руководством по очистке корзины на Mac.)

6) Откройте Safari .

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

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

Альтернативный вариант

Если вы предпочитаете попробовать что-то еще, есть еще один вариант, который может работать, а может и не работать.

Откройте веб-сайт с неправильным значком в частном окне Safari. Вы можете легко сделать это, щелкнув правой кнопкой мыши Safari в доке и выбрав Новое частное окно или выбрав Файл > Новое частное окно в строке меню.

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

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

Включение значков в Safari

Напоминаем, что вы можете включить значки в Safari на Mac, выполнив следующие простые шаги.

1) В открытом Safari щелкните Safari > Настройки в строке меню.

2) Выберите вкладку Вкладки .

3) Установите флажок для Показывать значки веб-сайтов на вкладках , чтобы включить значки.

Завершение

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

MacOS Mojave Совет: как включить значки в Safari

Скриншот Мэтта Эллиотта / CNET Эта история является частью WWDC 2021.Все последние репортажи с ежегодной конференции разработчиков Apple.

Стеки полезны. Темный режим — это весело. Новый инструмент для создания снимков экрана и более полнофункциональный Finder также являются долгожданными дополнениями к MacOS Mojave, но моя любимая новая функция Mojave — это что-то крошечное, но чрезвычайно важное: значки Safari.Я не единственный, кто взволнован тем, что Safari наконец-то добавил эти маленькие значки, которые позволяют быстро определить, какая из ваших открытых вкладок какая. Вы знаете, маленький красный шарик для CNET, синий квадрат с белой буквой F для Facebook, синяя птичка для Twitter, красный E для ESPN, черный готический T для New York Times и так далее.

Отсутствие значков — единственная причина, по которой я использую Chrome вместо Safari на своем MacBook (610 долларов на Amazon). Теперь с Mojave я могу использовать Safari, который на Mac работает более эффективно, чем Chrome.Однако после установки Mojave я был удивлен, увидев простые серые вкладки в Safari. Оказывается, вам нужно включить фавиконы Safari.

Сейчас играет: Смотри: Apple MacOS Mojave уже здесь, но мы все еще ждем …

2:08

Включить значки Safari

Чтобы включить значки значков в Safari, перейдите в Safari> Настройки и щелкните вкладку Вкладки вверху.Затем установите флажок Показывать значки веб-сайтов на вкладках . Это оно! Перезагрузка не требуется. Когда вы закроете окно настроек и вернетесь в Safari, на ваших скучных, бесполезно серых вкладках теперь будут отображаться красочные веселые значки, которые помогут вам разобраться в своем ряду открытых вкладок.

Скриншот Мэтта Эллиотта / CNET

Первоначально опубликовано 10 июля 2018 г.
Обновление от 25 сентября: Добавлено новое видео для MacOS Mojave.

Подробнее: Все, что вам нужно знать о MacOS Mojave

Как обновить крошечные значки вкладок в Safari, когда они начинают исчезать

Маленький значок, который появляется на большинстве веб-сайтов на вкладках Safari, когда у вас включен Safari> Настройки> Вкладки> Показывать значки веб-сайтов во вкладках , называется значком .Эти микро-значки могут помочь вам идентифицировать сайт по значку, а не по названию вкладки или другим деталям.

Иногда эти значки вкладок и аналогичные значки в списке закладок пропадают. Вы увидите общий символ земного шара или даже что-то сломанное. Несколько лет назад я посоветовал сбросить состояние значков, но тем временем Apple изменила хранилище Safari для этих маленьких рисунков.

IDG

Папка Favicon Cache содержит базу данных и сохраненные значки для уже посещенных страниц.

Чтобы удалить кеш Safari:

1. Закройте Safari.

2. В Finder выберите Перейти> Перейти к папке .

3. Введите ~ / Library / Safari / Favicon Cache / и нажмите Return.

4. Используйте команду «Выбрать все» (Command-A), чтобы выбрать базу данных и кэшированные элементы.

5. Перетащите их в корзину или нажмите Command-Delete.

6. Очистите корзину.

7. Запустите Safari.

Safari в конечном итоге повторно заполнит кеш значков.

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

IDG

Вы можете предварительно просмотреть значок в папке значков с помощью Quick Look.

Однако при включенной синхронизации iCloud для Safari при очистке истории она удаляется не только на вашем Mac, но и на всех Mac, iPhone и iPad, вошедших в одну и ту же учетную запись iCloud с включенной синхронизацией Safari! Это может быть слишком далеко, чтобы вернуть крошечные значки.

Эта статья о Mac 911 является ответом на вопрос, заданный читателем Macworld Дэвидом.

Спросите Mac 911

Мы составили список вопросов, которые нам задают чаще всего, с ответами и ссылками на столбцы: прочтите наш супер-часто задаваемый вопрос, чтобы узнать, охвачен ли ваш вопрос. В противном случае мы всегда ищем новые проблемы, которые нужно решить! Отправьте свое письмо по адресу [email protected], включая снимки экрана, если это необходимо, и укажите, хотите ли вы использовать свое полное имя. Не на все вопросы будут даны ответы, мы не отвечаем на электронные письма и не можем дать прямые советы по устранению неполадок.

Как включить Safari 12 Favicons на Mac и iOS

Изображение: Apple / Safari

Apple выпустила новейшую версию своего веб-браузера Safari, Safari 12, для пользователей macOS Sierra и High Sierra 17 сентября, и она приносит множество новых функций безопасности и удобных мелочей, включая значки.

Safari 12 теперь автоматически блокирует веб-сайты или встроенный контент от отслеживания данных о просмотре пользователей Safari без их разрешения; блокирует всплывающие окна на определенных сайтах; помогает создавать более надежные пароли и избегать повторного использования старых; и принимает меры против сторонних расширений браузера, которые не были должным образом проверены.Обновление также затрудняет для рекламодателей распознавание определенных компьютеров Mac и вместо этого заставляет их отображаться как универсальные «машины Mac».

Но одно из самых желанных дополнений в Safari 12 не связано с безопасностью. Фавиконы впервые появляются на вкладках браузера Safari. Эти маленькие значки позволяют сразу увидеть, какие веб-сайты открыты, что полезно при работе с несколькими вкладками и попытках упорядочить вещи. Это может показаться небольшим изменением, но отсутствие значков на вкладках Safari заставило некоторых разочарованных пользователей переключиться на Chrome или Firefox.

Если значки не отображаются в вашем браузере по умолчанию, вот как включить их в версиях Safari для macOS и iOS:

Как включить значки на вкладках в macOS

Вам нужно будет запустить либо macOS Sierra или High Sierra и загрузили и установили обновление Safari 12. Safari 12 также будет предварительно установлен с обновлением macOS Mojave, которое выйдет позже в сентябре, поэтому, если вы из будущего (или используете публичную бета-версию), вам не нужно беспокоиться об обновлении Safari.

G / O Media может получить комиссию

Снимок экрана: Брендан Хессе

После того, как вы убедились, что все обновлено, вы можете включить эти крошечные значки, открыв Safari, а затем перейдя к Safari > Preferences . Перейдите в раздел Вкладки и установите флажок «Показывать значки веб-сайтов на вкладках».

Вот и все! Закройте меню настроек, и теперь вы должны увидеть значки, отображаемые на отдельных вкладках. Если вы их не видите, закройте и перезапустите Safari.Если они по-прежнему не отображаются после перезапуска браузера, дважды проверьте, были ли сохранены изменения в меню настроек, а затем попробуйте перезапустить еще раз.

Как включить значки на вкладках в iOS

Снимок экрана: Брендан Хессе

Вкладки Favicon предназначены не только для пользователей macOS — и iPhone, и iPad под управлением iOS 12 — последней версии операционной системы — также могут получать значки.

Чтобы включить значки, откройте окно настроек на своем устройстве iOS, а затем нажмите вкладку Safari.На этом экране вы увидите параметр «Показывать значки на вкладках». Убедитесь, что опция отмечена, затем закройте настройки и откройте Safari.

Теперь вы должны видеть значки на вкладках сафари iOS. Возможно, вам потребуется закрыть и перезапустить приложение Safari, но как только вы это сделаете, при просмотре с несколькими открытыми вкладками должны появиться значки.

Как отключить / включить Favicon в Safari iOS 14 / macOS Big Sur, Monterey

Последнее обновление: 11.06.2021

Вот Favicon в настройках Safari, Показать значок во вкладках при открытии нескольких веб-сайтов в Safari в iOS 14 или MacOS 11 Big Sur.Что такое значок в браузере сафари? Вы не знаете? Это официальный значок веб-сайта, который используется для идентификации веб-сайта. Спасибо Apple за возвращение поддержки значков в браузере Safari. Включите или Включите Favicon в Safari в iOS и MacOS . Не только на Mac или MacBook, но и на iPhone и iPad. Так что заслуга двух самых значительных обновлений в истории Apple — macOS и iOS.

мы будем рады помочь вам, отправьте эту форму, если ваше решение не описано в этой статье.

С самого начала, если вы используете Mac, вы должны знать эту функцию при использовании OS X Yosemite, но вы не найдете ее в обновлениях для macOS Sierra, macOS High Sierra или El Capitan. Но Google Chrome и Firefox издалека предоставляют значки. Internet Explorer от Microsoft был первым интернет-браузером, который запускал значки, и пользователи пользуются ими с 1999 года. Эти значки впервые представлены на iPhone / iPad.

Как включить Favicons в Safari на iPhone и iPad

-: Перейти к содержанию: —

Шаг 1: перейдите к « Настройки .”Приложение

Шаг 2. Прокрутите вниз и откройте « Safari ». параметр.

Шаг 3: Нажмите « Показывать значки на вкладках », чтобы включить.

Вам не нужно перезапускать приложение Safari или обновить страницу в Safari. Проверьте мгновенный эффект, как на экране ниже,

Как включить значки в Safari в MacOS Big Sur

• Шаг 1. Щелкните значок « Apple ».
• Шаг 2: Откройте « Системные настройки .”
• Шаг 3. Щелкните меню « Safari » и выберите « Preferences ».
• Шаг 4. Нажмите « Tabs ».
• Шаг 5. Теперь включите « Показывать значки веб-сайтов на вкладках ».

Этот параметр не влияет на сторонние браузеры приложений iOS и MacOS.

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

С этого момента идентифицируйте каждую вкладку, быстро просматривая Safari. Поделитесь своим опытом после включения и используйте его на своем iPhone / iPad и Mac.

Джайсух Патель

Джайсух Патель — основатель howtoisolve. Джайсух также является профессиональным разработчиком, любителем техно, в основном iPhone, iPad, iPod Touch и iOS, и является одним из ответственных лиц в своей семье. Контактное лицо: [адрес электронной почты защищен] [ИЛИ] [адрес электронной почты защищен]

Как показывать значки веб-сайтов в Safari для Mac

Современные версии Safari для Mac включают поддержку favicon (избранного значка), предлагая визуальный индикатор веб-страниц в строке заголовка и панели вкладок браузера Safari.Почти в каждом другом веб-браузере на Mac (и других операционных системах) уже довольно давно есть поддержка значков, но это относительно новое дополнение к Safari, и для отображения значков веб-сайтов в Safari для Mac необходимо сначала включить поддержку значков в настройках. поскольку эта функция по умолчанию отключена.

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

Как включить значки / значки веб-сайтов в Safari для Mac

1. Откройте приложение Safari на Mac, если вы еще этого не сделали
2. Откройте меню Safari и выберите «Настройки».
3. Выберите «Вкладки»
4. Установите переключатель «Показывать значки веб-сайтов на вкладках», чтобы он был установлен и включен
5. Закройте настройки Safari

Значки веб-сайтов сразу видны в любом окне с вкладками в Safari или на панели закладок Safari.Просто посмотрите на верхнюю часть вкладок в окне браузера Safari, чтобы увидеть значки.

Конечно, если вы решите, что вам не нравятся значки в Safari, вы можете снова скрыть их так же легко, как вы их включили.

Как скрыть / отключить значки / значки веб-сайтов в Safari для Mac

1. Откройте приложение Safari на Mac
2. Откройте меню Safari и выберите «Настройки».
3. Выберите «Вкладки»
4. Переключите переключатель «Показывать значки веб-сайтов на вкладках», чтобы он не отмечался, тем самым отключая значки в Safari.
5. Закройте настройки Safari и используйте браузер как обычно

Скрытие значков значков — это настройка по умолчанию в Safari, так что это просто возвращение к этому.

Если вы не найдете эту функцию доступной в вашей версии Safari, скорее всего, она не поддерживает значки, поскольку только современные версии Safari поддерживают отображение избранных значков веб-сайтов. Вы можете либо обновить Safari до последней версии, либо загрузить Safari Technology Preview, в котором доступны последние бета-функции, включая поддержку значков и другие функции, которые могут появиться в будущих выпусках (техническая предварительная версия является своего рода общедоступной бета-версия Safari).

Для всех, кому интересно, это работает одинаково в финальных версиях Safari, а также в сборках Safari Technology Preview и Safari Developer Preview.

Это, очевидно, относится к Mac, но при желании вы можете включить поддержку значков веб-сайтов Safari (favicons) в Safari для iPhone и iPad.

Связанные

macos — Как отобразить значок на моей вкладке Safari?

macos — Как отобразить значок на моей вкладке Safari? — Спросите у другого

Сеть обмена стеков

Сеть Stack Exchange состоит из 177 сообществ вопросов и ответов, включая Stack Overflow, крупнейшее и пользующееся наибольшим доверием онлайн-сообщество, где разработчики могут учиться, делиться своими знаниями и строить свою карьеру.

Посетить Stack Exchange

2. 0
3. +0
6. Авторизоваться Зарегистрироваться

Ask Different — это сайт вопросов и ответов для опытных пользователей оборудования и программного обеспечения Apple.Регистрация займет всего минуту.

Зарегистрируйтесь, чтобы присоединиться к этому сообществу

Кто угодно может задать вопрос

Кто угодно может ответить

Лучшие ответы голосуются и поднимаются наверх

Спросил 6 лет, 4 месяца назад

Просмотрено 19к раз

Я хочу отображать значок на вкладке Safari:

Я использую Yosemite 10.10. Я пробовал Glims, похоже, с Yosemite не работает.

Мне интересно, есть ли другой способ настроить это изначально или с помощью стороннего инструмента.

bmike ♦

2,155 33 золотых знака364364 серебряных знака782782 бронзовых знака

Создан 19 мар.

иориори

30922 золотых знака33 серебряных знака1010 бронзовых знаков

3

Это невозможно в текущей версии Safari 9 или 9.1.

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

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

Создан 31 мар.

соринсорин

24.8k6161 золотой знак153153 серебряных знака226226 бронзовых знаков

Теперь есть решение этой проблемы: я создал Faviconographer, приложение, которое будет перекрывать значки Favicons для вкладок Safari. Это все еще обходной путь по сравнению с собственной функцией Safari, но работает на удивление хорошо.

Создан 26 сен.

Мистер Маг

1,10922 золотых знака99 серебряных знаков2121 бронзовый знак

0

Safari 10.0.2: значки отображаются при закреплении вкладки.

Это ответ на ваш первоначальный вопрос, хотя это не то, что вы хотели задать 🙂

Создан 27 янв.

1

Начиная с Safari 12.0 это возможно.В настройках теперь вы можете отображать значок в новых настройках вкладок:

Показывать значки веб-сайтов во вкладках

пкамб

4,41844 золотых знака3434 серебряных знака6262 бронзовых знака

Создан 19 сен.

ХуаТам

32933 серебряных знака55 бронзовых знаков

В Safari 8 значки больше не отображаются на панели вкладок, к моему разочарованию.

Одно из решений — использовать SafariStand и EasySIMBL. После установки (см. Инструкции на сайте SafariStand) откройте настройки SafariStand и установите флажок «Показывать значок на панели вкладок». Это вернет значки на вкладки.

Создан 22 апр.

крышка

1,66522 золотых знака1414 серебряных знаков2626 бронзовых знаков

2

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

Создан 16 авг.

Мэтт СефтонMatt Sephton

4,38811 золотых знаков2323 серебряных знака4646 бронзовых знаков

Просто используйте Glims и установите его в «облегченном» режиме.

Создан 12 окт.

2

Вы должны войти в систему, чтобы ответить на этот вопрос.

Лучше всего спрашивать разные работает с включенным JavaScript

Ваша конфиденциальность

Нажимая «Принять все файлы cookie», вы соглашаетесь с тем, что Stack Exchange может хранить файлы cookie на вашем устройстве и раскрывать информацию в соответствии с нашей Политикой в ​​отношении файлов cookie.

Принимать все файлы cookie Настроить параметры

.