Размер шрифта
Цвет фона и шрифта
Изображения
Озвучивание текста
Обычная версия сайта
hrustalev.com
Готовые решения сайтов
и шаблоны на 1с-Битрикс
+7 (925) 247-20-24
+7 (925) 247-20-24
Заказать звонок
E-mail
info@hrustalev.com
Адрес
Москва, м. Тимирязевская ул. Яблочкова 31, 3
Режим работы
Пн. – Пт.: с 9:00 до 18:00
Подать заявку
0
+7 (925) 247-20-24
+7 (925) 247-20-24
Заказать звонок
E-mail
info@hrustalev.com
Адрес
Москва, м. Тимирязевская ул. Яблочкова 31, 3
Режим работы
Пн. – Пт.: с 9:00 до 18:00
Заказать звонок
hrustalev.com
0
Подать заявку
🧩 Готовые сайты
  • Сайты для бизнеса
  • Готовые интернет магазины
  • Посадочные страницы
  • Купить 1С-Битрикс
Услуги
  • Дизайн для сайта
  • Наполнение сайта
  • Настройка готового сайта
  • Оптимизация сайта для SEO
  • Продвижение и маркетинг
  • Комплексные услуги для сайта
Наши работы
  • Проекты сайтов: 2024
  • Проекты сайтов: 2023
  • Проекты сайтов: 2022
  • Проекты сайтов: 2021
  • Проекты сайтов: 2020
  • Проекты сайтов: 2019
  • Проекты сайтов: 2018
  • Проекты сайтов: 2017
  • Проекты сайтов: 2016
  • Проекты сайтов: 2015
  • Проекты сайтов: 2014
  • Проекты сайтов: 2013
  • Проекты сайтов: 2012
Компания
  • О компании
  • Вопрос - Ответ
  • Лицензии и сертификаты
  • Партнеры
  • Разработчики
  • Вакансии
  • Отзывы
  • Реквизиты
