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

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

Иконкой сайта называется небольшая картинка, расположенная в адресной строке браузера. Чаще всего это тематическая пиктограмма, мотив которой связан с направлением ресурса. Работая с поисковиком Яндекс, пользователь видит данную иконку еще на этапе выведения результатов по запросу – она располагается рядом с названием сайта. Как создать и добавить индивидуальную иконку?

1
Алгоритм добавления иконки на сайт – создание картинки

Иконка для сайта (или favicon) представляет собой картинку размером 16*16 пикселей с расширением ICO. Подготовленную картинку сохраняете в корневом каталоге сайта под названием favicon.ico. В этом случае сервисы будут отображать созданную пиктограмму автоматически.

Добавление значка на сайт включает в себя несколько этапов – создание собственно иконки и добавление ее на сайт. Для создания необходимой пиктограммы можно воспользоваться одним из онлайн сервисов.

Подготовка иконки с помощью сторонних ресурсов

Популярным ресурсом данного направления является favicon.

  • Центральный квадрат появившийся на экране является своеобразным холстом вашего мотива.
  • Вы можете как создать собственную картинку, так и отредактировать готовое изображение. Во втором случае необходимо кликнуть клавишу “Import Image” и загрузить желаемую картинку.
  • В нижней части экрана есть поле предварительного просмотра (“Preview”), в котором пользователь видит результат своих действий.
  • Когда картинка будет готова, сохраняете ее на вашем персональном устройстве (“Download Favicon”).

При желании можно загрузить и установить специальные приложения для создания иконок, например:

Подготовка иконки с помощью Photoshop

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

  • Сжатие картинки до необходимого размера производите в разделе работы с изображением “Image” – ”Image size” (16*16 pxl).
  • Важный момент – готовую картинку вы должны сохранить в формате “ico”.
  • Имя пиктограммы – “favicon”.

Стандартный набор форматов редактора не включает расширение “.ico”. Чтобы его добавить, необходимо скачать плагин формата “ico” и распаковать его в папку “FileFormats” (C\ProgramFiles\Adobe\AdobePhotoshop\CS2Plug-Ins\FileFormats). После этого в перечне расширений пункта “Сохранить как” появится вариант “.ico”.

2
Алгоритм добавления иконки на сайт – размещение картинки

Загрузка подготовленной картинки на сайт производится путем загрузки ее в корневой каталог портала:

  • Используя FTP-клиент или файловый менеджер, подключаетесь к сайту.
  • Загружаете иконку в папку “public_html”.

Если после размещения favicon в корне сайта изображение так и не появилось или вы хотите установить картинку, имеющую отличное от “ico” расширение, в области заголовка (<head></head>) необходимо прописать полный путь к подготовленной картинке:

  • <link rel=”icon” href=”/favicon.ico” type=”image/x-icon”>;
  • или <link rel=”shortcut icon” href=”/favicon.ico” type= “image/x-icon”>;
  • или <link rel=”shortcut icon” type=”image/png” href=”/favicon.png”/>.

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

Ваш e-mail не будет опубликован. Обязательные поля помечены *

закрыть