Favicon — что это такое, как создать фавикон и установить на свой сайт, онлайн-генераторы иконок

Favicon — что это такое и как его создавать

Favicon для сайта является одной из его отличительных черт. Это еще один важный шаг к созданию и применению фирменного стиля.

Favicon, короче говоря, это иконка (изображение), которое выводится в браузере перед адресной строкой. Также фавикон применяется при добавлении страницы в закладки.

Стоит согласиться, пользователю намного удобнее будет отыскать ваш сайт в закладках, если там будет изображена ваша «фирменная» иконка.

Для чего нужен favicon

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

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

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

Для чего предназначен инструмент «Генератор Favicon»?

Посредством его вы сможете создать уникальную иконку для своего веб-ресурса.

Для этого следует только загрузить в специальном поле исходную картинку, размер которой не обязан превышать 150 Кб, выбрать подходящий размер будущей иконки и нажать кнопку «Конвертировать».

Полученный значок в формате ICO можно применять для размещения в Сети: он будет совместим с огромным количеством современных интернет-обозревателей. Скачать generator сейчас можно без проблем в интернете. также там представлена большая коллекция иконок для сайта.

Онлайн сервисы создания Favicon

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

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

Как установить фавикон на сайт html

Чтобы добавить ваш новую иконку на веб-страницу, нужно установить ее на сервер в ту же папку, где находится интернет-старница. Это те данные, которые сначала каждый браузер будет искать для загрузки.

Если он не сможет отыскать иконку, то проверит каталог верхнего уровня сервера. По этому поводу, если вы установите его там, сможете иметь значок по умолчанию для всех страниц вашего домена.

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

В заключение

Online Favicon Generator

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

Для создания фавикона вы можете использовать самые разные способы. Создание иконок через онлайн сервис является самым лучшим вариантом с точки зрения качества, затрат времени и стоимости.

Источник: https://topodin.xyz/favicon-chto-eto-takoe-i-kak-ego-sozdavat/

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

Автор: Alexander Wayne

21 сентября 2018 в 15:03

Всем привет!

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

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

Что такое фавикон и почему он важен для СЕО?

Фавикон (favicon) – значок веб-сайта размером 16 x 16 (или 32 x 32, но не более). Он отображается во вкладке браузера. Выглядит это так:

Также иконка отображается в поисковой выдаче, и если ваш сайт не имеет собственного фавикона, то пользователи вряд ли будут обращать на него внимание. Особенно более опытные, которые действительно ценят каждую мелочь.

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

Подведем небольшие итоги:

Favicon влияет на поведенческие факторы и кликабельность в выдаче.
Поисковые роботы также могут учитывать наличие или отсутствие фавикона.
Такой технический недочет может привести к падению трафика.

Иными словами, если у вас вообще возникает вопрос: добавить favicon или же нет, то ответ очевиден – обязательно добавлять.

Теперь давайте разберемся в том, как можно эту самую иконку нарисовать. Сделать это можно при помощи различных онлайн-сервисов, редакторов.

Где скачать готовый вариант?

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

Просто вводим в поисковик нужный запрос, что-то типа “Скачать готовый favicon”, после этого вам будет представлено огромное количество самых разных вариаций.

Скачиваем картинку себе на ПК, а после устанавливаем на сайт. Все просто. Они доступны абсолютно бесплатно, никто вас ругать не будет. Хотя если речь идет о компании, пусть даже мелкой, то при обнаружении чужого логотипа могут возникнуть неприятные казусы.

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

Но я еще раз повторюсь, что лучше будет создать фавикон самостоятельно.

Создание фавикона

Онлайн-сервисы

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

Например, 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, нажимаем “Сохранить”.

Установка на сайт

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

Самый простой и доступный – через корневой каталог. Его мы рассмотрим в первую очередь.

С помощью корневого каталога

Для начала нам нужно конвертировать файл в ICO. Это можно сделать при помощи любого онлайн-сервиса, достаточно ввести в поисковую строку: “Конвертация в ICO” или “PNG в ICO”. Загружаем туда фотографию, получаем favicon.ico.

Теперь мы должны загрузить этот файлик в корень нашего сайта. Можно сделать это при помощи FTP-клиента или файлового менеджера.

Корень сайта, как правило – public_html. Независимо от платформы. Но в некоторых темах могут наблюдаться проблемы с отображением фавиконки. Чтобы пофиксить их, мы должны вручную добавить в header.php следующий код:

Для этого идем во “Внешний вид” – “Редактор”, находим в боковой панели нужный файл и кликаем для редактирования. Код мы должны вставить внутри тега .

Теперь проверьте отображение фавиконки во вкладке браузера, для этого перейдите на любую страницу сайта. При необходимости очистите кэш браузера.

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

Через тему WordPress

Заходим в настройки темы, используя верхнюю панель на сайте (“Внешний вид” – “Темы”). Далее идем в “Свойства сайта”.

Вот тут-то мы и настраиваем фавиконку. Просто нажимаем на “Выбрать/изменить изображение”, далее откроется менеджер, через который мы и загружаем нашу картинку.

