Как сделать и установить фавикон на сайт
Содержание:
- Часто задаваемые вопросы
- Каким должен быть файл с иконкой и где он должен находиться?
- Зачем нужен фавикон
- Что такое Favicon?
- МЕНЮ
- Как добавить на сайт?
- Больше
- Реклама
- Как добавить фавикон на сайт
- Способ №3. Восстановление файлов
- Предназначение фавикона
- Размеры фавикона
- Как удалить непрочитанное сообщение?
- Method 2 (Discouraged): Putting the favicon at a predefined URI
- Генератор фавикон онлайн (favicon ico online)
- Это фавикон
- Масштаб иконок Font Awesome и их цвет¶
- Как создать фавиконку?
- Фавикон и Фотошоп
- Как сделать иконки для сайта и зачем это надо? Бесплатная программа Icon Generator поможет создать иконку ico или favicon онлайн
- Зачем нужен favicon?
- Создание фавикона
- Заключение
Часто задаваемые вопросы
Каким должен быть файл с иконкой и где он должен находиться?
Исторически сложилось, что для сайтов используется формат .ico. Особенность этого формата состоит в том, что внутри одного .ico-файла может храниться несколько картинок размером от 16х16 до 64х64 (размер должен быть кратным восьми). Правда, для веб-сайтов в действительности используется только формат 16х16 — ни Яндекс, ни браузер не будут показывать другой размер иконки.
Соответствующий Файл в формате .ico можно создать с помощью графического редактора или множества доступных в сети онлайн-сервисов
Важно, чтобы данный файл имел название favicon.ico
Теоретически, сохранить файл можно в любой папке с файлами сайта, но крайне рекомендуется сохранять его именно в корневой директории вашего ресурса — чтобы он всегда был доступен по адресу vash-site.ru/favicon.ico, так как по умолчанию именно там его ищут поисковики и браузеры.
Зачем нужен фавикон
Посмотрим, для чего нужен файл favicon.ico и можно ли без него обойтись. Иногда на форумах новички спрашивают, дает ли использование
favicon.ico бонусы при продвижении. Фавикон никак не влияет на оптимизацию и ранжирование, тем не менее, у него есть другие плюсы.
Выделяет сайт в выдаче
Favicon привлекает внимание к сайту. Без иконки сниппет меньше заметен взгляду, кажется, что ему чего-то не хватает
Сайт без фавикона в выдаче среди прочих
С фавиконом сайт запоминается лучше
Иконка для сайта — элемент бренда. Пользователь лучше запомнит логотип из фавикона и свяжет его с брендом, если будет видеть его на сайте и других площадках.
Логотип компании в фавиконе
Упрощает поиск нужного сайта
В закладках и истории проще искать нужный сайт не по тексту заголовка, а по опознавательной картинке — знакомому фавикону.
Закладки в Google Chrome
Избавляет от ошибки в лог-файлах
Браузеры запрашивают файл
favicon.ico и если не находят строку с указанием фавикона, сервер отмечает в логах ошибку 404.
К примеру, такую:
Что такое Favicon?
Favicon для сайта – это одна из его отличительных особенностей. Это еще один шаг к созданию и использованию фирменного стиля. Favicon, говоря простыми словами, это иконка (изображение), которое выводится в браузере перед адресной строкой. Также favicon используется при добавлении страницы в закладки. Согласитесь, пользователю удобнее будет найти ваш сайт в закладках, если там будет изображена ваша «фирменная» иконка.
Думаю, каждый из вас замечал favicon, посещая любимые сайты. Выглядит это следующим образом (в браузере Google Chrome):
И для сравнения, отображение иконки в браузере Internet Explorer:
МЕНЮ
Панель иконокЗначок менюАккордеонВкладкиВертикальные вкладкиЗаголовки вкладокВкладки полностраничныеВкладки при наведенииВерхняя навигацияОтзывчивый верхний навигаторНавигация с иконкамиМеню поискаСтрока поискаФиксированная боковая панельАнимированные боковые панелиОтзывчивая боковая панельПолноэкранная навигация наложенияМеню Off-CanvasБоковые кнопки навигацииБоковая панель с иконкамиМеню с горизонтальной прокруткойВертикальное менюНижняя навигацияОтзывчивая нижняя навигацияГраницы навигацииМеню по правому краюСсылка меню по центруМеню равной шириныФиксированное менюСкольжение вниз по полосе прокруткиСкрыть меню при прокруткеУменьшить меню при прокруткеЛипкая навигацияНавигация на изображенияВыпадающее менюВыпадающий при кликеВыпадающее меню в навигацииВыпадающий список в боковой навигацииОтзывчивая навигация с выпадающимПодменю навигацияВсплывающее менюМега менюМобильное менюМеню занавесСвернуть боковой барСвернуть боковую панельПагинацияХлебные крошкиГруппа кнопокГруппа вертикальных кнопокЛипкий социальный барНавигация таблеткиОтзывчивый заголовок
Как добавить на сайт?
Добавление иконки для вашего ресурса является очень простым: достаточно лишь прописать необходимый html-код между тегами <head></head< вашего сайта.
Для добавления favicon html код является следующим:
<link rel="icon" href="http://vash-site.ru/favicon.ico" type="image/x-icon" /> <link rel="shortcut icon" href="http://vash-site.ru/favicon.ico" type="image/x-icon" />
После того, как добавите этот код на страницы своей странички, обновите кэш своего браузера (его нужно полностью стереть), и, если все сделано правильно и файл с картинкой загружен на сайт, то картинка начнет отображаться в браузере.
Правда, не ждите ее мгновенного отображения в поисковой выдаче Яндекса. Дело в том, что у этой поисковой системы для фавиконок существует отдельный робот, который может обновлять свою базу иконок на протяжении нескольких месяцев. В этой связи, ваша иконка может появиться в выдаче Яндекса как через две недели, так и через пару месяцев, волноваться по этому поводу не стоит.
Больше
Fullscreen VideoМодальные коробкиШкалаИндикатор прокруткиСтроки хода выполненияПанель уменийПолзунки диапазонаПодсказкиPopupsСкладнойКалендарьHTML вставкаСписокПогрузчикиЗвездвРейтинг пользователейЭффект наложенияКонтактные фишкиКартыКарточка профиляОповещенияЗаметкиМеткиКругиКупонОтзывчивый текстФиксированный нижний колонтитулЛипкий элементОдинаковая высотаClearfixСнэк-барПрокрутка рисункаЛипкий заголовокТаблица ценПараллаксПропорцииПереключение типа/не нравитсяВключить скрытие/отображениеПереключение текстаПереключение классаДобавить классУдалить классАктивный классУвеличить HoverПереход при наведенииСтрелкиФормыОкно браузераНастраиваемая полоса прокруткиЦвет заполнителяВертикальная линияАнимация значковТаймер обратного отсчетаМашинкуСкоро страницаСообщения чатаРазделить экранОтзывыЦитаты слайд-шоуЗакрываемые элементы спискаТипичные точки останова устройстваПеретаскивание HTML-элементаКнопка спуска на входеJS медиа запросыJS анимацииПолучить элементы IFRAME
Реклама
Как добавить фавикон на сайт
Процесс установки иконки favicon на сайт, как правило, начинается с её создания. Из-за того что требования к разрешению и формату иконки favicon на различных устройствах разные лучше её сначала подготовить в векторном формате svg (масштабируемой векторной графике). Это действие позволит, используя одно изображение (svg), получить в отличном качестве значок favicon как с разрешением 16×16 пикселей, так и с 512×512.
В качестве инструмента для работы с графикой svg можно использовать профессиональный свободный векторный редактор как Inkscape.
Подготовка изображения для favicon
Рассмотрим основные действия по подготовке изображения в формате svg для favicon.
Изображение, которое будет использоваться в качестве иконки favicon сайта, можно нарисовать, или получить через поиск картинок сервиса Google или Yandex. Поиск изображения (значка) желательно осуществлять в формате svg. Но если найти подходящей иконки в формате svg не удаётся, то можно выбрать и другой формат (например, png или jpg). А потом в программе Inkscape с помощью специального инструмента перевести её в векторную графику (векторизовать растр).
Например, рассмотрим, как с помощью программы Inkscape можно подготовить изображение (иконку двери) в формате svg для фавикон.
- Используя сервис «Google Картинки» находим подходящие изображение двери и сохраняем его на компьютер.
- Открываем программу Inkscape и создаём в ней новый файл.
- Устанавливаем странице любой размер в пикселях с одинаковыми значениями по ширине и высоте (например, 260×260).
- Импортируем найденное изображение двери. Если картинка имеет растровый формат (png, jpg), то дополнительно выполняем её преобразование в вектор (правая кнопка мыши на изображении -> Векторизовать растр).
- Размещаем изображение по центру области содержимого страницы (высоту изображения устанавливаем равной 260 пикселей с сохранением пропорций изображения). В горизонтальном направлении (если ширина изображения меньше 260 пикселей) выравниваем её по центру.
- Сохраняем файл (например, под именем ).
Примеры, подготовленных изображений (красная стрелка, лампочка, бабочка, часы, сердце и книга) для фавикон (для скачивания — в контекстном меню картинки выбрать пункт «Сохранить картинку как…»):
Генерация иконки favicon для всех платформ
Генерацию иконки фавикон для всех платформ (iOS, Android, PC, MAC и др.) осуществим онлайн на сайте http://realfavicongenerator.net/.
Для этого необходимо нажать на кнопку «Select your Favicon picture» и выбрать в диалоговом окне подготовленное изображение (door.svg).
После этого необходимо настроить цвета фона и ввести название приложения для операционной системы Android (Chrome).
После этого выбираем опцию «I will place …», которая говорит о том, что полученные файлы фавикон необходимо положить в корень сайта. Это действие обеспечит её поддержку в большинстве браузеров.
Далее нажимаем на кнопку «Generate your Favicons and HTML code».
После этого действия сервис realfavicongenerator.net осуществит генерацию иконки favicon и HTML-кода. Результат данной операции будет выведен на экран.
Установка фавиконки на сайт
После выполнения подготовительных операций приступим к подключению favicon на сайт. Все основные действия по добавлению иконки на веб-сайт приведены на странице «Install your favicon».
Основные шаги:
- Скачивание сгенерированного пакета (favicons.zip).
- Распаковка его в корень сайта
- Вставка HTML-кода представленного на странице в секцию head ваших страниц:
<link rel="apple-touch-icon" sizes="180x180" href="/apple-touch-icon.png"> <link rel="icon" type="image/png" href="/favicon-32x32.png" sizes="32x32"> <link rel="icon" type="image/png" href="/favicon-16x16.png" sizes="16x16"> <link rel="manifest" href="/manifest.json"> <link rel="mask-icon" href="/safari-pinned-tab.svg" color="#5bbad5"> <meta name="theme-color" content="#ffffff">
Например, на CMF MODX подключение favicon (HTML-кода) к страницам обычно осуществляется в чанке, с помощью которого выполняется формирование раздела head документа.
Способ №3. Восстановление файлов
Если структура системных файлов на вашем компьютере нарушена, это может вызывать различные ошибки, в том числе и ошибку печати. Для решения проблемы вам нужно будет провести некоторые манипуляции в «Командной строке». Просто следуйте дальнейшей инструкции:
-
Откройте перечень всех программ с помощью меню «Пуск».
-
Откройте системную папку «Стандартные».
-
Найдите в этой папке «Командную строку», затем щёлкните по ней правой клавишей мыши и нажмите на «Запуск от имени администратора». Если запускать консоль без администраторских полномочий, то её функционал будет значительно урезан.
-
С помощью «Командной строки» вы можете проверить целостность файлов вашей ОС. Для этого введите команду «sfc /scannow и активируйте её нажатием на клавишу «Enter».
-
Начнётся сканирование. Оно может занять достаточно много времени, так что запаситесь терпением. Данная команда проведёт не только сканирование, но и устранение проблем, связанных с отсутствием или повреждением системных файлов.
Если после окончания процедуры ошибка перестала вас беспокоить, то ваша миссия выполнена. Если даже это не помогло, то причина, вероятнее всего, заключается в наличии вредоносных файлов на вашем компьютере.
Предназначение фавикона
Итак, картинка возле заголовка сайта служит для идентификации. Это ее первоначальное предназначение: выразить сайт, назание которого мы видим, и выделить его в глазах остальных. Делается это максимально просто за счет использования графики: мы интуитивно воспринимаем информацию в картинках гораздо быстрее и легче, чем в текстовом формате. Фавиконы способствуют нам в этом. Но не стоит забывать, что размер фавикона минимален в глазах пользователя. Это не логотип в “шапке” сайта, который может содержать дополнительные сведения в виде надписей, каких-то уточнений или контактной информации. Все, что может быть изображено в иконке возле названия, должно максимально подходить под размер фавикона. А он, как уже было обозначено, просто миниатюрный (всего 16 на 16 пикселей).
На каком веб-сайте вы их загрузили? Замечательно и очень полезно! К сожалению, существующие страницы в карте сайта не отображаются. Тогда вы можете просто создать подстраницы в дополнение! Не могли бы вы дать мне совет. У вас есть видео, мой вопрос? Это должно было идти с новым построителем заголовков 2. В подменю «меню редактирования» точка «позиция в теме» не активна — у меня нет ни малейшего способа, внешнего вида меню или даже его точной позиции на стартовой странице. Больше нет позиции «Главное меню».
Вместо этого установите флажок «Пользовательское меню». Там вы вставляете элемент меню, а затем выбираете меню, которое вы хотите отображать в качестве главного меню! Звучит сложнее, чем есть. Скоро появится новое длинное видео на сайте! вы также можете протестировать непосредственно в своем домене, но установите плагин обслуживания, чтобы скрыть страницу. Однако перед покупкой есть решающий вопрос
Обратите внимание, что это не так. Несовместимый слайдер
Размеры фавикона
Итак, теперь поговорим о том, насколько большой должна быть картинка, которую мы видим рядом с названием сайта в поисковой выдаче. По умолчанию, как уже говорилось, ее размер составляет всего 16 пикселей (по каждой из сторон). Однако если вы попробуете редактировать это изображение в “Фотошопе”, сами убедитесь в том, насколько это неудобно. Поэтому рекомендуем работать с увеличенной картинкой, которую в дальнейшем можно будет просто сжать по краям и сохранить в требуемом формате.
Фэйвикон — это графический элемент, который, например, отображается в браузере в адресной строке, а отдельный веб-сайт дополнительно настраивается. Например, логотип компании может быть интегрирован. Ниже мы кратко покажем вам, как добавить соответствующий значок на веб-сайт. Если значок должен появиться на каждой странице сайта, его должно быть достаточно, чтобы загрузить его в основной каталог сайта. Этот код помещается в область заголовка веб-сайта, не только позволяя вам определять другое имя файла знака, но также вставлять значки только для определенных веб-сайтов.
- Чтобы создать такой файл, есть несколько инструментов.
- На веб-сайте вы найдете все необходимые значки, включая анимированную версию.
Конечно, нет недостатка в хороших и бесплатных значках, которые можно адаптировать и использовать для ваших целей.
Как удалить непрочитанное сообщение?
Если нужно убрать чат или его фрагмент у себя, то:
- Открой раздел «Мои сообщения» в левом меню.
- В поиске отобразятся все имеющиеся чаты-переписки с пользователями, курсор наведи на диалог с нужным юзером и возле него щелкни на крестик, который отобразится справа.
В новом окне следует подтвердить действие, щелкнув по кнопке «Удалить».
У собеседника останутся все твои переписки и вложения. Ранее ВК не позволял стирать свои сообщения у других пользователей и люди для этого искали различные программы и сервисы, которые зачастую оказывались мошенническими. Но сейчас такая функция стала доступной, как в Телеграм и прочих мессенджерах.
Чтобы удалить нежелательное сообщение пока его не прочитали, нужно быстро проделать следующие действия:
- Перейти к чату, где осталась важная информация, которую нельзя отдать в чужие руки.
- Выдели его так, чтобы сбоку появилась галочка, вверху нажми на значок «Корзина».
- В новом окне обязательно укажи параметр «Удалить для всех» и подтверди действие.
Только что удаленные записи можно восстановить. Если ты не успел обновить страницу, то вместо стертых текстовых фрагментов останутся надписи «Восстановить». Кликни на них, чтобы вернуть компоненты переписки обратно.
Method 2 (Discouraged): Putting the favicon at a predefined URI
A second method for specifying a favicon relies on using a
predefined URI to identify the image: «/favicon», which is relative to
the server root. This method works because some browsers have been
programmed to look for favicons using that URI. This approach is
inconsistent with some principles of Web architecture and is being
discussed by W3C’s Technical Architecture Group
(TAG) as their issue .
To summarize the issue: The Web architecture authorizes site managers
to manage their URI space (for a given domain name) as they see
fit. Conventions that do not represent community agreement and that
reduce the options available to a site manager do not scale and may
lead to conflict (since there is no well-known list of these
predefined URIs). One practical consideration illustrates the problem:
many users have Web sites even though they do not have their own
domain name. These users cannot specify favicons using the second
method if they cannot write to the server root. However, they can use
method one to specify a favicon since it is more flexible and does not
constrain the site manager to use a single favicon at a single place
on the site.
There are a few other well-known encroachments on URI space,
including the «robots.txt» file and the location of a P3P privacy
policy. The Technical Architecture Group is exploring alternatives
that do not impinge on URI space without license.
Генератор фавикон онлайн (favicon ico online)
Более того, создавая иконки в едином стиле, вы делаете их похожими друг на друга. Вместо этого используйте Руководство по стилю иконок от операционных систем. Начиная с ОС Windows XP, компания Microsoft вводит такие параметры, как перспектива, источник света и общий вид. Соответственно иконки для ОС Vista должны быть реалистичными, а источник света должен располагаться в левом верхнем углу, слегка перед иконкой.
В приложении для конференций Yugma логотип используется для всех пунктов стартового меню, так что здесь фирменная символика применена на все 100%. Сравните их с понятными иконками TuneUp Utilities 2008, которые отражают непосредственно свои функции.
Это фавикон
Если дословно перевести этот термин, то получится «любимое изображение». Это слово происходит от совмещения двух английских слов favorites, что значит избранный, и icon, то есть изображение или иконка.
Место размещения фавиконов – адресная строка веб-ресурса на вкладке браузера или список избранных закладок. В некоторых поисковых системах фавиконы располагаются возле ресурсов на страницах поиска. Например, в «Яндексе». Стоит также отметить, что алгоритмы поиска этой системы при поисковой выдаче сначала отдают предпочтение ресурсам, у которых есть иконка сайта.
Поэтому не нужно игнорировать значимость этого изображения. Пускай размер фавикона и маленький, он является брендом ресурса, привлекает пользователей и влияет на составление первого впечатления о сайте.
Масштаб иконок Font Awesome и их цвет¶
Иконки наследуют размер шрифта их родительского контейнера, чтобы соответствовать любому тексту, который может быть использован вместе с ними. Можно увеличить или уменьшить масштаб иконок относительно унаследованного размера шрифта с помощью таких классов, как fa-xs, span class=»attribute»>fa-sm, fa-lg, fa-2x и др.
Что касается цвета, он может быть установлен с помощью CSS свойства color. Просто необходимо установить иконки внутри элемента <div> и задать для него цвет в стиле, или просто установить стиль для элемента <i>.
Смотрите детали:
| Класс | Величина |
|---|---|
| fa-xs | .75em |
| fa-sm | .875em |
| fa-lg | 1.33em |
| fa-2x | 2em |
| fa-3x | 3em |
| fa-4x | 4em |
| fa-5x | 5em |
| fa-6x | 6em |
| fa-7x | 7em |
| fa-8x | 8em |
| fa-9x | 9em |
| fa-10x | 10em |
Также возможно добавить стиль непосредственно к размеру иконки, устанавливая font-size во внешнем стиле иконки или в стилевом атрибуте HTML элемента, который ссылается на иконку.
Как создать фавиконку?
- Самый простой способ — скачать в Сети. Благо, таких возможностей предоставлено с лихвой. Введите поисковый запрос «Скачать иконку сайта» и выберите, что Вам нравится.
- Можно нарисовать иконку самостоятельно. Если Вы владеете навыками работы с программой Photoshop, сделать это будет не сложно.
- Ну, и третий вариант, который я считаю оптимальным, — это использование онлайн-сервисов. Свою фавиконку я сделал именно таким образом. Поэтому позвольте представить Вам адрес этого онлайн-сервиса: //www.favicon.cc
Мне он понравился больше остальных.
Здесь можно нарисовать свою иконку или загрузить изображение с компьютера. Используя картинку с компьютера, подготовьте её, отредактировав таким образом, чтобы она была квадратной или сразу придайте ей размеры 16×16 пикселов. Это позволит избежать искажений. После создания иконки, скачайте её на компьютер. Полученное изображение имеет расширение .ico.
Файл иконки загрузите в корневую директорию вашего сайта. И это всё! Более никаких действий от Вас не требуется.
Но, если Вы используете устаревшие браузеры, то в разделе HEAD прописывается следующий код:
<link rel="shortcut icon" href="/favicon.ico" type="image/x-icon">
Где favicon.ico — это файл иконки в корне сайта.
Перезагрузите страницу и проверьте, появилась ли иконка в установленном месте. На сайте она появляется сразу же, а в Яндекс.Вебмастере только после индексации.
Код понадобится так же в случае, если Вы пожелаете использовать изображение с другим расширением (допускается png и gif) или будете ставить для каждой страницы отдельный значок. В этом случае в секцию HEAD страницы нужно вставлять такой код:
<link rel="shortcut icon" href="/image.png" type="image/png" />
Где image.png — файл иконки.
Как уже было оговорено, форматом файла может быть как png так и gif. В примере изображение имеет расширение png. В случае формата gif, в коде нужно сделать соответствующие замены (в двух местах png на gif).
Фавикон и Фотошоп
Можно создать искомый файл, используя только Фотошоп. Подобрав или предварительно отрисовав нужное изображение, следует нажать «Сохранить как» и из списка форматов для сохранения выбрать .ico.
Может получиться, что версия программы обработки изображений не будет поддерживать этого формата. В таком случае следует поискать и скачать плагин формата ico. Его нужно распаковать в папку Plug-InsFileFormats. После этих нехитрых действий возможность сохранения в данном расширении будет доступна.
Небольшой совет. Практически все браузеры стандартизируют иконки сайтов до размера 16 на 16 пикселей. Учитывая это, не нужно создавать высокохудожественные полотна — их просто-напросто не будет видно.
Формат ico используется наиболее часто, так как он поддерживается всеми популярным браузерами
Можно сохранять изображения и в других графических форматах, но важно помнить, что некоторые браузеры не будут отображать такую иконку
Как сделать иконки для сайта и зачем это надо? Бесплатная программа Icon Generator поможет создать иконку ico или favicon онлайн
Что такое иконка – прекрасно известно не только любому владельцу или разработчику сайта, но и обычному компьютерному пользователю. В какой бы программе вы не работали, будь то специализированное приложение или обычный Word – вы везде можете увидеть множество иконок, отображающих создание нового документа, удаление, сохранение и прочие действия. Да что там! Взять даже обычный рабочий стол ПК – у каждого здесь найдется пара иконок «Мой компьютер», «Мои документы», «Корзина» и т.д.
В Microsoft Windows для хранения иконок используется формат ICO. ICO-файл содержит в себе один или несколько значков, для каждого из которых отдельно задается цветность и размер. Как правило, можно задать любой размер, но чаще всего используются иконки ICO 16х16, 32х32, 48х48 пикселов. Структура иконки ICO близка к формату BMP, но имеет одно отличие – наличие дополнительного изображения-маски, которая накладывается на задний план для прозрачности рисунка.
В общем, иконки ICO мы видим повсюду. Но у многих пользователей возникает резонный вопрос: зачем эти значки нужны? Что такое favicon.ico?
Зачем нужен favicon?
Favicon — это иконка, которая по умолчанию имеет формат 16 на 16 пикселей и отображается в верхней части вкладки браузера рядом с названием сайта/страницы. Если иконка не задана или задана не правильно, то тогда в браузере рядом с названием сайта просто рисуется значок самого браузера (например, значок Firefox или Google Chrome).
Однако в действительности роль этой картинки состоит не только в украшении браузера. Дело в том, что эти картинки выводятся в поисковой выдаче Яндекса (если иконка не задана — показывается пустое место). Представьте ситуацию, что Яндекс предложит пользователю на его запрос два примерно одинаковых сайта, но к одному из них будет дополнительно проставлена иконка — на какой сайт более вероятно перейдет пользователь? Конечно, в первую очередь он перейдет на сайт, предложенный первым по списку, но как раз именно наличие картинки, которая всегда более приятна пользователю, чем текст, может привлечь посетителя именно на ваш сайт.
Кроме того, нельзя исключать и того обстоятельства, что наличие или отсутствие фавиконки может учитываться Яндексом как один из незначительных факторов ранжирования. Достоверно это неизвестно, но если Яндекс учитывает более 300 различных факторов при ранжировании сайтов в поисковой выдаче, то, быть может, наличие иконки также может учитываться при определении качественности ресурса.
Таким образом, если вы делаете хороший и качественный сайт, то иконка у него обязательно должна быть проставлена.
Про то, как сделать иконку ico, у нас есть отдельная статья (ссылка), потому перейдем сразу к рассмотрению вопроса о том, каким должен быть фавикон.
Создание фавикона
Онлайн-сервисы
Нарисовать фавикон можно в онлайн-сервисах. Достаточно просто ввести в поисковик соответствующий запрос, после чего вашему вниманию будет представлен целый перечень сайтов, которые могут помочь вам реализовать задуманное.
Например, Favicon.by. Он позволяет вам нарисовать логотип при помощи простых инструментов. Сервис создает иконку в формате ICO.
Как видите, здесь все интуитивно понятно. Выбираем карандаш, настраиваем цвет и рисуем. Если вашему логотипу нужна какая-то основа, то вы можете воспользоваться “Импортом из файла” и “Импортом с сайта”.
Как только мы закончим наши художества, прокручиваем страницу вниз и скачиваем нашу картинку.
Обратите внимание на левую часть окна “Ваш результат”. Там вы посмотрите, как будет выглядеть ваша иконка во вкладке браузера
Все остальные генераторы работают по схожему сценарию. Точно так же выбираем цвет, рисуем при помощи простых инструментов, а после – скачиваем к себе на жесткий диск.
Adobe Photoshop
Если у вас есть данный графический редактор, то создание логотипа можно вывести на более качественный уровень. В основном, конечно, все и делают иконки через фотошоп или аналогичные редакторы. Предыдущими вариантами пользуются новички. Крупные порталы и сайты больших компаний вряд ли будут использовать картинку, нарисованную в онлайн-генераторе.
Итак, у нас есть два варианта:
- Сделать фавикон из картинки (логотипа компании или других).
- Просто выбрать шрифт и сделать его в виде буквы.
Второй вариант используется наиболее часто. Наверное, больше половины сайтов просто создают квадрат размером 16 на 16 или 32 на 32, выбирают шрифт (как правило, Roboto или Open Sans), цвет, соответствующий гамме проекта. И все – favicon готов.
Открываем Фотошоп, после чего сразу идем в “Меню” – “Создать”.
Тут мы можем выбрать размер – в пикселях или любой другой метрический системе. Здесь же – содержимое фона. Рекомендую выбирать прозрачный фон, который в случае чего может быть залит абсолютно любым цветом.
Размер должен быть 16 x 16 или 32 x 32 (в пикселях). Все остальное – по вашему усмотрению, но я бы советовал выставить так, как показано на скриншоте.
Нажимаем кнопку “Создать”, после чего у нас перед глазами появляется область с заданным размером. Сейчас мы будем творить.
Разберу самый популярный вариант. Как я уже и говорил, это фавикон в виде буквы. Обычно первой из названия проекта. Кликаем на “Т” в панели инструментов, после чего в любой участок внутри квадрата.
Теперь вводим любую букву с клавиатуры. Мы можем уменьшить или увеличить ее, поменять цвет, добавить тени или расположить в любой части созданного нами квадрата. Давайте сделаем лого в виде буквы “А”.
Цвет я регулировал при помощи специального инструмента в правом верхнем углу. Здесь вы можете выбрать абсолютно любой вариант при помощи мыши. В верхней панели также есть инструменты для выбора шрифта и размера. На картинке 32 x 32 оптимальным размером буквы будет 8 – 10 Пт.
Если зажать левую кнопку мыши на букве, то можно передвигать букву относительно границ квадрата. Когда вы разместите ее в центре, программа покажет вам соответствующее уведомление в виду перекрестия внутри квадрата. Как только вы отпустите кнопку, оно пропадет.
Если вы хотите добавить в свой фавикон что-то особенное, то можно воспользоваться инструментом “Стили”. Для этого перейдите в соответствующий раздел, как это показано на скриншоте.
Тут можно придать своей букве интересный вид. Например, настроить тени, сделать обводку или же градиентный цвет.
Кстати говоря, не пугайтесь, если при приближении ваша буква будет выглядеть как квадратное нечто. Если вы уменьшите масштаб до 100 % она примет свой естественный, четкий вид. Во вкладке картинка тоже будет выглядеть хорошо.
Далее нам нужно сохранить наше творение. Идем в “Файл” – “Сохранить как”. Выбираем нужный формат (PNG, GIF или JPEG) и название – favicon, нажимаем “Сохранить”.
Заключение
У человека, прочитавшего всё вышеизложенное, может сложиться впечатление, что всё это очень сложно и нудно. Отчасти это так. Но к счастью, есть сервисы, которые делают всю эту работу за нас. Например, http://realfavicongenerator.net. На этом ресурсе можно сгенерировать все нужные иконки и получить код для вставки на сайт.
Вот и всё. Удачи в сайтостроении!
Об авторе:
Меня зовут Андрей Золкин. Из более, чем пятнадцати лет работы в сфере информационных технологий, десять лет работаю с системами, базирующимися на открытом исходном коде. На страницах сайта Aitishnik.Ru веду блоги по CMC Joomla и Debian GNU/Linux.
