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

Для начала разберёмся в терминологии.
Что такое фавикон? Это маленькая картинка, которая отображается в верхней строке браузера на вкладке сайта. Она присутствует всегда. Иногда она появляется в поисковой системе яндекс или гугл, слева от выдаваемых запросов на страницах выдачи.
Какой должна быть картинка, которую вы сделаете в качестве фавикона? Выделяющейся, запоминающейся, неповторимой. Так же иконка должна вызывать ассоциации с наполнением сайта, и не только на главной странице. Приятное изображение способно сделать больше трафик посещений на вашем сайте. Как сделать фавикон для сайта? Об этом подробно изложено ниже.

Как сделать иконку при помощи генератора?

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

Рекомендации

  • Картинка должна с лёгкостью узнаваться и ассоциироваться с созданным сайтом, к которому относится. Это может быть логотип, используемый на страницах сайта. Так же подойдёт стороннее изображение, сочетающее в себе цвета, используемые на сайте. Такой фавикон запомнится посетителем.
  • Избегайте стандартных и скучных решений. Не оставляйте фавикон движка, на котором создаёте сайт. Это позволит избежать дублирования картинок на разных сайтах в выдаче. Не будьте лентяем. Применяйте неповторимые иконки, разработанные специально для вашей площадки. Не воруйте изображения у конкурентов. Такой подход не добавит вам плюсиков.
  • Применяйте яркие цвета светлых тонов. Такие изображения более привлекательны для пользователей. Так же их легче запомнить.
  • Избегайте анимаций. Не каждый браузер поддержит такой фавикон, и он будет отображаться только как размытое изображение. Кроме того анимация способна отвлечь посетителя от содержимого площадки. А это совсем не выгодно для вас.

создание фавикона

Как сделать фавикон в фотошоп?

В фотошоп можно сделать уникальную картинку. Как сделать favicon для сайта в фотошоп?
  • Откройте фотошоп. Нажмите на Файл, далее на Новый. Сделайте новый файл с разрешением 64 на 64 пикселя.
  • В нашем примере используем латинскую букву W с преобладанием синего и жёлтого цветов. Сделаем иконку с таким логотипом. Для этого установите цвет #6A91D0 и нажмите на Заливка. Документ получилось окрасить в синий цвет.
  • Следующим шагом нажмите на Текст и добавьте букву W. Для того, что бы сделать жёлтый цвет, введите значение #FAC31D.
  • Следует выделить букву на фоне. Для этого обведите её чёрным цветом, задав размер обводки в 2 пикселя. Что бы сделать обводку нажмите на Слой, затем кликните на Стиль слоя, затем на Обводка. Выберите цвет и разрешение обводки.
  • Сгруппируйте слои. Для группировки нажмите на Слой, затем на Объединить видимые. Для достижения плавности в линиях добавьте размытие. Для добавления размытия нажмите на Фильтр, затем на Размытие, далее на Размытие по Гауссу. Сделайте параметр радиуса в 0,3 пикселя.
  • Буква, расположенная на фоне должна занимать всё пространство.
  • Исходный размер значка применяется 16 на 16 пикселей. Это значит, что следует сделать уменьшение полученного изображения. Для уменьшения фавикона нажмите на Изображение, затем на Размер изображения и задайте разрешение 16 на 16 пикселей.
  • Далее следует сохранить фавикон. Изображение надо назвать favicon и задать ему расширение ico. Загвоздка заключается в том, что фотошоп не способен сохранить картинку в этом расширении. Поэтому придётся сохранить фавикон в расширении png. Для этого необходимо пройти в пункт Файл, затем на Сохранить как, и при помощи нужной строки, сохраните нужный формат.
  • Вы создали favicon. И всё же для добавления favicon на сайт требуется формат icon. Можно перевести картинку в необходимый формат, воспользовавшись генератором ru. Посетите этот сайт и нажмите на Обзор. Выберите ваш фавикон и нажмите на Создать favicon.ico.
  • Загрузится страница с надписью Скачать favicon.ico. Нажмите на надпись и сохраните конвертированный файл на свой компьютер.

Добавление фавикон на сайт

Для того что бы добавить изображение на сайт, разместите его в корневую папку и на каждую страницу площадки перед вторым тегом </head>. Пропишите две строки: <link rеl=»icоn» hrеf=»/fаvicon.icо» typе=»imаge/x-icоn»> и <link rеl=»shоrtcut icоn» hrеf=»/fаvicon.icо» typе=»imаge/x-icоn»>. На все страницы эти надписи нужно добавлять, если ваш сайт создан при помощи  HTML. В случае использования движка, достаточно единоразового добавления. В CMS строки прописываются в основной файл темы, применяемый для сайта. После добавления, картинка сразу появится в верхней строке браузера и на открытых вкладках. В поиске яндекса и гугла изображение появится несколько позже.

Как поменять иконку (favicon) на WordPress?

Нужно  зайти в админку Word Press , перейти на панели слева в Внешний вид —- Настроить — Свойства сайта. картинка 1 Далее находим внизу область “иконка сайта”  и переходим в Изменить изображение картинка 2 Как сделать фавикон и иконку для сайта Загружаем необходимую картинку Загрузить Файлы в формате PNG (желательно) т.к у этого формата прозрачный фон и хорошее качество и что бы соотношение картинки было 1:1 (квадратное) , при необходимости отредактировать в Photoshop, поменять фон прозрачность, буквы и тд. После загрузки изображения смотрим что получилось в итоге, если норм то сохраняем жмем Сохранить и опубликовать картинка 3 Как сделать фавикон и иконку для сайта

Как поменять логотип сайта на WordPress ?

Видео как изменить логотип     Нужно  зайти в админку Word Press , перейти на панели слева в Внешний вид —- Темы — Настроить. картинка 1 Как сделать фавикон и иконку для сайта Далее на панели слева  Стили темы картинка 2 Как сделать фавикон и иконку для сайта После перехода в Стили темы скролим вниз и находим нужный нам пункт Логотип в шапке и в подвале сайта картинка 3 Как сделать фавикон и иконку для сайта Изменяем изображение на новое которое уже заранее приготовлено в формате PNG хорошего качества. Если логотип не на своем месте, значит необходимо логотип масштабировать. Переходим Изменить изображение картинка 3 , далее после перехода  выбираем ту же картинку в Библиотеке Файлов и жмем Редактировать  картинка 4 Как сделать фавикон и иконку для сайта В новой вкладке появится  окно масштабирование изображения. Далее необходимо подогнать картинку под нужные нам размеры , чтобы логотип стоял на своем месте. картинка 5 Как сделать фавикон и иконку для сайтаПосле редактирования сохраняем и обновляем. Мы только отредактировали изображение. Повторяем пункт 1,2.3,4 выбираем  изображение которое масштабировали и сохраняем. Заключение Фавикон является неотъемлемым сопровождением сайта. Он не менее важен, чем логотип, эмблема и другое наполнение. Не забывайте об уникальности и цветовом оформлении изображения. Это касается как создаваемых вами, так и готовых фавиконов. Успехов!
Ссылка на основную публикацию
Adblock
detector