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

Просмотров: 1009

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

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

Иконка блога

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

FAVICON ДЛЯ САЙТА

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

2. Переходим на сайт Genfavicon.com

Генератор фавикон

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

Загрузка изображения

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

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

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

Размер Favicon

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

Готовый Фавикон для сайта

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

<link rel="shortcut icon" href="/favicon.ico" />

Вставка кода Favicon на блог

(У меня на блоге всё заработало и без кода).

Сохраняемся, обновляем страницу и наслаждаемся проделанной работой.

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

Благодарю за внимание всех читателей блога LiWiHelp.ru!

Не забывайте оставлять комментарии к статье и рекомендовать её друзьям из социальных сетей.

Комментарии:

3 комментария

Leave a Reply

Ваш e-mail не будет опубликован.