Главное Свежее Вакансии Образование
Выбор редакции:
5 051 12 В избр. Сохранено
Авторизуйтесь
Вход с паролем

Как создать фавикон для сайта: пошаговая инструкция от А до Я

Независимо от вашего уровня знаний, при создании сайта некоторым вещам часто уделяется недостаточное внимание.Идеальный пример — фавикон сайта. Знаете ли вы, что такое фавикон? Эффективно ли вы его используете?

Что такое фавикон?

Для тех, кто не знает, что такое фавикон, дадим небольшую справку, которая позволит войти в курс дела. Фавикон – это небольшая иконка размером 16х16 или 32х32 пикселей, содержащая, как правило, логотип, первую букву бренда или характерное изображение, отражающее тип бизнеса или тематику сайта.

what-is-favicon.pngПочему фавикон важен?

Фавикон выполняет следующие функции:

- Брендинг.

- Идентификация сайта пользователем (удобство использования).

- Придает сайту профессиональный вид.

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

Узнаваемость бренда

Фавикон – как маленькое удостоверение сайта. Как было сказано во вступительной части, фавикон помогает пользователю запомнить ваш сайт среди множества просмотренных сайтов. Будь то история просмотра, результаты поиска в Google или список закладок сайтов в вашем браузере, фавиконы помогут пользователю легко узнать ваш сайт и зайти на него.

sites-with-favicon.png

Доверие

Пользователи, как правило, судят о продавцах товаров и услуг в Интернете на основании того, насколько профессионально сделан их сайт. Небрежность в виде отсутствия фавикона (поисковые системы отображают сайт без фавикона иконкой пустого документа) легко может привести к потере доверия, особенно, когда пользователи сравнивают вас с конкурентами.

Повторные посещения

Известно, что люди лучше реагируют на изображение, чем на текст. Теперь предположим, что посетитель вашего сайта торопился, когда впервые посетил его, и решил добавить его в закладки, чтобы вернуться позже. Допустим, этот человек впоследствии решает снова посетить ваш сайт, для чего обращается к своим закладкам. Вам повезло, если у вас есть узнаваемый фавикон, такой, как заметная и уникальная буква G у Google и пользователь найдёт вас. Если фавикона нет, вас могут даже удалить из списка закладок.

Экономит время пользователя

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

Преимущества для SEO

Если ваш сайт имеет фавикон, вы будете видны лучше в поисковой выдаче, чем сайты, в которых его нет, и следовательно, сможете привлечь больше посетителей.

favicon-and-seo1.pngКак создать фавикон?

Есть много инструментов, позволяющих создать фавикон за считанные минуты. Если у вас нет навыков дизайна или вы не знаете, как это делается, то можете попытаться сгенерировать фавикон, используя Logaster.

Для этого следуйте пошаговой инструкции:

Шаг 1. Зайдите на Logaster и нажмите «Создать фавикон»

first-step.png

Шаг 2. Создайте логотип

Logaster – это онлайн-генератор логотипов, поэтому для создания фавикона вам нужно сначала создать логотип. На основании вашего логотипа, Logaster предложит именно те фавиконы, которые вам нужны. Но не беспокойтесь, это не займет много времени и сил.

img_656.png

Шаг 3. Введите название вашего сайта (или компании), выберите тип бизнеса

img_657.png

Шаг 4. Выберите понравившийся логотип

После предоставления всей необходимой информации, Logaster сгенерирует несколько десятков логотипов. Выберите один из предложенных.

img_658.png

Как выбрать правильный дизайн?

Прежде всего, вы должны понимать, что логотип, который послужит основой для вашего фавикона, может быть несовершенен. Наша цель — создать фавикон, а доработать логотип можно и позднее.

Обратите внимание на иконку, именно ее чаще всего используют в качестве фавикона. Если нужно выбрать другой цвет или шрифт, вы можете отредактировать эти элементы дизайна (шрифт, цвет, текст) на 3 шаге создания логотипа. Как редактировать логотип, вы можете узнать здесь.

img_659.png

Шаг 5. Создайте фавикон

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

img_660.png

Шаг 6. Выберите необходимый дизайн фавикона

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

img_661.png

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

Найти вдохновения для фавиконки можно на сайтах:

The Favicon Gallery

Delta Tango Bravo

Fresh Favicons

Шаг 7. Скачайте фавикон

Вы можете приобрести фавикон отдельно, по цене 9.99$ или купить Дизайн-пакет, который включает в себя не только фавикон, но и логотип, визитную карточку, конверт и фирменный бланк. Как купить Дизайн-пакет, вы можете узнать здесь.

img_662.png

После оплаты вы можете скачать фавикон в форматах ico и png.

img_663.pngГде я могу использовать фавикон?

Вы можете использовать фавикон:

- на сайте;

- мобильных устройствах. Пользователь может добавить фавикон на домашний экран своего устройства (нечто вроде закладки) — Android, IOS, Windows Phone и т.п;

- программах и приложениях для РC/Mac.Как установить фавикон на сайт?

