Создание иконки для сайта и блога (фавикон, favicon) с помощью онлайн сервиса favicon.cc и favicon.ru | Установка Favicon (Фавикон) Joomla, WordPress, Ucoz.

Создание иконки для сайта и блога (фавикон, favicon) с помощью онлайн сервиса favicon.cc и favicon.ru

Хочу затронуть с вами тему Favicon (Фавикон) или как сделать иконку для сайта. Вы наверняка замечали, что в закладке браузера перед названием всегда красуется иконка.

Мы сегодня рассмотрим, как создать и разместить себе на сайте ту иконку, которая вам больше всего будет по душе. Делать мы буди с помощью онлайн сервиса favicon.cc и favicon.ru

Создание иконки для сайта и блога (фавикон, favicon) с помощью онлайн сервиса favicon.cc и favicon.ru

Favicon (Фавикон) – это картинка, которая стоит в браузере в закладке перед названием сайта. Favicon моего сайта выглядит так:

Создание иконки для сайта и блога (фавикон, favicon) с помощью онлайн сервиса favicon.cc и favicon.ru

Это буква A, начальная буква названия моего сайта.

Favicon (Фавикон) – как я уже говорил, это обычная картинка, которая храниться в файле favicon.ico. В различных cms Фавикон распологается в разным местах.

 

Для чего нужен Favicon (Фавикон)

Во-первых, это красивый декоративный элемент сайта. Приятно когда в закладке браузера красуется красивая иконка. Намного приятней, чем обезличенная иконка, а еще хуже, если иконка вашей cms. Но это не только красивый и декоративный элемент. С помощью Фавикона вы выделяете свой сайт среди других, возможна вы создадите такую иконку для сайта, что она запомниться вашим посетителям и зайдя на вас сайт повторно, сразу вспомнят его. Также в браузере если у человека открыто много закладок, порой даже названия закладки не видно, по иконке можно узнать, что за сайт открыт в этой закладке.

 

Как создать Favicon (Фавикон) для своего сайта и блога с нуля

Мы будем рассматривать очень удобный сервис, который располагается по адресу favicon.cc. Он выглядит следующим образом

Как создать Favicon (Фавикон) для своего сайта и блога с нуля

Для начала рассмотрим инструменты для рисования

Как создать Favicon (Фавикон) для своего сайта и блога с нуля

transparent – маркер доя рисования

pick existing color – определение цвета, пипетка

move – передвижение нарисованного объекта

Как создать Favicon (Фавикон) для своего сайта и блога с нуля

Transparency – прозрачность. Если ползунок находится в левой части, значит цвет не прозрачный, чем больше он отклонен в правую часть, тем более прозрачным он становится.

Как создать Favicon (Фавикон) для своего сайта и блога с нуля

Last Used Colors – последние использованные цвета. Слева большой квадрат, это цвет который вы сейчас используете, а маленькие шесть квадратиков, это цвета которые вы до этого использовали.

Как создать Favicon (Фавикон) для своего сайта и блога с нуля

Ну я думаю, здесь вопросов не возникает. Это палитра цветов.

Давайте попробуем нарисовать… Рисуется все попиксельно, то есть рисуется каждая точка, т.е. каждый пиксель.

Как создать Favicon (Фавикон) для своего сайта и блога с нуля

Я решил нарисовать вот такую рожицу.

Чем хорош favicon.cc, тем, что у него есть возможность сразу посмотреть результат. Идем в блок “Preview”

Как создать Favicon (Фавикон) для своего сайта и блога с нуля

И смотрим как наша с вами рожица будет смотреться в браузере.

Если нас устраивает, смело жмем “Download Favicon”

Как создать Favicon (Фавикон) для своего сайта и блога с нуля

Браузер нам сразу предлагает сохранить в favicon.ico. Именно этот файл будет закачан на наш блог или сайт.

Также есть кнопка “Publish under an open license” – публиковать с открытой лицензией. Если вы хотите, чтобы вашей иконкой могли пользоваться другие, можете использовать эту функцию.

 

Создание Favicon (Фавикон) для своего сайта или блога из готового изображения

Возможно вы не захотите создавать иконку для своего сайта или блога с нуля, а хотите использовать уже имеющееся изображение. В этом вам тоже поможет онлайн сервис favicon.cc.

К примеру нам понравилась вот эта картинка

Создание Favicon (Фавикон) для своего сайта или блога из готового изображения

Рекомендуется сразу ее обрезать, как показано красным цветом, или лучше даже до квадратного размера. В рисовалках, это инструмент Crop/Обрезать.

В правой части находим кнопку “Import Image”

Создание Favicon (Фавикон) для своего сайта или блога из готового изображения

Нажимаем на нее.

Создание Favicon (Фавикон) для своего сайта или блога из готового изображения

Keep dimensions – сохранить размеры (пропорции), картинка просто масштабируется. Лучше использовать этот инструмент, при этом методе не искажается картинка.

Shrink to square icon — уменьшить до квадратного значка, то есть растянуть картинку, чтобы она заполнила все пространство квадратной иконки.

и смело жмем “Upload”.

Создание Favicon (Фавикон) для своего сайта или блога из готового изображения

Бесформенное разноцветное безобразие. Я бы это так назвал.

Теперь давайте по порядку. Сверху одна полоса и снизу две полосы, это потому что мы использовали метод “Keep dimensions” и изначальное изображение было не квадратное. Можно обрезать заново или просто дорисовать. Изображение такое страшное, потому как мало пикселей отображают его.  До этого картинку отображало примерно 500 000 пикселей (точек), а сейчас 256 пикселей. Разница ощутимая. Но как она выглядит в миниатюре в браузере.

