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

favicon для сайта

В сегодняшней заметке поговорим о фавиконке (favicon) и о том как ее разместить у вас на блоге.

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

На скриншоте ниже я выделил три вкладки в браузере: в первых двух фавиконка присутствует, в последнем вы видите тот самый бланк.

пример фавиконок

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

Главную мысль всего вышесказанного можно выразить одним  — узнаваемость. Ваши читатели со временем привыкнут к фавиконке и находить ваш блог в закладках будет намного легче. По своему опыту могу сказать что если какой-то блог, который я читаю, изменит иконку, то первая мысль будет : «Эй! Куда делась закладка?!»

Поэтому для улучшения узнаваемости в интернете крайне рекомендую вам установить фавиконку.

Переходим к процессу установки

Чисто графически favicon представляет из себя изображение размером 16 на 16 пикселей в формате ico. Вы можете нарисовать ее самостоятельно онлайн или воспользоваться уже готовым решением на многочисленных ресурсах по подбору иконок. Онлайн можно создать favicon и из вашего изображения. Тут дело за вами. Перечислю лишь некоторые ресурсы:

Как только подходящее изображение найдено, подключитесь к вашему сайту/блогу посредством FTP и загрузите изображение на хостинг. Можно загрузить как в корень сайта, так и в одну из папок, например, images. В дальнейшем необходимо будет указать верный путь до изображения.

А вот и сам код, который необходимо будет вставить в файл header.php между открывающимся и закрывающимся тегом head:

<link rel="shortcut icon" href="http://wpnotes.ru/images/favicon.ico" type="image/x-icon" />
<link rel="icon" href="http://wpnotes.ru/images/favicon.ico" type="image/x-icon" />

В данном коде поменяйте путь до изображения на свой, сохраните изменения и попробуйте обновить страницу для проверки результата. Лично у меня, в любимом браузере Google Chrome, favicon сразу не отобразился и пришлось предварительно почистить кэш, тогда как в тесте с Firefox все отображалось сразу. Имейте это в виду.

Надеюсь у вас все получилось и теперь ваши читатели без труда узнают ваш блог из сотен других…по фавиконке.

Понравилась статья? Поделитесь с друзьями:


 

Навигация по записям

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

  1. WPixel

    В последнее время замечаю что формат . ico отходит на второй план чаще в формате png используют фавиконки

Комментарии запрещены.