Фавикон для сайта как создать


Как создать favicon (фавикон) для сайта

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

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

Favicon для сайта – это “favorites icon”, изображение, которое является логотипом сайта. Первоначально служил для визуального выделения сайтов в закладках браузера. Но потом стал отображаться во вкладках браузера, в адресной строке и на странице поисковой выдачи рядом с url сайта. 

Очень долго основным форматом фавикона для сайта был ico. Он удобен тем, что в файл можно прописать сразу несколько размеров иконок с разной битностью. Сейчас более популярны форматы png и svg. Формат svg используется в Safari MacOS, а png - в остальных операционных системах и платформах. Фавикон бывает и в форматах jpeg и gif, однако мы не советуем использовать их, потому что такие фавиконы поддерживают не все браузеры. 

Проверяйте поддержку браузерами разных типов фавиконов с помощью сервиса caniuse.com. 


Самым перспективным форматом является svg. Это векторные фавиконы, которые мало весят, но хорошо отображаются. 


Размеры фавиконов 

Десктоп 


Андроид

Коэффициент плотности экранов            
0,75 1,5 
36х36  48х48  72х72  96х96  144х144  192х192 

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 пикселей. 


Другие варианты 

Google TV  Opera Coast 
96х96  228х228 

Как создать 

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

Realfavicongenerator.net – генерирует фавиконки разных размеров онлайн. Загружайте исходник размером не менее 260х260 пикселей, желательно квадратной формы. Затем выберите настройки для iOS, Android, Windows Phone, MacOS Safari. Дополнительно выберите степень сжатия. В результате получаете все типы иконок и код для вставки. 


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


Как установить 

Задайте правильное имя – favicon.ico или другой тип расширения. Однако помните, что браузеры прежних версий не смогут определить иконку, если она будет в другом формате. Перед загрузкой на сайт откройте свойства файла, убедитесь, что нужный формат есть не только в названии файла, но и в его типе. 

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

Положите файлы в корневую директорию сайта и проверьте корректность. Для этого введите в адресную строку “yoursite.com/favicon.ico” для файлов формата ico, для других форматов - соответствующее расширение файла. Браузер должен отобразить иконку. 

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

Десктоп (ico) - <link rel="icon" type="image/ico" href="favicon.ico">

Декстоп (png) - <link rel="icon" type="image/png" href="favicon.png">

Apple - <link rel="apple-touch-icon" href="apple-touch-favicon.png">

Safari - <link rel=”mask-icon” href=”icon.svg”>

Андроид -

Иконки в гаджетах Apple всегда закругляются по углам, чтобы этого избежать используйте apple-touch-icon-precomposed вместо apple-touch-icon. 

Проверьте ответ сервера. Фавикон индексирует специальный робот. Чтобы индексация прошла успешно, проверьте, что ссылка на фавикон не закрыта от индексации в файле robot.txt и отдает ответ сервера HTTP 200. 

Узнайте, виден ли фавикон. Проверьте через сервисы, подставив адрес своего сайта: 

Запомните 

  1. Самым распространенным форматом фавиконов является ico, но он устаревший. Лучше использовать формат png и svg. Проверяйте, какие форматы поддерживают браузеры с помощью сервиса caniuse.com. 

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

  3. Чтобы сделать favicon, воспользуйтесь специальным сервисами: realfavicongenerator.net, favicon.cc и другими. Генерируйте иконки online сразу для всех видов браузеров и мобильных платформ. 

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

  5. Проверьте корректность индексации. Ответ сервера должен быть HTTP 200. Посмотрите видимость фавикона в Яндексе и Google через сервисы поисковиков.

Материал подготовила Светлана Сирвида-Льорентэ.

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

Добро пожаловать в DesignEvo!

Давайте персонализируем ваше творение

Шаг 1

Шаг 2

Отделка

Назад

1. К какой организации вы принадлежите?

2. Какова ваша роль?

Предприятие

Некоммерческая организация

Магазин

Правительство

Самостоятельная работа

Сообщество

Школа / Университет

Другое

HR / Администратор

ИТ / Инженерия

Дизайнер

Маркетолог / PR

Продажа

Операции / Финансы

Аналитик

Другое

HR / Администратор

ИТ / Инженерия

Дизайнер

Маркетолог / PR

трейнер

Операции / Финансы

Аналитик

Другое

Владелец

Менеджер

Операции / Финансы

Служба поддержки клиентов

Другое

HR / Администратор

Операции / Финансы

Аналитик

трейнер

PR

Менеджер

Другое

.

Как создать фавикон: полное руководство


Дизайн Favicon важнее, чем вы думаете. Размер здесь действительно имеет значение, так как хорошо продуманный логотип должен быть узнаваемым в любом размере. Его нужно масштабировать от огромных экранов до значка размером 16 x 16 пикселей, известного как значок. Отличный пример дизайна фавикона - логотип Google. Он отлично подходит для больших экранов с большой буквой G и характерным четырехцветным текстом. И он все еще так же узнаваем, когда его уменьшили до крошечной четырехцветной буквы G, видимой в адресной строке веб-браузера.

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

В этой статье мы рассмотрим процесс создания идеального фавикона. Мы включим конкретные советы по созданию значка для устройств Apple, Android, Chrome, Opera и Safari. Плюс удобное руководство по разным размерам и форматам значков, которые вам необходимо знать.Используйте быстрые ссылки (справа), чтобы перейти прямо к нужному разделу.

Дизайн фавикона: быстрые ссылки

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

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

Правила дизайна фавикона

01. Сделайте его узнаваемым

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

02. Используйте свой логотип

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

03. Держитесь подальше

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

04. Создайте две версии

Разные фоны хорошо подходят для разных контекстов (Изображение предоставлено Майклом Фларупом / Применить пиксели)

Когда в Internet Explorer 5 впервые появились значки, они появлялись в строке URL и в списке закладок.Сегодня значки значков отображаются во многих других контекстах, включая списки закладок, контекстные меню и даже домашние экраны мобильных устройств и телевизоров. Это затрудняет прогнозирование того, как ваш значок будет отображаться для конечного пользователя.

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

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

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

Шпаргалка по размеру фавикона

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

Ранее значки должны были предоставляться в формате ICO.Сегодня можно предоставлять файлы в формате PNG (за исключением значка закрепленной вкладки Safari, который должен быть представлен как SVG).

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

Это наиболее распространенные размеры значков (Изображение предоставлено: emergeinteractive)

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

Фавиконы настольного браузера

Как создать фавикон настольного браузера

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

Иконки в классическом стиле, отображаемые на панели закладок и в строке URL в Google Chrome (Изображение предоставлено Майклом Фларупом / Apply Pixels)

Вам необходимо предоставить этот тип значка трех размеров, все в формате PNG с прозрачный фон .

Apple

Как создавать значки Apple Touch

Apple iOS использует значки Apple Touch для представления веб-сайтов, которые были сохранены на главном экране iOS в виде закладок.Это означает, что значок Apple Touch будет округлен до прямоугольной маски значков приложений iOS.

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

Этот значок будет отображаться на фоне рабочего стола пользователя (Изображение предоставлено Майклом Фларупом / Apply Pixels).

Иконки Apple должны быть представлены в формате PNG. .Вы можете обойтись без Apple Touch Icon 180x180 , который автоматически масштабируется для различных размеров iPhone и iPad. В большинстве случаев это сработает.

Если нет, вы можете предоставить дополнительные размеры для различных устройств Apple:

  • 60x60
  • 76x76
  • 120x120
  • 152x152
  • 180x180
        

Android, Chrome и Opera

Как создать значок для Android, Chrome и Opera

Android, Chrome и Opera используют android-chrome-192x192.png и android-chrome- 512x512.png , который рекомендует Google

С момента появления адаптивных значков в Android, веб-сайты, добавленные на домашний экран Android, будут маскировать дизайн 192x192, поэтому значок принимает форму в соответствии с предпочтительным стилем маскирования пользователя.Это может быть прямоугольник, эллипс, прямоугольник, прямоугольник с закругленными углами или форма капли.

Значки здесь будут замаскированы в разные формы в соответствии с предпочтениями пользователя (Изображение предоставлено Майклом Фларупом / Применить пиксели)

Вам нужно создать значок PNG с сплошным фоном , при 192x192 и 512x512 .

Реализуйте эти значки, добавив на свой сайт файл manifest.json и сделав ссылку на него в тегах:

    

Вот код для файла manifest.json :

  {" name ":" "," short_name ":" "," icons ": [{" src ":" / android -хром- 192x192.png "," sizes ":" 192x192 "," type ":" image / png "}, {" src ":" / android- chrome-512x512.png "," sizes ":" 512x512 "," type ":" image / png "}]," theme_color ": "#ffffff", "background_color": "#ffffff", "display": "standalone"}  

Safari

Как создать значок для закрепленной вкладки Safari

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

В отличие от всех других значков, этот значок создается из изображения SVG (Изображение предоставлено Майклом Фларупом / Применить пиксели)

Этот значок должен быть 100% черным файлом SVG с прозрачным фоном . SVG может быть только одним слоем, и safari требует, чтобы атрибут viewBox SVG был установлен на « 0 0 16 16» .

    

Другие типы значков

Существуют некоторые размеры и форматы значков, которые не были включены в эту статью, например, Google TV, Интернет-магазин Chrome и значки Apple Touch до iOS 7. Почему? Потому что они устарели или потому что они редко актуальны для среднего веб-разработчика.

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

Подробнее:

.

html - Добавить значок на сайт

Переполнение стека
  1. Около
  2. Товары
  3. Для команд
  1. Переполнение стека Общественные вопросы и ответы
  2. Переполнение стека для команд Где разработчики и технологи делятся частными знаниями с коллегами
  3. Вакансии Программирование и связанные с ним технические возможности карьерного роста
  4. Талант Нанимайте технических специалистов и создавайте свой бренд работодателя
  5. Рекламная
.

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

Даниэль

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

1) Общие правила

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

2) Использование онлайн-генераторов.
Онлайн генератор Логастер - очень удобный сервис. Функционал сайта прост и интуитивно понятен, нет необходимости иметь какие-либо навыки работы с графическими редакторами. Перед созданием фавикона вам необходимо создать логотип. Но этот дополнительный шаг оправдан тем, что вы получаете не только возможность выбирать из множества изображений, сгенерированных службой, но также получаете фавикон в том же стиле, что и логотип.
Когда элементы созданы, вы можете легко загрузить файлы из своей учетной записи в Logaster и загрузить их на свой сайт.

3) Использование Photoshop (пропустите этот пункт, если вы не используете Photoshop)

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

После установки подключаемого модуля вы должны создать холст размером 64 x 64 пикселя и начать с ним играть. После того, как вы закончите разработку значка, вам нужно будет изменить размер изображения.Перейдите в меню «Размер изображения» и нажмите «Изменить размер изображения». Этот процесс гарантирует, что изображение не будет размытым при его уменьшении. Наконец, просто сохраните изображение 16 x 16 как «favicon.ico» Â.

4) Использование MS Paint и веб-инструментов

Favicons - это очень простые значки изображений, а это означает, что даже Microsoft Paint должно быть достаточно, чтобы создать красивый. Самый простой способ - создать изображение JPEG размером 32 x 32 пикселя с помощью Paint, а затем использовать онлайн-сервис «Favicon from Pics» Â для преобразования изображения JPEG в значок.ico файл.

5) Загрузка файла favicon.ico

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

6) Смена жатки

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

Обратите внимание, что этот код будет работать, только если favicon.ico находится в корневом каталоге.

7) Тестирование

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

Просмотрите все статьи в категории "Дизайн блога"

31 Ответы на «Как создать фавикон»

  • Treathyl FOX

    Совершенно фантастическое НАПРАВЛЕНИЕ, Даниэль.Как всегда, следуя твоему совету, я никогда не спускаюсь с обрыва и не остаюсь в подвешенном состоянии. Теперь у меня есть значок на всех моих сайтах, кроме одного. Но это не твоя вина. Спасибо, сладкий пирог!

  • Апрель Брасуэлл

    Спасибо за то, что сделали "Как сделать фавикон" таким простым. Я работаю над новым сайтом.Похоже на интересный проект. Опять же, мне нравится заниматься творческими проектами.

    Апрель Брасуэлл

  • Penny Stocks для покупки

    Я когда-нибудь захочу разместить значок на своем сайте. Думаю, вы показали, как это сделать, спасибо. =)

  • Зафар Маджид

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

    Спасибо, что объяснили, как это сделать.

  • Daily Good Tips

    Favicon - это наша личность. Может нормально работать в моем браузере Opera

  • Fasil

    Самый простой и легкий способ создать Favicon…

  • Индийские фондовые подсказки

    Я попробовал фавикон и успешно установил его на Indian-Share-Tips.com; но обнаружил, что то же самое было видно в firefox и сохранялось при маркировке книг. Однако значок отображается в Opera, но не отображается при пометке книг. Наконец, значок вообще не отображается в Internet Explorer и googl chrome. Пожалуйста помоги. привет

  • JobsNgr

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

  • Кэй

    СПАСИБО! У меня есть плагин, который отправляет мне все мои 404-е. Это полезный инструмент, но меня СЕРЬЕЗНО раздражают все Favicon 404. После долгих исследований я наконец понял, что мне нужно добавить еще один, и пошел искать помощи.Среди всех результатов поиска Google я обнаружил ваш сайт. Оформив подписку на некоторое время, я был уверен, что могу доверять вашему совету, и ЭТО РАБОТАЕТ. Ну, пикс не появляется, но это, вероятно, с моей стороны. Но есть пустой квадрат и НЕТ БОЛЬШЕ 404 для отсутствующих значков Favicons - YAYYYY! Теперь я буду работать над тем, чтобы получить более качественный пиксель, который действительно будет отображаться, просто потому, что он симпатичный, но моя основная проблема успешно решена. Спасибо за эту статью и интересные письма 🙂 🙂 🙂

  • Bang Kritikus

    Ух ты, отличная статья.Спасибо .

  • Аналитик

    Как создать корневой файл. С уважением http://www.indian-share-tips.com

  • Дэнни

    Я использую SM Favicon Generator.Этот работает отлично и быстро.

  • Клайди Хена

    @ Vj: Это очень легко сделать в Blogger. Я использую blogger, и я использую значок. Посетите мой сайт, чтобы увидеть это.

    @ Рекс Оуэнс: Internet Explorer не поддерживает значки. поэтому.

  • счет

    У меня такая же проблема с KEVin
    , просто работает для корневого URL
    http: // www.freesoftwarebase.com

    Для других страниц я использую постоянные ссылки, они не работают с IE7
    , но работают с Firefox 2.0
    Например:

  • Кевин
  • Рекс Оуэнс

    Я могу заставить свой значок работать в Firefox, но не могу заставить его работать в Internet Explorer.Может ли кто-нибудь помочь мне с этой проблемой?

  • Adam Grow

    спасибо за информацию.
    круто….

  • Раманатан

    Спасибо, дружище.Я использовал это.

  • Даниил

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

    Что касается бесплатной платформы WordPress, можете ли вы получить доступ к заголовку.php, если перейти в раздел «Презентация», а затем «Редактор тем»?

  • Мадур Капур

    Отличная статья, приятель…

  • VJ

    Отлично! Я сделал это для одного из своих сайтов, хостинг для которого у меня есть, но как это сделать в wordpress? блогспот? Возможно?

Комментарии закрыты.

.

Смотрите также

Поделиться в соц. сетях

Опубликовать в Facebook
Опубликовать в Одноклассники
Вы можете оставить комментарий, или ссылку на Ваш сайт.

Оставить комментарий