├── README.md ├── assets ├── css │ ├── style.css │ └── style.scss ├── images │ ├── favicon-checker-demo.gif │ ├── favicon-favicon_checker.png │ ├── favicon-favicon_checker.svg │ ├── icon-favicon_checker.svg │ ├── thumb.jpg │ └── thumb.png └── js │ └── script.js └── index.html /README.md: -------------------------------------------------------------------------------- 1 | # Favicon Checker 2 | Compare your favicons on all major web browsers, including native dark and light modes. 3 | 4 | [colinkeany.com/favicon-checker](http://www.colinkeany.com/favicon-checker) 5 | 6 | ![](https://github.com/colinkeany/favicon-checker/blob/master/assets/images/favicon-checker-demo.gif?raw=true) 7 | -------------------------------------------------------------------------------- /assets/css/style.css: -------------------------------------------------------------------------------- 1 | @import url("https://fonts.googleapis.com/css2?family=Inter:wght@400;600&family=Red+Hat+Display:wght@400;700;900&display=swap"); 2 | html { 3 | height: 100%; } 4 | 5 | html, body { 6 | font-family: 'Inter', sans-serif !important; } 7 | 8 | .overlay .overlay-container { 9 | padding: 20px; 10 | width: 100%; 11 | max-width: 400px; 12 | position: absolute; 13 | left: 50%; 14 | margin-left: -200px; 15 | top: 110px; 16 | background-color: #fff; 17 | border-radius: 6px; 18 | box-shadow: 0 15px 45px rgba(0, 0, 0, 0.4); 19 | z-index: 998; 20 | transform: rotateX(35deg); 21 | transition: all 0.3s; 22 | opacity: 0; } 23 | .overlay .overlay-container.in { 24 | top: 80px; 25 | transform: rotateX(0); 26 | opacity: 1; } 27 | @media screen and (max-width: 768px) { 28 | .overlay .overlay-container { 29 | width: 330px; 30 | margin-left: -165px; } } 31 | .overlay .overlay-bg { 32 | z-index: 997; 33 | height: 100%; 34 | width: 100%; 35 | position: absolute; 36 | background-color: transparent; 37 | transition: all 0.3s; } 38 | .overlay .overlay-bg.in { 39 | background-color: rgba(0, 0, 0, 0.7); } 40 | 41 | .rhd { 42 | font-family: 'Red Hat Display', sans-serif; 43 | font-weight: 400; 44 | color: #000; } 45 | .rhd.bold { 46 | font-weight: 700; } 47 | .rhd.bolder { 48 | font-weight: 900; } 49 | 50 | .text-bold { 51 | font-weight: 600 !important; } 52 | 53 | .upload-favicon { 54 | background: #1957f7; 55 | border: 1px solid transparent; 56 | box-shadow: none; 57 | border-radius: 100px; 58 | color: #FFF; 59 | padding: 12px 20px; 60 | font-weight: 600; } 61 | .upload-favicon:hover, .upload-favicon:focus, .upload-favicon:active { 62 | background: #083fcc !important; 63 | border-color: transparent !important; 64 | box-shadow: none; } 65 | 66 | .nav-link:hover { 67 | background-color: #f6f7f8; 68 | border-radius: 100px; } 69 | 70 | .customURL { 71 | padding: 12px 20px; 72 | font-size: 14px; 73 | font-family: 'Inter', sans-serif; 74 | font-weight: 400; 75 | width: 400px; 76 | background: #FFFFFF; 77 | border: 1px solid #C7CBD1; 78 | box-shadow: 0 0 0 3px #F4F6F9; 79 | border-radius: 100px; } 80 | @media screen and (max-width: 768px) { 81 | .customURL { 82 | width: 300px; } } 83 | 84 | .browser p { 85 | color: #000; 86 | text-shadow: 1px 1px 0 rgba(255, 255, 255, 0.4); } 87 | 88 | .browser-dark p { 89 | color: #fff; 90 | text-shadow: 1px 1px 0 black; } 91 | 92 | .chrome-default { 93 | background-color: #FFF; } 94 | 95 | .chrome-hover { 96 | background-color: #f6f7f8; } 97 | 98 | .chrome-inactive { 99 | background-color: #e7eaed; } 100 | 101 | .chrome-default-dark { 102 | background-color: #36363a; } 103 | 104 | .chrome-hover-dark { 105 | background-color: #2e2e32; } 106 | 107 | .chrome-inactive-dark { 108 | background-color: #202123; } 109 | 110 | .safari-default { 111 | background-color: #d1d1d1; } 112 | 113 | .safari-hover { 114 | background-color: #bbbbbb; } 115 | 116 | .safari-inactive { 117 | background-color: #c3c3c2; } 118 | 119 | .safari-default-dark { 120 | background-color: #303133; } 121 | 122 | .safari-hover-dark { 123 | background-color: #282a2b; } 124 | 125 | .safari-inactive-dark { 126 | background-color: #1a1c1c; } 127 | 128 | .firefox-default { 129 | background-color: #f5f6f7; } 130 | 131 | .firefox-hover { 132 | background-color: #bcbfc4; } 133 | 134 | .firefox-inactive { 135 | background-color: #e0e2e4; } 136 | 137 | .firefox-default-light { 138 | background-color: #f6f7f8; } 139 | 140 | .firefox-hover-light { 141 | background-color: #cecfd1; } 142 | 143 | .firefox-inactive-light { 144 | background-color: #e2e4e6; } 145 | 146 | .firefox-default-dark { 147 | background-color: #323234; } 148 | 149 | .firefox-hover-dark { 150 | background-color: #252526; } 151 | 152 | .firefox-inactive-dark { 153 | background-color: #0d0d0d; } 154 | -------------------------------------------------------------------------------- /assets/css/style.scss: -------------------------------------------------------------------------------- 1 | @import url('https://fonts.googleapis.com/css2?family=Inter:wght@400;600&family=Red+Hat+Display:wght@400;700;900&display=swap'); 2 | 3 | html { 4 | height: 100%; 5 | } 6 | 7 | html, body { 8 | font-family: 'Inter', sans-serif !important; 9 | } 10 | 11 | .overlay { 12 | .overlay-container { 13 | padding: 20px; 14 | width: 100%; 15 | max-width: 400px; 16 | position: absolute; 17 | left: 50%; 18 | margin-left: -200px; 19 | top: 110px; 20 | background-color: #fff; 21 | border-radius: 6px; 22 | box-shadow: 0 15px 45px rgba(0,0,0,0.4); 23 | z-index: 998; 24 | transform: rotateX(35deg); 25 | transition: all 0.3s; 26 | opacity: 0; 27 | &.in { 28 | top: 80px; 29 | transform: rotateX(0); 30 | opacity: 1; 31 | } 32 | @media screen and (max-width: 768px) { 33 | width: 330px; 34 | margin-left: -165px; 35 | } 36 | } 37 | 38 | .overlay-bg { 39 | z-index: 997; 40 | height: 100%; 41 | width: 100%; 42 | position: absolute; 43 | background-color: transparent; 44 | transition: all 0.3s; 45 | &.in { 46 | background-color: rgba(0,0,0,0.7); 47 | } 48 | } 49 | } 50 | 51 | .rhd { 52 | font-family: 'Red Hat Display', sans-serif; 53 | font-weight: 400; 54 | color: #000; 55 | 56 | &.bold { 57 | font-weight: 700; 58 | } 59 | 60 | &.bolder { 61 | font-weight: 900; 62 | } 63 | } 64 | 65 | .text-bold { 66 | font-weight: 600 !important; 67 | } 68 | 69 | .upload-favicon { 70 | background: #1957f7; 71 | border: 1px solid transparent; 72 | box-shadow: none; 73 | border-radius: 100px; 74 | color: #FFF; 75 | padding: 12px 20px; 76 | font-weight: 600; 77 | &:hover, &:focus, &:active { 78 | background: #083fcc!important; 79 | border-color: transparent !important; 80 | box-shadow: none; 81 | } 82 | } 83 | 84 | .nav-link { 85 | &:hover { 86 | background-color: #f6f7f8; 87 | border-radius: 100px; 88 | } 89 | } 90 | 91 | .customURL { 92 | padding: 12px 20px; 93 | font-size: 14px; 94 | font-family: 'Inter', sans-serif; 95 | font-weight: 400; 96 | width: 400px; 97 | background: #FFFFFF; 98 | border: 1px solid #C7CBD1; 99 | box-shadow: 0 0 0 3px #F4F6F9; 100 | border-radius: 100px; 101 | @media screen and (max-width: 768px) { 102 | width: 300px; 103 | } 104 | } 105 | 106 | .browser { 107 | p { 108 | color: #000; 109 | text-shadow: 1px 1px 0 rgba(255,255,255,0.4); 110 | } 111 | } 112 | 113 | .browser-dark { 114 | p { 115 | color: #fff; 116 | text-shadow: 1px 1px 0 rgba(0,0,0,1); 117 | } 118 | } 119 | 120 | .chrome-default { 121 | background-color: #FFF; 122 | } 123 | 124 | .chrome-hover { 125 | background-color: #f6f7f8; 126 | } 127 | 128 | .chrome-inactive { 129 | background-color: #e7eaed; 130 | } 131 | 132 | .chrome-default-dark { 133 | background-color: #36363a; 134 | } 135 | 136 | .chrome-hover-dark { 137 | background-color: #2e2e32; 138 | } 139 | 140 | .chrome-inactive-dark { 141 | background-color: #202123; 142 | } 143 | 144 | .safari-default { 145 | background-color: #d1d1d1; 146 | } 147 | 148 | .safari-hover { 149 | background-color: #bbbbbb; 150 | } 151 | 152 | .safari-inactive { 153 | background-color: #c3c3c2; 154 | } 155 | 156 | .safari-default-dark { 157 | background-color: #303133; 158 | } 159 | 160 | .safari-hover-dark { 161 | background-color: #282a2b; 162 | } 163 | 164 | .safari-inactive-dark { 165 | background-color: #1a1c1c; 166 | } 167 | 168 | .firefox-default { 169 | background-color: #f5f6f7; 170 | } 171 | 172 | .firefox-hover { 173 | background-color: #bcbfc4; 174 | } 175 | 176 | .firefox-inactive { 177 | background-color: #e0e2e4; 178 | } 179 | 180 | .firefox-default-light { 181 | background-color: #f6f7f8; 182 | } 183 | 184 | .firefox-hover-light { 185 | background-color: #cecfd1; 186 | } 187 | 188 | .firefox-inactive-light { 189 | background-color: #e2e4e6; 190 | } 191 | 192 | .firefox-default-dark { 193 | background-color: #323234; 194 | } 195 | 196 | .firefox-hover-dark { 197 | background-color: #252526; 198 | } 199 | 200 | .firefox-inactive-dark { 201 | background-color: #0d0d0d; 202 | } 203 | 204 | -------------------------------------------------------------------------------- /assets/images/favicon-checker-demo.gif: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/colinkeany/favicon-checker/44b57035c8d4c5d8d9a3b22d3d4fd12cc7720255/assets/images/favicon-checker-demo.gif -------------------------------------------------------------------------------- /assets/images/favicon-favicon_checker.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/colinkeany/favicon-checker/44b57035c8d4c5d8d9a3b22d3d4fd12cc7720255/assets/images/favicon-favicon_checker.png -------------------------------------------------------------------------------- /assets/images/favicon-favicon_checker.svg: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | 5 | -------------------------------------------------------------------------------- /assets/images/icon-favicon_checker.svg: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | 5 | -------------------------------------------------------------------------------- /assets/images/thumb.jpg: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/colinkeany/favicon-checker/44b57035c8d4c5d8d9a3b22d3d4fd12cc7720255/assets/images/thumb.jpg -------------------------------------------------------------------------------- /assets/images/thumb.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/colinkeany/favicon-checker/44b57035c8d4c5d8d9a3b22d3d4fd12cc7720255/assets/images/thumb.png -------------------------------------------------------------------------------- /assets/js/script.js: -------------------------------------------------------------------------------- 1 | function readURL(input) { 2 | if (input.files && input.files[0]) { 3 | var reader = new FileReader(); 4 | 5 | reader.onload = function (e) { 6 | $('.favicon') 7 | .attr('src', e.target.result) 8 | .width(16) 9 | .height(16); 10 | }; 11 | 12 | reader.readAsDataURL(input.files[0]); 13 | } 14 | } 15 | 16 | $('document').ready(function() { 17 | $('.custom').click(function() { 18 | var customURL = $('.customURL').val(); 19 | var buildURL = 'https://www.google.com/s2/favicons?domain=' + customURL; 20 | $('.favicon') 21 | .attr('src', buildURL) 22 | .width(16) 23 | .height(16); 24 | }); 25 | $('.custom').click(function(){ 26 | if( $('.customURL').val().length === 0 ) { 27 | $('.favicon').attr('src', 'assets/images/google-favicon.svg'); 28 | } 29 | }); 30 | $(".customURL").keydown(function(e){ 31 | if(e.which === 13){ 32 | $(".custom").click(); 33 | } 34 | }); 35 | $('.about').on('click', function() { 36 | $('.overlay').show(); 37 | $('.overlay-bg').addClass('in'); 38 | $('.overlay-container').addClass('in'); 39 | }); 40 | $('.overlay-bg, .close-overlay').on('click', function() { 41 | $('.overlay').hide(); 42 | $('.overlay-bg').removeClass('in'); 43 | $('.overlay-container').removeClass('in'); 44 | }) 45 | }) 46 | -------------------------------------------------------------------------------- /index.html: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | 5 | 12 | Favicon Checker—See how your favicon hold up across popular browsers, including native dark and light modes. 13 | 14 | 15 | 16 | 17 | 18 | 19 | 20 | 21 | 22 | 23 | 24 | 25 | 26 | 27 | 28 | 29 | 30 | 31 | 32 | 33 | 34 | 35 | 37 | 38 | 39 | 40 | 41 | 42 | 53 |
54 |
55 |
56 |

Favicon Checker

57 |
58 |
59 | 67 | 68 | OR 69 | 70 | 71 |
72 | 83 |
84 |
85 |
86 |
87 |
88 |
89 |
90 |
91 |
92 | Your favicon 93 |
94 |

Chrome (Default)

95 |
96 |
97 |
98 |
99 |
100 | Your favicon 101 |
102 |

Chrome (Default / Hovered)

103 |
104 |
105 |
106 |
107 |
108 | Your favicon 109 |
110 |

Chrome (Default / Inactive)

111 |
112 |
113 |
114 |
115 |
116 | Your favicon 117 |
118 |

Safari (Default)

119 |
120 |
121 |
122 |
123 |
124 | Your favicon 125 |
126 |

Safari (Default / Hovered)

127 |
128 |
129 |
130 |
131 |
132 | Your favicon 133 |
134 |

Safari (Default / Inactive)

135 |
136 |
137 |
138 |
139 |
140 |
141 |
142 | Your favicon 143 |
144 |

Firefox (Default)

145 |
146 |
147 |
148 |
149 |
150 | Your favicon 151 |
152 |

Firefox (Default / Hovered)

153 |
154 |
155 |
156 |
157 |
158 | Your favicon 159 |
160 |

Firefox (Default / Inactive)

161 |
162 |
163 |
164 |
165 |
166 | Your favicon 167 |
168 |

