Как сделать фавикон, или хочу значок для сайта
Дата: 2014-06-02
Автор: Макс
Здравствуйте, уважаемые читатели сайта. В сегодняшней статье, хочу рассказать вам, что такое фавикон, или как его иногда называют – значок сайта, и как сделать этот значок самостоятельно.
Что такое и зачем нужен фавикон
Сначала отвечу на вопрос, зачем нужен фавикон. По сути, это простая картинка с размером 16 на 16 пикселей, и расширением *.ico. Прежде всего, это персонализация сайта, отличительный символ. Он отображается в поисковой выдаче Яндекса, и как утверждают эксперты, повышает кликабельность ссылок. Он же, показывается на вкладках браузера, запоминается пользователям, и если ваш сайт заносят в закладки, то повышает узнаваемость. На сайт будут чаще возвращаться.
Одним словом, фавикон никогда не повредит, а вот помочь сайту может.
Как сделать фавикон самому
Фавикон можно сделать несколькими способами. Нарисовать самому, уменьшить до размеров 16х16 пикселей, сохранить с расширением *.ico, вставить картинку на сайт. Найти изображение подходящее тематике сайта в интернете, затем уменьшить и т.д. Воспользоваться онлайн сервисом для создания иконок сайта.
Самым простым способом, нахождением и преобразованием картинки в интернете, мы сейчас и воспользуемся. При желании, иконку всегда можно сменить на ту, которую вы посчитаете более удачной, или нарисуете сами.
Итак, приступим к поиску подходящей картинки.
Будущий фавикон нужно искать с расчетом на то, что картинка будет очень уменьшена, буквально до размера 16х16, а значит должна быть предельно проста и с минимальным набором цветовых оттенков. Открываем любой сервис поиска изображений: Яндекс картинки, картинки Google и им подобные. Вбиваем в поиск слово, максимально отображающее тематику сайта, выбираем из поданного ассортимента.
Я, для примера, закатал в поиск «книга», выбрал картинку, скачал на комп, обрезал до одинакового соотношения сторон. Вышло изображение 465х465 пикселей. Теперь заходим на онлайн сервис – favicon.ru, и продолжим работу над нашим новым значком для сайта.
Сервис выглядит таким образом:
Чтобы сделать фавикон из картинки, нажимаем кнопку «Обзор», в верхнем правом углу сервиса.
Откроется проводник Windows, компьютера. Выделяем изображение, нажимаем «Выбрать». Изображение открывается на сервисе в редакторе картинок. В редакторе есть возможность выбрать область с равным соотношением сторон, то бишь квадрат. Если вы предварительно не обрезали рисунок в квадратном соотношении, сейчас у вас есть такая возможность.
Выбираем нужное положение выделенной области, жмем «Далее». У нас появится преобразованное изображение в инструменте редактирования.
Простые инструменты дают возможность подкорректировать будущий фавикон. Можно закрасить некоторые пиксели, залить контуры цветом или обесцветить окрашенные. Кстати, если у изображения четкий контур, фон можно сделать прозрачным, выбрав инструмент «прозрачный» и кликая на пиксели, не принадлежащие рисунку, фоновые. Это придаст выразительности фавикону.
Как фавикон будет выглядеть в браузере, можно увидеть под редактором:
Когда результат вас устроит, нажимаем кнопку «Скачать фавикон».
Наш значок для сайта, сохранится на компьютере.
Как установить фавикон на сайт
Когда фавикон готов, следующим шагом нужно забросить его в корневую папку сайта. Проще всего это сделать файловым менеджером: Total Commander, FileZillaили любой другой, к которому вы привыкли.
Запускаем файловый менеджер, соединяемся по FTP с сервером, открываем корневую папку сайта и копируем в неё фавикон.
Половина дела сделана. Почему половина? Вы правы, процентов 90. Дело в том, что можно оставить и так. Фавикон появится, но чтобы гарантировать результат во всех браузерах, нужно завершить начатое, и вставить строчку кода в страницы сайта.
Скопируйте строчку кода и вставьте в значимые страницы сайта, между открывающим и закрывающим тегами
.
В зависимости от движка сайта, эту строчку нужно вставлять в разные файлы. Обычно это файл шаблона, отвечающий за метаданные. НО! У стандартных движков, WordPress, Jumla, Drupal, есть фирменный фавикон, и практически всегда, он присутствует в шаблонах, так что, если такой значок имеется, то и код должен быть прописан, а, следовательно, вам достаточно просто заменить иконку, на вновь созданную.
Вот и вся наука создания и установки фавикона на сайт. Если статья вам принесла пользу, покажите её друзьям в соц. Сетях, нажав кнопочку поделиться.
Понравилась статья? Покажите её друзьям.
Может быть интересным:
Самое читаемое:
- Как вставить видео с YouTube в сайт?
- Тонкости настройки рекламы от Google AdSense. Отсеиваем ненужное.
- Как вставить видео с YouTube в сайт. Новые правила сервиса
- Как сделать скриншот сайта
- Ух! Сколько о контекстной рекламе. Часть вторая - блочно-рекламная
- Какие бывают виды сайтов. Продолжение.
- Текстовые, мультимедийные или смешанные? AdSense рекомендует, а мы корректируем
Последнее по теме:
- Текстовые, мультимедийные или смешанные? AdSense рекомендует, а мы корректируем
- Сайт. Нужен или нет
- Как купить хостинг и получить домен ru в подарок
- Тонкости настройки рекламы от Google AdSense. Отсеиваем ненужное.
- Ух! Сколько о контекстной рекламе. Часть вторая - блочно-рекламная
- Ух! Сколько о контекстной рекламе
- Как сделать почту на Яндекс бесплатно
Оставьте свое мнение в комментарии:
Добавить комментарий:
Появится после модерации админом!
Навигация: