Seo-Бизнес блог Progress-project

Все о создании, продвижении сайтов и заработке в интернете

Обновлённый дизайн блога Progress-project
logotip «Progress-project»
logotip «Progress-project»

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

Приветствую вас уважаемые веб-мастера, сегодня на Progress-project я хотел бы с вами обсудить такой момент, как изготовления и установка на блог иконки favicon (фавикон).

Favicon это повторения в несколько раз уменьшенного логотипа вашего блога, как правило 16×16 или-же 32х32 пикселей и имеющий расширение .icon.

Встречается фавикон чаще всего в левом углу во вкладки браузера и на панели закладок а так-же в выдачи поисковых систем.

Если переводить слово Favicon с английского то оно означает «Любимая иконка». Но в сети также существует мне неизвестно от куда взявшееся расшифровка слова Favicon, как «Значок для избранного».

Фавикон придаст вашему блогу некую уникальность и запоминаемость.
Иконкой фавикон для вашего блога может служить любая картинка будь то просто картинка, анимация или изображение имеющее 3D эффекты.

Размер 16×16 подойдёт для поисковых выдачей и в качестве иконки для браузеров, фавикон имеющий размер 32х32 подойдёт в качестве закладки на рабочий стол компьютера.

Как вы понимаете довольно сложно достичь из обычной картинки таких малых размеров сохранив при этом начальное качество изображения.
И здесь нам в помощь приходят онлайн сервисы, благо таких сегодня просто огромное количество в сети интернет.

Мы с вами не станем разбираться во всех онлайн сервисах способных преобразовать картинку в иконку фавикон, а рассмотрим только один из них.

Итак, выберем подходящею под тематику сайта квадратную картинку.
Старайтесь, чтобы на ней располагался один предмет с чётко выделенными краями, после этого переходим в онлайн сервис: tools.dynamicdrive.com/favicon/

  1. Выберем на компьютере картинку будущего фавикона.
  2. Указываем размер установив галочку.
  3. Преобразовываем картинку в нужный фавикон.

Как видите у нас получилось два размера, как нам и необходимо для закладки и для отображения в строке браузера.

Скачиваем наш файл фавикона на компьютер нажав кнопку с надписью Download FavIcon.

Как установить фавикон на блог

Установка иконки фавикон на сайт достаточно проста и займёт у вас буквально несколько минут.

И так, у нас уже имеется нужное изображение имеющее расширение .icon, теперь нам необходимо загрузить его на наш хостинг.
Самый простой способ это просто закинуть картинку фавикон в корневую папку блога где расположены все файлы вашего движка WordPress.

Теперь в теме вашего блога открываем файл header.php и спереди тега </head> вставляем такие строки:

<link href="<https://Ваш сайт/название картинки.ico>" rel="shortcut icon" />
<link href="<https://Ваш сайт/название картинки.ico>" rel="icon" type="image/x-icon" />

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

Если вы поместили фавикон в какую-то определённую папку, то нужно прописать вместо: Ваш сайт, полный путь до него.

Так-же можно посетить и выбрать для своего блога, сервисы содержащие целый набор уже готовых иконок фавикон.

Вот несколько из них:

www.iconj.com/gallery.php
www.favicon.co.uk/gallery.php
www.audit4web.ru/info/favicon/

На сегодня у меня всё, а в следующих статьях мы будим продолжать создавать и усовершенствовать наш блог, обязательно подпишитесь на обновления, чтобы не чего не пропустить. Желаю удачи до новых встреч!

С уважением, автор блога!
© progress-project
★Обновлено:2016-05-27

Введите свой e-mail:

Вы можете поделиться статьёй в социальных сетях:

Комментарии к статье

2 комментарияна “Как сделать и установить фавикон на сайт”
  1. Евгенмй:

    Могу посоветовать куда более мощный онлайн генератор фавиконок — favicon.by

    Ответить
  2. Administrator:

    Здравствуйте Евгений, действительно предложенный вами сервис достаточно хорош так, как на нём есть возможность не только редактировать уже готовое изображение, но и нарисовать, что то своё. Думаю, что многие читатели блога, его так-же оценят по достоинству.

    Ответить

Ваш комментарий

Внимание! Перед тем, как вставить в комментарий: html, php либо JavaScript, преобразуйте его в HTML сущность!

» Подписаться на комментарии по RSS
Поиск по блогу

Введите свой e-mail:

ВКонтакте Google+ Facebook RSS-лента сайта abrek-ad-abra.ru

Топ комментаторов

Виктор(6)
seoonly.ru(4)
Иван(3)
Олег(3)
Николай(3)

© 2015-2017

SEO-Бизнес блог «Progress-project».

Все материалы, опубликованные на сайте: принадлежат автору и охраняются в соответствии с законодательством РФ.

При использовании материалов сайта гиперссылка на обязательна!



seo-блог