Как сделать фавикон в формате ico
Обновлено: 04.07.2024
Странно, за что только не возьмёшься в области Веб, почти всегда создаётся впечатление, что вступаешь на terra incognita.
Надеюсь, что эта статья сэкономит кому-нибудь один день жизни.
Самые интересные ролики на Youtube
Часто задаваемые вопросы (FAQ).
Что такое иконка и ярлык, принадлежащие Веб странице, и какими они бывают?
Когда мы открываем страницу сайта, имеющего иконку, то наш браузер скачивает набор картинок, упакованных в файл в формате ICO.
После этого, изображение иконки появляется в Адресной строке браузера.
Если мы сохраним адрес странички в Закладках (Избранном), то иконка появляется и там.
Часто, файл, в который упакованы иконка и ярлыки, называется favicon.ico. Название это не обязательное, но желательное.
Какого размера должны быть изображения, которые входят в состав файла favicon.ico?
Обычно в файле favicon.ico, используемого в Веб, всего три изображения размерами: 16x16, 32x32, и 48x48 пикселей.
Количество и параметры изображений входящих в состав файла ICO зависят от его назначения.
Например, в комплект системных ярлыков MAC ОС входят изображения следующих размеров: 16x16, 32x32, 48x48, 125х125, 256x256, 512х512 пикселей.
В ОС Windows используется другой комплект, размерами: 16x16, 32x32, 48x48, 256x256 пикселей.
Каково назначение изображений входящих в состав файла favicon.ico?
Назначение отдельных изображений, которые мне лично удалось идентифицировать для Windows, следующее:
16x16 пикселей – иконка для сайта, которая отображается в Адресной строке браузера.
16x16 пикселей – иконка для сайта, которая отображается в Закладках (Избранном) браузера.
32x32 пиксела – ярлык, который можно разместить на рабочем столе.
48x48 пикселей – ярлык в Файловом менеджере в режиме отображения "Эскизы страниц".
48х48 пикселей – ярлык в Файловом менеджере в режиме отображения "Плитка".
32х32 пикселя – ярлык в Файловом менеджере в режиме отображения "Значки".
16х16 пикселей – ярлык в Файловом менеджере в режиме отображения "Список" и "Таблица".
Почему я не вижу на Рабочем столе и в Файловом менеджере ярлык сохранённой ссылки на Веб страницу?
Ярлык можно разместить на рабочем столе или в Файловом менеджере только в том случае, если он был добавлен путём перетаскивания ярлычка (иконки) из адресной строки браузера или из Закладок (Избранного) на Рабочий стол или в Файловый менеджер.
*Перетащить ярлычок из браузера Google Chrome можно только из Закладок (Избранного).
Как несколько изображений сохранить в одном файле ICO?
Формат ICO является контейнером, в который можно упаковать несколько изображений. Если открыть файл с расширением ICO в многоформатном вьювере, то можно увидеть все эти изображения в виде многостраничного документа.
Естественно, что все специализированные программы для создания иконок тоже могут работать с каждым отдельным изображением включённым в файл формата ICO.
Если у вас уже имеется исходное изображение, то из него можно изготовить несколько иконок разного размера и упаковать их в один файл при помощи какой-нибудь программы для создания иконок.
Я для этого использовал первую попавшуюся в сети бесплатную программу – IcoFX . Ко всему прочему, программа оказалась мультиязычной.
06.2012г. К сожалению, программа IsoFx стала платной, что подтверждает некогда сделанный в её пользу выбор. Но, Вы всё ещё можете скачать бесплатную версию этой программы.
В приведённом примере, я буду использовать именно эту программу, чтобы создать иконку в формате ICO (точнее, создать иконку и несколько ярлыков).
*Маленькая справка. На сегодняшний день, последняя версия программы IcoFX не поддерживает создание ярлыков размером свыше 254х254 пикселя. Но, это может иметь значение только при создании больших системных ярлыков (512х512px.) для последних версий MAC ОС.
Как создать анимированную иконку для сайта?
Некоторые браузеры, например Firefox, могут показывать анимированные иконки.
Чтобы анимированную иконку увидел браузер, нужно дополнительно разместить на хосте файл в формате GIF-анимациии и прописать соответствующий код в целевой Веб странице.
Как анимированные иконки отображаются в разных браузерах?
Firefox прокрутит анимацию в адресной строке столько раз, сколько заложено в настройках файла GIF (1-32 раза) и остановится на последнем кадре GIF-анимации. Если в настройках GIF-анимации указать "Forever", то Firefox покажет анимацию только один раз и, опять таки, остановится на последнем кадре.
Opera и Chrome покажет в адресной строке только первый кадр GIF-анимации.
Internet Explorer не увидит файл GIF-анимации и вместо него покажет иконку из файла в формате ICO.
Для того чтобы иконка, созданная в формате GIF-анимации, показывалась во всех браузерах одинаково, следует первый и последний кадр GIF-анимации также делать одинаковыми.
Как создать эскиз для иконки и ярлыков?
Наверное, можно попытаться нарисовать картинку и прямо в программе для создания иконок, но возможностей у таких программ гораздо меньше, чем у специализированных графических редакторов вроде Photoshop-а.
Что же касается программы IcoFX, о которой идёт речь в статье, то в ней тоже можно создать полноценное исходное изображение или отредактировать имеющееся. Программа имеет интуитивно понятный, для любого пользователя знакомого с графическими редакторами, интерфейс.
Единственное непонятка, которая бросилась мне в глаза, так это инструмент стирания. Чтобы стереть ненужные пиксели (обнажить прозрачность), нужно использовать инструмент Selection и клавишу Delete.
Однако вряд ли стоит глубоко изучать возможности ещё одного растрового редактора, если вы немного знакомы с Photoshop-ом.
Каков размер и формат исходных изображений для иконок?
Исходное изображение для иконок и ярлычков лучше выбрать размером не менее 256х256 пикселей.
Если для эскиза изготовленного в стороннем растровом редакторе выбрать точный размер 256х256 пикселей, то не придётся делать лишнюю интерполяцию в программе IcoFX.
В программу IcoFX можно загрузить изображение в форматах: ico, bmp, jpg, gif, cur, png, icns, jp2. Затем можно сгенерировать изображения необходимых вам размеров и сохранить их в виде файла с расширением ICO.
Изображение, представляющее собой GIF-анимацию, можно также сначала создать в размере 256х256 пикселей, а затем уменьшить до размера иконки 16х16 пикселей в той же программе, где оно создавалась.
При подготовке исходного изображения следует учитывать, что при ресайзе до размера 16х16 пикселей, мелкие детали изображения не сохранятся. Поэтому лучше использовать только крупные и контрастные детали.
Нарисовать иконку сразу в размере 16х16 пикселей довольно сложно. Мои попытки в этом направлении не увенчались успехом.
На картинке иллюстрация того, как меняется изображение при ресайзе с 256 до 16 пикселей.
Как подготовить изображение для программы IcoFX чтобы сохранить прозрачность?
Для того чтобы сохранить прозрачность в программе Photoshop, нужно, при сохранении Save For Web, выбрать формат GIF или PNG и поставить галочку Transparency.
(Программа IcoFX понимает файлы и в формате BMP с Альфа каналом, что также позволяет сохранить прозрачность.)
На картинке две иконки на Рабочем столе, с сохранённой прозрачностью и без.
Как создать и отредактировать GIF-анимированную картинку в программе Photoshop?
В последних версиях программы Adobe Photoshop нет встроенной программы Image Ready, однако функция работы с GIF-анимацией сохранилась.
Для создании GIF-анимации достаточно открыть палитру Window > Animation.
А вот открыть изображение в формате GIF-анимации для редактирования чуточку сложнее.
Для того чтобы открыть файл с GIF-анимацией, нужно сначала выбрать команду File > Import > Video Frames To Layers.
Затем в окошке Load ввести полное название (с расширением) целевого файла.
При этом нужно иметь в виду, что сам целевой файл, в окошке Load, виден не будет. Поэтому, точное название файла лучше скопировать, например, из окна Проводника, где он виден будет.
Можно также вместо названия файла ввести "*" (звёздочку), и тогда все файлы начнут отображаться в окне выбора.
В окне Video Frames To Layers ничего менять не требуется.
Теперь остаётся только воспользоваться палитрой Animation, чтобы отредактировать анимированный GIF.
Как создать файл формата ICO в программе IcoFX?
На скриншотах иллюстрация самого короткого пути при создании файла в формате ICO в программе IcoFX.
Когда исходное изображение имеется, то его можно загрузить в программу IcoFX по команде File > Import Image (Ctrl+M).
Выбираем исходное изображение. Я использовал созданное в Photoshop-е изображение в формате PNG (256 цветов) размером 256х256 пикселей с сохранённой прозрачностью.
Моё изображение имеет размер 256х256 пикселей и 256 цветов, потому я и выбираю эти значения.
Добавляем новое изображение.
Выбираем параметры. Ставим птицу в чекбокс "Создать новое изображение из выбранного изображения" и выбираем размер 48х48 пикселей.
Снова добавляем новое изображение.
Выбираем исходное изображение размером 256х256 пикселей и новое размером 32х32 пиксела.
Добавляем ещё одно изображение в комплект.
В этот раз выбираем размер нового изображения равным 16х16 пикселов, а исходное изображение оставляем прежним - 256х256 пикселов.
Теперь можно удалить из набора наше исходное изображение размером 256х256 пикселей, чтобы не увеличивать сильно вес результирующего файла.
Сохраняем результат наших непосильных трудов.
После нажатия OK в папке должен появиться файл favicon.ico.
Какой HTML код необходимо прописать, чтобы браузер начал показывать иконку?
Я слабо разбираюсь в коде, но то, что здесь написано - проверено в четырёх самых популярных браузерах: IE 8, Opera 9, Firefox 3, Chrome 2.
Коды для вставки иконки и ярлыков на страницы сайта нужно прописывать между тегами и каждой целевой страницы.
Каждая страничка сайта может иметь свою индивидуальную иконку и ярлыки, если это необходимо.
Адрес файла иконок может быть относительным, вида:
Чтобы любой браузер демонстрировал иконку в Адресной строке и Закладках (Избранном), нужно добавить следующий код:
Чтобы иконка отражалась в качестве ярлыка на Рабочем столе и Файловом менеджере, нужно вставить в страничку следующий код:
Чтобы браузер мог показать анимированную иконку, нужно вставить следующий код:
В случае использования анимированной иконки, в большинстве случаев, достаточно всего двух строчек кода, чтобы обеспечить максимальные возможности по демонстрации иконок в разных браузерах:
Это связано с тем, что большинству браузеров достаточно указать на анимированную иконку, а Internet Explorer, хотя и не видит favicon.jpg , но показывает иконку по команде rel="shortcut icon" .
Подробнее об особенностях отображения анимированных иконок в разных браузерах можно прочитать здесь и здесь.
* favicon – можно заменить произвольным названием (может пригодиться при присвоении индивидуальных ярлыков отдельным страничкам в пределах одного сайта).
А что если не вставлять никакой код, а иконку разместить?
Если в корневом каталоге вашего сайта лежит файл с иконой и ярлыками с точным названием favicon.ico , то Internet Explorer присвоит иконку всем страницам сайта, если вы ему не укажете другой адрес, прописав соответствующий код.
К сожалению, другие браузеры этот файл просто так не заметят.
Почему в браузере иконка отображается, а ярлык на Рабочем столе и в Проводнике – нет?
Если для демонстрации иконки использовать код:
То, чтобы Internet Explorer мог добавлять к ссылке ярлыки при перетаскивании, нужно добавить код:
Как будут отображаться иконки в браузерах, если иконок сразу две - в формате GIF и ICO?
Если в Веб страницу вставлен код:
то Firefox и Chrome будут искать корректное изображение в формате GIF, и если его не найдут, то ничего и не покажут до тех пор, пока вы не уберёте код. После чего Firefix и Chrome начнут показывать в Адресной строке иконку прописанную в коде:
Opera, не найдя по указанному адресу файл в формате GIF, сообразит и покажет иконку из файла в формате ICO.
Internet Explorer индифферентен к GIF-у и с самого начала будет показывать иконку в формате ICO.
Почему браузер не показывает впервые установленную или обновлённую иконку?
Известно, что браузеры кэшируют изображения для ускорения загрузки страниц и снижения объёма трафика. По этой причине, чтобы увидеть иконку на однажды загруженной странице, требуется удалить изображение этой иконки из кэша браузера.
Если очистка кэша и перезагрузка страницы не дали результата, то следует попробовать вместе с кэшем очистить и другие временные данные и перезагрузить уже сам браузер.
Как очистить кэш популярных браузеров, чтобы увидеть новую иконку?
Internet Explorer - Сервис > Свойства Обозревателя > Общие > Удалить > Очистить >
> Временные файлы Интернета.
Firefox - Инструменты > Личные Данные >
Opera -
Инструменты > Удалить личные данные > Более подробные параметры >
> Удалить время посещения закладок
Chrome - Настройки и управление Google Chrome (гаечный ключ) > Удаление данных о просмотренных страницах >
Где конкретно хранятся иконки в кэше разных браузеров?
Internet Explorer
C:\Documents and Settings\Имя пользователя\Local Settings\Temporary Internet Files
Иконки открыты для просмотра.
Firefox
C:\Documents and Settings\Имя пользователя\Local Settings\Application Data\Mozilla\Firefox\Profiles\Цифры и буквы.default\Cache
Отдельные файлы нельзя рассмотреть в Файл-менеджере.
Адрес можно уточнить, если набрать в адресной строке самого Firefox-а: about:cache
Эта же команда позволяет просмотреть отдельные файлы кеша.
Если же установить расширение CacheViewer и нажать Ctrl+Shift+C или выбрать команду Инструменты > Просмотреть кэш, то можно просмотреть картинки без лишних телодвижений.
Opera
C:\Documents and Settings\Имя пользователя\Local Settings\Application Data\Opera\Opera\profile\images
Здесь иконки можно рассмотреть в отдельной папке, и они, как и в IE, открыты для просмотра.
Набрав about:cache в адресной строке, можно увидеть URL и сами файлы не лазая по директориям.
Google Chrome
C:\Documents and Settings\Имя пользователя\Local Settings\Application Data\Google\Chrome\User Data\Default\Cache
Отдельные файлы нельзя рассмотреть в Файл-менеджере.
Если ввести в адресную строку about:cache, то можно увидеть URL-кэшированных файлов.
Посмотреть на кэшированное изображение иконки можно открыв ссылку (только без приставки view-cache:).
Важно. Просматривая файлы по ссылкам, выданным после команды about:cache, нужно иметь в виду, что для чистоты эксперимента доступ в сеть нужно отключить.
Отображение иконок в популярных CMS (движках).
WordPress
Для добавления иконки/ярлыков нужно прописать код, о котором рассказывалось выше, в файл header.php между и и разместить файл иконок в формате ICO (и GIF) по адресу указанному в коде.
WordPress - начинает демонстрировать иконки сразу после добавления кода и закачки иконки на хост. При использовании кэша требуется его очистить.
PHPBB3
Чтобы добавить иконку/ярлыки, нужно прописать соответствующий код в файл overall_header.html между тегами и и разместить файл формата ICO (и GIF) по адресу указанному в коде.
Для отображения требуется очистить кеш форума.
Не помешает поместить файл иконок-ярлыков, с точным названием favicon.ico , в корневой каталог сайта, если вы выбрали другое название для этого файла или директорию отличную от корневой директории. Некоторые браузеры и RSS клиенты воспользуются этим файлом не найдя другого адреса.
Пример вставки кода:
(Тут всякий разный код, который трогать не нужно).
Пример размещения файлов на хостинге:
Файлы favicon.ico и favicon.jpg помешены в корневой каталог сайта.
Отображение анимированных иконок в поисковых машинах.
Прошло полгода со времени написания этой статьи и размещения иконок на сайте. На днях, обнаружив свою иконку где-то в дебрях Google, я решил посмотреть на неё и в Яндексе.
К своему удивлению обнаружил, что при очередном индексировании, Яндекс вытащил один из кадров из самой середины анимированной иконки. Проще говоря, теперь вместо иконки он показывает что-то непонятное.
Так что, пришлось пока убрать из корня анимированную иконку в формате GIF и соответствующую запись в хайдерах CMC движков. Кроме этого, добавил в хайдеры код:
Приходится подстраиваться под Яндекс, которые каждый раз что-то новое отчебучивает. Он, кстати, при этой переиндексации потерял файлы моих Sitemap-ов вместе с большей частью сайта.
Жаль, что Yandex не берёт пример со старшего брата!
Нашли ошибку в тексте? Выделите ошибочный текст мышкой и нажмите Ctrl + Enter
Спасибо за помощь!
Комментарии (42)
Фавикон на свой сайт ставила через плагин. Все было окей. Но вот несколько недель назад пропал фавикон, точнее так — когда пишу статью в консоли, в редакторе видно, что есть фавикон, публикую статью и…фавикона нет. Это как так может быть. Понимаю, что через плагин ставить фавикон не рекомендуется. Но вот так он у меня установлен был и всегда был виден. Почему сейчас такое произошло, что при написании статьи его видно, а при публикации он пропадает. Простите, объяснила как могла. Надеюсь на ответ.
Oksana писала: …когда пишу статью в консоли…
Я в это не верю, но если вдруг… То, Вы бы лучше за писанину в консоли волновались, а не за фавикон, если, конечно, вы серьёзно так делаете. WP тиражирует копии, которые собирает в базе данных и она разбухает. Если же заблокировать создание автоматических копий, то вы сможете в любой момент потерять всё то, что набрали. Чем Word плох, она оба языка понимает…
Что вы хотите от меня услышать, я не знаю. Чтобы получить ответ, нужно задать вопрос. Если же хотите совет, то просто пропишите в хайдер пару строчек кода. У меня этот код из статьи до сих пор так и работает.
Фавикон — это маленький значок, который используется для визуальной идентификации вашего сайта в закладках, также его вы видите рядом с вашим сайтом или именем страницы на вкладках браузера. Как правило, фавикон представляет собой квадрат размером 16х16 пикселей в формате favicon.ico. В этой стате мы объясним какая “основа” вам нужна для начала работы, поможем вам создать фавикон с помощью графических редакторов и расскажем о способах добавления фавиконки на сайт.
Что нужно для начала работы?
- Ваш логотип в размере не меньше 512х512 пикселей (обязательно квадратный);
- .PNG формат изображения;
- Графический редактор Adobe Photoshop или GIMP.
Создаем фавикон с помощью Adobe Photoshop
Фавикон на прозрачном фоне:
1) Откройте логотип в формате PNG на прозрачном фоне в редакторе нажав: “Файл” — “Открыть” и выберите изображение на вашем компьютере.
2) Удалите название компании из логотипа, чтобы использовать только иконку выбрав инструмент “Ластик” и изменив основной цвет на белый.
3) Теперь, измените размер логотипа на 16х16 пикселей нажав: “Изображение” — “Размер изображения”.
4) И измените размеры на 16х16 пикселей. Ваша фавиконка покажется вам совсем крошечной, но не переживайте, все так и должно быть.
5) Сохраните изображение нажав “Файл” — “Сохранить как” и выберите тип файла “PNG”.
Если ваш логотип выглядит отлично, то переходите к шагу 4.
Фавикон на фоне с корпоративным цветом:
1) Как и в первом варианте, откройте файл в формате PNG, но только уже не на прозрачном фоне, а на фоне с корпоративным цветом.
2) Удалите текст и оставьте только иконку: воспользуйтесь инструментом “Пипетка”, чтобы выбрать цвет в соответствии с фоном — цвет на палитре автоматически измениться на нужный. Теперь, кликните на инструмент “Кисть” и зарисуйте текст.
3) Измените размер нажав “Изображение” — “Изменить размер”, и в соответствующем поле введите показатели 16х16 пикселей. Если изображение выглядит пропорционально — сохраните в формате .PNG и переходите к шагу 4.
Создаем фавикон с помощью GIMP — GNU Image Manipulation Program
GIMP — это графический редактор, который позволяет пользователям работать с векторной графикой. Преимущество данной программы в том, что вы можете создать фавикон в формате .ICO и не придется, как в случае с Adobe Photosop, использовать конвертеры изображений.
1) Откройте файл в программе, нажав “Файл” — “Открыть” и выбрав нужное изображение с компьютера.
2) Теперь нужно удалить текст, чтобы осталась только иконка: кликните по цветовой палитре и укажите цветовой код корпоративного фона. Если он вам не известен, просто кликните на инструмент “Пипетка”, наведите его на фон логотипа и кликните левой кнопкой мышки — цвет задастся автоматически. Теперь, используя инструмент “Кисть”, зарисуйте ненужный текст.
3) Уменьшите размер логотипа до стандартного размера фавиконки — 16х16 пикселей, нажав: “Изображение” — “Изменить размер изображения”.
4) Экспортируйте лого нажав “Файл” — “Экспортировать как …”.
5) И выберите тип файла для экспорта — Значок Microsoft Windows с расширением ICO. и кликните “Экспортировать”.
Готово! Теперь, вы можете использовать фавикон на сайте!
Преимущества использования .ICO перед .PNG или .GIF
- Совместимость: все браузеры, включая IE 5.0, поддерживают формат .ico.
- Избежание ошибок сервера 404: все современные браузеры (протестированные с Chrome 4, Firefox 3.5, IE8, Opera 10 и Safari 4) всегда будут запрашивать файл favicon.ico, поэтому лучше всегда иметь файл favicon.ico.
- Файл .ico может содержать более одного значка, поэтому не нужно создавать несколько файлов для значков размерамы 16×16 и 48×48 пикселей.
Конвертируйте .PNG в .ICO с помощью онлайн-конвертеров
1) Войдите на сайт и в левом сайдбаре выберите: “Конвертер изображений” — “Конвертирование в ІСО”.
2) Выберите файлы для конвертации на компьютере, нажав кнопку “Выберите файлы”, или перетащив файлы в соответствующее поле, и нажмите кнопку “Начать конвертирование”.
3) Теперь, нажмите “Загрузить”, чтобы скачать ваш файл в формате .ico на компьютер. Также, есть возможность загрузить файл в облачное хранилище или скачать файл в виде ZIP.
Как установить фавикон на WordPress?
Загрузите ваш фавикон (favicon.ico) в основной (корневой) каталог сайта. Корневой каталог — это главная папка, в которой находятся все ваши WP-файлы, такие как index.php и папки wp-admin, wp-content + wp-includes. Обязательно разместите favicon.ico на одном уровне с этими папками и index.php.
1) На WordPress откройте “Административную панель”.
2) Войдите в раздел “Appearance”
3) Нажмите на “Theme Editor”.
4) Нажмите на файл, который называется “Header” или “Header.php”, чтобы редактировать.
5) Найдите строку кода, которая начинается с . Измените его, если он существует, или добавьте следующий код под HTML-тегом . В примере мы используем название фавикона как “favicon.ico”. Вы же можете назвать ваш фавикон как угодно.
6) Сохраните изменения.
Обновлено 17 марта, 2020
Редактор блога компании Logaster, контент-маркетолог. Эксперт по веб-маркетингу и брендированию. Умеет писать просто о сложном. По ее статьям можно построить успешный бренд и начать успешное продвижение в интернете.
Что такое фавикон
Фавикон (favicon, сокращенное от favourite icone) — маленькая иконка, которая сопровождает сайт в интернет-среде. Эта иконка появляется на вкладках, в результатах поиска и помогает сайту быть более узнаваемым.
Крохотная иконка, которую вы сейчас видите на вкладке этой статьи — это и есть фавикон. Обычно иконка полностью или частично копирует логотип бренда, но адаптирована к маленькому размеру — она должна хорошо читаться.
Зачем нужен фавикон
Фавикон помогает человеку ориентироваться в интерфейсе, повышает узнаваемость ресурса и кликабельность.
Помогает в навигации
Фавиконка помогает быстро находить сайт среди других. Когда открыто много вкладок, проще найти значок, чем считывать название каждой вкладки.
Фавиконы можно увидеть:
Вызывает доверие
Хорошо оформленный сайт производит хорошее впечатление. Фавикон — часть этого впечатления. Сравните сами: на скриншоте ниже вкладки в мобильном браузере Chrome. На второй снизу вкладке пустая иконка. Вкладку сложнее выделить взглядом среди остальных, да и выглядит она менее презентабельно, чем соседние.
Сайты с фавиконками и без них во вкладках мобильного браузера
Увеличивает кликабельность
Нет информации о том, является ли наличие фавиконки фактором ранжирования. Но
если сайт проще найти в результатах поиска, а доверие к нему выше — это повышает кликабельность.
Создание favicon
Итак, с задачами фавиконки для сайта мы разобрались. Теперь расскажу, как ее создать с учетом этих задач, и дам список сервисов, которыми могут воспользоваться не-дизайнеры.
Визуальная составляющая
Что учитывать при создании фавиконки:
- Размер. В некоторых интерфейсах и на маленьких экранах он может достигать 16 на 16 пикселей.
- Читаемость. Иконка должна читаться в разном окружении — на вкладках и в истории, в результатах поиска.
- Стиль бренда. Даже если ваш логотип не удается перенести в микро-формат, нужно сделать что-то связанное, в айдентике бренда.
Покажу несколько примеров, как разные компании переносят свой логотип в фавикон.
Мы тоже использовали для фавиконки графическую часть логотипа. Ее хорошо видно на вкладке благодаря различимой форме и контрастному цвету.
Логотип SendPulse и он же в виде фавиконки на вкладке
Размер: 120 * 120 пикселей, 32 * 32 или 16 * 16.
Формат: SVG (рекомендуемый), ICO, GIF (без анимации), JPEG, PNG, BMP.
- Робот возьмет любую из имеющихся иконок, которая ему доступна и подходит под требования сервиса, на котором нужно ее показать.
- Если сайт недоступен, робот возьмет произвольную иконку хостинга со страницы-заглушки сайта.
Требования Google к фавиконке
Размер: кратный 48 — 144 * 144, 96 * 96, 48 * 48. Загружать файл 16*16 не рекомендуется.
Формат: SVG, ICO, GIF (без анимации), JPEG, PNG.
Кроме этого, Google рекомендует следующее:
- Иконка должна совпадать с остальным графическим представлением бренда.
- Не стоит часто менять адрес файла favicon.
- Иконка не должна быть неприемлемо или непристойной, иначе поисковик заменит ее на стандартную иконку.
Сервисы для создания фавиконки без программиста
Требования есть, размеры и форматы описаны, но проще от этого не становится. Чтобы не разбираться, какие фавиконки нужны для каждого из интерфейсов, предлагаю воспользоваться одним из специальным сервисов. Они сгенерируют вам набор нужных favicons и код для вставки на сайт.
Realfavicongenerator
Этот сервис просит квадратный исходник с оптимальным размеров 260 на 260 пикселей. Здесь можно самостоятельно настроить результат: покрутить фон, отступы, цветовую тему.
Настройка получившихся иконок в Realfavicongenerator
В результате получаете пакет файлов для скачивания и код для встраивания на сайт.
Пакет нужно скачать в виде файлов и куска кода
Favic-o-matic
Попросит у вас квадратный исходник минимум 310 на 310 пикселей. Настроить здесь ничего не получится, после обработки автоматически начнется скачивание готового пакета и сгенерируется код для сайта.
Результат создания фавиконок в Favic-o-Matic
Favicon.ico & App Icon Generator
Размер исходника здесь не указан, но при загрузке не квадратного изображения сервис выдаст предупреждение. Настроить результат нельзя, вы получаете пакет файлов и код.
Готовый пакет фавиконок и код для сайта в Favicon.ico & App Icon Generator
Faviconit
Этот сервис попросит исходник минимум 310 на 310 пикселей и весом не более 5 Мб. После обработки вы получите пакет с файлами, внутри которого будет лежать и текстовый файл с кодом для встраивания на сайт.
Готовый пакет фавиконок и код для сайта в Faviconit
Как добавить фавикон на сайт
Итак, у вас есть файлы и код. Теперь нужно все это поместить на сайт, чтобы подготовленные фавиконки начали отображаться в поиске, на вкладке и в других локациях.
Загружаем иконки на сайт
Иконки нужно положить в корневую папку вашего сайта. Для этого понадобится доступ к сайту на хостинге, где он лежит. Загрузить файлы можно либо через собственную панель управления, если такая есть у вашего хостинг-провайдера, или какой-нибудь файловый менеджер, например, FileZilla.
Корневая папка сайта может называться public_html, www, html или site. Если такой не найдете, уточните у своего провайдера. Загрузите все полученные на предыдущем шаге файлы в корневую папку.
Редактируем код
Теперь нужно открыть код главной страницы сайта. Там же, в файловой системе сайта, найдите файл под названием head или header. Откройте его и вставьте полученный ранее код в элемент. Выглядеть это будет примерно так:
Остается подождать, пока поисковики проиндексируют появивишиеся фавиконки для сайта.
Фавикон: что следует запомнить
Фавиконка — маленькая иконка, которая появляется рядом с названием сайта на вкладке, в закладках и истории браузера и в прочих онлайн-интерфейсах. Она помогает пользователю быстро находить ваш сайт среди других, повышает его узнаваемость и вероятность клика.
Чтобы создать хороший фавикон для сайта, помните о трех факторах. Иконка будет очень маленького размера, но при этом должна хорошо читаться и вписываться в айдентику бренда.
Фавиконок нужно несколько на разные локации. Чтобы не запоминать размеры и свойства всех нужных иконок, используйте один из специальных сервисов. Сервис выдаст вам готовый пакет фавиконок и кусок кода, которые нужно будет загрузить в корневую папку вашего сайта и вставить в код главной страницы.
Готовую фавиконку можно даже использовать в рассылках. Регистрируйтесь в SendPulse и создавайте красивые письма в удобном блочном редакторе!
Рассказываю, как делать по-настоящему крутые email рассылки. Помогаю найти баланс между заботой о клиенте и успешными продажами.
Сегодня favicon – это возможность для бренда сайта выйти за пределы окна браузера и стать заметным и узнаваемым в разных контекстах пользовательского опыта. Визуальный значок ресурса позволяет выделиться среди конкурентов на странице поисковой выдачи. Его видно во вкладке браузера, в сниппетах результатов поиска, в закладках и на экране мобильного телефона. Он привлекает внимание и запоминается пользователям. Подробности рассказываем в нашей статье.
Что такое фавикон и каких форматов он бывает
Какие требования предъявляют разные платформы
С помощью каких инструментов можно создать иконку
Можно ли не создавать фавикон и как это повлияет на выдачу
Что такое фавикон
Favicon – это сокращение от favorites icon, то есть иконка для избранного. Это может быть логотип сайта или любое другое изображение, которое позволит сделать ресурс узнаваемым. Первоначально фавикон служил для визуального выделения сайтов в закладках. Сейчас он отображаться практически везде, где это возможно: во вкладках и на пустом начальном экране десктопных и мобильных браузеров, в адресной строке и на странице поисковой выдачи рядом с url сайта. Когда вы сохраняете закладку на сайт на главном экране мобильного устройства, там тоже будет отображаться фавикон. Поэтому если раньше можно было создать favicon одного размера только для отображения в браузере, то сейчас необходимо генерировать иконки под разные контексты, платформы и технологии.
Так выглядят фавиконки во вкладках браузера и в сохраненных ссылках.
Формат и стили фавиконов
Очень долго основным форматом фавикона был .ico. Он удобен тем, что в файл можно прописать сразу несколько размеров иконок с разной битностью. Сейчас ему на смену пришли форматы .jpg и .svg. Формат .svg используется в Safari MacOS, а .jpg - в остальных операционных системах и платформах. .ico до сих пор используется, но современные версии браузеров иногда не могут выбрать правильную иконку в файле, из-за чего фавикон отображается в низком разрешении. Фавиконку можно сделать в форматах .jpg и .jpg, однако мы не рекомендуем их использовать, потому что такие фавиконы поддерживают не все браузеры.
Чтобы фавиконки хорошо отображались в разных контекстах – в списках закладок, контекстном меню, на главных экранах мобильных устройств и телевизоров, создайте их в двух стилях.
Один вариант с прозрачным фоном. Этот фавикон будет отображаться во всех местах рядом с url-адресом или именем сайта: в адресной строке, в закладках и пр.
Фавиконки отображаются на пустой стартовой странице Google
Особенности фавиконов для разных платформ
Десктоп
Несмотря на то, что формат .ico постепенно устаревает, его всё ещё можно встретить в браузерах Internet Explorer 10 версии и ниже. В них .jpg не поддерживается, поэтому для корректного отображения нужно прописать в коде сайта комбинацию .ico и .jpg форматов фавиконок. Размеры иконок: Google рекомендует устанавливать иконки, размеры которых кратны 48 пикселям. Т.е. 48х48, 96х96, 144х144. Или использовать формат .svg, который не имеет конкретного размера. Яндекс указывает в Справке, что рекомендуемые размеры favicon: 120х120 пикселей – именно такая иконка выглядит четче и заметнее в его сервисах, а также 16х16, 32х32 пикселей. Из всех форматов рекомендуемый – также .svg.
Если вы используете формат .ico, мультиразмерную иконку удобно создавать в сервисе icoconvert или аналогичном. В настройках выберите следующие размеры: 16х16; 32х32; 48х48 пикселей. Andriod, Chrome и Opera Google рекомендует создать фавикон для этих платформ размером 192х192 и 512х512 пикселей в формате .jpg. Назовите файлы соответственно android-icon-192x192.jpg или android-chrome-512x512.jpg.
Так выглядят фавиконы в мобильной версии браузера Google Chrome
Andriod, Chrome и Opera
Google рекомендует создать фавикон для этих платформ размером 192х192 и 512х512 пикселей в формате .jpg. Назовите файлы соответственно android-icon-192x192.jpg или android-chrome-512x512.jpg.
Если вы хотите, чтобы иконку вашего сайта можно было сохранить на домашнем экране телефона, планшета и даже телевизора теперь, создайте файл .jpg размером 192х192 пикселя и веб-манифест – текстовый файл JSON, который предоставляет информацию о приложении. Затем добавьте файл site.webmanifest на свой сайт и сошлитесь на него в HTML-странице в теге таким образом:
Если сохранить сайт на домашнюю страницу мобильного устройства, favicon будет выглядеть, как приложение
Mac OS и iOS Safari Web Clip
Для корректного отображения в Mac OS favicon нужно создавать в формате .svg. Тогда иконка корректно отобразится при закреплении вкладки в браузере Safari. При создании фавикона, его нужно сделать простым, плоским и убрать все тени.
Для iOS Safari создают apple touch icon – фавикон в формате .jpg размером 180х180 пикселей. Как и в ОС Android, страницу сайта можно сохранить на экран мобильного устройства, и иконки в этом случае будут выглядеть как приложение. Такая ссылка называется Web Clip.
При создании фавикона для iOS помните, что уголки иконки будут автоматически скруглены, поэтому отступите от краев примерно по 4 пикселя с каждой стороны.
Apple touch icon используются не только в iOS. Браузер Chrome также может искать их в коде сайта, так как такие фавиконки часто встречаются, сделаны в нужном формате .jpg и в высоком разрешении.
Размеры фавиконов для разных экранов устройств Apple:
| Ретина версия 6 и ниже | Ретина версия 7 | Не ретина версия 6 и ниже | Не ретина версия 7 | |
| iPhone | 144х144 | 120х120 | 57х57 | 60х60 |
| iPad | 144х144 | 152х152 | 72х72 | 76х76 |
Для iPhone 6 Plus версия 8 и выше – 180х180 пикселей.
Другие варианты
| Android TV (до 2014 г. – Google TV) | Opera Coast |
| 96х96 | 228х228 |
Как создать?
Для создания фавикона используйте графические редакторы или специальные сервисы.
Adobe Photoshop или Figma
Если у вас есть навыки работы в графических редакторах, будет несложно создать фавиконку. В Photoshop , например, для этого даже есть специальный плагин – Favicon . ico . В редакторе сразу можно задать размер созданного
изображения в пикселях и фон – прозрачный или непрозрачный.
Favicon.cc – еще один сервис для создания favicon формата .ico. Вы можете загрузить готовую картинку или нарисовать самостоятельно, используя инструменты графического редактора.
Не стоит создавать фавикон простым переименованием файла в нужный формат. Допустим, у вас есть файл favicon.jpg и вы его просто переименовываете favicon.ico. Такой значок будет отображаться с ошибкой или не показываться.
Также лучше не брать иконки из открытых источников. Они неуникальные и если их скачает кто-то еще, ваш сайт не будет отличаться. Если же вы случайно установите в качестве фавикона для сайта логотип чужой компании, к вам могут возникнуть юридические претензии. Лучше создать свою уникальную иконку самостоятельно или закажите создание фавикона у профильного специалиста.
Как установить
Задайте правильное имя – favicon .ico или другой тип расширения. Помните, что браузеры прежних версий не смогут определить иконку, если она будет в другом формате. Перед загрузкой на сайт откройте свойства файла, убедитесь, что нужный формат есть не только в названии файла, но и в его типе.
Пропишите адрес в коде на главной странице в теге . Требование желательно, но не обязательно, потому что браузеры новых версий автоматически ищут фавикон в корневом каталоге, если не нашли его в коде. С помощью можно задавать для разных страниц сайта собственные иконки.
Иконки в устройствах Apple всегда закругляются по углам, чтобы этого избежать используйте apple - touch - icon - precomposed вместо apple - touch - icon .
Узнайте, виден ли фавикон. Проверьте через сервисы, подставив адрес своего сайта:
Если у сайта нет фавиконки, то Яндекс.Вебмастер предупреждает об ошибке. Она может отображаться в журнале с системной информацией. Если же браузер не нашел в коде сайта нужный файл, например, favicon.ico, то сервер зафиксирует ошибку 404.
Когда поисковые роботы видят наличие технических недостатков, то понижают сайт в выдаче. Так фавиконы косвенно влияют на SEO-продвижение ресурса.
Читайте также: