Содержание

Как добавить иконку сайта html

Фавикон для сайта

Фавикон (favicon) – это значок, который связан с определённым веб-сайтом или веб-страницей. Наличие фавиконки у сайта позволяет, как правило, сделать его более узнаваемым. Это связано с тем, что данный веб-сайт (каждая его страница) будет иметь значок, посмотрев на который пользователь будет знать, что это за ресурс. Иконку favicon сайта можно увидеть в различных элементах браузера, таких как вкладка, адресная строка, история посещений (журнал), панель закладок и др. Кроме этого иконку фавикон можно также обнаружить в результатах поиска Яндекс рядом с названием сайта. Ещё иконка favicon используется при размещении ссылки (на страницу сайта) на главном экране операционных систем iOS (Safari), Android (Chrome), Windows 8 и 10.

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

Процесс установки иконки favicon на сайт, как правило, начинается с её создания. Из-за того что требования к разрешению и формату иконки favicon на различных устройствах разные лучше её сначала подготовить в векторном формате svg (масштабируемой векторной графике). Это действие позволит, используя одно изображение (svg), получить в отличном качестве значок favicon как с разрешением 16×16 пикселей, так и с 512×512.

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

Главная страница сайта inkscape.org

Подготовка изображения для favicon

Рассмотрим основные действия по подготовке изображения в формате svg для favicon.

Изображение, которое будет использоваться в качестве иконки favicon сайта, можно нарисовать, или получить через поиск картинок сервиса Google или Yandex. Поиск изображения (значка) желательно осуществлять в формате svg. Но если найти подходящей иконки в формате svg не удаётся, то можно выбрать и другой формат (например, png или jpg). А потом в программе Inkscape с помощью специального инструмента перевести её в векторную графику (векторизовать растр).

Например, рассмотрим, как с помощью программы Inkscape можно подготовить изображение (иконку двери) в формате svg для фавикон.

  1. Используя сервис «Google Картинки» находим подходящие изображение двери и сохраняем его на компьютер. Изображение двери, найденное через поиск «Google Картинки»
  2. Открываем программу Inkscape и создаём в ней новый файл.
  3. Устанавливаем странице любой размер в пикселях с одинаковыми значениями по ширине и высоте (например, 260×260).
  4. Импортируем найденное изображение двери. Если картинка имеет растровый формат (png, jpg), то дополнительно выполняем её преобразование в вектор (правая кнопка мыши на изображении -> Векторизовать растр). Векторизованный растр двери
  5. Размещаем изображение по центру области содержимого страницы (высоту изображения устанавливаем равной 260 пикселей с сохранением пропорций изображения). В горизонтальном направлении (если ширина изображения меньше 260 пикселей) выравниваем её по центру. Выравнивание изображения по центру содержимого страницы
  6. Сохраняем файл (например, под именем door.svg ).

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

Генерация иконки favicon для всех платформ

Генерацию иконки фавикон для всех платформ (iOS, Android, PC, MAC и др.) осуществим онлайн на сайте http://realfavicongenerator.net/.

Главная страница сайта realfavicongenerator.net

Для этого необходимо нажать на кнопку «Select your Favicon picture» и выбрать в диалоговом окне подготовленное изображение (door.svg).

После этого необходимо настроить цвета фона и ввести название приложения для операционной системы Android (Chrome).

Настройка фавиконки сайта для iOS (Safari) Настройка иконки favicon для Android (Chrome) Настройка фавиконки сайта для операционных систем Windows 8 и 10 Настройка favicon для закреплённых вкладок браузера Safari Настройка параметров генерации favicon для сайта

После этого выбираем опцию «I will place …», которая говорит о том, что полученные файлы фавикон необходимо положить в корень сайта. Это действие обеспечит её поддержку в большинстве браузеров.

Далее нажимаем на кнопку «Generate your Favicons and HTML code».

После этого действия сервис realfavicongenerator.net осуществит генерацию иконки favicon и HTML-кода. Результат данной операции будет выведен на экран.

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

Установка фавиконки на сайт

После выполнения подготовительных операций приступим к подключению favicon на сайт. Все основные действия по добавлению иконки на веб-сайт приведены на странице «Install your favicon».

  1. Скачивание сгенерированного пакета (favicons.zip). Содержимое пакета favicon (форматы png, svg, ico)
  2. Распаковка его в корень сайта
  3. Вставка HTML-кода представленного на странице в секцию head ваших страниц:

Например, на CMF MODX подключение favicon (HTML-кода) к страницам обычно осуществляется в чанке, с помощью которого выполняется формирование раздела head документа.

Проверка favicon у сайта

Проверка favicon сайта осуществляется с помощью ссылки, представленной в 4 пункте (check your favicon). Данное действие также можно осуществить через главное меню Favicon -> Favicon checker.