Создание Favicon (Фавикон) для своего сайта или блога из готового изображения

Создание Favicon (Фавикон) для своего сайта или блога из готового изображения

В принципе похожа. Но надо понимать, что это достаточно сложный рисунок и с большим переливом цвета, который отобразить всего лишь в 256 пикселях очень сложно. Поэтому, чтобы посетители на гадали, что за разноцветная клякса у вас вместо иконки, вставляйте менее сложные объекты. Хотя если у вас на сайте будет эта картинка в хорошем качестве, то скорее всего посетители уловят сходство и поймут что нарисовано.

 

Favicon.ru онлайн инструмент для создания из изображения иконку Favicon для своего сайта, блога

Также для загрузки изображения используйте русскоязычный онлайн сервис favicon.ru. Там достаточно все понятно.

Favicon.ru онлайн инструмент для создания из изображения иконку Favicon для своего сайта, блога

Выбираешь изображение, потом можешь обрезать его или сразу создать его.

Favicon.ru онлайн инструмент для создания из изображения иконку Favicon для своего сайта, блога

Вам покажут как будет выглядеть в браузере ваша иконка, если устраивает жмите “Скачать favicon.ico!”, если нет, то можете обрезать или отредактировать ее.

Favicon.ru онлайн инструмент для создания из изображения иконку Favicon для своего сайта, блога

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

 

Как установить сделанный Favicon (Фавикон) на блог WordPress (ВордПресс)

Иконка у нас создана. Теперь необходимо, чтобы наш блог WordPress (ВордПресс) про нее узнал. Для начала надо закачать иконку.

Полученный favicon.ico скопировать в коренную папку вашего блога WordPress, то есть в папку с названием вашего сайта, к примеру Ageta.ru. В этой папке находятся сложенные папки wp-content, wp-admin и другие файлы и папки. В зависимости от панели управления хостингом папки, где находиться ваш сайт могут отличаться. В Cpanel это public_html, в IPSmanager это папка WWW, если у вас другой менеджер управления хостингом, папка может отличаться.

Как установить сделанный Favicon (Фавикон) на блог WordPress (ВордПресс)

Как установить сделанный Favicon (Фавикон) на блог WordPress (ВордПресс)

Копируем туда файл favicon.ico

Далее необходимо открыть файл header.php, который находиться в папке темы вашего блога.

  • www / Ageta.ru / wp-content / themes / your_tamplate

Где Ageta.ru – это ваш сайт, your_tamplate – папка вашей темы, www – папка для хранения сайта, может быть public_html или другой.

В этом файле, обязательно между тэгами <head> и </head> прописать следующий код:

<link rel=»shortcut icon» href=http://Ageta.ru/favicon.ico type=»image/x-icon» />

<link rel=»icon» href=»http://Ageta.ru/favicon.ico» type=»image/x-icon» />

Ageta.ru меняем на название своего сайта.

Сохраняем и обновляйте свой сайт. Наслаждайтесь результатом.

 

Как установить сделанный Favicon (Фавикон) на сайт Joomla (Джумла)

Это делается достаточно легко. Можете либо через файловый менеджер вашей панели управления хостингом, либо через FTP-клиент загрузить этот файл в следующую папку.

Как установить сделанный Favicon (Фавикон) на сайт Joomla (Джумла)

Как установить сделанный Favicon (Фавикон) на сайт Joomla (Джумла)

Как установить сделанный Favicon (Фавикон) на сайт Joomla (Джумла)

  • www / Ageta.ru / wp-content / templates / your_tamplate

Где Ageta.ru – это ваш сайт, your_tamplate – папка вашей темы, www – папка для хранения сайта, может быть public_html или другой.

Просто копируйте в эту папку файл favicon.ico. Обновляйте сайт и наслаждайтесь.

 

Как установить сделанный Favicon (Фавикон) на сайт в система Ucoz (Юкоз)

Для этого Вам необходимо зайти в панель управлением сайта
В верхнем меню выберите «Инструменты» далее «Файловый менеджер»
Загрузите на сайт свой новый favicon.ico, выбрав его в поле для загрузки файлов и нажав кнопку «Загрузить файл». Загруженная вами иконка заменит стандартный значок ucoz-а.

 

Итог

Создать уникальную и узнаваемую иконку для сайта, поможет вам стать более запоминающимися и узнаваемыми. 4

Как установить сделанный Favicon (Фавикон) на сайт в система Ucoz (Юкоз)Как установить сделанный Favicon (Фавикон) на сайт в Joomla (Джумла)Как установить сделанный Favicon (Фавикон) на сайт в WordPress (ВордПресс)

Не очень приятно, когда у вас установлена стандартная иконка вашей cms Joomla, WordPress или системы Ucoz, конечно если ваш контент не посвящён этому движку. Не оставляйте его стандартным, сразу видно на каком движке сделан сайт и обезличивается он.

2 комментария
  1. Анатолий:

    Спасибо!!!

  2. Наталья Ч:

    Спасибо! Очень понятно, доступно и, самое главное, помогло ))

Поделитесь своим мнением
Для оформления сообщений Вы можете использовать следующие тэги:
<a href="" title=""> <abbr title=""> <acronym title=""> <b> <blockquote cite=""> <cite> <code> <del datetime=""> <em> <i> <q cite=""> <s> <strike> <strong>