Плагины

Также есть возможность сделать это с помощью плагинов, но это не рекомендуется из-за нагрузки на CMS.

Идем в “Плагины”, выбираем “Добавить новый”. Откроется страница каталога, где в окно поиска мы должны ввести ключевое слово – Favicon. Нашему взору будет представлено большое количество всевозможных плагинов. Все они работают примерно одинаково, но я все же позволю себе объяснить, как все это делается, на примере одного из самых популярных – All in One Favicon.

Нажимаем на кнопку “Установить”, а после активируем нужное расширение.

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

Для каждого формата здесь есть соответствующая вкладка. Допустим, вы создали иконку в формате GIF и хотите, чтобы именно она отображалась во вкладке. Соответственно идем во вторую по счету строку, нажимаем “Загрузить” и в файловом менеджере выбираем наш файл. То же касается и других форматов.

Отдельного внимания заслуживает вкладка “Apple Touch Icon Frontend”. В ней вы сможете задать иконку для устройств от Apple.

В отличие от обычного фавикона, логотип для Айфонов или Макбуков имеет большее разрешение и качество. То есть вам, чтобы загрузить картинку, придется создать еще один вариант.

Уже в разрешении 512 x 512 или 1 024 x 1 024. Однако для мелких сайтов, в принципе, нет нужды проделывать подобное.

Заключение

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

Многие вебмастеры, к сожалению, упускают этот момент. Вместе с ним из вида выпадают и другие, не менее важные нюансы. Если вы новичок и готовы учиться создавать крутые сайты и зарабатывать на них, то я приглашаю вас на курс Василия Блинова “Как создать блог”.

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

С уважением, Alexander Wayne

Источник: https://iklife.ru/sozdanie-sajta/kak-sdelat-i-ustanovit-favikon-na-sajt.html

Favicon — что это такое, как создать фавикон и установить на свой сайт, онлайн-генераторы иконок

Здравствуйте, уважаемые читатели блога KtoNaNovenkogo.ru. Разговор в сегодняшней статье пойдет о так называемых иконках Favicon.ico. Мы разберемся, что такое фавикон, почему в обязательном порядке его нужно устанавливать на своем сайте и как самому создать иконку нужного размера.

Чуть ранее я уже писал про то, где можно взять иконки для сайта и упомянутые там сервисы (в той статье) можно использовать для поиска подходящих вариантов Favicon.

ico, но есть и специальные онлайн-генераторы (favicon generator), как отечественные, так и зарубежные, а также специализированные коллекции и галереи с подходящими по размеру фавиконами.

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

Что такое Фавикон и зачем он нужен для сайта

По сути Favicon — это обычный значок (изображение небольшого размера 16 на 16 пикселей, иконка). Но для владельца сайта он может очень много значить. Однако, обо всем по порядку.

Само по себе название «фавикон» произошло от английского словосочетания FAVorites ICON, означающего — иконка для «Избранного» (так называются закладки в браузере Internet Explorer). Зачем она нужна? Очевидно, что так гораздо проще отыскивать взглядом нужную вам закладку, ибо легче искать знакомый значок, чем читать названия сайтов.

Раньше картинку Favicon вы могли видеть в адресной строке браузеров, перед URL-адресом открытой страницы (в моем IE9 так до сих пор и осталось), но после того, как все браузеры стали поддерживать вкладки, то данный значок мигрировал как раз на эти самые вкладки. Зато, когда их открыто очень много, именно фавиконы позволяют понять какая вкладка какому сайту соответствует:

Само собой, что и свое изначальное значение Favicon.ico не утратил, он по-прежнему используется в закладках всех браузеров для быстрого визуального поиска нужного сайта среди тысяч закладок (взгляните на верхнюю панель вашего обозревателя и убедитесь в этом).

А также, что немаловажно, поисковая система Яндекс отображает Favicon в своей выдаче (результатах поиска) для каждого ресурса, если у него этот значок будет иметься (был добавлен и правильно настроен владельцем сайта, а робот Яндекса успел уже его проиндексировать).

У Яндекса имеется специальный бот для индексации фавиконов под названием YandexFavicons (у них даже апдейты бывают, после которых и имеет смысл проверять наличие нового и обновленного Favicon.

ico рядом с вашим сайтом в выдаче), в задачу которого входит сбор и обновление иконок для всех сайтов.

Робот Яндекса, специализирующийся на их индексации, посещает сайты с периодичностью от нескольких дней до одного месяца (апы, соответственно, очень редкие получаются).

Поэтому не стоит ждать того, что недавно созданный в online generator или сделанный самостоятельно фавикон сразу же появится в поисковой выдаче Яндекса рядом с описанием вашего ресурса.

Должно будет пройти какое-то время. Яндекс, после того как найдет Favicon.

ico у вас на сервере, преобразует ее в формат PNG (из графического формата ICO) и с этого момента фавикон вашего сайта будет доступен по адресу:

http://favicon.yandex.net/favicon/ktonanovenkogo.ru

Естественно, что для проверки своего сайта вам нужно будет в конце приведенной ссылки вместо URL-адреса моего блога написать свой.

