Как создать и добавить на сайт файл favicon в формате SVG?
В сентябре 2020 года в списке уведомлений Яндекс Вебмастер я увидел сообщения, касающиеся всех моих сайтов: «Добавьте файл favicon в формате SVG или 120×120 пикселей на сайт«.
Какое-то время я игнорировал эти уведомления, так как моя иконка favicon в формате ICO и размером 16?16 пикселей удовлетворяла требованиям к фавиконке.
Однако уведомления продолжали приходить, и это не давало мне покоя, так как рекомендуемые требования к иконке для сайта favicon следующие: формат файла SVG и размер 120×120 пикселей . Это нужно, чтобы для сервисов Яндекса логотип сайта был более четким и заметным.
Поэтому недавно я все же решил разобраться, как создать и добавить на сайт файл favicon в формате SVG?
Сделать это оказалось довольно просто. Хотя признаться, я не сразу нашел в сети интернет сайт бесплатный векторный редактор формата .SVG , который не просто носил такое название, а реально предоставлял именно эту услугу.
Сейчас уже не скажу, как я попал на этот сайт. Сначала искал его по запросам: «иконка SVG генератор» или «генератор иконок SVG», но ничего подходящего не находил, пока не наткнулся на этот бесплатный векторный редактор формата SVG.
Теперь давайте по шагам разберем, как создать и добавить на сайт файл favicon в формате SVG?
Инструкция — как добавить иконку на сайт
Рисуем в программе Adobe Photoshop иконку. Я сделал ее в формате JPG размером 120×120 пикселей. И сохраняем в лучшем качестве.
Далее переходим на сайт — бесплатный векторный редактор формата SVG — по приведенной выше ссылке.
Переходим в верхнее меню Файл и выбираем Импорт изображения .
И соответственно указываем путь к файлу, созданному в программе Adobe Photoshop.
Здесь же есть возможность открыть SVG-файл или создать новый документ. Но в данном случае нам это не нужно.
В итоге после импорта изображения мы должны увидеть свою иконку. В правом верхнем углу редактора указаны ее координаты и размер, который здесь же мы можем увеличить или уменьшить.
Здесь нам осталось только выбрать пункт: Сохранить изображение . Иконка для сайта будет сохранена сразу в формате SVG.
Как видите, создать иконку для сайта и сохранить ее в формате SVG не сложно. Впереди еще несколько простых шагов и мы закончим.
Итак, иконка для сайта размером 120×120 пикселей создана в формате SVG. Таким образом, требования поисковой системы Яндекс к фавиконке выполнены.
Теперь необходимо переименовать SVG-файл в favicon, и поместить иконку в корневой каталог сайта.
Осталось добавить в код главной страницы сайта в элемент head следующий фрагмент кода (это ссылка на favicon-файл и для примера я приведу свой код):
«icon» href= «https://www.webpupil.ru/favicon.svg» type= » image/svg+xml» >
На что здесь следует обратить внимание ?
1. Значение icon атрибута rel — учитывается большей частью браузеров.
Браузером Internet Explorer учитывается значение shortcut icon .
2. Атрибут href содержит адрес вашего сайта (в данном случае — это адрес моего сайта) https://www.webpupil.ru/favicon.svg с указанием имени файла-иконки favicon.svg, расположенного в корневом каталоге.
3. Атрибут type указывает на тип передаваемых данных, который зависит от формата файла :
— в нашем случае image/svg+xml — указывается для формата SVG ;
— image/x-icon — указывается для формата ICO . Ранее наиболее распространенный формат для файлов-иконок сайтов.
— image/gif , image/jpeg , image/png и image/bmp — для форматов GIF , JPEG , PNG и BMP соответственно.
Осталось подождать около двух недель. И иконка для сайта — файл favicon.svg появится в результатах поиска.
Итак, эта статья была посвящена тому, как создать и добавить на сайт иконку — файл favicon в формате SVG? Надеюсь, у вас все получится, желаю удачи.
Источник
Favicon Generator. For real.
All browsers
All platforms
Your favorite technologies
Your favicon is not correct
Your master picture
Missing pictures
You have chosen to use a specific picture fot the iOS Web clip, but you haven’t uploaded any picture. Please upload a picture or choose another option.
You have chosen to use a specific picture fot the Windows 8 tile, but you haven’t uploaded any picture. Please upload a picture or choose another option.
Missing path
You have chosen to not place your files in the root of your web site. Please specify a path.
Why put the favicon pictures in the root directory
When generating a favicon with RealFaviconGenerator, the instructions ask you to place all files at the root of your web site. You may want to place them in a sub-directory, for example in http://mywebsite.com/icons/ , just to make things clearer. However, there are three drawbacks with this approach:
- Internet Explorer looks for favicon.ico at the root of the web site. Granted: this is because we ask you to not declare favicon.ico .
- iOS devices look for files such as apple-touch-icon-144×144.png at the root of the web site, as described by Apple. This issue can be mitigated by declaring the icons in the HTML code (this is necessary for Android anyway), but following Apple conventions is probably the best move.
- By default, Internet Explorer 11 looks for browserconfig.xml at the root of the web site.
- Several services, such as Yandex, look for favicon.ico in the root directory.
Favicon compression
RealFaviconGenerator can compress the generated pictures. You usually get a 50%-80% compression rate. Not bad! The compression works well on all tested platforms. Even better!
The compression is lossy, meaning you might notice differences between the original and compressed pictures. Yet the differences are (supposed to be) minimal:
| Uncompressed picture (36KB) | Compressed picture (14KB) |
|---|---|
You can see slight differences in the gradient part:
| No zoom | 4x zoom |
|---|---|
When you download the compressed pictures, make sure they match your standards.
Check your favicon
Check your existing favicon with our online tool and see what can be improved.
Why RealFaviconGenerator
No hard decision
With so many platforms and icons, it’s hard to know exactly what you should do. What are the dimensions of favicon.ico? How many Touch icons do I need? RealFaviconGenerator did the reseach and testing for you.
Done in 5 minutes
You spent hours on design, colors, graphics. How much time left for the favicon? Probably not much. But no worries, you only need a few minutes to tackle this task.
Compelling design, a platform at a time
Each platform comes with its own design requirements. You can’t just use the same picture everywhere. RealFaviconGenerator knows this and lets you craft your icons platform per platform.
Instant feedback
How will Android display my icon? How will iOS round my Touch icon? No more guesswork. RealFaviconGenerator instantly shows you how your icons will look like.
Источник
Как сделать Favicon для сайта онлайн
Favicon (от англ. Favorites icon — «значок для избранного») — значок сайта или конкретной страницы. Не важен для SEO, но позволяет выделиться в выдаче Яндекса, на вкладках открытых страниц и в закладках браузера пользователя.
Как пользоваться сервисом для создания favicon?
- Нажмите «Выбрать изображение с компьютера» и загрузите картинку в форматах jpg, jpeg, png или gif. Подберите квадратное изображение без мелких деталей.
- Нажмите «Создать Favicon»;
- Сервис покажет пример того, как будет выглядеть ваш favicon. Если результат вас устраивает, скачайте готовый файл. Вы получите файл favicon.ico для сайта, то есть файл с расширением *.ico, его и надо будет использовать в дальнейшем.
Как установить отдельные фавиконы для мобильных устройств
Для разной аудитории сайта нужна поддержка основных браузеров и платформ — Windows Firefox, iOS Safari, Internet Explorer, Android Chrome и других. Для мобильных устройств часто прописывают отдельные иконки с другими размерами. Для этого указывают тип устройства в rel, к примеру, «apple-touch-icon», и атрибут sizes с размером.
Достаточный пакет
Будет достаточно одного файла favicon.ico с размерами 48×48.
Этот обеспечит нормальный внешний вид фавиконок на разных платформах. В остальных случаях система масштабирует до нужного размера.
Как установить favicon на сайт
- Сохраните картинку в корневой каталог сайта с именем favicon.ico, чтобы получился адрес вида https://sitename.ru/favicon.ico. Это путь к изображению. Он понадобится, если вы захотите использовать разные фавиконы для разделов сайта, чтобы пользователи лучше ориентировались в разделах ресурса. Если вы используете один favicon для всего сайта, путь к нему указывать не нужно.
- Добавьте ссылку на размещенный файл в HTML-код главной:
Зачем делать favicon?
Никакой функции для SEO он не несет, но его использование позволяет повысить узнаваемость сайта, и, как следствие, показателя CTR.
Узнаваемость сайта
Иконки favicon помогают сделать вкладку с вашим сайтом узнаваемой, это важно, когда пользователь одновременно открывает несколько ресурсов. С заметным фавиконом ваш сайт не потеряется среди других открытых вкладок.
Информативность
Фавикон должен соответствовать цветовой гамме сайта и тематике компании. Вы можете использовать, например, логотип или первую букву названия или простое, но оригинальное графическое изображение, чтобы пользователь, увидев иконку вашего сайта, мог сразу определить, что на вкладке.
Запоминаемость бренда
Если использовать в качестве фавикона логотип или его узнаваемый фрагмент, пользователи сайта будут часто его видеть и быстрее запомнят.
Источник
Создание favicon.ico
С помощью этого сервиса Вы сможете легко преобразовать любое изображение формата jpg, gif, png в favicon.ico. Стандартный размер изображения для favicon 16×16 пикселей. В режиме Эксперт Вы можете сделать иконки размером: 16×16, 24×24, 32×32, 48×48, 96×96, 128×128 и объединить их в один файл. Данный генератор фавикон поможет Вам сгенерировать иконку Favicon для Вашего сайта из изображения любого размера.
На этой странице собраны примеры иконок сайтов:
А это иконки сайтов которые анализировались и строились за последнее время:
Что такое favicon?
Favicon (англ. Favorite Icon) — это небольшая иконка (изображение, картинка) в специальном формате, которая отображается в адресной строке браузера при просмотре сайта, вкладке браузера или в его закладках (“Избранном”).
favicon — это дополнительное украшение для Вашего сайта, Ваш мини логотип. Он также показывается при просмотре списка сайтов в поиске яндекса, гугла и выделяет Ваш сайт на фоне остальных.
Зачем нужен favicon для сайта?
favicon – товарный знак Вашего сайта. У многих компаний на сегодняшний день есть отличительный favicon значок, который выделяет их среди конкурентов. Чтобы иконка лучше запоминалась пользователями, компаниям следует отображать в ней свой логотип, который также должен быть одним из эллементов шапки сайта. Ещё одна положительная особенность использования favicon в том, что при просмотре большого количества сайтов в браузере, Вы не видите заголовка страниц полностью, а видите только иконку и вы сразу с легкостью можете определить ту вкладку, куда Вы хотели перейти.
Что лучше изобразить на фавикон?
- Иконка должна соответствовать тематике сайта.
- бренд, если у Вас сайт связан с этим брендом. При этом для разных страниц можно отображать разные бренды;
- Применяйте фавикон, на который хочется кликнуть, это повысит кликабельность при просмотре в поиске Яндекса, Гугла;
- Сделайте несколько дизайнов фавиконок для различных разделов Вашего сайта.
- Сделайте несколько дизайнов фавиконок для различных событий (напр. Нового Года, Дня Святого Валентина или Дня космонавтики, :).
Разместите полученный файл в корне вашего сайта, там где находится основной индексный файл(index.php). Для указания браузеру местонахождения иконки сайта(favicon) в секции заголовка страницы (head) вставьте следующую строку:
Как сделать анимированный favicon?
Формат ICO не поддерживает анимацию. Но современные браузеры позволяют использовать формат GIF для миниатюр. Возможно указать для современных браузеров один анимированный файл(favicon.gif), а для древних, типа Intertet Explorer, другой(favicon.ico). Для этого в секцию head внесите следующие две строчки:
Естественно предварительно нужно поместить оба файла в корневую папку сайта.
Как быть, если запрещен показ изображений в браузере?
Если сделать favicon c внедренным изображением в код старницы:
То иконка будет показываться в браузере даже тогда, когда картинки будут отключены. Как сделать внедренное изображение описано здесь.
Как получить favicon с сайта
Не все вебмастера располагают favicon.ico в корне сайта. Для получения адреса favicon используйте следующий скрипт:
Поисковые системы Google, Яндекс и favicon
Робот поисковых систем кешируют иконки сайтов. Закешированные иконки доступны по следующим запросам:
Кроме этого, Яндекс может сделать Вам «спрайт» из иконок разных сайтов:
Иконки для iPhone и iPad
Даже если Вы не указываете link-ссылку на картинку iphone все равно будет искать в корневой папке сайта файл с именем apple-touch-icon.png и если найдет, то Возьмет из него картинку, закруглит по углам и на нее будет наложен блик автоматически самоим устройством. Для избежания этого вместо apple-touch-icon.png следует написать apple-touch-icon-precomposed.png владельцы айфонов и точей, т.к. для них мы делаем красивую иконюшку размером 57×57 (можно кстати и больше, но это стандартный размер иконки на ланч-скрине), подключая ее так:
Правильно опубликовать и объявить иконки для старых и новых Retina iPad:
Как динамически менять favicon?
HTML5 и favicon
В HTML5 был добавлен атрибут sizes, позволяющий объявить несколько различных версии одной и той же иконки, и это могут быть PNG файлы:
Как объявить плитку для планшетов на Windows 8?
Объявление для Windows 8.0 выглядит как-то так:
Windows 8.1 и IE 11 ожидают несколько версий изображения, объявленных в browserconfig.xml. Например:
Можно не объявлять, если имя файла не менять:
Источник