Firefox (Light Mode)

169 |
170 |
171 |
172 |
173 |
174 | Your favicon 175 |
176 |

Firefox (Light Mode / Hovered)

177 |
178 |
179 |
180 |
181 |
182 | Your favicon 183 |
184 |

Firefox (Light Mode / Inactive)

185 |
186 |
187 |
188 |
189 |
190 |
191 |
192 | Your favicon 193 |
194 |

Chrome (Dark Mode)

195 |
196 |
197 |
198 |
199 |
200 | Your favicon 201 |
202 |

Chrome (Dark Mode / Hovered)

203 |
204 |
205 |
206 |
207 |
208 | Your favicon 209 |
210 |

Chrome (Dark Mode / Inactive)

211 |
212 |
213 |
214 |
215 |
216 | Your favicon 217 |
218 |

Safari (Dark Mode)

219 |
220 |
221 |
222 |
223 |
224 | Your favicon 225 |
226 |

Safari (Dark Mode / Hovered)

227 |
228 |
229 |
230 |
231 |
232 | Your favicon 233 |
234 |

Safari (Dark Mode / Inactive)

235 |
236 |
237 |
238 |
239 |
240 |
241 |
242 | Your favicon 243 |
244 |

Firefox (Dark Mode)

245 |
246 |
247 |
248 |
249 |
250 | Your favicon 251 |
252 |

Firefox (Dark Mode / Hovered)

253 |
254 |
255 |
256 |
257 |
258 | Your favicon 259 |
260 |

Firefox (Dark Mode / Inactive)

261 |
262 |
263 |
264 |
265 |
266 | 267 | 268 | --------------------------------------------------------------------------------