Если у вашего проекта Favicon еще не настроен, то самое время задуматься о его создании и установке, т.к. это позволит вам привлекать большее количество посетителей с страниц Яндекса (из поисковой выдачи), ибо рядом с адресом вашего проекта будет красоваться эта иконка, побуждая пользователей выбрать вас, а не соседа по выдаче).

В принципе, Favicon.ico нужного размера вы можете сделать и сами, так же у вас будет возможность создать его с помощью онлайн генераторов (из загруженных вами картинок) или же просто скачать целиком их online коллекцию или галерею.

В общем, выгода создания яркого и запоминающегося значка (мини-логотипа) для своего сайта очевидна (прежде всего это узнаваемость «бренда» и все хорошее, что из этого следует).

Осталось только понять, как его создать и поставить на свой сайт, а также, что из себя должен представлять этот графический файл? На второй вопрос ответить проще — по определению Favicon должен быть сохранен в формате ICO, размещен в корне сайта (хотя, можно и другом месте), а его размер при этом должен составлять 16 на 16 пикселей.

В принципе, чтобы создать favicon, вовсе не обязательно использовать какие-либо специальные онлайн генераторы, хотя это довольно удобно и просто. Можно попытаться сделать его в Photoshop, но он по умолчанию, к сожалению, не умеет сохранять изображения в формате ICO. Поэтому для того, чтобы научить Фотошоп работать с ICO, нужно будет установить специальный плагин.

Но если с Фотошопом вы не на дружеской ноге (равно как и с его бесплатной онлайн версией), то вам будет гораздо удобнее воспользоваться одним из многочисленных онлайн-сервисов приведенных ниже. При этом в некоторых из них вы сможете полностью с нуля нарисовать новую иконку, а в других сможете переделать уже имеющуюся у вас картинку (которая вас устраивает) в формат фавикона.

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

Как создать Favicon онлайн и где можно скачать их коллекцию

Давайте я сначала приведу примеры сервисов (так называемых favicon generator), где можно не имея особых навыков сконструлить вполне себе достойный мини-логотип для своего сайта, ну, или хотя бы автоматом переделать подходящую картинку в формат, необходимый для загрузки фавикона на сайт.

Faviсon.cc — довольно-таки удобный онлайн-генератор фавиконов. Используя его вы можете, например, создать свою иконку с нуля (полный эксклюзив), нарисовав ее попиксельно. Для этого вам нужно будет нажать в левой части окна сервиса на кнопку «Create New Favcon».
В центре страницы генератора расположена область, где каждый квадратик является пикселем вашей будущей фавиконки. Ваша задача состоит в закрашивании разными цветами этих квадратиков.

Для закрашивания одного квадратика цветом нужно поставить галочку в правой части окна сервиса в поле «Color Picker», выбрать на расположенной там же палитре нужный цвет и щелкнуть по нужному квадратику.

Для удаления неправильной закраски поставьте галочку в поле «transparent» и щелкните по квадратику, в результате чего он станет бесцветным (прозрачным).

Для перемещения пикселя по холсту генератора вам нужно будет поставить галочку в поле «move». Результат своих трудов в реальном масштабе вы сможете наблюдать в области «Preview» под холстом.

Если созданный вами Фавикон вам подходит, то нажмите на кнопку «Download» для его сохранения к себе на компьютер.

В результате вы получите графический файл, который сможете затем скачать и загрузить на сервер хостинга.

Теперь вы знаете как сделать мини-логотип для своего сайта с нуля.

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

Картинка может быть абсолютно любого размера и формата. Для загрузки файла значка на онлайн сервис вам нужно будет нажать в левой части окна сервиса на кнопку «Import Image».

В открывшемся окне, нажав на кнопку «Обзор», найдите на своем компьютере подходящее изображение. Затем выберите, что делать с соотношением сторон вашей картинки при преобразовании его в формат 16 на 16 (квадрат).

Это актуально, если загружаемое вами изображение не квадратное. В этом случае возможны два варианта: оставить соотношение сторон неизменным (Keep dimensions), либо преобразовать картинку к квадратному виду (Shrink to square icon).

Во втором случае изображение будущей фавиконки будет искажено по одной из осей.

Для загрузки в online generator и преобразования вашей картинки нужно будет нажать на кнопку «Upload». Созданная из него Favicon.ico будет доступна к редактированию точно так же, как и нарисованная вами. Когда закончите колдовать над шедевром, то нажмите на кнопку «Download» для того, чтобы скачать его к себе на компьютер.

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

Для того, чтобы посмотреть имеющиеся в галереи экспонаты, вам нужно будет нажать в левой части окна либо на кнопку «Latest Favicons» для просмотра коллекций отсортированных по дате создания, либо на кнопку «Top Rated Favicons» для просмотра галерей отсортированных по рейтингу.
Favicon.

ru — когда-то этот сервис был значительно проще описанного выше онлайн генератора, но последнее время он стал практически его аналогом, но только на русском языке. Favicon.

