Как создать иконку favicon для сайта онлайн - есть видео урок

18 марта, 2014 Максим Метелев 7422 просмотров 4 комментария

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

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

И если у вашего проекта она отсутствует, то немедленно ее поставьте. С точки зрения оптимизации и продвижения блогов, этот момент очень важный. Он один из 850 факторов ранжирования великой и ужасной системы Яндекс. Поэтому не будем отступать от общих правил вебмастеров и воспользуемся всеми инструментами для создания красивой иконки для вашего сайта

Вот так будет выглядеть иконка

делаем иконку для сайта

Именно так смотрится иконка на подавляющем большинстве браузеров. Теперь я расскажу как ее сделать своими руками.

Содержание [скрыть]

1 Подготовка изображения в фотошопе
2 Сервис по созданию фавикона
3 Если не отображается фавикон на сайте
- 3.1 Рекомендую ознакомиться с этими статьями:

Подготовка изображения в фотошопе

Допустим мы хотим разместить иконку повара и наш будущий проект это кулинарный СДЛ сайт. Вот исходник изображения

исходник для иконки

А нам на выходе нужно получить маленькую картинку размеров что-то около 15 на 15 пикселей.

Сервис по созданию фавикона

Для создания подобных миниатюрных картинок в сети интернет есть один очень полезный и замечательный сервис, облегчающий работу всем вебмастерам — www.favicon.cc

Вот его небольшой интерфейс.

В кратце расскажу про левую панель:

Create new Favicon (создание фавикона с нуля, т.е можно нарисовать его прямо в редакторе)
Import Image (импортировать изображение, если мы хотим уменьшенный вариант иконки)
Latest Favicons (набор уже готовых решений, вообще «заморачиваться» не стоит)
Top Rated Favicons (рейтинг самых крутых картинок-иконок)
Login (войти под своим именем в сервис)
Register (регистрация нового пользователя)

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

Радио кнопку с полем «сохранить пропорции» оставляем как есть, не переключаем на другое и нажимаем загрузить.

Далее идет процесс обработки нашей картинки и приведение ее к нужному формату фавикона.

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

А вот так мы можем увидеть ее как она будет смотреться в браузере

Далее нам нужно только сохранить нашу иконку, нажав на кнопку Download Favicon

Теперь нам нужно загрузить нашу миниатюру в корень сайта на хостинге. Я пользуюсь СпейсВебом (sweb.ru) и потому буду показывать на примере этой админ панели. Заходим в файловый менеджер

Выбираем нужную папку. В моем случае с кулинарным сайтом это будет папка recept

Небольшой нюанс. Внутри любой вашей папки с сайтом имеется еще одна папка. Она называется либо public_html или WWW. Открываете одну из них и уже туда загружаете картинку

Вот где будет расположен наш файл

А теперь финальная дробь. Смотрим как отобразилась наша иконка на сайте через браузер. В моем случае это Хром

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

Если не отображается фавикон на сайте

Тому может быть несколько причин.

Во-первых, вам нужно почистить куки (cookie) браузера. Вполне возможно, что ваш кэш забит и не дает нормально отображаться фавикону. Как почистить кэш браузера вы можете узнать в видео ниже. Там я все подробно рассказываю и показываю
Во-вторых, вполне возможно вам придется сохранить иконку размером 16*16 пикселей в формате .jpg и также вставить ее в корень сайта. Но! Ниже я прикрепляю код, который Вам нужно будет вставить в шаблон header.php между тегами <head></head>

Вот он этот код:

<head><br> Здесь будет много всяких разных служебных тегов и скриптов<br> <link rel="icon" href="/favicon.jpg" type="image/x-icon" /><br> <link rel="shortcut icon" href="/favicon.jpg" type="image/x-icon" /><br> </head>

1	<head><br> Здесь будет много всяких разных служебных тегов и скриптов<br> <link rel="icon" href="/favicon.jpg" type="image/x-icon" /><br> <link rel="shortcut icon" href="/favicon.jpg" type="image/x-icon" /><br> </head>