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

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

Он отображается интернет-браузером возле названия вашего сайта или в адресной строке перед URL страницы (в зависимости от версии интернет-браузера), а также в качестве картинки рядом с закладкой, что обеспечивает узнаваемость пользователями вашего ресурса в Интернете.

Иконка сайта в браузере
Фавикон сайта

Чтобы создать неповторимый значок, можно воспользоваться интернет-сервисами, предлагающими легко его сгенерировать.

Как создать фавикон

1-Й СЕРВИС.

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

Создание логотипа онлайн
Создание логотипа

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

Страница с опцией "Создать фавиконку с этим логотипом"
Выбор опции на странице

На странице генерации, вы увидите разные варианты для вашего будущего значка.

Генерация готового фавикона
Сгенерированный результат

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

2-Й СЕРВИС.

Как работать с ним, читайте дальше. Перед процессом создания Фавикон-значка, нам нужно иметь картинку из которой будем изготавливать favicon.ico. Переходим на сайт Genfavicon.com.

Страница сайта "Генератор фавикон"
Страница сайта

Нажимаем кнопку «Выберите файл», в Проводнике выбираем подготовленную нами картинку и кликаем на кнопке «Upload Image».

Загрузка изображения из компьютера
Выбор файла на ПК

Картинка загружается в окне просмотра без перезагрузки интернет-браузера, где мы подгоняем её под нужный нам размер, путём перетаскивания чёрных квадратиков-направляющих.

Регулировка размера картинки
Регулировка

В зелёном поле устанавливаем размер Фавикон-значка (стандартный 16х16 пикселей) и нажимаем кнопку «Capture & Preview».

Устанавливаем размер Favicon
Размер значка

В последнем голубом поле видим, как будет выглядеть наш Favicon и, если результаты нас устраивают, можем скачать готовый Фавикон-значок в формате .ICO (основной формат) или .JPG.

Готовый Фавикон для сайта в 2-х форматах
Форматы для загрузки

Теперь просто загружаем по FTP готовый файл favicon.ico в корневую директорию своего сайта или блога и в коде страницы сразу после тега <head> вставляем следующий код.

<link rel="shortcut icon" href="/favicon.ico" />
Вставка кода Favicon на свой сайт в редакторе страницы
Вставка кода на сайт

У меня на блоге всё заработало и без кода. Сохраняемся, обновляем страницу и наслаждаемся проделанной работой с фавикон генератор. Если фавикон-значок не появился на вашем сайте, в первую очередь нужно очистить кэш интернет-браузера. Благодарю за внимание всех читателей блога! Не забывайте оставлять комментарии к статье и рекомендовать её друзьям из социальных сетей.

2 комментария к “Как создать Фавикон (Favicon) для сайта”

  1. где то видел скрипт где можно менять каждый час иконки фавиконов…вы такой не встречали?

    • Есть скрипт позволяющий осуществить анимацию Favicon, путем замены картинки. Адрес: ucozon.ru/dir/11-1-0-2791

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