ru позволяет не только преобразовывать любое имеющееся у вас изображение (на компьютере или в интернете) в формат ICO с размером 16 на 16 пикселей, но и дает возможность нарисовать его с нуля попиксельно.

Этот вариант online favicon generator примечателен, пожалуй, только тем, что он отечественный.

Поэтому он и попал в эту статью. Итак, для работы с ним вам нужно на главной странице вверху нажать на кнопку «Выберите файл» и указать путь до нужного изображения на вашем компьютере. Загруженное и преобразованное в формат Favicon.ico изображение можно будет подкорректировать, а затем сохранить к себе на компьютер. Все просто и удобно.
Logaster.ru — это онлайн генератор логотипов, но помимо логотипов он еще создает и фавикон. В отличии от всех других сервисов, вам не нужно рисовать дизайн фавикона или конвертировать ее с логотипа. Для того, чтобы создать фавикон, сначала необходимо ввести название сайта или компании и выбрать вид деятельности. Сервис предложит готовые к использованию несколько десятков шаблонов фавикона. Более подробно, как создать фавикон, можно прочитать здесь. После создания Favicon.ico, вы можете скачать файл к себе на компьютер в формате ICO или PNG.

После этого вам только остается нажать на кнопку «Создать». На открывшейся странице вы увидите ссылку для скачивания получившегося фавикона.

Подборка онлайн генераторов, коллекции и галереи фавиконов

Если вам по каким-либо причинам не понравились описанные выше favicon generator, то могу предложить попытать счастье на одном из следующих бесплатных онлайн-сервисов:

FaviconGenerator — позволяет преобразовать в нужный формат фавикона любое загруженное с вашего компьютера изображение (загружать можно картинки в формате PNG, JPEG, JPG, GIF).
AntiFavicon — достаточно интересный Favicon Generator. На нем вы можете создать фавикон с надписью. Текст надписи вам нужно будет ввести в поля «Top text» и «Bottom tex», а цветовую гамму — настроить в области «Colors».
FavIcon from Pics — еще один простой онлайн сервис — указываете путь до картинки на своем компьютере, преобразуете и скачиваете результирующий файл в формате ICO и GIF.
Iconj — примечательно то, то созданную иконку вы можете либо скачать, либо оставить на сервисе и получить на этот файл ссылку
DeGraeve — достаточно мощный Favicon Generator, по функционалу похож на рассмотренный ранее Faviсon.cc. Здесь тоже можно сделать все либо с нуля, либо загрузить изображение, которое в последствии можно подкорректировать и скачать уже в формате ICO подходящего размера.
Generator — позволяет как генерировать фавикон из загруженного изображения, так и создать ее с нуля в специальном редакторе.
Онлайн редактор иконок favicon.ico — ну, как бы, все при нем — и создание фавиконов с нуля, и доработка уже имеющегося изображения.
Online Favicon — очень функциональный инструмент для создания и редактирования мини-логотипов
Free Favicon Generator — на случай, если ничего из выше предложенного списка вас не устроит.
Фавикон-генератор — простенько и со вкусом…

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

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

Если у вас нет желания или возможности (вы не художник и ни когда им не были), то проще всего будет попробовать поискать в галереях с коллекциями бесплатных фавиконов:

Галерея иконок для сайта favicon.ico — более чем 15000 мини-логотипов для вашего сайта на любой вкус и цвет
Iconj — достаточно большая коллекция значков, разработанных другими людьми и выложенных в общий доступ
Favicon.cc — 55 тысяч различных вариантов на все случаи жизни. Имеются также анимированные фавиконы, которые правда будут видны только в браузере FireFox
The Favicon Gallery — еще чутка подходящих по размеру иконочек

Если вы знаете еще какие-то подобные ресурсы, то я добавлю ваши ссылки в этот список.

Как установить Favicon на сайт и прописать путь до него

Ваш браузер и поисковый робот Яндекса будут искать фавикон прежде всего в корневой папке вашего сайта.

Поэтому можно просто подключиться к сайту по FTP и загрузить в его корневую директорию (обычно это папки public_htm или htdocs) ваш файлик Favicon.ico (лучше его название писать с маленькой буквы).

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

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

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

Если дело не в кэше браузера, то это значит, что для вашего сайта задано другое место для favicon, отличное от корневой папки. Как это проверить?

Источник: https://KtoNaNovenkogo.ru/seo/favicon-favikon-sozdanie-ikonki-favicon-ico-i-razmeshhenie-ee-na-svoem-sajte.html

Фавикон для сайта: создание и установка

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

Фавикон (favicon) – это маленькая иконка размером 16х16 или 32х32 пикселя, в которой, как правило, помещают основной логотип или первую букву из названия компании. Отображается во вкладке браузера рядом с названием страницы сайта и в поисковой выдаче слева от позиции сайта.

Основные плюсы

Улучшает вид сайта в поисковой выдачеОчень хорошо это видно на изображении, представленном выше. Сайты, у которых присутствует иконка, не только более заметны в поиске, но и вызывают больше доверия у пользователей.
Узнаваемость сайтаФавикон повысит узнаваемость вашего бренда в Интернете. Также при желании повторно посетить ваш сайт, пользователь легко сможет найти его в закладках или истории браузера, просто кликнув по знакомой иконке.

