Как сгенерировать и вставить favicon в HTML код?


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

Конвертирование изображения в ICO (Favicon)

Что важно в значках фавиконов’ Дело в том, что они должны быть определенного размера: 16x16, 32x32 или 64x64 пикселей соответственно. Кроме того, не забудьте применить 8-битный или 24-битный цвет. Наиболее распространенным форматом для фавиконов является ICO, но также возможны форматы GIF и PNG.

При конвертировании Favicon обратите внимание на следующие советы:

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

Обычно сделать иконку, нужно просто обычное изображение в формате *.jpg, или *.bmp, которое можно сделать в любом графическом редакторе, хоть в том же Paint. Загрузите изображение в программу для создания фавиконов, затем выберите размер, глубину цвета и нажмите кнопку старт. Все готово.

Как добавить фавикон в HTML?

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

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

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

На вкладках страниц и в адресной строке браузера ваш значок будет отображаться сразу.

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