После того, как вы получили фавикон, его установка на сервер займет не больше пары минут и выполняется в два этапа. Для этого вам потребуется доступ к корневому каталогу вашего сайта и текстовый редактор, чтобы изменить HTML-код сайта.

Шаг 1.Вам необходимо загрузить файл favicon.ico на сервер. Чтобы это сделать, вам нужно скачать и установить ftp клиент, например, FileZilla. Затем ввести логин и пароль и загрузить файл. Более подробную инструкцию как загрузить файл фавикона вы можете прочитать здесь.

Шаг 2.Теперь вам нужно отредактировать HTML-страницу вашего сайта, чтобы помочь браузерам находить изображение вашего фавикона. При открытом окне FTP, найдите и скачайте с сервера файл index.html или header.php.

Перед правками кода, рекомендуем сделать копию файлов, чтобы можно восстановить файлы если вы допустите ошибку.

Откройте файл index.html в текстовом редакторе — Блокнот, Notepad++, Sublime Text.

img_668.png

Если ваш сайт содержит чистый HTML, вставьте специальный код в область HEAD файла index.html.

img_683.png

Код можно скопировать на странице фавикона на сайте Logaster.

img_667.png

Если вы используете WordPress, вставьте приведенный ниже код в область HEAD файла header.php.

Сделав это, загрузите файл обратно туда, где вы его взяли. Готово! Перезагрузите страницу вашего сайта, чтобы увидеть фавикон.

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

Надеемся, что эта статья дала вам некоторую полезную информацию, которая поможет создать фавикон, который сделает ваш сайте более успешным и привликательным.

+5
В избр. Сохранено
Авторизуйтесь
Вход с паролем
Комментарии
Магазин Таобао
Cайт (движок) с товарами Taobao на русском языке
Магазин Таобао
favicon.ru уже не рулит?
я делаю для ретина дисплея в png в двойной плотности (32 пикс) - все современные браузеры это понимают. Яндекс сам делает уменьшенную копию для себя.
Ответить
Симулятор бизнес-процессов
Сервис имитационного моделирования и оптимизации бизнес-процессов
Prolis Labkk
http://www.xiconeditor.com/ - позволяет в одном файле содержать иконки сразу в 4 размерах: 16, 24, 32 и 64px.
Ответить
Магазин Таобао
Cайт (движок) с товарами Taobao на русском языке
Магазин Таобао
спасибо за ссылку, я по-старинке через фотошоп ресайзю :)
Ответить
Logaster
Logaster позволяет быстро и легко создавать логотипы, визитки и фирменный стиль.
Алексей Левин
Рулит! Но нужно самому рисовать:)
Ответить
Магазин Таобао
Cайт (движок) с товарами Taobao на русском языке
Магазин Таобао
я favicon.ru раньше использовал исключительно для конвертации в формат .ico
Ответить
Logaster
Logaster позволяет быстро и легко создавать логотипы, визитки и фирменный стиль.
Алексей Левин
Да, неплохой сайт для конвертации.
Ответить
Casely
Чехлы для смартфонов с индивидуальным дизайном
Андрей Федоров
Эээ, а почему бы просто не переименовать png к примеру?
Ответить
AgriChain
AgriChain - комплексная онлайн система IT-решений для управления агробизнесом
Панченко Андрей
Все правильно в статье написано. Относительно, favicon.ru - реально не очень хороший сервис. Если логотип сложный - фавик они выдают плохой... посему, если нужен классный фав, то лучше заказать в студии или лансера... дабы он "руками" довел все до логического завершения... но это мое ИМХО....
Ответить
PAGELIFT.RU
Сервис создания сайтов своими руками
PAGELIFT Россия
Хороший, а главное нужный сервис!
Предлагаем сотрудничество с http://pagelift.ru/ нашим пользователям могут быть нужны favicon, а вашим сайт.
Ответить
Boosta.ru
Сайт об интернет-маркетинге: кейсы, советы, анализ ошибок, обзор сервисов
Andrei 8041
Такая мелочь, а важна)
Ответить
Orbitum
Модный браузер для социальных сетей
andrey molchansky
Здесь не хабр, конечно, но побойтесь бога
Ответить
Кошкарев Павел
Как дополнительный ресурс добавил бы http://lab.ejci.net/favico.js/ -данный скрипт позволяет с легкостью манипулировать всевозможными способами отображения favicon в вашем проекте, даже транслировать произвольное видео или запись с веб-камеры. Также существует jQuery Notify Better (www.thepetedesign.com/demos/notify_better_demo.html) с похожим, но менее широким функционалом.
В последней версии WordPress появилась возможность в настройках (Настройка-Свойство сайта-Иконка сайта) задавать favcon. За исходное берется квадратное изображение не менее 512px по стороне, удобно.
Ответить
Выбрать файл
Блог проекта
Расскажите историю о создании или развитии проекта, поиске команды, проблемах и решениях
Написать
Личный блог
Продвигайте свои услуги или личный бренд через интересные кейсы и статьи
Написать

Spark использует cookie-файлы. С их помощью мы улучшаем работу нашего сайта и ваше взаимодействие с ним.