Как создать и установить фавикон для сайта?

В современных браузерах не обязательно указывать ссылку на иконку в коде, они автоматически пытаются найти изображение с расширением .ico в корне сайта. Но если ваш фавикон находится, например, в папке шаблона или темы, то можно воспользоваться специальным кодом.

Данная строчка ‹link rel=”icon” type=”image/png” href=”/шаблон/favicon.ico” /› вставляется в код сайта после тега ‹head› и указывает браузеру и поисковикам, откуда брать иконку.

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

Также, если у вас совсем нет изображения для иконки, можете воспользоваться сервисом Логастер. Онлайн-генератор позволяет создать логотип, а потом на основании этого логотипа – создать фавикон для сайта.

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

На основании логотипа сервис может сгенерировать несколько десятков возможных вариантов фавикона.

Получившиеся варианты можно скачать в формате .ico файла и загрузить на свой сайт. В общем, онлайн-сервис помогает получить качественный фавикон не потратив при этом много времени.

Почему у моего сайта не отображается иконка в поиске?

К сожалению, самостоятельно нельзя добавить фавикон в поисковую выдачу Яндекса. Добавление происходит только после специального апдейта Favicon, который происходит примерно раз в два месяца.

Вывод

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

Попробуйте создать иконку сами, а если не получится, обращайтесь к нам! Добавление фавикона нашими специалистами стоит 750 руб. Полный список дополнительных услуг и цены на них смотрите здесь »

Спасибо, мы старались!

Кстати, вы подписаны на нашу рассылку? Если нет, то самое время познакомиться с Катей.