Пресс центр
Контакты
    hrustalev.com
    +7 (925) 247-20-24
    Заказать звонок
    E-mail
    info@hrustalev.com
    Адрес
    Москва, м. Тимирязевская ул. Яблочкова 31, 3
    Режим работы
    Пн. – Пт.: с 9:00 до 18:00
    0
    Подать заявку
    hrustalev.com
    Телефоны
    +7 (925) 247-20-24
    E-mail
    info@hrustalev.com
    Адрес
    Москва, м. Тимирязевская ул. Яблочкова 31, 3
    Режим работы
    Пн. – Пт.: с 9:00 до 18:00
    0
    hrustalev.com
    Подать заявку
    • 0 Корзина
    • +7 (925) 247-20-24
      • Телефоны
      • +7 (925) 247-20-24
    • Москва, м. Тимирязевская ул. Яблочкова 31, 3
    • info@hrustalev.com
    • Пн. – Пт.: с 9:00 до 18:00
    Главная
    —
    Новости
    —Уроки 1с-Битрикс: Как сделать FavIcon / Фавиконку на скорую руку

    Уроки 1с-Битрикс: Как сделать FavIcon / Фавиконку на скорую руку

    Уроки 1с-Битрикс: Как сделать FavIcon / Фавиконку на скорую руку
    Обучение 1с-Битрикс
    18 сентября 2022
    ⏳ Время на прочтение 6 минут  
    👁
    1857
    Сегодня мы поговорим о том, как сделать фав иконку на скорую руку. Фав иконка сайта – это такой маленький значочек, как правило он отображается в закладке окна браузера

    Приветствую, друзья. Сегодня мы поговорим о том, как сделать фав иконку на скорую руку. Фав иконка сайта – это такой маленький значочек, как правило он отображается в закладке окна браузера — вот здесь или вот допустим фав иконка Яндекса.

     Как сделать FavIcon (Фавиконку) для сайта

    Так же фав иконка у нас отображается в поисковой выдаче поисковой системы, я сейчас вам покажу. Мы допустим пишем название моего домена и вот она фав иконка, вот это фав иконка Ютуба, фав иконка Яндекс карт и т.д.

     Как сделать FavIcon (Фавиконку) для сайта

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

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

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

    Как сделать FavIcon (Фавиконку) для сайта

    И аккуратненько выбираем необходимую нам область, в данном случае вот так. Выделили, нажимаем на клавиатуре Ctrl+C. Потом нажимаем на клавиатуре Ctrl+N, это значит создать новый файл. Фотошоп автоматически нам предлагает те размеры того изображения, которые у нас скопированы в буфер, нажимаем окей. 

    Как сделать FavIcon (Фавиконку) для сайта

    И далее нажимаем комбинацию клавиш Ctrl+V. вставили наш топорик. Далее нам нужно понять какого размера у нас картинка. Для этого мы с вами зажимаем опять же Ctrl+Alt и нажимаем кнопочку «i» на клавиатуре, там, где русская буква Ш. на экране у нас появляется такое окошечко «Image Size», так же это можно сделать через фильтр.

    Третий слева пункт у нас, первый – файл, второй – редактирование, третий – Image, по-русски изображение. И здесь можно будет выбрать размер. У меня просто уже оно открыто. И так мы с вами смотрим параметры ширины и параметры высоты. Нас интересует вот этот параметр по высоте в данном случае. Он у нас 562 пикселя. Что мы делаем? Мы так же Ctrl+C копируем это, параметр 562 и создаем новый файл, также Ctrl+N нажимаем и делаем 562 на 562. Нам для фав иконки нужна квадратная картинка, одинакового размера.

     Как сделать FavIcon (Фавиконку) для сайта

    Нажимаем окей. Теперь возвращаемся в окно с топориком, выделяем этот топорик, нажимаем Ctrl+А, там, где русская Ф – эта комбинация клавиш позволяет нам выделить всю область картинки, потом опять Ctrl+C, возвращаемся назад к нашей пустой области и нажимаем Ctrl+V. Вот мы сюда этот топорик поместили.

    Как сделать FavIcon (Фавиконку) для сайта

    Для фав иконки такая картинка очень большая, стандарт для фав иконки это 16 на 16 пикселей. Для этого мы опять уменьшаем наше изображение, так же нажимаем Ctrl+Alt и i, там, где русская Ш. и указываем нужный нам размер 16, 16 пикселей, нажимаем окей.

    Как сделать FavIcon (Фавиконку) для сайта

    Вот такой стал малюсенький топорик. Теперь нам эту картинку нужно сохранить. Для этого мы нажимаем Ctrl+Shift+Alt+S и сохраняем как «png 24». Вот прям на рабочий стол сохранить. Всё, картинка у нас готова.

    Как сделать FavIcon (Фавиконку) для сайта

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

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

    Как сделать FavIcon (Фавиконку) для сайта

    Если же у вас какое-то другое решение, не Аспро корпоративный 3.0, а какой-то другой шаблон для 1с-Битрикс, или вообще сайт кастомный, не на шаблоне. Тогда вы можете иконку просто закачать на сайт используя внутренний файловый менеджер в админке 1С-Битрикса.

    Как сделать FavIcon (Фавиконку) для сайта

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

    Как сделать FavIcon (Фавиконку) для сайта

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

    Как временное решение такую иконку сделать можно быстро и как вы видите просто. Немножечко я тут вас загрузил с нажатием комбинаций клавиш Ctrl+C, Ctrl+V и других, но на самом деле это все делается буквально за 2 минуты, это просто в видео и данной статье я растянул на 5-7 минут. А на самом деле это 1-2 минуты и иконка готова. В идеале конечно это заказать у дизайнера, который в специальной программе сделает иконку специально под вас. Вот так вот уже на постоянную основу. На этом у меня все, благодарю вас за внимание.

     

    © Автор статьи: Хрусталёв Кирилл
    Копирование материала только с указание ссылки на источник.
    https://hrustalev.com

     

    Назад к списку
    • Бизнес и психология 14
    • Личная эффективность 2
    • Новости 11
    • Обучение 1с-Битрикс 47
    • Пресс-релиз 48
    • Развитие бизнеса 192
    1с-Битрикс 1с-битрикс cms google adwords landing seo SEO seo специалисты SMM smm администрирование администрирование сайта аспро аудит сайта бесплатные сайты бизнес бизнес в интернете бизнес процессы бизнес с нуля битрикс быстрое продвижение виды сайтов Водные знаки готовые сайты дешевые сайты дешевый сайт диагностика сайта дизайн дизайн сайта доставка еды заказать сайт запуск магазина продуктов заработок индивидуализация сайта интернет магазин интернет магазин на битрикс интернет магазин продуктов питания интернет маркетинг интернет реклама интернет-магазины Интерфейс 1с-Битрикс исправление ошибок как добавить товар как избежать конфликта как сделать сайт какие бываю сайты какой выбрать сайт клиенты контекстная реклама контент контент маркетинг корпоративный сайт купить сайт лендиниги логика маркетинг настройка сайта новинки сайтов новый сайт обслуживание сайта обучение общение с клиентами одностраничники оптимизация сайта открытие бизнеса открытие компании открыть ИП ошибки ошибки мышления панель управления планирование поисковая оптимизация поисковое продвижение поисковое продвижение сайта поисковые системы посещаемость предпринимательство принятие решений продажи продвижение по словам продвижение сайт продвижение сайта продвижение сайтов продвижение. прокачка сайта прокрастинация психология выбора развитие бизнеса развитие бизнеса. развитие бренда развитие компании развитие сайта регистрация бизнеса режим правки реклама в интернет реклама сайта ресторанный бизнеса Ретушь с чего начать сайт сайт для бизнеса сайт для услуг сайт на битрикс сайт под ключ сайта для автосервиса сайты сайты на битрикс свой бизнес скорость сайта советы. создание сайта создание сайтов соц сети социальные сети специфика стоимость сайта техподдержка сайта торговые предложения увеличение продаж удобство сайта управление сайтом уроки Уроки 1с-Битрикс уроки 1с-битрикс ускорение сайта успех факторы хороший сайт цены на сайты что такое битрикс шаблоны сайтов экономить на сайте юзабили яндекс директ
    Готовый интернет-магазин Готовый интернет-магазин
    +7 (925) 247-20-24
    +7 (925) 247-20-24
    Заказать звонок
    E-mail
    info@hrustalev.com
    Адрес
    Москва, м. Тимирязевская ул. Яблочкова 31, 3
    Режим работы
    Пн. – Пт.: с 9:00 до 18:00
    Заказать звонок
    info@hrustalev.com
    Москва, м. Тимирязевская ул. Яблочкова 31, 3
    © 2025 hrustalev.com - Готовые сайты для бизнеса
    Политика конфиденциальности
    0 Корзина

    Ваша корзина пуста

    Исправить это просто: выберите в каталоге интересующий товар и нажмите кнопку «В корзину»
    Перейти в каталог
    Главная 0 Корзина Поиск Каталог Контакты Услуги Новости Компания Проекты
    Мобильный телефон
    Email
    Whatsapp
    Whatsapp
    Telegram