Как сделать иконку для яндекса
Как создать ярлык Яндекса на рабочем столе?
Этот вопрос является очень популярным среди начинающих и неопытных компьютерных пользователей. Прежде чем дать на него ответ нужно разобраться о чем конкретно идет речь и что имеет ввиду пользователь под словом Яндекс. Ведь у Яндекса есть поисковая система, которую используют для поиска информации в интернете, а также есть интернет браузер, который служит как программа на компьютере при помощи которой просматриваются веб сайты.
В данной статье вы узнаете как вынести ярлык на рабочий стол для Яндекс браузера, а также как создать ярлык на рабочем столе для быстрого перехода на сайт Яндекса.
Установка значка сайта Яндекс на рабочий стол
На нашем сайте уже была опубликована статья, в которой рассказывалось как создать ярлык определенного сайта на рабочем столе для быстрого доступа к нему.
Следуя инструкциям, описанным в ней, мы сейчас создадим значок на рабочем столе для сайта Яндекс.
Самый простой способ сделать это – скачать и запустить официальный установщик яндекса. Для этого переходим по данной ссылке и Нажимаем кнопку “Скачать”.
Скачивание установочного файла яндекс браузера с официального сайта
По окончании скачивания запускаем его и нажимаем кнопку “Установить”.
Переустановка Яндекс браузера
Начнется установка/обновление яндекс браузера. В итоге через несколько минут на рабочем столе, а также на панели задач появится значок яндекса. При этом ваши закладки и пароли сохранятся.
Значок яндекс браузера
Значок яндекса на панели задач
Начало создания Ярлыка сайта Яндекс
После этого нас сразу же попросят указать расположение объекта, на которое должен ссылаться этот самый ярлык. Для того, чтобы он ссылался на сайт Яндекса, в данном поле нужно вписать https://www.yandex.by/ и нажать “Далее”.
Указываем интернет адрес Яндекса
Затем нужно будет написать название для ярлыка. Оно может быть любым. Например, Яндекс.
Указываем имя ярлыка
После этого жмем “Готово” и убеждаемся, что теперь на рабочем столе есть значок для быстрого доступа к сайту Яндекса.
Созданный ярлык Яндекса на рабочем столе
Создаем ярлык на рабочем столе для Яндекс браузера
Если же вы при вводе запроса “Установить значок Яндекс на рабочий стол” имели в виду не сайт Яндекса, а браузер, то сейчас мы расскажем как это сделать.
Обычно при установке Яндекс браузера значок на рабочем столе появляется автоматически. Но если он по какой – то причине пропал с рабочего стола, то его можно легко туда вернуть.
Для этого включаем отображение скрытых файлов. Далее переходим через проводник Windows по следующему пути:
и находим в данной папке файл “browser”. Это и есть исполняемый файл Яндекс браузера.
Папка с установленным Яндекс браузером
Если вы не нашли этого пути и файла browser, то скорее всего Яндекс браузер не установлен на вашем компьютере. В этом случае перейдите на сайт яндекса. Далее автоматически загрузится установочный файл, который нужно запустить и подождать несколько минут. По итогу на рабочем столе, а также на панели задач появятся ярлыки Яндекса.
Создание ярлыка Яндекс браузера
После этого можно убедиться о наличии значка Яндекса на рабочем столе, который можно переименовать как вам удобно, нажав на него правой кнопкой мыши и выбрав “Переименовать”.
Созданный ярлык Яндекс браузера на рабочем столе
Как создать фавиконку и подключить ее к сайту
Favicon (сокращение от Favorites Icon) — иконка с логотипом или первой буквой названия сайта, которая отображается на вкладках браузера, в списке закладок и в интерфейсе некоторых поисковых систем.
Этот мини-логотип, по сути, олицетворяет сайт и помогает пользователям быстрее отыскать его среди сохраненных страниц или в бесконечном списке открытых вкладок. Чтобы облегчить потенциальному посетителю эту задачу, каждому веб-ресурсу, от мелкого блога на WordPress до интернет-магазина с огромной аудиторией, нужны наглядные и узнаваемые Фавиконки.
Так Favicon выглядят на вкладках в браузере Safari:
А вот так в поисковой выдаче Яндекса:
Такие значки должны опираться на стилистику бренда, поэтому важно, чтобы они были с ним тесно связаны.
Вот, как это реализовано у Apple и Яндекса:
Далее разберемся, как сделать иконку сайта и подключить ее к нему.
Характеристики значков
Взять любую понравившуюся картинку и с ходу использовать ее как Favicon не получится. Надо соблюсти два несложных требования: выбрать подходящее расширение и размер.
Формат
Тут есть из чего выбирать:
.svg не поддерживается в старых браузерах для ПК и некоторых Android-браузерах
Размер
Здесь тоже есть некие стандарты, но они разнятся от системы к системе. Часто используются размеры:
Как сделать иконку для сайта HTML?
В лучшем случае вам все нарисует грамотный дизайнер, но если под рукой такого не нашлось, можно и самому склепать значок.
Рисуем Favicon в Sketch или Photoshop
Значок можно нарисовать там же, где рисуются и другие части интерфейса. Например, Photoshop или Sketch. Покажу, как это работает на примере Sketch:
То же самое можно сделать в Photoshop или условном Pixelmator, разве что интерфейсы настройки изображений и экспорта будут отличаться.
Преобразуем готовое изображение в фавиконку
Рисуем значок в браузере
Если нет Фотошопа или просто не нужен какой-то сложный дизайн, то можно на скорую руку нарисовать себе лого на сайте Favicon.cc. В этом случае все запредельно просто:
Тут же можно посмотреть, как нарисованная иконка выглядит в адресной строке браузера.
Конвертируем текст или эмоджи в значок
Есть вариант еще проще — сервис Favicon.io. На нем есть три конвертера: из картинки, из текста или из эмоджи в значок.
Но я попробую скачать иконку с эмоджи:
Как подключить Favicon к сайту?
Теперь, когда у меня есть фавиконка (неважно откуда), надо ее подключить. Для этого надо вставить в html-код основной страницы строчку, в который будут указаны тип ресурса, адрес и тип данных.
АТРИБУТ
ЗНАЧЕНИЕ
icon указывает на тип используемого ресурса.
Здесь указывается путь до файла. Можно ввести ссылку до сервера или внешнего каталога.
Можно вписать несколько разных значков. Браузер все равно сам выберет подходящую иконку. Такой подход предлагается в Favicon.io.
Это самый простой способ. Естественно, файл со значком может называться как угодно и располагаться на внешнем сервере. Главное, корректно оформить код на сайте.
Как создать ярлык Яндекс браузера
Здравствуйте, друзья! Если в один прекрасный день Вы заметили, что ярлык веб-обозревателя, которым Вы пользуетесь, пропал с рабочего стола, тогда давайте разберемся, как его вернуть. Произойти это могло по различным причинам: некорректно почистили компьютер или ноутбук от «мусора», удалили его случайно вместе с другими файлами, а может, при установке не отметили галочкой пункт «Создать ярлык на рабочем столе».
Если ярлыка браузера на рабочем столе нет, то чтобы зайти в Интернет, придется каждый раз искать нужное приложение на компьютере через Проводник Windows. Это не совсем удобно, да и времени занимает прилично. Поэтому давайте разбираться, какими способами можно создать ярлык Яндекс браузера на рабочем столе компьютера.
Создание ярлыка на рабочем столе через расположение файлов
Первый способ заключается в следующем: находим расположение папки, в которую был установлен Yandex, и создаем его для исполняемого файла.
Но перед этим, нужно включить видимость скрытых файлов и папок на компьютере. Для этого перейдите: «Пуск» – «Панель управления».
В следующем окне вверху поставьте «Просмотр» – «Крупные значки», и выберите из списка пункт «Параметры папок».
Дальше нужно перейти на вкладку «Вид». В разделе «Дополнительные параметры», поставьте маркер в поле «Показывать скрытые файлы, папки и диски». Нажмите «Применить» и «ОК». Позакрывайте все окна.
Следующее, что нужно сделать – найти через Проводник папку, в которую был установлен Яндекс браузер. Располагается она обычно по следующему пути:
Users – это Пользователи, а вместо Master выберите имя Вашего компьютера или ноутбука. Папка «AppData» – это скрытая папка, именно для ее отображения, мы сначала включили видимость всех скрытых файлов и папок.
Найдите в списке Яндекс браузер. Обратите внимание, что напротив него, в столбце «Тип», должно быть написано «Приложение».
Выделите строку с приложением «browser» (у Вас может называться иначе), и выберите из выпадающего списка «Отправить», затем – «Рабочий стол (создать ярлык)».
После этого, в указанном месте появится нужный значок. При желании, его можно переименовать, например, «Яндекс.Браузер», или просто «Yandex».
Создаем ярлык через Пуск
Второй способ, на мой взгляд, проще первого. Для его создания, нажмите на кнопку «Пуск». Затем кликните по пункту «Все программы».
Найдите в открывшемся списке папку с названием «Yandex» и кликните по ней левой кнопкой мыши. Затем наведите курсор на появившуюся строку с названием и логотипом браузера и нажмите правую кнопку мыши.
Из контекстного меню выберите «Отправить». В следующем списке выбираем указанный ранее пункт.
Значок появится на рабочем столе.
Думаю, у Вас все получилось, и теперь заходить в Интернет Вы сможете, просто кликнув по созданному ярлыку Яндекс браузера.
Как поместить на Рабочий стол ярлык «Яндекса»: простейшие решения для браузера и сервисов
Не секрет, что многие пользователи нынешних компьютерных систем предпочитают иметь основные элементы, используемые в работе, так сказать, под рукой. Неудивительно, что местом их быстрого запуска становится Рабочий стол. В статье рассмотрим, как вывести ярлык «Яндекса» на Рабочий стол. При этом учтем два решения, касающиеся отдельно браузера и самой поисковой системы.
Что используем: браузер или поисковую систему?
Прежде всего, говоря о сервисах и программных продуктах, предоставляемых компанией «Яндекс», нужно четко разграничивать их типы.
Достаточно условно их можно разделить на две категории: программные продукты, устанавливаемые в компьютерную систему, и сервисы, работающие непосредственно в сети Интернет (почта, поиск, новости и т. д.).
Что касается программ, наиболее известной из всех продуктов этого разработчика является «Яндекс.Браузер». Движок его, откровенно говоря, разработан на основе всемирно известного Chromium, что дает повод сомневаться в авторстве компании. Тем не менее сейчас речь не об этом.
Рассмотрим другой момент: можно ли поместить на Рабочий стол ярлык «Яндекс.Браузера» или поисковой системы, которая вызывается исключительно программными средствами доступа в сеть Интернет. Тут есть два решения как минимум.
Как вывести ярлык «Яндекса» на Рабочий стол: простейшее решение для браузера
Начнем, пожалуй, с самого простого, а именно с одноименного интернет-браузера. Как установить ярлык «Яндекса» на Рабочий стол? Да точно так же, как это делается для всех остальных программ.
Тут можно использовать два метода. В первом случае предполагается найти сам браузер или ссылку на него в меню «Пуск», после чего использовать правый клик для вызова субменю, где выбирается команда отправки ярлыка на Рабочий стол. Во втором варианте можно найти сам исполняемый EXE-файл запуска, скажем, в том же стандартном Проводнике Windows использовать опять же правый клик с вызовом меню, где и содержится строка отправки ярлыка на Рабочий стол.
Но это касается только устаревших версий браузера. Все новые модификации создают иконки и в локации Рабочего стола, и в панели быстрого запуска автоматически (да еще и устанавливают кучу всего дополнительно).
Как на Рабочий стол установить ярлык «Яндекса»: методика для поисковой системы
Если же говорить именно о поисковой системе, тут вопрос решается тоже достаточно просто. Давайте рассмотрим, как создать ярлык «Яндекс» на Рабочий стол простейшим способом.
Если кто не обращал внимания, посмотрите внимательно на запущенный интернет-браузер со стартовой или поисковой страницей «Яндекса». Как правило, все современные браузеры слева от адресной строки отображают иконку (логотип) доверенных сайтов. И страницы с сервисами «Яндекса» не исключение.
На Рабочий стол ярлык «Яндекса» переносится простым перетаскиванием иконки (это литеры Y или Я слева от строки) из браузера при зафиксированном нажатии левой кнопки мыши. Только и всего. При этом нужно свернуть или уменьшить окно браузера таким образом, чтобы он не закрывал полностью область Рабочего стола.
В некоторых случаях можно использовать и еще один вариант, когда окно браузера полностью закрывает Рабочий стол. Но тогда придется сначала переместить ярлык на иконку сворачивания всех окон (в Windows 7 она находится справа внизу экрана), и только после этого ярлык будет помещен в нужное место.
Еще на Рабочий стол ярлык «Яндекса» можно поместить с использованием самих настроек стола, предусмотренных в операционных системах Windows любой модификации. Тут достаточно использовать правый клик на свободной области пустого экрана, а в контекстном меню выбрать строку создания ярлыка.
Далее будет предложено ввести либо адрес программы, либо адрес веб-ресурса. В данном случае нас интересует второй вариант. В строке адреса сайта прописываем адрес «Яндекс»-ресурса. Некоторые системы могут, мягко говоря, плеваться, поэтому в качестве префикса нужно вводить не http, а https (защищенное соединение). Но в целом проблем быть не должно.
В общем и целом на Рабочий стол ярлык «Яндекса» переносится совершенно просто, что для браузера, для поисковой системы или какого-либо другого сервиса, предоставляемого компанией «Яндекс», и является достаточно простым делом. Другой вопрос – с каким именно объектом или программой должен быть сопоставлен создаваемый ярлык.
Остается добавить, что способ с использованием собственных настроек Рабочего стола является универсальным, поскольку позволяет создать ярлык и для программы, и для веб-страницы. Зато перетаскивание иконки из браузера более просто. Но тут стоит обратить внимание на один момент: поддерживает ли сам браузер отображение иконок доверенных сайтов.
Не нравятся такие варианты? Поступите самым что ни на есть «дедовским» способом: выделите адрес и при зажатой клавише Ctrl переместите его на Рабочий стол. В итоге появится ссылка с иконкой браузера, который установлен по умолчанию или из которого производилось перемещение.
Создание favicon для сайта 2020
Что такое favicon и для чего он нужен?
Favicon – это значок (иконка), который отображается во вкладке браузера, закладках, а также в сниппетах результатов поиска.
Favicon играет важную роль в веб-приложениях. Он может улучшить внешний вид сайта в выдаче, повышает узнаваемость вашего сайта, помогает пользователю быстро найти необходимую страницу в закладках и вкладках.
Кроме того, пользователь может добавить страницу вашего сайта на главный экран телефона или сохранить как веб-приложение. В таком случае с помощью favicon можно быстро найти сайт среди большого количества других приложений.
Какой формат использовать для favicon?
Раньше в качестве основного формата использовали ICO. Особенность данного формата – мульти-размерность. Данный файл может хранить в себе несколько размеров иконки. На смену ICO пришел формат PNG. ICO все еще поддерживаемый, но большинство современных браузеров выбирают PNG формат иконки, который легче. Некоторые браузеры не могут выбрать правильный значок в файле ICO, что приводит к неправильному использования значка с низким разрешением.
О каких платформах пойдет речь в этой статье?
Десктопные браузеры
Начнем, пожалуй, с классического десктопа.
Как было упомянуто ранее, формат ICO сегодня является устаревшим, но это не значит, что про него нужно забыть. Формат ICO может спасти вашу иконку и корректно отображать favicon в некоторых случаях. Например, до 11 версии IE PNG-формат не поддерживается. Поэтому для IE10 и младших версий нужно использовать старый формат ICO. В таком случае желательно использовать следующую комбинацию ICO и PNG форматов:
Для создания мульти-размерной иконки ICO можно использовать сервис-конвертер icoconvert. При генерации иконки необходимо выбрать следующие размеры: 16х16, 32х32, 48х48 (highest resolution icon).
Иконки PNG имеют следующие размеры: 16х16, 32х32, 96х96, 120х120. Зачем иконка 120х120? Яндекс Справка сообщает, что может воспользоваться иконкой данного размера.
Если обратить внимание на значение rel (тип ресурса), то icon – учитывается большинством браузеров, а shortcut icon – учитывается браузером IE.
Chrome на Android
Android ожидает увидеть значок 192х192 в формате PNG, alpha-канал (прозрачность) приветствуется.
Android Chrome полагается на манифест веб-приложения. Любой сайт может использовать манифест для того, чтобы ссылаться на некоторые значки.
Сам файл манифеста формата json и объявляется следующей строкой:
Файл манифеста для Android Chrome можно сгенерировать с помощью сервиса RealFaviconGenerator.
Иконки должны иметь следующие размеры: 72х72, 96х96, 144х144, 192х192, 512х512 в формате PNG, прозрачность приветствуется. Так как иконка может иметь прозрачный фон, то в манифесте можно указать цвет с помощью background_color.
Стоит отметить, что на телефоне пользователь имеет возможность сохранить страницу браузера на главный экран. Это будет просто ссылка на страницу вашего сайта, подтянется иконка с названием android-icon-192×192.png, которая объявлена у вас в коде.
Если же подключить к сайту манифест, то при открытии страницы пользователю может быть предложено сохранить сайт в качестве приложения. В данном случае вы имеет возможность объявить визуально ту же иконку (android-icon-192×192.png) или переделать дизайн иконки для приложения под свои нужды и объявить в манифесте с соответствующими размерами.
Иконка закладки в iOS (PWA)
iOS Safari ожидает увидеть apple touch icon. Это иконка PNG формата 180х180, без alpha-канала (без прозрачности). Углы иконки будут автоматически скруглены, что упрощает создание apple touch icon.
Пользователи iOS также могут добавить сайт на главный экран, и он будет выглядеть как приложение. Такая ссылка отображается в виде значка и называется Web Clip.
Нижеперечисленные размеры иконок предназначены для поддержки различных устройств, например, для iPhone и iPad:
В коде нужно добавить атрибут rel=«apple-touch-icon» и указать размер с помощью sizes.
Если на сайте нет значка, размер которого является рекомендованным для устройства, то будет использована сама близкая по размеру иконка большего размера. Основная apple touch icon это иконка размером – 180х180. Остальные устройства могут уменьшать иконку.
При создании иконки не забывайте об отступах. Они должны быть не менее 4px со всех сторон. Это необходимо, чтобы ваша иконка не обрезалась, так как значок приложения в iOS имеет скругленные углы.
Следует отметить, что устройства под iOS не единственные, которые ищут apple touch icon. Некоторые браузеры, вроде Android Chrome, могут использовать apple touch иконки, так как они встречаются чаще других PNG иконок высоких разрешений.
macOS
В Mac OS дела обстоят совершенно иначе. Если пользователь попробует сохранить сайт на рабочий стол, то вместо иконки сайта будет отображен скриншот страницы.
Чтобы добавить иконку необходимо использовать формат SVG, который позволит сделать маску иконки. Данная иконка будет отображена при закреплении вкладки в Safari.
В коде нужно добавить атрибут rel=«mask-icon». Сама SVG-иконка должна быть черного цвета. Цвет иконки задается в атрибуте color=»#e52037″.
SVG-иконка используется в закрепленной вкладке (pinned tab – no focus) в монохромном виде. При наведении (pinned tab – focus) иконка будет закрашена в цвет, который имеет атрибут «color». В touch bar также передается цвет атрибута «color».
При создании иконки необходимо убрать все имеющиеся тени, сделать ее плоской и простой. Упростить иконку до одного объекта можно с помощью операций «Union» и «Flatten». Данные операции легко применить в программе Figma.
Если закрыть глаза на создание иконки-маски, то браузер просто отобразит первую букву домена вашего сайта.
Windows
С Windows нужно немного запариться, чтобы сделать хорошо.
Для IE10 и более младших версий необходимо использовать формат ICO, так как до IE11 формат PNG не поддерживался.
С приходом IE11 и Windows 8.1 появилась возможность закреплять сайты в виде живых плиток. Для маленьких плиток используется по умолчанию favicon, а для больших и широких плиток необходимо задавать изображение конкретного размера. Это можно сделать с помощью добавления тегов метаданных в разметку сайта или создать browserconfig.xml (файл конфигурации браузера).
Пример добавление тегов метаданных в разметку веб-сайта для больших плиток:
Данной строкой мы указываем цвет фона плитки:
Можно указать имя вашего веб-сайта:
Что такое browserconfig? Это XML-документ, в котором перечислены различные значки, соответствующие пользовательскому интерфейсу Metro UI.
Чтобы подключить файл browserconfig в разметке необходимо добавить следующую строку в head:
Сам файл будет выглядеть следующим образом:
В browserconfig файле определены изображения для различных размеров плитки.
Microsoft рекомендует брать больший размер изображений в целях поддержки экранов с высокой плотностью пикселей.
В следующем списке приведены некоторые рекомендации по использованию различных размеров:
Подготовка favicons
Перед тем как добавлять ваши иконку в корневую папку сайта необходимо их подготовить. Исходные размеры иконок не очень большие, но можно их сжать с наименьшей потерей качества.
Например, в моем случае вес всех изображений был 200кб, после сжатия 50кб. Качество изображений практически не изменилось. Вы можете воспользоваться любым удобным сервисом для сжатия картинок. Я использовала iloveimg.
Заключение
Последовательность подключения в разметке веб-сайта:
С помощью последней строки кода «theme-color» можно закрасить адресную строку и строку уведомлений в любой цвет. В значении content задается цвет.
Для проверки иконок вашего сайта воспользуйтесь RealFaviconGenerator. Данный сервис покажет, как отображаются ваши иконки на разных платформах, подскажет где и какие могут быть проблемы.
Кроме того, данный сервис может сгенерировать необходимые размеры, форматы иконок и код. Но необходимо проверять исходники на наличие всех рекомендуемых размеров для корректного отображения на различных устройствах.