Сожалеем, что не оправдали ваши ожидания ((
Возможно, вам понравятся другие статьи блога.

Пошаговое руководство по самостоятельному продвижению сайта

Все обязательные этапы продвижения
Инструкции, как делать самому
Ориентировочные цены специалистов

Получить мануал

Источник: https://1ps.ru/blog/sites/chto-takoe-favikon-i-zachem-on-nuzhen/

Favicon: что это такое, как создать фавикон и установить на свой сайт, онлайн-генераторы фавиконов

Здравствуйте, дорогие читатели блога PROgeek.ru. Сегодня я Вам поведаю о том, что такое Favicon, зачем он нужен, где, почему и как его можно создать, и как говорится «с чем его едят».

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

ico», которая отображается во вкладках практически всех популярных браузеров, а также выводится в поисковой выдаче Яндекса, напротив Вашего сайта с левого края (в поисковой выдаче Гугла Favicon не отображается).

Вот как отображается Favicon во вкладке браузера:

А вот как выводится в поисковой выдаче Яндекса:

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

Как известно, специально для Favicon поисковик Яндекс много лет тому назад создал бота (YandexFavicons), который с определенной периодичностью осуществляет обновление данных о фавиконах.

Имейте ввиду, что если Вы сегодня прикрепили Favicon.ico на Ваш сайт, то не стоит ожидать, что он сразу же отобразится в Яндексе.

Должно пройти определенное время, после чего фавикон будет радовать Вас и Ваших посетителей в поисковике Яндекс.

Соответственно, фавикон должен рассматриваться вебмастером как неотделимый атрибут успешного сайта.

Как создать Favicon.ico самому

Для того, чтобы создать фавикон, Вам потребуется Photoshop (если у Вас нет этой программы, не переживайте, можно воспользоваться бесплатной онлайн версией). Размер фавикона должен быть 16 на 16 пикселей. При создании фавикона имейте ввиду, что чем краше он будет, тем больше переходов Вы получите из поисковой выдачи Яндекса.

Однако, следует отметить, что Photoshop не может сохранять файлы с расширением .ico, и для того, чтобы создать фавикон в Photoshop’е, Вам необходимо установить плагин, который позволит Вам сохранять файлы с расширением .ico. О таком плагине я писал в этой статье (там же можете скачать сам плагин).

Но что делать, если с Фотошопом связываться не хочется? Тогда можно прибегнуть к онлайн генераторам фавиконов.

Онлайн генераторы Favicon

favicon.ru — один из популярных инструментов для создания фавикона в рунете. Это сервис примечателен тем, что он позволяет как самому нарисовать фавикон, так и преобразовать фавикон из изображения. Для того, чтобы преобразовать изображение в фавикон, нажмите на кнопку «Выберите файл», соответственно выберите нужное изображение, и нажмите «Открыть».

Вас перекинет на новое окно, в котором Вам можно будет отредактировать картинку. Потом Вас снова перекинет на начальную страницу, но теперь в форме рисования фавикона будет готовый рисунок. Если Вам угодно, Вы можете подкорректировать полученный рисунок в форме, либо, если хотите получить свой Favicon, нажмите на «Скачать Favicon»:
favicon.

by — по функционалу и исполнению очень похож с первым примером. Также, как и в первом варианте, Вы можете либо сами нарисовать Favicon, либо преобразовать из изображения:
ru.toolson.net — сервис для онлайн генерации фавиконов.

Стоит отметить, что в данном сервисе можно генерировать фавиконы только из готовых изображений. Для генерации фавикона поддерживаются следующие форматы: jpg, jpeg, png, gif и bmp. Сам процесс генерации не сложный. Нужно всего лишь следовать указанным на сервисе шагам.

Минусом данного сервиса, как отмечалось выше является отсутствие возможности самому нарисовать Favicon.
www.degraeve.com — удобный зарубежный сервис для создания Favicon в режиме онлайн. Также, по функционалу идентичен приведенному первому примеру. Сервис работает молниеносно быстро (что очень радует).

Вы также можете либо сами нарисовать Favicon, либо преобразовать его из изображения:

Этот список можно вести до бесконечности, в связи с этим, предлагаю остановиться на рассмотренных выше сервисах и двигаться далее.

Как установить Favicon на сайт и прописать путь до него

Теперь перейдем к более сложному для новичков-вебмастеров вопросу — как же установить на свой сайт Favicon? На самом деле, все очень просто. Вам всего лишь нужно отыскать на сервере Вашего сайта корневую папку/директорию.

В львиной доле корневой папкой/директорией является папка public_html, реже папки www, domains, HTDOCS. В данную папку Вам необходимо разместить файл Favicon.ico. Разместили? Отлично, теперь можете смело любоваться своим фавиконом.

Если у Вас не отображается Favicon — то тому есть несколько причин: либо у Вас прописан специальный адрес к отображению фавикона, либо Вы не разместили фавикон в корневую папку/директорию.

Также, следует иметь ввиду, что Favicon в CMS устанавливается определенным образом, который описан в документации к CMS.

Источник: http://ProGeek.ru/favicon-chto-eto-takoe-kak-sozdat-favikon-i-ustanovit-na-svoj-sajt-onlajn-generatory-favikonov/

Как создать фавикон и в чем его польза для продвижения

Честно, я очень люблю фавикон. Я питаю к нему сколь глубокую, столь же и целомудренную платоническую любовь. Это не значит, что я рассказываю знакомым вебмастерам байки о том, как я сменил фавикон и трафик вырос на 10% (хотя постойте… может такое и было), но значит, что когда фавикон моего нового сайта появляется в индексе Яндекса, то сам сайт начинает казаться мне чуть более СДЛьным.

Что такое фавикон?

Фавикон (Favicon – сокращение от «favorite icon») — это изображение, которое отображается в адресной строке браузера перед адресом, во вкладке, соответствующей окну с открытой страницей сайта, а также при добавлении ресурса во вкладки с избранным. Эти изображения могут помочь пользователю лучше запомнить бренд или компанию, повысят узнаваемость сайта. Часто в качестве фавикона используют уменьшенное или немного переделанное в соответствии с форматом изображение логотипа компании или бренда.

Преимущества использования фавикона

Использование favicon приносит пользу со временем. Вот например зацените такие варианты:

Когда пользователь открывает много вкладок в браузере, он может сразу определить, на какой из них находится сайт, даже если текст с названием уже не отображается;
В выдаче Яндекса фавикон отображается слева от сайта или его страницы, что привлекает внимание посетителей и отличает его от других;
Картинка хорошо запоминается и остается в памяти – в результате сайт становится более узнаваемым и привлекательным для пользователей.

Таким образом, фавикон – часть образа сайта, которая выполняет не только эстетическую функцию, но и делает более удобным для пользователя поиск портала в закладках, вкладках, выдаче.

Особенности работы Яндекса с фавиконками

Поисковая система Яндекс – одна из немногих, которые выделяют фавиконы сайтов и отображают их при построении списка результатов поиска. Для этого специальный бот периодически индексирует сайты и обновляет информацию о наличии у них фавиконок.

Раньше апдейты фавиконок происходили раз в пару месяцев. Сейчас, в 2018, Яндекс индексирует их гораздо бодрее и на некоторых моих новых сайтах favicon появляется уже через несколько дней.

Чтобы проверить, отображает ли Яндекс favicon, можно найти свой портал в списке выдачи и посмотреть, видна ли иконка слева от него.

Также можно вписать в адресную строку следующую конструкцию: для Яндекса — http://favicon.yandex.net/favicon/www.site.ru (где вместо www.site.ru нужно напечатать домен своего сайта).

Правильно созданный Фавикон отобразится на черном фоне, и это значит, что Яндекс его видит.

Если фавикон не виден, это может быть связано со следующими причинами:

Размер изображения не соответствует требуемому: 16х16 пикселей;
Формат изображения не тот – должен быть ico, jpeg или png (первый вариант – более предпочтительный для Яндекса);
Картинка размытая или не уникальная – иногда по этим причинам поисковик блокирует иконки;
У Яндекса происходит обновление системы – тогда спустя какое-то время все должно исправиться само;
Сайт находится далее сотой позиции в выдаче – в этом случае фавикон тоже может не отображаться.

Проверив картинку по этим критериям, нужно исправить недостатки. Если и после этого не отображается иконка, можно обратиться в поддержку Яндекса.

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

Происходит это обычно через 2-4 недели после публикации сайта с изменениями.

Уведомлять или просить Яндекс о публикации фавиконки не нужно, это произойдет автоматически по прошествии определенного времени после ее появления на портале.

Как создать фавикон

Если вы хотите создать из большого изображения в формате, например, png, ico-файл, то вам не помешало бы поставить Adobe Photoshop для начала. Затем устанавливается плагин ICO для Фотошопа (поищите в поисковике плагин для вашей версии ФШ). Когда он установлен, мы копируем нужный файл ICOFormat.8bi (для 32-бит) или ICOFormat64.8bi (для 64-бит) по одному из следующих путей:

Если папки «Plug-ins» или «File Formats» нет, то ее необходимо создать. Теперь при диалоге сохранения можно выбрать ico формат. Размеры создаваемых значков могут быть кратны 8 (16×16, 24×24, 32×32 и так далее, но надежнее всего выбрать именно 16×16).

Затем изображение, которое должно стать фавиконом, открывается в Фотошопе. Жмется “Image – Image Size” и размер изображения меняется на 16х16 пикселей. Затем жмется “File – Save as” и выбирается формат ICO (название файла нужно сделать favicon.ico).

Сам я в последнее время перевожу изображения в ico формат без фотошопа. С помощью сервиса https://realfavicongenerator.net/.

Далее файл загружается в корневую папку сайта. После этого через «Внешний вид – редактор» админки WordPress в файле header.php прописываются следующие строки:

Через некоторое время фавикон появится на сайте.

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

Яндекс пугает фавиконных очкошников

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

Сервисы

Для создания иконок также существуют специальные программы и ресурсы, среди которых популярностью пользуются:

favicon.cc – простейший редактор позволит создать несложное изображение, принцип работы немного напоминает Paint. Также выбираются цвета, и выполняется рисунок нажатием на пиксельные квадраты, которые нужно закрасить. Есть инструмент для исправления. Созданную картинку здесь же можно сохранить на компьютер в качестве готового изображения favicon. В процессе работы внизу экрана можно наблюдать предварительный результат в том виде, в каком он будет отображаться в браузере. Ресурс также предлагает большой выбор готовых иконок;
favicon.ru – здесь лучше создавать фавиконы из уже готовых изображений. Картинка загружается с компьютера, обрабатывается системой и преобразуется в файл favicon.ico, который затем можно скачать;
iconj и audit4web – базы, в которых можно найти готовые фавиконы.

Есть и такой сервис:

Можно обратиться за разработкой изображения и к дизайнеру, но это обойдется существенно дороже.

Еще такой момент — изображение для иконки не может быть анимированным, оно всегда неподвижно, даже если в основе была использована картинка с любыми не статичными эффектами.

Источник: http://znet.ru/raskrutka/favikon/

Что такое favicon

Многие пользователи интернета не знают, что такое фавикон, хотя регулярно сталкиваются с ним во время работы в сети. Слово favicon происходит от английского словосочетания favorite icon – избранная иконка или значок. Эта пиктограмма отображается во вкладках браузеров перед названием страницы (которое выводится с помощью тега title) и в качестве иконки в закладках.

Где можно увидеть favicon сайта?

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

Более подробно об иконке сайта

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

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

Является своеобразной визитной карточкой ресурса, независимо от движка (CMS), на котором тот создан, установленной темы и используемого шаблона.

Пиктограмму можно встретить на сайтах под управлением как популярных CMS, таких, как WordPress, Bitrix, Joomla, Drupal, так и на менее распространенных. Изображение имеет размеры 16×16 пикселей и зачастую хранится в формате ico.

Назначение favicon

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

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

Favicon в поисковой выдаче Яндекса

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

К сведению: специалисты Яндекса создали специального бота, специализирующегося на индексации favicon. После того как фавиконка была установлена, может пройти от недели до нескольких месяцев, пока в выдаче поисковой системе появится красивая пиктограмма рядом с сайтом.

Все эти факторы могут повлиять на увеличение посещаемости страниц вашего сайта.

Способы создания favicon

Так как фавикон – это пиксельный графический файл, то и создать его можно таким же образом, как и обычное изображение в формате ico. Сделать фавиконы можно следующими способами:

конвертировать из изображения практически любого формата через специальное приложение;
скачать готовую пиктограмму;
нарисовать с нуля в графическом редакторе или воспользоваться онлайн-генератором.

Разберемся с каждым способом подробнее.

Галереи готовых значков

Интернет пестрит различными ресурсами, в том числе и узкоспециализированными. Одними из таких сайтов являются ресурсы, хранящие и постоянно пополняющие коллекцию созданных пользователями (а порой и роботами) иконок. Любая такая галерея позволяет быстро выбрать и загрузить на компьютер или прямо на сайт понравившееся изображение.

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

www.iconj.com/favicon-gallery-page1.html – содержит более 4 тысяч изображений, позволяет скачивать готовые решения необходимого размера в форматах ico и gif. После регистрации появится возможность добавления значков в избранное. Скопировав HTML-код, можно быстро вставить его в код своего сайта.

Добавление иконок в избранное на сайте ICON J

www.favicon.cc – большая коллекция значков, которые можно найти по дереву тегов или путем перелистывания страниц. Из функционала доступны загрузка в формате ico, online-редактирование оригинальной пиктограммы, конвертирование картинки в значок и просмотр новых/популярных файлов.

www.freefavicon.com/freefavicons/objects – крупнейший тематический каталог, где можно отыскать и загрузить иконку. Файлы рассортированы по категориям для удобства выбора и названы согласно своему содержимому.

Категории для поиска фавикон на сайте freefavicon.com

Онлайн генераторы

При помощи специализированных сервисов нужную favicon можно создать самому за несколько минут.

Favicon.cc – редактор, который дарит возможность выбрать фон и пиксель за пикселем нарисовать рисунок при помощи кисти, поддерживающей прозрачность. Также на сайте можно преобразовать любой графический файл в фавикон с его последующим редактированием.

Создание с помощью онлайн-редактора Favicon.cc

Logaster.ru предлагает поработать над визиткой, логотипом и фавиконкой сайта одновременно, дабы основные графические элементы были взаимосвязаны и выполнены в едином стиле. Выполняется все в несколько простых шагов: создаем логотип, на его основе генератор предлагает соответствующую ему иконку, после выбора которой откроется графический редактор для ее корректировки. Готовый логотип и значок загружаем после регистрации в системе или через контекстное меню.

Регистрация на сайте Logaster.ru

www.favicon-generator.org – простой сервис, создающий favicon из выбранного изображения без возможности его редактирования или обрезки.

Сервис favicon-generator.org

www.michurin.net/online-tools/favicon-editor.html – узконаправленный ресурс, где после загрузки картинки в jpeg, bmp или gif формате она будет уменьшена до 16 пикселей по обеим сторонам без сохранения пропорций, а число цветов уменьшится до 16 для минимизации размера файла на выходе. Дополнительно доступна функция модификации готовых ico.

Онлайн-редактор иконок favicon.ico

www.favicon.by и favicon.ru поддерживают рисование собственных пиктограмм и превращение области или целого изображения в фавикон. Есть инструменты заливки и пипетка.

Рисование собственных пиктограмм

www.favicomatic.com превратит загруженный графический файл в ico размером 16×16, загрузит его на ПК и сгенерирует HTML-код для вставки на сайт.

Фавикон генератор Favic-o-matic

www.antifavicon.com – генератор простых favicon с текстовыми надписями, в котором пользователь задает текст, выбирает цвет фона, букв и границы, и получает готовую иконку.

Генератор favicon с текстовыми надписями

Графические программы

При помощи IconFX, Axialis IconWorkshop и подобных графических редакторов можно легко создать иконку для любого портала, но лишь при условии владения пользователем базовыми навыками работы с подобными приложениями. Если вы работаете в Photoshop, загрузите для него расширение под названием ICOFormat, тем самым добавив поддержку импорта иконок в формате ico.

Через IconFX и альтернативы, можно как нарисовать, так и конвертировать картинку или ее часть в иконку, отредактировав ее, выбрав цвет и размер.

Создание нового рисунка в IconFX

Добавление на сайт

При наличии файла favicon.ico в корне директории современные браузеры автоматически пытаются подгружать файл, даже если тот не прописан в HTML-коде. Но для большей надежности лучше указать фавиконку с помощью простого кода, который необходимо разместить между тегами head:

Где атрибут href содержит относительный или полный путь к файлу на сервере, а rel сообщает браузеру о том, что этой строкой задается фавиконка сайта.

Ответы на популярные вопросы

При работе с фавиконами у пользователей появляется масса вопросов. Попробуем дать ответы на самые часто задаваемые.

Делаем иконку из картинки или фото

Множество графических редакторов, специализирующихся на работе со значками, позволяют конвертировать png, bmp, jpeg и прочие форматы в ico с возможностью обрезки исходного файла и редактирования результата. На примере IcoFX это делается следующим образом:

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

Создания иконки из изображения

После редактирования сохраняем полученный ico-файл и загружаем его на сайт.

Аналогичным образом также работают другие программы и сервисы по созданию фавиконок онлайн, рассмотренные выше. С единственным отличием: некоторые из них позволяют выбрать рабочую область изображения.

Делаем прозрачный фавикон

Известно, что среди распространенных графических форматов прозрачность поддерживается файлами с расширением png. В качестве исходника берем файл png и конвертируем его в фавикон с помощью Photoshop (установив перед этим плагин ICOFormat), иного графического редактора или онлайн-сервиса, поддерживающих прозрачный слой, например, Favicon.cc.

Как получить анимированную иконку

Создать анимированный favicon поможет специализированный сервис:

Создание анимированного favicon

Кликаем по кнопке «Add another image», дабы добавить второй кадр и указываем желаемую картинку, и так со всем кадрами.
По окончании добавления слайдов щелкаем «Download FavIcon Package».

Скачивание FavIcon Package