Создаем Favicon и вставляем его на сайт

Favicon — это маленькая картинка для сайта. Favicon фигурирует на всех страницах сайта.

 

Favicon во вкладке браузера.

Favicon в браузере

 

Favicon в поисковой выдаче яндекса.

Favicon в яндексе

 

Создаем Favicon для сайта

Администратор сайта использует чужой Favicon, либо создает свой.

Сделаем Favicon, воспользуемся бесплатным фоторедактором Paint.NET. Скачиваем и устанавливаем фоторедактор, запускаем его.

http://www.dotpdn.com/files/paint.net.4.0.9.install.zip

Создадим новое изображение в Paint.NET:

Файл — создать.

 Идентичная ширина и высота  favicon (400х400).

Ширина и высота рисунка в Paint

 

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

Воспользуйтесь инструментами и цветами для создания Favicon.

Инструменты и палитра

 

Удалите фон в готовом Favicon

  1. Найдите «волшебную палочку»в инструментах;
  2. Кликните на фон, чтобы выделить его;
  3. Щелкните на ножницы в верхней панели Паинта или нажмите вместе две кнопки на клавиатуре: CTRL + X.

Создание Favicon

 

Фон стал прозрачным: шахматный фон не виден в готовом Favicon.

Картинка без фона

 

Сохраняем результат: файл — сохранить как… — рабочий стол — придумываем название картинки — обязательно выбираем формат PNG — сохраняем.

Сохраняем favicon

 

Три способа для вставки Favicon на сайт

  1. Favicon для любого сайта

Favicon в формате ICO загружается на сайт.

  • Выделяем картинку, нажимаем правую кнопку мыши — свойства.
  • Меняем формат на ICO и называем его «favicon».
  • Результат: Картинка будет называться  favicon.ico

Рекомендованный размер favicon — 16×16 /   маленькими буквами название и формат — favicon.ico

Смена формата

 

Заходим в свой аккаунт на хостинге.

Загружаем favicon.ico в корневую папку сайта (где хранятся файлы сайта).

Путь до корневой папки: название сайта/ public_html

favicon на сайте

 

2. Favicon для WordPress

Заходим в админку WordPress, чтобы добавить Favicon.

Во внутренней части WordPress переходим раздел «внешний вид» и нажимаем «настроить».

Настройка WordPress

 

Выбираем «свойства сайта» и загружаем Favicon, соответствующий критериям: 512х512 в длину и ширину.

Выбрать изображение

 

3. Favicon и вставка кода

На сайт загружаем картинку с форматом PNG.

Внедряем нижепредставленный код между <head> и </head>.

В WordPress: Внешний редактор — header.php и вставляем код между head.

<link rel=«shortcut icon» href=«адрес изображения« type=«image/png»>

Адрес изображения — это фактическое местонахождение картинки в интернете.

В WordPress переходим в раздел медиафайлы

Медиафайлы WordPress

 

Копируем Адрес изображения и внедряем в указанный код:

— <link rel=«shortcut icon» href=«адрес изображения« type=«image/png»>

Адрес изображения

 

Можно выявить адрес изображения на любом сайте.

Выставляем картинку на сайт. Заходим на сайт, жмём правой кнопкой по картинке и выбираем «копировать URL картинки».

Скопированный URL картинки — это фактическое местонахождение картинки на сайте.

Копировать URL картинки

Favicon — это «лицо сайта», создавайте привлекательное изображение. Пользователи чаще будут кликать по сайту, если favicon будет запоминающимся.

Оставить комментарий