я в Twitter!

.

Favicon лицо Вашего сайта — как его создать и правильно установить

Итак что же такое Favicon для сайта, и как же его правильно установить.

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

Вот эта картинка и называется фавикон

 

 

Вот что говорит по этому поводу Википедия. «Favicon (сокр. от англ. FAVorites ICON — «значок для избранного», от названия папки с закладками в MSIE) — значок веб-сайта или веб-страницы. Отображается браузером в адресной строке перед URL страницы, а также в качестве картинки рядом с закладкой, во вкладках и в других элементах интерфейса.»

Итак, с чего же начать? Правильно — с подходящей картинки для Вашего сайта.
Конечно, можно пойти по более сложному пути — нарисовать её в Photoshop. Для тех, кто изберёт этот путь, дам несколько советов. Картинка должна быть квадратной, размером 400х400px (с таким размером легче работать). Ну, и сохранять её надо, для Web, в формате JPEG
Однако, есть сайт на котором можно найти каталог фавиконов на любой вкус.

Итак, начинаем творить.
Заходим на сайт ICONFINDER.COM
Набираем в поисковой строке на английском языке то, что мы ищем.

Я набрал слово red, так-как мне нужна яркая привлекающая внимание красная картинка для фавикона. Дальше находим понравившееся изображение и нажимаем на него. Обязательно обращаем внимание на левую сторону, там указан вид лицензии, нам нужна Free.

Далее, сохраняем выбранный рисунок на компьютер, нажав на Download PNG.

Теперь наш рисунок надо превратить в Favicon.
Для этого существует множество программ. Также, есть и ресурсы для создания фавикона онлайн.
Я для себя выбрал русскоязычный сайт Favicon.ru . Заходим на сайт и дальше делаем всего два шага.

В первом поле указываем нахождение нашего сохраненного изображения и нажимаем Создать favicon.ico. После этого шага, мы увидим как выглядит наша адресная строка.

Если нас всё устраивает, скачиваем картинку в корень локальной папки, где хранится наш сайт.
После открываем индексную папку в HTML редакторе или в блокноте, и добавляем в код перед закрывающим тегом </head> следующую строку
<link rel=»icon» href=»/favicon.ico» type=»image/x-icon»>
<link rel=»shortcut icon» href=»/favicon.ico» type=»image/x-icon»>
Не забываем сохранять исправления. Данное действие повторяем с каждым индексом каждой страницы. Вот, что у нас должно получиться в результате:

 

Далее открываем FTP клиент (в моём случае это FileZilla) загружаем на хост из корня нашу картинку и обновляем индексный файл или файлы.

Далее обновляем страницу в браузере, и, наслаждаемся результатом.

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

Способ-2: Скачиваем картинку себе на компьютер. Через admin панель закачиваем картинку себе на сайт. Устанавливаем плагин Favicons  и в настройках плагина прописать адрес картинки на вашем сайте. Далее обновляем страницу в браузере, и наслаждаемся результатом.


Понравился сайт? Статьи вызывают интерес? Тогда подписываемся на новые
стрелка
Ваш e-mail: *
Ваше имя: *
   

Понравилась статья - поделись с друзьями!

Опубликовать в Мой Мир
Опубликовать в Одноклассники
Опубликовать в Яндекс
Опубликовать в Google Plus
Опубликовать в Google Buzz
Опубликовать в LiveJournal


К записи оставлено 2 коммент.

У меня вопрос возник, чем отличается «<link rel="icon"…" от "<link rel="shortcut icon"…"?

Для некоторых браузеров необходимо указать прямую ссылку на иконку вашего сайта непосредственно в HTML-коде, а именно добавить ее в хедер каждой страницы, на которой необходимо разместить «favicon.ico»:
link rel=»Shortcut Icon»…..

В большинстве современных тем для Joomla, WordPress и прочих движков используются отдельные файлы (например “header.php”), где достаточно прописать 1 раз эту строчку в начале файла и все страницы будут автоматически подхватывать указанные в них настройки. Также существует расширенный вариант написания данной строчки:
link rel=»icon» href=»/favicon.ico»….

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



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

ЧЕЛОВЕК МОЖЕТ ВСЁ

ЕСЛИ НЕ БОИТСЯ ДОСТИЧЬ ЖЕЛАЕМОГО!
Здравствуйте! Вас интересует, как можно открыть бизнес с нуля? Где найти идеи для бизнеса? Где взять денег, чтобы открыть свой бизнес? Ответы на эти и другие вопросы Вы сможете найти на страницах моего сайта.

Получите новые статьи себе на почту

ВВЕДИТЕ АДРЕС СВОЕГО Email:

.

Бесплатный курс

startup