Как сделать фавикон, или хочу значок для сайта

Дата: 2014-06-02

Автор: Макс

Здравствуйте, уважаемые читатели сайта. В сегодняшней статье, хочу рассказать вам, что такое фавикон, или как его иногда называют – значок сайта, и как сделать этот значок самостоятельно.

Что такое и зачем нужен фавикон

Сначала отвечу на вопрос, зачем нужен фавикон. По сути, это простая картинка с размером 16 на 16 пикселей, и расширением *.ico. Прежде всего, это персонализация сайта, отличительный символ. Он отображается в поисковой выдаче Яндекса, и как утверждают эксперты, повышает кликабельность ссылок. Он же, показывается на вкладках браузера, запоминается пользователям, и если ваш сайт заносят в закладки, то повышает узнаваемость. На сайт будут чаще возвращаться.
Одним словом, фавикон никогда не повредит, а вот помочь сайту может.

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

Фавикон можно сделать несколькими способами. Нарисовать самому, уменьшить до размеров 16х16 пикселей, сохранить с расширением *.ico, вставить картинку на сайт. Найти изображение подходящее тематике сайта в интернете, затем уменьшить и т.д. Воспользоваться онлайн сервисом для создания иконок сайта.

Самым простым способом, нахождением и преобразованием картинки в интернете, мы сейчас и воспользуемся. При желании, иконку всегда можно сменить на ту, которую вы посчитаете более удачной, или нарисуете сами.

Итак, приступим к поиску подходящей картинки.

Будущий фавикон нужно искать с расчетом на то, что картинка будет очень уменьшена, буквально до размера 16х16, а значит должна быть предельно проста и с минимальным набором цветовых оттенков. Открываем любой сервис поиска изображений: Яндекс картинки, картинки Google и им подобные. Вбиваем в поиск слово, максимально отображающее тематику сайта, выбираем из поданного ассортимента.

Я, для примера, закатал в поиск «книга», выбрал картинку, скачал на комп, обрезал до одинакового соотношения сторон. Вышло изображение 465х465 пикселей. Теперь заходим на онлайн сервис – favicon.ru, и продолжим работу над нашим новым значком для сайта.

Сервис выглядит таким образом:

Чтобы сделать фавикон из картинки, нажимаем кнопку «Обзор», в верхнем правом углу сервиса.

Откроется проводник Windows, компьютера. Выделяем изображение, нажимаем «Выбрать». Изображение открывается на сервисе в редакторе картинок. В редакторе есть возможность выбрать область с равным соотношением сторон, то бишь квадрат. Если вы предварительно не обрезали рисунок в квадратном соотношении, сейчас у вас есть такая возможность.

Выбираем нужное положение выделенной области, жмем «Далее». У нас появится преобразованное изображение в инструменте редактирования.

Простые инструменты дают возможность подкорректировать будущий фавикон. Можно закрасить некоторые пиксели, залить контуры цветом или обесцветить окрашенные. Кстати, если у изображения четкий контур, фон можно сделать прозрачным, выбрав инструмент «прозрачный» и кликая на пиксели, не принадлежащие рисунку, фоновые. Это придаст выразительности фавикону.

Как фавикон будет выглядеть в браузере, можно увидеть под редактором:

Когда результат вас устроит, нажимаем кнопку «Скачать фавикон».

Наш значок для сайта, сохранится на компьютере.

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

Когда фавикон готов, следующим шагом нужно забросить его в корневую папку сайта. Проще всего это сделать файловым менеджером: Total Commander, FileZillaили любой другой, к которому вы привыкли.

Запускаем файловый менеджер, соединяемся по FTP с сервером, открываем корневую папку сайта и копируем в неё фавикон.

Половина дела сделана. Почему половина? Вы правы, процентов 90. Дело в том, что можно оставить и так. Фавикон появится, но чтобы гарантировать результат во всех браузерах, нужно завершить начатое, и вставить строчку кода в страницы сайта.

<link rel="shortcut icon" href="http://www.ваш сайт.com/favicon.ico" type="image/x-icon" />

 

Скопируйте строчку кода и вставьте в значимые страницы сайта, между открывающим и закрывающим тегами <head></head>.

В зависимости от движка сайта, эту строчку нужно вставлять в разные файлы. Обычно это файл шаблона, отвечающий за метаданные. НО! У стандартных движков, WordPress, Jumla, Drupal, есть фирменный фавикон, и практически всегда, он присутствует в шаблонах, так что, если такой значок имеется, то и код должен быть прописан, а, следовательно, вам достаточно просто заменить иконку, на вновь созданную.

Вот и вся наука создания и установки фавикона на сайт. Если статья вам принесла пользу, покажите её друзьям в соц. Сетях, нажав кнопочку поделиться.



Понравилась статья? Покажите её друзьям.


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

 

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

Появится после модерации админом!


Реши пример: