Как я могу создать фавикон для своего сайта?
Как я могу создать фавикон для своего сайта?
Ответы:
В поисках значков я обнаружил, что мне нужно более 10 видов файлов для работы во всех браузерах и устройствах :(
Я разозлился и создал свой собственный генератор значков, который создает все эти файлы и правильный заголовок HTML для каждого из них: faviconit.com
Надеюсь, тебе понравится.
Если у вас уже есть изображение логотипа, которое вы хотите преобразовать в значок, вы можете преобразовать его с помощью http://www.favicomatic.com/ . Он создает четкие значки, и мне не пришлось редактировать их после создания. Он будет генерировать значки размером 16x16 и 32x32 и цитировать их: «Каждый чертов размер, сэр!». Сайт также поддерживает / сохраняет прозрачность, присутствующую в некоторых png. Кроме того, их сайт выглядит круто и им легко пользоваться.
Например, вот логотип stackoverflow:
Вот некоторые из созданных значков:
Они также генерируют необходимый html:
<link rel="apple-touch-icon-precomposed" sizes="57x57" href="apple-touch-icon-57x57.png" />
<link rel="apple-touch-icon-precomposed" sizes="114x114" href="apple-touch-icon-114x114.png" />
<link rel="apple-touch-icon-precomposed" sizes="72x72" href="apple-touch-icon-72x72.png" />
<link rel="apple-touch-icon-precomposed" sizes="144x144" href="apple-touch-icon-144x144.png" />
<link rel="apple-touch-icon-precomposed" sizes="60x60" href="apple-touch-icon-60x60.png" />
<link rel="apple-touch-icon-precomposed" sizes="120x120" href="apple-touch-icon-120x120.png" />
<link rel="apple-touch-icon-precomposed" sizes="76x76" href="apple-touch-icon-76x76.png" />
<link rel="apple-touch-icon-precomposed" sizes="152x152" href="apple-touch-icon-152x152.png" />
<link rel="icon" type="image/png" href="favicon-196x196.png" sizes="196x196" />
<link rel="icon" type="image/png" href="favicon-96x96.png" sizes="96x96" />
<link rel="icon" type="image/png" href="favicon-32x32.png" sizes="32x32" />
<link rel="icon" type="image/png" href="favicon-16x16.png" sizes="16x16" />
<link rel="icon" type="image/png" href="favicon-128.png" sizes="128x128" />
<meta name="application-name" content=" "/>
<meta name="msapplication-TileColor" content="#FFFFFF" />
<meta name="msapplication-TileImage" content="mstile-144x144.png" />
<meta name="msapplication-square70x70logo" content="mstile-70x70.png" />
<meta name="msapplication-square150x150logo" content="mstile-150x150.png" />
<meta name="msapplication-wide310x150logo" content="mstile-310x150.png" />
<meta name="msapplication-square310x310logo" content="mstile-310x310.png" />
Я посмотрел на первые 20 или около того результатов Google, и они оказались, безусловно, лучшими.
GIMP - хорошая программа для этого. Просто сохраните изображение как PNG, затем добавьте
<link rel="SHORTCUT ICON" HREF="/favicon.png">
в <HEAD>
разделе вашей страницы.
Вы создаете файл значка размером 16x16, 32x32 или 64x64. Назовите его favicon.ico и поместите в корень общей папки вашего веб-сайта.
Существуют веб-сайты, которые конвертируют другие графические форматы в .ico за вас. т.е. http://tools.dynamicdrive.com/favicon/
<link rel="shortcut icon" href="link/to/fav.ico" />
в <head>
блок своих страниц.
Один из лучших онлайн-инструментов favicon - FaviconGenerator.com . Быстрый, современный дизайн, без лишних хлопот.
Если вы хотите создавать файлы .ico, вы также можете использовать GIMP для создания значков. Современные браузеры могут использовать обычные файлы изображений, но изначально я думаю, что это были просто файлы .ico. Это редактор изображений с открытым исходным кодом, похожий на Photoshop. Создайте и отредактируйте изображение нужного размера (скажем, 32 x 32), сведите к одному слою (если вы не хотите, чтобы в одном файле было несколько значков) и сохраните как .ico. Он отформатирует его правильно, а затем используйте Стефано, <link rel="SHORTCUT ICON" HREF="/favicon.ico">
чтобы использовать его на своей веб-странице.
Я использую программу Paint.net с открытым исходным кодом вместе с плагином Icon .
Затем вы можете создать и сохранить изображение в формате .ico со всеми различными размерами, встроенными в файл .ico.
При создании значка необходимо учитывать следующие факторы:
favicon.ico
картинку. В настоящее время вы хотите поддерживать iOS (и iOS Safari) и Android (и Android Chrome). Возможно, Windows 10 (и Edge), а также новая сенсорная панель Mac Book Pro (macOS Safari). Вы больше не можете просто использовать одно изображение, подходящее для всех.Как обычно, вы можете создать все эти активы вручную. Если у вас нет очень, очень конкретных потребностей и бюджета, это определенно не выход.
Правильный способ для большинства людей - использовать генератор значков, который позволяет вам определять внешний вид всех значков и заботится обо всех деталях. Единственный, который делает это, - Real Favicon Generator . Полное раскрытие: я являюсь автором этого сайта.
А если вы используете asp.net, попробуйте добавить значок на свою страницу следующим образом:
<link runat="server" rel="shortcut icon" href="~/favicon.ico" type="image/x-icon" />
<link runat="server" rel="icon" href="~/favicon.ico" type="image/ico" />
но вы можете найти дополнительную информацию здесь: http://doctype.com/