Чтобы приступить к валидации favicon сайта выбираем в представленной форме протокол сайта (http:// или https://), вводим доменное имя и нажимаем на кнопку «Check Favicon».

Валидация фавиконки сайта

После этого убеждаемся, что favicon сайта прошёл проверку на сервисе realfavicongenerator.net и корректно отображается на всех платформах.

Индексация фавикон сайта поисковыми системами

Процесс индексации иконки у разных поисковых систем занимает разное время. Например, у Яндекса данный процесс может осуществляться несколько месяцев.

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

  • Яндекс — https://favicon.yandex.net/favicon/имя_домена
  • Google — https://www.google.com/s2/favicons?domain=имя_домена

Вместо имя_домена необходимо указать имя домена (например, itchief.ru).

Примечание: использование в качестве favicon анимированных изображений (gif) поддерживаются только некоторыми браузерами (Firefox). В других браузерах в качестве favicon будет использоваться статичное изображение.

Фавикон: зачем нужен, как создать и поставить на сайт

Автор: Ольга Борисенко Опубликован 09.03.2021

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

Содержание

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

Фавикон (favicon, сокращенное от favourite icone) — маленькая иконка, которая сопровождает сайт в интернет-среде. Эта иконка появляется на вкладках, в результатах поиска и помогает сайту быть более узнаваемым.

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

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

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

Помогает в навигации

Фавиконка помогает быстро находить сайт среди других. Когда открыто много вкладок, проще найти значок, чем считывать название каждой вкладки.

Фавиконы можно увидеть:

  • на вкладках и закладках в браузере,
    Фавиконы на вкладках и закладках браузера Mozilla
  • в истории браузера,
    Фавиконы в истории браузера
  • в результатах поиска «Яндекс»,
    Фавиконы в результатах «Яндекс.Поиска»
  • в мобильном поиске Chrome и «Яндекс»,
    Фавиконы в поиске Android Chrome
  • в часто посещаемых сайтах на главной странице некоторых браузеров.
Вызывает доверие

Хорошо оформленный сайт производит хорошее впечатление. Фавикон — часть этого впечатления. Сравните сами: на скриншоте ниже вкладки в мобильном браузере Chrome. На второй снизу вкладке пустая иконка. Вкладку сложнее выделить взглядом среди остальных, да и выглядит она менее презентабельно, чем соседние.

Сайты с фавиконками и без них во вкладках мобильного браузера

Увеличивает кликабельность

Нет информации о том, является ли наличие фавиконки фактором ранжирования. Но

если сайт проще найти в результатах поиска, а доверие к нему выше — это повышает кликабельность.

Создание favicon

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

Визуальная составляющая

Что учитывать при создании фавиконки:

  • Размер. В некоторых интерфейсах и на маленьких экранах он может достигать 16 на 16 пикселей.
  • Читаемость. Иконка должна читаться в разном окружении — на вкладках и в истории, в результатах поиска.
  • Стиль бренда. Даже если ваш логотип не удается перенести в микро-формат, нужно сделать что-то связанное, в айдентике бренда.

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

Отличный фавикон у «Google Диска». Разноцветный треугольник хорошо смотрится в любом размере.

Логотип «Google Диска» и он же в виде фавиконки на вкладке

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

Логотип SendPulse и он же в виде фавиконки на вкладке

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

Логотип VC.ru и он же в виде фавиконки на вкладке

Требования «Яндекс» к фавиконке

Размер: 120 * 120 пикселей, 32 * 32 или 16 * 16.

Формат: SVG (рекомендуемый), ICO, GIF (без анимации), JPEG, PNG, BMP.

Вот что «Яндекс» пишет по поводу фавиконок:

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

Размер: кратный 48 — 144 * 144, 96 * 96, 48 * 48. Загружать файл 16*16 не рекомендуется.

Формат: SVG, ICO, GIF (без анимации), JPEG, PNG.

Кроме этого, Google рекомендует следующее:

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

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

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

Realfavicongenerator

Этот сервис просит квадратный исходник с оптимальным размеров 260 на 260 пикселей. Здесь можно самостоятельно настроить результат: покрутить фон, отступы, цветовую тему.

Настройка получившихся иконок в Realfavicongenerator

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

Пакет нужно скачать в виде файлов и куска кода

Favic-o-matic

Попросит у вас квадратный исходник минимум 310 на 310 пикселей. Настроить здесь ничего не получится, после обработки автоматически начнется скачивание готового пакета и сгенерируется код для сайта.

Результат создания фавиконок в Favic-o-Matic

Favicon.ico & App Icon Generator

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

Готовый пакет фавиконок и код для сайта в Favicon.ico & App Icon Generator

Faviconit

Этот сервис попросит исходник минимум 310 на 310 пикселей и весом не более 5 Мб. После обработки вы получите пакет с файлами, внутри которого будет лежать и текстовый файл с кодом для встраивания на сайт.

Готовый пакет фавиконок и код для сайта в Faviconit

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

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

Загружаем иконки на сайт

Иконки нужно положить в корневую папку вашего сайта. Для этого понадобится доступ к сайту на хостинге, где он лежит. Загрузить файлы можно либо через собственную панель управления, если такая есть у вашего хостинг-провайдера, или какой-нибудь файловый менеджер, например, FileZilla.

Корневая папка сайта может называться public_html, www, html или site. Если такой не найдете, уточните у своего провайдера. Загрузите все полученные на предыдущем шаге файлы в корневую папку.

Редактируем код

Теперь нужно открыть код главной страницы сайта. Там же, в файловой системе сайта, найдите файл под названием head или header. Откройте его и вставьте полученный ранее код в элемент <head>. Выглядеть это будет примерно так:

Остается подождать, пока поисковики проиндексируют появивишиеся фавиконки для сайта.

Фавикон: что следует запомнить

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

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

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

Готовую фавиконку можно даже использовать в рассылках. Регистрируйтесь в SendPulse и создавайте красивые письма в удобном блочном редакторе!

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

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

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

Сайты с фавиконами в выдаче Яндекса

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

Фавиконки в выдаче Google (тест)

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

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

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

  • Выделяет сайт в выдаче

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

Сайт без фавикона в выдаче среди прочих

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

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

Логотип компании в фавиконе

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

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

Закладки в Google Chrome

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

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

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

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

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

Фавикон с чашкой для сайта о кофе выглядит гармоничнее

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

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

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

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

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

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

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

Панель бесплатного генератора фавикона

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

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

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

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

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

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

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

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

Фавиконы на разных разделах одного сайта

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

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

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

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

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

Фавиконы сайтов на экране смартфона

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

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

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

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

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

Android

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

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

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

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

Apple

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

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

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

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

Edge и IE 12

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

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

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

Как добавить иконку на сайт html

Создание favicon для сайта 2020

Favicon – это значок (иконка), который отображается во вкладке браузера, закладках, а также в сниппетах результатов поиска.

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

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

Какой формат использовать для favicon?

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

О каких платформах пойдет речь в этой статье?
  • Десктопные браузеры
  • Chrome на Android
  • Иконка закладки в iOS (PWA)
  • macOS
  • Windows
Десктопные браузеры

Начнем, пожалуй, с классического десктопа.

Как было упомянуто ранее, формат 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 рекомендует брать больший размер изображений в целях поддержки экранов с высокой плотностью пикселей.

В следующем списке приведены некоторые рекомендации по использованию различных размеров:

  • Small — 70×70 (Рекомендуемый размер: 128×128)
  • Medium — 150×150 (Рекомендуемый размер: 270×270)
  • Wide — 310×150 (Рекомендуемый размер: 558×270)
  • Large — 310×310 (Рекомендуемый размер: 558×558)
Подготовка favicons

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

Например, в моем случае вес всех изображений был 200кб, после сжатия 50кб. Качество изображений практически не изменилось. Вы можете воспользоваться любым удобным сервисом для сжатия картинок. Я использовала iloveimg.

Заключение

Последовательность подключения в разметке веб-сайта:

С помощью последней строки кода «theme-color» можно закрасить адресную строку и строку уведомлений в любой цвет. В значении content задается цвет.

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

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

Как установить иконку для сайта?

Разместил в папке файл » favicon.ico «, но всё равно иконка не отображается!

Кто-нибудь, подскажите, в чём причина, пожалуйста.

Ну, во-первых, надо убедиться, что icon/favicon.ico — верный путь до иконки. Ну если все в порядке, то значит браузер виноват, т.е. кэш. Бывало такое. Но попробуй обмануть, в обоих случаях помогает, так как код страницы меняется.

или так (задать абсолютный путь)

У вас какой сервер? Если апач, то кинте favicon.ico в корень сайта и будет вам счастье.

Попробуй вот так:
<link rel=»icon» href=»./icon/favicon.ico» type=»image/x-icon»>

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

Я всегда вставляю следующим образом (обычно ложу в корень сайта, туда же куда и index.html или index.php:

Многие поисковики и браузеры, сами ищут эту иконку в корне сайта по имени favicon

В вашем случае код должен быть таким (если вы указываете относительный путь):

Да я использую две строки с разными rel=»» атрибутами. Так сложилось исторически из-за браузеров и их «перетягиваний одеяла»

А еще иконка может не показываться, если у неё неверно указан формат. Например сделать иконку в ФШ и сохранить её как .ico почему то не всегда срабатывает. Я делаю иконки в ФШ, сохраняю как jpg а потом программой IcoFX конвертирую их в .ico уже несколько лет так и все отлично работает.

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

От автора: раньше иконки для сайта были такими легкими. Простой растровый favicon.ico 16х16 пикселей. Это как знак препинания в конце проекта. Для разработчика это эквивалент завершения предложения с восклицательным знаком или точкой. Так было раньше. Но за прошедшие 20 лет все изменилось.

Что такое favicon?

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

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

В списке закладок

Как иконка запуска на домашнем экране устройства и десктопа

JavaScript. Быстрый старт

Изучите основы JavaScript на практическом примере по созданию веб-приложения

В самой адресной строке (я не уверен, но современные браузеры так не делают. Они отображают иконку во вкладке браузера)

Firefox показывает большие favicon на стартовом экране и маленькие во вкладке

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

Как правило, браузеры кэшируют favicon. Поэтому если вы планируете делать что-то забавное с несколькими favicon на сайте, кэширование нужно отключить. Один из способов – добавить временную метку в URL favicon.

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

Что такое формат favicon .ico (ICO)?

Прежде чем переходить к подробностям, давайте быстро разберем формат ICO.

ICO – формат изображений для отображения иконок. Он берет свои корни из первой версии Windows &#8212; Microsoft Windows 1.0 – выпущенной в 1985. По факту, это формат-контейнер для хранения одного и более файлов растровых изображений. Изначально файлы должны были быть в формате BMP. Позже появилась поддержка PNG.

В 1999 Microsoft добавила формат ICO в IE5, как способ создавать закладки и определять сайт – так родился favicon.

Изначально favicon в вебе был размером 16х16 пикселей, но со временем появилась поддержка разных размеров в ICO файле (32×32, 24×24, 48×48, 64×64, 128×128 и 256×256).

Возникает вопрос: если favicon.ico может хранить несколько размеров, то какие из них нужно использовать? Вернемся к этому скоро.

Как подключить favicon?

Зачастую термины favicon и иконка взаимозаменяемы. Однако favicon не обязательно должен быть формата ICO. Часто встречаются форматы GIF, PNG, JPG.

Начнем с самого старого и базового способа добавления favicon на сайт.

Размещение favicon.ico в корне сайта

Изначально Microsoft для Internet Explorer 5 разработала способ добавления favicon на сайт. Для этого нужно было сохранить файл иконки в корневой папке сайта с именем favicon.ico. Это все что требовалось, никакого HTML. Большинство браузеров до сих пор проверяют корневую папку на наличие файла favicon.ico.

Позже когда favicon стал частью стандартов HTML 4.01 и XHTML 1.0, рекомендовали использовать тег link для размещения favicon. Рассмотрим этот способ.

Подключение favicon через тег link

После добавления favicon в стандарты HTML, появился новый способ подключения через тег <link rel=&#187;&#8230;»> в head документа. Favicon перестал ограничиваться корневой папкой сайта, теперь можно было указать любой путь.

Даже у такого простого предложения есть сложности. Атрибуты rel и type принимают разные значения. Например, все строки ниже будут работать:

Установка иконки для сайта

Что такое иконка сайта?

Как вы могли уже заметить, когда страница сайта открыта в браузере, во вкладке отображается не только заголовок страницы, но также и маленькая иконка, которая располагается перед заголовком и помогает нам отличать страницы одного сайта от страниц других сайтов (см. рисунок №1). Это особенно удобно, когда в браузере одновременно открыто много различных страниц, принадлежащих разным сайтам. Кроме того, иконка веб-сайта отображается рядом с ссылкой при добавлении страницы сайта в закладки браузера, в истории браузера, а также в некоторых поисковиках, например, Яндексе, где иконки сайтов располагаются опять же перед заголовками страниц сайтов, выданных по текущему поисковому запросу. Так что же все-таки представляет из себя иконка сайта?

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

Рис. №1. Пример содержимого корневой папки сайта

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

Как создать иконку для сайта?

Для создания иконки сайта нужно воспользоваться либо специальной программой, либо одним из онлайн сервисов в Интернете, либо создать квадратное изображение размера 16х16 и более пикселей самостоятельно, сохранив его в виде файлика favicon.ico (как можно легко догадаться, имя файла представляет собой сокращение от словосочетания favorites icon). При этом хотелось бы сделать пару уточнений:

  • разрешается использовать иконки и больших размеров, а точнее 32х32, 48х48 и более пикселей, однако браузеры в основном все равно сжимают их до стандартного значения в 16х16 пикселей;
  • несмотря на то, что на сегодняшний день стандартным универсальным форматом для иконки, который поддерживают все основные браузеры, является формат ICO, большинство браузеров поддерживают также форматы PNG, JPEG и GIF.

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

Установка иконки на сайт

После того, как иконка будет готова ее необходимо поместить в корневую папку сайта. Именно там браузеры по умолчанию будут искать ее для дальнейшего отображения на экране. При этом иконка будет отображаться рядом с заголовками всех страниц сайта. Если же необходимо разместить иконку в другой папке или для какой-то страницы требуется установить свою иконку, следует воспользоваться тегом <link> (см. пример №2).

<!DOCTYPE html>
<html>
<head>
	<!-- Указываем кодировку страницы -->
	<meta charset="utf-8">	

	<!--  Зададим базовый адрес  -->
	<base href="https://site.name/">
	
	<!-- Иконка отобразится во вкладке возле данного заголовка страницы -->
	<title>Использование «link» для установки иконки сайта</title>

	<!-- Подключаем к странице иконку в формате ICO -->
	<link rel="icon" href="favicon.ico" type="image/x-icon">
	
</head>
<body>
	Если необходимо подключить иконки других форматов, 
	следует использовать следующие конструкции:
    	
	<link rel="icon" href="favicon.jpeg" type="image/jpeg">
		
	<link rel="icon" href="favicon.png" type="image/png">
		
	<link rel="icon" href="favicon.gif" type="image/gif">
   
</body>
</html>

Пример №2 Использование элемента «link» для подключения иконки сайта

Как видно из примера, в теге <link> необходимо прописать абсолютный или относительный путь к файлу иконки, в качестве значения атрибута rel указать «icon», а в атрибуте type сообщить mime-тип подключаемого изображения.

Смена иконки сайта

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

Если же иконка расположена в папке, отличной от корневой, то следует поместить в данную папку новую иконку, а старую удалить (хотя, если форматы иконок будут отличаться, то старую иконку можно и не удалять). Далее, если формат новой иконки будет отличаться от формата старой, нужно будет обязательно прописать в теге <link> новые значения атрибутов href и type, т.к. при смене формата изображения изменится как расширение файла (а значит и путь к нему), так и его mime-тип.

Быстрый переход к другим страницам

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

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

Это маленькая картинка, размером 16 х 16 px, в формате ico.

Универсальным форматом фавикона для сайта, является формат .ico, так как именно его поддерживают все самые популярные браузеры: Google Chrome, Internet Explorer, Firefox, Opera и Safari.

Следующие по универсальности форматы иконки для webсайта – PNG, JPEG, и GIF. Их поддерживают все браузеры, кроме Internet Ex. 

А вот анимированные иконки для сайта GIF-формата поддерживают только Firefox и Opera. 

Существует несколько способов, как сделать иконку для сайта. 

Самым простым вариантом является создание иконки для сайта с помощью специальных онлайн генераторов.

На выбор, за основу можно взять любую картинку или нарисовать её самому. Из этого изображение, система автоматически сформирует картинку в нужном размере и формате.

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

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

Размер иконки сайта обычно составляет 16х16 пикселей, допускается так же использование размера 32х32. Но стоит учесть, что в браузере в любом случае рисунок будет уменьшен и приведен к формату 16х16 пикселей.

Когда картинка создана и сохранена (скачена) в нужном формате на компьютере, можно переходить к тому, как установить иконку на сайт.

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

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

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


 Откройте на хостинге панель управления сайтом и загрузите файл с фавиконом — favicon.ico в корневую папку (public_html).

Далее, нужно прописать между тегами <head></head>  код в файл шаблона index.php.

Код:

<link href=»favicon.ico» rel=»shortcut icon» type=»image/x-icon» />

 


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

Установка фавикона на сайт joomla

В панели управления хостинга идём в папку: domen/public_html/templaters/шаблон сайта/ —  и загружаем  файл favicon.ico.

Далее откроем файл index.php: domen/public_html/templaters/шаблон сайта/index.php/ и после тега <head> вставляем код.

 


Если нужна  иконка сайта на WordPress, то после загрузки файла. ico в директорию

/domains/Сайт.ru/public_html/wp-content/themes/шаблон/

необходимо открыть файл header.php, в который после \<head>\также вставляется  код.

 


В Drupal 7 фавикон устанавливается через админ.

Нужно зайти в раздел «Оформление» и далее в настройки активной темы. Найти в низу пункт «Настройка значка» и убирать галочку против «Использовать стандартный значок». Теперь стоит только загрузить свой значок с компьютера, используя кнопку «Обзор».

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

Как заменить фавикон сайта

Как заменить значок, если  она уже есть на сайте. Замена фавикона сайта, осуществляется практически по той же схеме, что и добавление.

Удалите старый файл favicon.ico и загрузите свой.

***

  • < Назад
  • Вперёд >

Добавляем иконки сайта для iPhone, iPad и Android

Если Ваш сайт достаточно популярен, то многие пользователи заходят на него даже с телефонов и планшетов!

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

Первым делом, нам необходимо создать нужную иконку в формате .png. Рисуете (или подбираете) ее. Желательно, в хорошем разрешении.

Качество (разрешение) экранов устройств от Apple постоянно растет и меняется, поэтому нужно оптимизировать эти «картинки» под разные устройства.

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

для старых iPhone размер иконки должен быть 57х57, для новый, начиная с 4-го действуют следующие размеры:

  • 60х60 — IPhone
  • 76×76 -iPad
  • 120×120 — iphone-retina
  • 152×152 — ipad-retina

Третье, вставить в код указав пути к картинкам:

<link rel="apple-touch-icon" href="touch-icon-iphone.png">
<link rel="apple-touch-icon" href="touch-icon-ipad.png">
<link rel="apple-touch-icon" href="touch-icon-iphone-retina.png">
<link rel="apple-touch-icon" href="touch-icon-ipad-retina.png">

Safari на iOS 7 не добавляет эффекты к иконкам. А старые версии Safari добавляли эффекты для иконок , чтобы эффект не применялся — нужно к именам файлам добавить —precomposed.png

А что Android!?:

Все дело в том, что Android-девайсы также подхватывают файлы apple-touch-icon.png и несмотря на наличие в названии слова «apple» 🙂

Справедливости ради, хочу заметить, что ОС Android намеренно не ищет эти иконки, а только в том случае, если пользователь решил добавить сайт на «рабочий стол».

В заключении — если не хотите заморачиваться со вставкой кода, подготовкой картинок разного размера, то просто закиньте в корень сайта картинку (размером 60 на 60 пикселей) с названием «apple-touch-icon.png». Это самый простейший способ.


Для быстрого автоматического создания иконок для сайта

Мы советуем использовать сервис ICONOGEN

Укажите файл с иконкой и сервис быстро сделает иконки разных размеров:

Файлы можно скачать архивом.

Сервис так же генерирует html код для вставки в шаблон сайта:

<link rel="shortcut icon" href="/favicon.ico" type="image/x-icon" />
<link rel="apple-touch-icon" href="/apple-touch-icon-57x57.png">
<link rel="apple-touch-icon" href="/apple-touch-icon-60x60.png">
<link rel="apple-touch-icon" href="/apple-touch-icon-72x72.png">
<link rel="apple-touch-icon" href="/apple-touch-icon-76x76.png">
<link rel="apple-touch-icon" href="/apple-touch-icon-114x114.png">
<link rel="apple-touch-icon" href="/apple-touch-icon-120x120.png">
<link rel="apple-touch-icon" href="/apple-touch-icon-144x144.png">
<link rel="apple-touch-icon" href="/apple-touch-icon-152x152.png">
<link rel="apple-touch-icon" href="/apple-touch-icon-180x180.png">
<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-96x96.png">
<link rel="icon" type="image/png" href="/android-chrome-192x192.png">
<meta name="msapplication-square70x70logo" content="/smalltile.png" />
<meta name="msapplication-square150x150logo" content="/mediumtile.png" />
<meta name="msapplication-wide310x150logo" content="/widetile.png" />
<meta name="msapplication-square310x310logo" content="/largetile.png" />

Как сделать иконку для сайта

Здравствуйте уважаемые начинающие веб-мастера. Продолжим тему Первичная оптимизация.

Как сделать сайт узнаваемым, среди миллионов других? Ведь даже его название, может иметь кучу близнецов.

Конечно же сделать для него иконку-favicon, которая будет отображаться в поиске, и во вкладке браузера перед названием Вашего ресурса.

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

Иконку можно сделать двумя способами:

1. Самостоятельно.

2. С помощью специального сервиса.

Давайте рассмотрим оба эти способа, и начнём по порядку, с самостоятельного решения вопроса.

Сначала о трудностях. Favicon — это как правило изображение, и изображение очень маленькое. Размеры его составляют 16 х 16, или 32 х 32 пикселя.

Если делать его из картинки, то нужно подбирать изображение, примерно такого же размера.

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

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

Второй же способ намного проще, и его использует подавляющее большинство владельцев сайтов.

Заключается он в использовании сервиса по созданию иконок.

Найти такой сервис очень просто. Достаточно ввести в поисковой строке браузера запрос «Сделать favicon», как вам откроется куча предложений.

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

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

1. Выбрать картинку и загрузить её в сервис (Кнопка «Загрузить файл»).

2. Выбрать размер иконки (Кнопка «Создать favicon»).

3. Получить готовый файл с расширением .ico

4. Загрузить полученный файл, в корневую папку сайта.

Первые два пункта никакой сложности не представляют вообще. Единственный совет, который хотелось бы дать — это выбирайте картинку всё же поменьше, и с одинаковыми высотой и шириной.

Чем ближе будет размер начального элемента, тем меньше будет искажений в готовом.

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

Начнём с того, что Мы нажали «Скачать favicon.ico». Что и как с ним делать дальше?

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

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

После сохранения, щёлкнем по файлу правой правой клавишей, и просканировав его анти вирусом, перейдём в «Свойства».

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

Нажимаем «Разблокировать», и «ОК», после чего системное окно закроется.

Открываем его снова, щёлкнув по файлу правой клавишей, и выбрав «Свойства». Информация в окне должна выглядеть вот так.

Теперь можно устанавливать иконку на Ваш сайт. Для этого обязательно нужно использовать FTP соединение.

Если Вы послушались моих советов в предыдущих статьях, и выбрали хостинг Бегет, то достаточно будет щёлкнуть по «Файловый менеджер», в панели управления Вашего аккаунта.

Оказавшись в каталоге, выбираем Ваш сайт, затем «public.html», затем «Загрузить», далее выбрать, и выбираем, полученный нами favicon.

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

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

Желаю творческих успехов.


Перемена

Жена — мужу.
-Дорогой, я не хочу-у-у к маме!!!
-Молчи и копай.

Сайт в интернете, что дальше? Оптимизация сайта < < < В раздел > > > Что такое язык HTML и для чего он нужен

 

Сделать иконку для сайта WordPress своими силами

Вступление

Отличительная особенность сайта, видимая в адресной строке браузера, рядом с его адресом и адресами страниц, называется фавикон (favicon). Это маленькая картинка, повторюсь, видимая в адресной строке браузера и его закладках. Как сделать иконку для сайта WordPress в этом посте.

Иконка для сайта WordPress и сегодняшняя реальность

Всё течёт, всё меняется. С недавних пор принципиально сменился способ добавления иконки для сайта WordPress.

Ранее нужно было сделать саму картинку иконки, далее уменьшить её размер и перевести в формат ico, и только потом добавить на сайт. При этом чаще приходилось прописывать meta теги icon в раздел head html кода.

Для рисования иконки есть отличный сервис www.favicon.cc на котором можно нарисовать и скачать иконку в формате ico.

На сегодня для добавления иконки на сайт WordPress достаточно иметь картинку или фото с рекомендованным размером не менее 512×512 px. Читать статью: Как добавить иконку….

Про иконку сайта её изготовление

Чтобы сделать иконку для сайта WordPress можно пойти двумя путями.

Во-первых, взять готовую картинку размером более 512×512 px (лучше квадратные, не круглые) и добавить на сайт из административной панели.

Во-вторых, самостоятельно нарисовать иконку сайта с учётом цвета сайта или цвета и вида логотипа фирмы.

Вариант 1

Забрать иконки больших размеров, а именно 512×512 px, можно, например, на этих специальных сайтах.

  • iconsdb.com
  • iconfinder.com
  • iconarchive.com
  • findicons.com
  • icons8.ru/icons/

Вариант 2

Создать бесплатно логотип можно на этих сервисах:

  • logomaster.ai
  • logaster.ru
  • turbologo.ru
  • logotypemaker.com/ru
  • logomak.com/ru

Вариант 3

Самостоятельно нарисовать уникальную картинку можно в Фотошоп.

Пример, как сделать иконку для сайта WordPress

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

На одном из перечисленных выше сайтов беру иконку Tweeter, 512×512. Фото для удобства просмотра уменьшены.

В поиске беру картинку png прозрачный фон, буквы «П». Крашу её в редакторе Snagit в цвет ободка скачанной иконки (красный).

В редакторе Snagit вырезаю из иконки «птичку» и заливаю «дырку» чёрным цветом.

В редакторе FastStone Image накладываю букву на значок.

Картинка для иконки WordPress сайта готова. Добавляю её на сайт, предварительно сжимаю на сервисе tinypng.com.

Вывод

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

©wpkupi.ru

Еще уроки

Похожие посты:

Как добавить значки на свой веб-сайт с помощью шрифта awesome VS Code

Привет, это видео, которое мы собираемся вставить в значки, и вы говорите: «Эй, это просто похоже на логотип или изображение, как трудно это быть, почему видео такое длинное, Дэн?» Это потому, что мы собираемся использовать шрифты для создания иконок. Мы рассмотрим что-то под названием Font Awesome, мы посмотрим на Google Material для иконок. Это умный способ размещения иконок на вашем сайте без использования изображений. Есть плюсы и минусы, и это просто другой путь вместо использования таких вещей, как PNG или изображения для значков.Также обратите внимание, что в конце у меня есть ложный конец, я такой: «Да, спасибо, и вы все сделали», а затем немного продолжаю, показывая вам дополнительный отступ вверху. Так что подождите до последнего. Ладно, прыгай, Дэн.

Так что бы мы делали в прошлом? Мы бы добавили изображение, PNG или SVG к нашей графике или к нашему коду, а затем в моем Live View здесь есть значок, и это загружает JPEG, PNG или SVG, так что это загружается. Они не очень большие, поэтому вы можете просто использовать изображения, это нормально, но в этом конкретном видео мы рассмотрим использование шрифтов или иконок.Я хочу показать это вам, потому что позже будет много фреймворков, с которыми вы можете столкнуться, используя их.

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

Итак, давайте посмотрим на двух главных игроков. Ну и главный из них — Font Awesome. Font Awesome работает так же, как наши шрифты Google. Помните, ранее в ходе курса мы говорили: «Хотелось бы, чтобы на моем веб-сайте были новые замечательные шрифты». Мы добавили этот фрагмент CSS для перехода к Google Fonts и загрузили Playfair и Roboto. Здесь тот же самый принцип использования Font Awesome, за исключением шрифта, они заменили ABC на Bacon, cake, burger.Так что это все, что происходит на самом деле. Итак, давайте углубимся в это, давайте выполним поиск, так что есть версия Pro, и в основном версия Pro дает вам разные веса. Я покажу вам, что я имею в виду через секунду, давайте начнем, используя бесплатно.

Пойду искать шрифты, скажу «велосипед», Извините, уже подготовился. Так что я нашел крутой, это велосипед, я на самом деле проигнорировал эти здесь. Я пытался найти некоторые из них, я просто выбрал случайным образом, они не были хорошими. Хорошие иконки, выбираю вам, байки.Разница между Pro и платным, это бесплатный шрифт, это платный шрифт, вы бы подумали: «Какая разница?» Они просто разного веса, видите ли, у одного хороший худой, у того потоньше, у того какой-то полный. Так что вы должны решить, например, можете ли вы жить с этим, или вы действительно хотите это.

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

Нам нужны две детали, нам нужна эта часть, и нам нужна… где она? У меня нет настройки проекта, она немного скрыта.Нажмите на — давайте сначала сделаем это, так что начнем здесь. В основном это CDN, это сеть доставки контента. Это точно так же, как мы сделали для Google Fonts. Что нам нужно сделать, это скопировать его и войти в наш код. Поместите это здесь, или поместите это только ниже. Что ему действительно нужно сделать, так это просто быть под style.css 

На самом деле не имеет значения, в каком направлении идут Google Fonts и этот Font Awesome, но он просто должен быть там наверху. Следующее, что мне нужно сделать, это вернуться.Итак, как только это будет сделано, вам нужно сделать это один раз на странице. Так что это должно быть на каждой странице, на которой у вас есть значок. Ему не нужны страницы, на которых не используются значки. Так что это не обязательно должно быть на каждой странице, но часто вы просто бросаете их туда все. Итак, нам нужна вот эта штука. Этот фрагмент кода входит в наш HTML, я его скопирую. На самом деле не имеет значения, получите ли вы это оттуда или отсюда, одно и то же. Скопируйте его, и давайте перейдем к нашему коду и поместим его туда, куда вы хотите.

Так что я собираюсь избавиться от этого значка изображения, я собираюсь вставить его сюда.Я собираюсь красиво выровнять его, нажать «Сохранить», и мы посмотрим, как это работает. Вот и все, вот моя крошечная иконка. Так что по умолчанию он очень маленький, на самом деле это… странно, вы должны думать об этом как о шрифте, что действительно сложно сделать. Вы говорите: «Я хочу изменить размер этого, я сделаю его шириной 100 пикселей». Это не сработает. Вам нужно сделать его размером шрифта 100 пикселей, потому что это шрифт, поэтому он такой маленький, ваш может быть больше, потому что он использует размер по умолчанию.Помните, у нас 16. На что мы изменили значение по умолчанию? Я думаю, что это 18 пикселей. Как бы то ни было, это размер шрифта по умолчанию.

Итак, чтобы перейти к стилю, давайте посмотрим на наш HTML. Таким образом, мы можем стилизовать это. У нас есть I-тег, это то, что используется для значка. Помните, P для абзаца, h3 для заголовка2, I используется для значков. И к нему применена пара классов. Мы поговорим об этом через секунду, так что вы можете настроить таргетинг на любой из них. Потому что у меня на всей странице только одна группа иконок.их всего один, два, три, я просто нацелюсь на все значки. Возможно, вам придется быть немного более конкретным. Итак, я хочу сказать, что все значки имеют размер шрифта, я собираюсь использовать 100 пикселей.

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

Самое интересное в них, мы подробнее остановимся на них, но в основном вы… да, это загрузка шрифта, который оказался вместо букв, это значки, есть много чего выбрать из Font Awesome. И это означает, что они также масштабируемы, как вектор. Знаешь, мы говорили о том, что… где все мои вещи? Мы говорили о масштабируемости. Если я увеличу это, вы увидите, что мой мотоцикл масштабируется, как SVG, но он загружается как шрифт, и если кто-то был на сайте, который использует Font Awesome, который действительно используется на многих сайтах, это означает, что когда они попасть на ваш сайт, они могут… он может просто загружаться еще быстрее, потому что они уже предварительно загружены, но если вы думаете: «Эй, а почему бы нам просто не загрузить его как изображение?» это проще сделать, чем звонить в CDN вверху, и, честно говоря, я так и делаю.

Я показываю вам это, потому что вы найдете сайты с этим и с этим маленьким I-тегом. Причина, по которой я бы не стал делать это таким образом, заключается в том, что первое, что я хочу сделать, это загрузить мотоцикл из Font Awesome в виде SVG. Я думаю, вы можете скачать его отсюда в формате SVG. Где это находится? Вот он, наверху. «Скачать SVG», я соглашаюсь и загружаю, и вы получите просто обычную старую графику, потому что я хочу сделать это, загрузить ее, открыть в Illustrator, начать возиться с ней и изменить ее.Так что нет правильного или неправильного способа сделать это, но мы научились это делать.

Давайте немного подробнее. Давайте посмотрим на его структуру. Итак, ФАС выделила себе два класса, ну, предложила. FAS и FA-Мотоциклы. FAS — это Font Awesome, поэтому там написано дважды. Font Awesome, это солидная версия, есть обычная версия и облегченная версия. Так что, если бы я заплатил за это, я мог бы получить версию FAR или версию FAL. И дело в том, что мне не нужно идти и менять его.Мне не нужно использовать веб-сайт, чтобы сделать это, я могу зайти сюда и сказать, на самом деле я заплатил за это сейчас, и я использую—

 Они предоставят вам другой CDN по адресу верхний здесь для платных, и вы можете зайти сюда и изменить его на R или легкий, но мы используем твердую версию бесплатно. Еще немного здесь, FA, так что это Font Awesome, и мотоцикл, совершенно ясно, что он делает. Пойдем и посмотрим. Я собираюсь добавить его к этим двум другим… Я плохо с этим справляюсь. Две другие карты.Ну вот. Чувак, у тебя плохое утро, давай, ты сможешь.

Теперь что мы можем сделать, так это пройти и сказать, на самом деле я хочу, я искал винтик. Какой из них будет винтиком? И что у нас есть? У нас есть типы услуг, позвоните для консультации. Так что будем делать сервис, будут винтики. Я нашел несколько шестеренок, и мне нравится эта, и вместо того, чтобы копировать и вставлять код, я могу просто сказать: посмотрите на это, шестеренка FA. Так вот что там написано, я просто подойду сюда и скажу: «Ты винтик.»Я предполагаю это, я полностью предполагаю телефон, я не подготовил этот. Это сработало? Я сохранил его? Сохранить. Эй, смотрите, был телефон. Вы можете надеяться на лучшее и попробовать угадайте, потому что они довольно хорошо названы. 

Что я на самом деле выбрал? Ха, я использовал телефон. Мой подготовленный пример, он здесь. Не такой умный, Дэн. Так вот как их использовать и как реализовать их. Если вам нужно их раскрасить, как бы вы их раскрасили? Подумайте, остановитесь, приостановите, приостановите видео, подумайте.Вы сделали паузу? Что вы думаете? Я бы сделал это так. Помните, что это просто обычный старый шрифт. Таким образом, вы бы стилизовали его, используя все возможные шрифты. Так что теперь у нас были бы синие, ура. Единственная причина, по которой мои шрифты белые, заключается в том, что я в своем теге Head сказал, что все шрифты в теге Body белые, если я не сказал иначе. Вот почему он проходит через белый цвет. Мне не нужно говорить это снова здесь.

Я как бы проигнорировал эту маленькую цветную коробочку, верно? Я к нему привык, а ты, наверное, нет, ты типа начинаешь что-то удалять, а эта маленькая белая коробочка такая: «Уходи.» Он просто существует какое-то время и исчезает. Если вас это раздражает, то почему? Знакомство с цветным прямоугольником, который, кажется, не… мешает, курсор, это круто, но это также и больно. 

Еще одна вещь, которую я просто хочу кратко упомянуть, это то, что Font Awesome — это один из вариантов, и его может не быть в будущем, вы можете пройти через него, и может быть еще одна вещь. удивительный Font Awesome, Еще один довольно распространенный — это Material, Итак, материал.io, это больше, чем просто иконки. Font Awesome — это просто шрифты, ну, иконки, а Material — это много всего. Мы говорили об этом на других курсах, таких как наш курс UI/UX, но у него тоже есть действительно хорошие иконки.

Итак, если вы зайдете на material.io, просмотрите и посмотрите, Инструменты? Я пытаюсь угадать, где это. Обычно я просто гуглю «значки материалов io», вот оно, правильно. Это тоже изменится, держу пари, к тому времени, когда вы доберетесь сюда, но если вы погуглите «значки материалов», почувствовав это, здесь или что-то похожее на это.Почему я должен использовать это вместо Font Awesome? Этот вот действительно… вы бы использовали его для гораздо большего, например, если бы я делал веб-сайт банка или приложение для чего-то бухгалтерского учета, чего-то, что требует больше институциональных значков, есть намного больше институциональных значки здесь, плюс, Font Awesome — это весело, но некоторые значки немного двусмысленны, тогда как этот дизайн Material кажется, что он имеет тенденцию иметь немного больше.

Они соответствуют всему, что используется в приложении Android.Так часто этим значкам учат мир через приложения Google. Gmail, Chrome, это своего рода универсальная вещь, которую использует Google. Так что это очень полезно, его можно использовать бесплатно. Платной версии этого нет, но их не так много, как и странных шрифтов. Вы не найдете, раскопки или… будет ли значок Instagram? Я сомневаюсь, что есть. Так что это действительно вроде как, наверное, есть в Instagram, но не будет клоуна на мотоцикле, тогда как в Font Awesome это, вероятно, клоун и мотоцикл.
 
Здесь вы можете сделать то же, что и в Font Awesome. Есть разные стили, так что есть заполненная версия, вы можете увидеть ее там. Я пролистаю вверх. Итак, Filled — это закругленная версия, которая не сильно отличается. Двухцветный, о, острая версия, так что вы можете выбрать один из них. Поищите здесь вверху. Так сказать, мне нужно изображение винтика. Его не будет. Нет, винтиков нет, но есть бумажник. Это не кошелек. Это кредитная карта, круто. Итак, я нажимаю на него, и это очень похоже.Вы можете скачать его в формате SVG здесь. Так что вы можете сказать: SVG, пожалуйста, загрузите, или вы можете щелкнуть вот эту маленькую стрелку, чтобы увидеть этот маленький шеврон? А можно встроить.

Итак, вам нужно сделать две вещи: перейти к инструкциям, они откроются, что-то вроде «Как это сделать», и вы просто прокручиваете, прокручиваете, прокручиваете, потому что вы такие: «Я хардкорный , мне не нужны все эти вещи, мне нужен только ты». Так что просто хватайте его. Это тот же тип шрифтов Google, что и раньше, но семейство шрифтов — это значки материалов.Так что скопируйте это, вставьте в заголовок вашего документа. Так что здесь, наверху, вы, вероятно, могли бы совместить это с этим. Да, вы определенно могли бы, или вы могли бы иметь его отдельно, не имеет значения. Загрузить дважды. Затем вы вставляете HTML, как мы делали это раньше. Так вот оно есть. Так что это только два из них, есть много разных вариантов, но два самых популярных на данный момент.

Ладно, хватит об иконках и шрифтах. Да, давай приступим к следующему видео, Дэн. Торопиться. Подожди, подожди, подожди, посмотри на значки, они касаются верха.Оставлять их в таком виде нельзя, так что мы сейчас пройдемся и просто добавим немного Padding, это не очень весело или захватывающе. Как мы собираемся это сделать? Я планирую сделать это с моим… о, как мы должны это сделать? Я мог бы сделать это, чтобы… если я сделаю это с картой, если я скажу, карта, я хочу, чтобы там было какое-то дополнение, я должен сделать это один, два, три раза, потому что у нас есть карта 1, 2 и 3. Итак, я собираюсь сделать иконку. Я делаю это только для этого, потому что у меня есть роскошь иметь эти И или значки только один раз на странице, и это все, для чего я их использую.

Если вы используете сайт с большим количеством иконок, это кажется очень плохой идеей, потому что позже в дизайне вашего веб-сайта вы скажете: «О, я собираюсь добавить иконку», и это будет съемка на нем. Итак, мы собираемся сделать, что мы могли бы сделать, так это Padding Top, и мы скажем, Padding наверху этого, я понятия не имею. Пиксели. Давайте немного посмотрим. Вы идете туда, нет, слишком много, 30. Да, я там, я там, круто.

Одна вещь, которую мы могли бы сделать, это то, что сейчас нет ничего плохого в том, чтобы сделать составной селектор, поэтому мне нужны I-теги, но только если они находятся внутри карты.Это будет делать то же самое, это будет работать, но позже, если вы будете использовать значок за пределами этих карт, это не будет применяться. Так что, возможно, вы просто готовитесь к будущему, и я думаю о таких вещах, когда думаю: «Хм, это действительно простая вещь, которая работает прямо сейчас?», это вызовет у меня большую старую головную боль. позже Хорошо, теперь это конец, увидимся в следующем видео

Как добавить иконки Font Awesome к вашим кнопкам

Font Awesome — это удобная библиотека иконок.Эти значки могут быть векторной графикой, сохраненной в формате файла .svg , или веб-шрифтами.

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

Основное использование

Чтобы включить Font Awesome в ваше приложение или на страницу, просто добавьте следующий код в элемент в верхней части HTML-кода:

    

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

    

Обратите внимание, что элемент span также приемлем для использования со значками.

Вот как вы добавляете значок:

    

Это создаст простой значок с большим пальцем вверх:

И вот как вы можете вставить этот значок на кнопку:

    

Обратите внимание, что использование значка состоит из двух частей: префикса стиля и имени значка .В приведенном выше примере префикс стиля и имя значка — fas и fa-thumbs-up соответственно.

Font Awesome предлагает следующие префиксы стиля:

Стиль Префикс стиля Тип плана
Сплошной фас Бесплатно
Обычный дальний Про
Легкий фал Про
Дуотон причуда Про
Марки завод Бесплатно

Значки брендов часто предоставляются самой компанией и полезны для создания таких вещей, как кнопки для социальной аутентификации или оплаты.Эти значки включают Twitter, Facebook, Spotify, Apple и даже freeCodeCamp:

    

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

Styling Font Awesome icons

Для простых приложений можно использовать встроенные стили:

  
  <я>
  

Для изменения размера вы также можете использовать встроенные ключевые слова Font Awesome:

  
<я>
<я>
<я>
<я>
<я>
<я>
  

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

Например, вы хотите создать несколько кнопок. Размер кнопок по умолчанию довольно мал, поэтому вы пишете CSS, чтобы увеличить размер кнопок вместе с текстом и значками внутри них:

  
  кнопка {
  размер шрифта: 1.5эм;
  поле: 5px;
}  

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

Font Awesome — это круто! Как самые популярные наборы инструментов для значков, их легко включить и использовать во всех ваших проектах. Теперь перейдите на иконку вверх по всем вещам.

Дополнительная информация

Добавление значка главного экрана iOS для вашего веб-сайта

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


Создание и загрузка вашего значка

Размер изображения для ярлыка должен быть 150×150 пикселей. Это позволит использовать его на всех устройствах iOS, включая обычные дисплеи и дисплеи Retina!

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

  • Необходимо сохранить в формате .формат png
  • Должно быть название apple-touch-icon

После того, как вы создали значок, вы можете загрузить его в область  Содержимое >> Файлы в своей учетной записи создания (не в область изображений).

Чтобы загрузить иконку:

  1. Войдите в свою учетную запись Создать учетную запись
  2. Нажмите «Содержимое» в верхнем меню
  3. Нажмите «Файлы» в меню слева
  4. Нажмите кнопку «Добавить файл»
  5. Следуйте инструкциям, чтобы загрузить изображение

Добавление значка на ваш сайт

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

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

Чтобы получить путь к файлу для загруженного значка, просто щелкните значок «ссылка» в разделе «Файлы».


Отобразится URL-адрес значка.

Скопируйте и вставьте этот путь к файлу точно так, как он отображается в приведенном ниже коде.

Чтобы затем добавить этот код в свой пользовательский :

  1. Нажмите «Содержимое» в верхнем меню
  2. Щелкните значок «Параметры страницы» рядом со страницей, на которую вы хотите добавить значок.
  3. Перейдите на вкладку «Метаинформация»
  4. Вставьте код в пользовательское поле
  5. Сохраните изменения и повторите при необходимости
  6. Чтобы изменения вступили в силу, вам необходимо опубликовать свой сайт.

Проверка значка

Обновление значка после публикации сайта может занять несколько часов.Когда вы будете готовы к тестированию, просто выполните следующие действия на своем устройстве с iOS (например, iPad или iPhone):

  1. На устройстве iOS откройте браузер Safari и перейдите на страницу своего сайта, для которой вы хотите сделать ярлык для
  2. Щелкните значок общего доступа в браузере

  3. Выберите вариант «Добавить на главный экран» 
         

     
  4. На странице «Добавить на главную» вы должны увидеть загруженный значок слева

 

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

Полное руководство по значкам HTML — для iOS, Android, рабочего стола и т. д. • Code The Web

В этой статье вы узнаете, как создать значок для iOS, Android, рабочего стола и т. д. с помощью HTML…

Начало работы

Не стесняйтесь следовать вместе! У вас могут быть не все устройства, операционные системы или браузеры, о которых я буду говорить, но вы, по крайней мере, сможете протестировать один или два 😉

Для начала создайте файл HTML со следующим базовым кодом:

  < !ДОКТАП HTML>

    <голова>
        Значки HTML
    
    <тело>
         

Значки HTML!

Откройте его в браузере — он должен выглядеть так:

Теперь вы готовы к работе!

Значок

В сегодняшних примерах мы будем использовать этот значок вафли, который я сделал (с мороженым сверху, конечно 🍦 😉):

Разве это не выглядит восхитительно!

Значки вкладок браузера (favicons)

Если вы сейчас взглянете на маленькую иконку на своей вкладке (они также известны как favicons), то увидите скучную иконку по умолчанию — никому она не нужна!

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

Итак, добавим свой! Просто добавьте эту строку кода в свой :

  
  

Атрибут типа зависит от используемого изображения. В этом случае мы используем файл .png , поэтому мы установим для нашего type значение image/png .Существуют и другие типа , которые вы можете использовать, например image/ico для файлов .ico .

Щелкните здесь, чтобы просмотреть список поддерживаемых типов файлов.

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

В любом случае, вот результат:

Рядом с заголовком нашей страницы появился значок! 🎉 🎉

Главный экран Safari и значки закладок

Если мы добавим наш веб-сайт на главный экран iOS, он по умолчанию даст нам очень уродливый и странного размера скриншот:

Давайте вместо этого добавим нашу собственную иконку! Для этого добавьте эту строку под строкой вашего значка в файле :

  
  

Как видите, это очень похоже на то, как мы объявляем наш значок, за исключением того, что вместо этого мы используем apple-touch-icon в качестве атрибута rel . Убедитесь, что ваш значок всегда 180px на 180px .

Теперь, если мы снова добавим его на главный экран, мы получим гораздо лучший результат!

Это также дает нашему веб-сайту значок для закладок Safari на iOS:

И на Mac:

Иконки Android

Веб-сайты также можно добавить на главный экран с помощью Google Chrome на Android.К счастью, нам не нужно указывать значки только для Android! Он будет использовать значок или значок Apple Touch , если он у вас есть.

Плитки Windows

В Windows, если вы еще не знаете, есть такие вещи, называемые плитками:

Они также используются в телефонах Windows:

Как вы можете видеть на фотографиях выше, нам также нужно создать прямоугольная версия нашего логотипа, когда плитка прямоугольная. Вот прямоугольная версия вафли, которую я сделал:

В нашем HTML нам нужно определить этот значок, а также три квадратных размера значка: 70px на 70px , 150px на 150px и 310px на 310px .Наша прямоугольная иконка должна быть 310px в ширину и 150px в высоту.

Одна важная вещь: При создании значков для плиток Windows всегда используйте прозрачный фон.

Вот наши значки, но с прозрачным фоном:

Вот HTML — добавьте его под значком Safari и фавиконом в :

  



  

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

Но если у иконок прозрачный фон, не будет ли это выглядеть странно? Да. Причина, по которой они должны иметь прозрачный фон, заключается в том, что Windows может поместить под ними цвет. Возьмем в качестве примера эту плитку:
Здесь значок карты будет изображением (с прозрачным фоном), а затем Windows поместит под ним розовый/фиолетовый цвет. Но как нам сообщить Windows, какой цвет? Здесь пригодится метатег msapplication-TileColor . В этом случае наш шестнадцатеричный цвет фона значка вафли — #2e2e2e .Имея это в виду, добавьте эту строку под нашими значками внутри :

  
  

Вот результат метатегов значков и цвета плитки:

Окончательный HTML

После всего этого, вот как должен выглядеть наш окончательный HTML (с комментариями для ясности):

  

    <голова>
        Значки HTML
        
        
        
        
        
        
        
        
        
        
        
        
    
    <тело>
         

Значки HTML!

Если вам лень… 😴

Существует замечательный веб-сайт под названием Real Favicon Generator, который генерирует для вас фавиконы, значки Safari, значки Windows и многое другое. Тем не менее, я рекомендую вам не использовать это, пока вы не будете достаточно уверены в том, что делаете это самостоятельно — иначе вы никогда не научитесь. Тем не менее, вы всегда можете посмотреть его, если вам нужно. Так что решать вам.

Заключение

Ура! Это все, что есть на сегодня. Надеюсь, вы чему-то научились! Если да, я был бы рад, если бы вы поделились им или подписались на информационный бюллетень, чтобы получать новые сообщения в свой почтовый ящик. Если вы делаете любую из этих вещей, вы потрясающие и заслуживаете космического тако, если это вообще что-то! 😎 🌮 🚀

Сегодня я рассказал об иконках для множества разных платформ, и вам не обязательно использовать их все — хотя это хорошая идея.Но для начала можно просто попробовать привыкнуть к фавиконкам (первая часть).

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

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

Добавление фавикона в ваш магазин · Справочный центр Shopify

Эта страница была напечатана 18 апреля 2022 г. Актуальную версию можно найти на странице https://help.shopify.com/ru/manual/online-store/images/add-favicon.

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

Создать значок

Вы можете использовать бесплатный веб-сайт генератора значков для создания собственного значка или создать свой собственный.Чтобы найти генератор favicon, найдите в Интернете бесплатный генератор favicon .

Идеальный размер фавиконки — 16×16 пикселей или 32×32 пикселя. Если ваш файл favicon слишком велик, он будет уменьшен до 32×32 пикселей, когда вы загрузите его в Shopify.

Добавьте фавиконку в свой интернет-магазин

Наконечник

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

  1. В админке Shopify перейдите в Интернет-магазин > Темы .
  2. Найдите тему, которую хотите изменить, и нажмите Настроить .
  1. В приложении Shopify нажмите Store .
  2. В разделе Каналы продаж нажмите Интернет-магазин .
  3. Нажмите Управление темами .
  4. Найдите тему, которую хотите изменить, и нажмите Настроить .
  5. Нажмите Редактировать .
  1. В приложении Shopify нажмите Store .
  2. В разделе Каналы продаж нажмите Интернет-магазин .
  3. Нажмите Управление темами .
  4. Найдите тему, которую хотите изменить, и нажмите Настроить .
  5. Нажмите Редактировать .
  1. Нажмите Настройки темы .
  2. Нажмите Фавикон .
  3. В области изображения Favicon щелкните Выберите изображение , а затем выполните одно из следующих действий:
    • Чтобы выбрать изображение, которое вы уже загрузили в свою админку Shopify, перейдите на вкладку Библиотека .
    • Чтобы выбрать изображение с локального компьютера, перейдите на вкладку Библиотека и нажмите Загрузить .
  4. Добавьте замещающий текст к изображению фавиконки:
    1. Нажмите Редактировать .
    2. В окне Редактировать изображение введите краткое описание изображения.
    3. Щелкните Сохранить .
  5. Щелкните Сохранить .

Простое руководство по использованию значков HTML

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

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

 Если вам нужно освежить в памяти какой-либо из них, пожалуйста, ознакомьтесь с сообщениями в блогах HTML для чайников и Основы CSS для начинающих , чтобы сначала освоиться.

 

Что такое значок HTML?

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

Можно использовать различные значки из нескольких источников для улучшения HTML-документа. Однако значки следует использовать последовательно. Конечный пользователь должен будет понять дизайн и использование значка, чтобы получить надлежащий эффект.

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

  • Bootstrap: В контексте значков HTML Bootstrap относится к популярной среде проектирования с открытым исходным кодом для дизайна веб-сайтов.К значкам Bootstrap можно получить доступ и использовать их на веб-сайтах, даже если они не используют платформу Bootstrap.  

 

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

 

  • SVG Sprite : метод, при котором несколько файлов изображений помещаются в сетку в одном файле.На эти изображения можно ссылаться из файла. Преимущество заключается в том, что не нужно делать несколько запросов изображений из HTML-документа, что сокращает потенциальную трату ресурсов.

 

Как использовать значок HTML

Чтобы использовать значок, вам сначала нужно знать, где находится источник библиотеки. Как и связанная таблица стилей CSS, ссылка на значок HTML берется из источника. Это может быть путь, настроенный локально на вашем компьютере, или ссылка на внешний источник в Интернете.Последний вариант будет в центре внимания руководства.

На изображении ниже вы можете увидеть, как внешняя таблица стилей CSS связана с HTML-документом. Это будет почти так же, как привязка к внешней библиотеке значков.

Ссылка на библиотеку значков HTML

 

Чтобы создать ссылку, вам просто нужно знать, где находится URL-адрес библиотеки значков. Как только вы это сделаете, подключить его к элементу ссылки — это просто заменить значение href .На изображении ниже использован URL-адрес библиотеки иконок Font Awesome версии 5.11. Обратите внимание, что значение rel, (или отношение) по-прежнему задается как таблица стилей.

Вставка значка HTML на страницу

 

Теперь, когда библиотека значков HTML загружена для использования на странице, вы можете вызывать их для использования. Значок должен вызываться в соответствии со стандартами библиотеки. Для получения прямой информации об использовании значков Font Awesome посетите основной сайт по адресу FontAwesome.ком .

В этом примере библиотека Font Awesome имеет следующее направление для вызова значка смайлика.

     class=»дальний фа-улыбка-луч»

Обратите внимание, что простое копирование/вставка кода не приведет к его размещению на вашей странице. Его также необходимо обернуть внутри элемента HTML. Для этого широко используется метод « i » или « span ». Однако вы также можете использовать абзац, div или даже элемент заголовка.

В приведенном ниже примере вы можете увидеть значок смайлика, вызываемый на странице несколько раз с использованием разных HTML-тегов.

Стиль CSS создаст следующий вывод на HTML-странице.

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

В приведенном ниже примере стиль CSS был применен к значку, заключенному внутри элемента div. Обратите внимание, что вы также можете иметь несколько таблиц стилей и библиотек значков, связанных с HTML-документом одновременно.

Добавленный CSS обеспечит следующую визуализацию на странице.

Использование нескольких библиотек значков HTML

Отличительной чертой CSS является то, что он позволяет вам исследовать широкий спектр творческой свободы. Эта свобода не меняется в отношении использования значков.Вы можете одновременно вызывать несколько таблиц стилей в одном HTML-документе.

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

Используя CSS, вы также можете применять отдельные стили к каждому набору значков. В приведенном ниже примере CSS каждый из наборов значков был оформлен в отдельном контейнере div.

Использование этого CSS даст следующий результат на HTML-странице.

Использование значка Take выше и выше

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

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

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

Наконец, если вы хотите получить более подробную информацию о библиотеках иконок Bootstrap и Google HTML, пожалуйста, перейдите по следующим ссылкам соответственно. Ссылка на значки Font Awesome снова указана для удобства.

______________________________________________________________________

Зачем останавливаться только на использовании Javascript для значков HTML? Творческие способности в программировании позволяют людям делать еще больше со своими идеями.Если вы хотите продвинуться по карьерной лестнице, сделайте первые шаги, научившись программировать. Наличие этих навыков может помочь вам открыть двери для этих новых профессиональных возможностей. Запишитесь на курс Udacity Intro to Programming Nanodegree сегодня, чтобы начать путешествие.

Начните учиться сегодня!

 

иконок — Mozilla | МДН

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

Он состоит из пар ключ-значение размера изображения в пикселях и пути к изображению относительно корневого каталога расширения.

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

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

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

Ключи в объекте icons указывают размер значка в пикселях, значения указывают относительный путь к значку. Этот пример содержит значок расширения 48 пикселей и увеличенную версию для дисплеев с высоким разрешением.

  "значки": {
  "48": "icon.png",
  "96": "иконка@2x.png"
}
  

Вы можете использовать SVG, и браузер соответствующим образом масштабирует ваш значок. Однако в настоящее время есть два предостережения:

  1. Вам нужно указать viewBox на изображении. Например.:
      
      
    
      
  2. Несмотря на то, что вы можете использовать один файл, вам все равно нужно указать различный размер значка в вашем манифесте. Например.:
      "значки": {
      "48": "icon.svg",
      "96": "значок.свг"
    }
      

Примечание: Не забудьте включить атрибут xmlns при создании SVG. В противном случае Firefox не сможет отобразить значок.

Примечание: Если вы используете такую ​​программу, как Inkscape, для создания SVG, вы можете сохранить его как «обычный SVG».

Добавить комментарий

Ваш адрес email не будет опубликован.